@plumile/ui 0.1.56 → 0.1.57

package/lib/esm/components/charts/BillingUsageLineChart.js

@@ -1,177 +1,144 @@
-import { jsx as s, jsxs as p } from "react/jsx-runtime";
-import { ResponsiveLine as T } from "@nivo/line";
-import { chartContainer as v, tooltip as L, tooltipDate as N, tooltipRow as w, tooltipRowLabel as B, tooltipSwatch as D } from "./billingUsageLineChart.css.js";
-import { vars as i } from "../../theme/themeContract.js";
-const h = 6, O = new Intl.NumberFormat("en-US", {
-  notation: "compact",
-  maximumFractionDigits: 1
+import { chartContainer as e, tooltip as t, tooltipDate as n, tooltipRow as r, tooltipRowLabel as i, tooltipSwatch as a } from "./billingUsageLineChart.css.js";
+import { vars as o } from "../../theme/themeContract.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ResponsiveLine as l } from "@nivo/line";
+//#region src/components/charts/BillingUsageLineChart.tsx
+var u = 6, d = new Intl.NumberFormat("en-US", {
+	notation: "compact",
+	maximumFractionDigits: 1
 });
-function z(l) {
-  const r = l[0];
-  if (r == null || r.data.length <= h)
-    return r == null ? [] : r.data.map((n) => n.x);
-  const d = Math.ceil(r.data.length / h), a = r.data.filter((n, m) => m % d === 0).map((n) => n.x), o = r.data.at(-1);
-  return o != null && a.at(-1) !== o.x && a.push(o.x), a;
+function f(e) {
+	let t = e[0];
+	if (t == null || t.data.length <= u) return t == null ? [] : t.data.map((e) => e.x);
+	let n = Math.ceil(t.data.length / u), r = t.data.filter((e, t) => t % n === 0).map((e) => e.x), i = t.data.at(-1);
+	return i != null && r.at(-1) !== i.x && r.push(i.x), r;
 }
-function y(l) {
-  return (/* @__PURE__ */ new Date(`${l}T00:00:00Z`)).toLocaleDateString(void 0, {
-    month: "short",
-    day: "2-digit"
-  });
+function p(e) {
+	return (/* @__PURE__ */ new Date(`${e}T00:00:00Z`)).toLocaleDateString(void 0, {
+		month: "short",
+		day: "2-digit"
+	});
 }
-const P = (l) => {
-  const {
-    ariaLabel: r,
-    categoryColorById: d,
-    categoryLabel: a,
-    categoryOrder: o,
-    formatValue: n,
-    series: m
-  } = l, x = z(m), b = o, f = (t) => b.includes(t), S = [
-    {
-      anchor: "bottom",
-      direction: "row",
-      translateY: 56,
-      itemWidth: 90,
-      itemHeight: 16,
-      itemsSpacing: 8,
-      symbolSize: 10,
-      symbolShape: "circle",
-      itemTextColor: i.colors.textSecondary,
-      data: o.map((t) => ({
-        id: t,
-        label: a(t),
-        color: d[t]
-      }))
-    }
-  ];
-  return /* @__PURE__ */ s("div", { className: v, children: /* @__PURE__ */ s(
-    T,
-    {
-      data: m,
-      margin: { top: 14, right: 16, bottom: 74, left: 52 },
-      colors: (t) => typeof t.id != "string" || !f(t.id) ? i.colors.primary : d[t.id],
-      xScale: { type: "point" },
-      yScale: { type: "linear", min: 0, max: "auto" },
-      curve: "monotoneX",
-      lineWidth: 2.5,
-      pointSize: 4,
-      pointBorderWidth: 2,
-      pointBorderColor: { from: "seriesColor", modifiers: [["darker", 0.2]] },
-      enableArea: !0,
-      areaOpacity: 0.1,
-      enableGridX: !1,
-      enableGridY: !0,
-      axisTop: null,
-      axisRight: null,
-      axisBottom: {
-        tickValues: x,
-        format: (t) => y(String(t)),
-        tickSize: 0,
-        tickPadding: 10
-      },
-      axisLeft: {
-        tickSize: 0,
-        tickPadding: 8,
-        tickValues: 4,
-        format: (t) => O.format(Number(t))
-      },
-      enableSlices: "x",
-      sliceTooltip: ({
-        slice: t
-      }) => {
-        const g = String(t.id), k = o[0] ?? null, I = [...t.points].map((e) => {
-          let u = 0;
-          typeof e.data.y == "number" && (u = e.data.y);
-          let c = k;
-          return typeof e.seriesId == "string" && f(e.seriesId) && (c = e.seriesId), c == null ? null : {
-            seriesId: c,
-            data: { y: u },
-            color: e.seriesColor
-          };
-        }).filter((e) => e != null).sort((e, u) => {
-          const c = o.indexOf(e.seriesId), C = o.indexOf(u.seriesId);
-          return c - C;
-        });
-        return /* @__PURE__ */ p("div", { className: L, children: [
-          /* @__PURE__ */ s("p", { className: N, children: y(g) }),
-          I.map((e) => /* @__PURE__ */ p(
-            "div",
-            {
-              className: w,
-              children: [
-                /* @__PURE__ */ p("span", { className: B, children: [
-                  /* @__PURE__ */ s(
-                    "span",
-                    {
-                      className: D,
-                      style: { backgroundColor: e.color },
-                      "aria-hidden": !0
-                    }
-                  ),
-                  /* @__PURE__ */ s("span", { children: a(e.seriesId) })
-                ] }),
-                /* @__PURE__ */ s("strong", { children: n(e.data.y) })
-              ]
-            },
-            `${g}-${e.seriesId}`
-          ))
-        ] });
-      },
-      legends: S,
-      useMesh: !0,
-      ariaLabel: r,
-      theme: {
-        text: {
-          fill: i.colors.textSecondary,
-          fontSize: 12
-        },
-        axis: {
-          domain: {
-            line: {
-              stroke: i.colors.borderLight
-            }
-          },
-          ticks: {
-            line: {
-              stroke: "transparent"
-            }
-          },
-          legend: {
-            text: {
-              fill: i.colors.textSecondary
-            }
-          }
-        },
-        grid: {
-          line: {
-            stroke: i.colors.borderLight
-          }
-        },
-        crosshair: {
-          line: {
-            stroke: i.colors.primary,
-            strokeWidth: 1,
-            strokeOpacity: 0.35
-          }
-        },
-        tooltip: {
-          container: {
-            background: "transparent",
-            boxShadow: "none",
-            padding: 0
-          }
-        },
-        legends: {
-          text: {
-            fill: i.colors.textSecondary
-          }
-        }
-      }
-    }
-  ) });
+var m = (u) => {
+	let { ariaLabel: m, categoryColorById: h, categoryLabel: g, categoryOrder: _, formatValue: v, series: y } = u, b = f(y), x = _, S = (e) => x.includes(e), C = [{
+		anchor: "bottom",
+		direction: "row",
+		translateY: 56,
+		itemWidth: 90,
+		itemHeight: 16,
+		itemsSpacing: 8,
+		symbolSize: 10,
+		symbolShape: "circle",
+		itemTextColor: o.colors.textSecondary,
+		data: _.map((e) => ({
+			id: e,
+			label: g(e),
+			color: h[e]
+		}))
+	}];
+	return /* @__PURE__ */ s("div", {
+		className: e,
+		children: /* @__PURE__ */ s(l, {
+			data: y,
+			margin: {
+				top: 14,
+				right: 16,
+				bottom: 74,
+				left: 52
+			},
+			colors: (e) => typeof e.id != "string" || !S(e.id) ? o.colors.primary : h[e.id],
+			xScale: { type: "point" },
+			yScale: {
+				type: "linear",
+				min: 0,
+				max: "auto"
+			},
+			curve: "monotoneX",
+			lineWidth: 2.5,
+			pointSize: 4,
+			pointBorderWidth: 2,
+			pointBorderColor: {
+				from: "seriesColor",
+				modifiers: [["darker", .2]]
+			},
+			enableArea: !0,
+			areaOpacity: .1,
+			enableGridX: !1,
+			enableGridY: !0,
+			axisTop: null,
+			axisRight: null,
+			axisBottom: {
+				tickValues: b,
+				format: (e) => p(String(e)),
+				tickSize: 0,
+				tickPadding: 10
+			},
+			axisLeft: {
+				tickSize: 0,
+				tickPadding: 8,
+				tickValues: 4,
+				format: (e) => d.format(Number(e))
+			},
+			enableSlices: "x",
+			sliceTooltip: ({ slice: e }) => {
+				let o = String(e.id), l = _[0] ?? null, u = [...e.points].map((e) => {
+					let t = 0;
+					typeof e.data.y == "number" && (t = e.data.y);
+					let n = l;
+					return typeof e.seriesId == "string" && S(e.seriesId) && (n = e.seriesId), n == null ? null : {
+						seriesId: n,
+						data: { y: t },
+						color: e.seriesColor
+					};
+				}).filter((e) => e != null).sort((e, t) => _.indexOf(e.seriesId) - _.indexOf(t.seriesId));
+				return /* @__PURE__ */ c("div", {
+					className: t,
+					children: [/* @__PURE__ */ s("p", {
+						className: n,
+						children: p(o)
+					}), u.map((e) => /* @__PURE__ */ c("div", {
+						className: r,
+						children: [/* @__PURE__ */ c("span", {
+							className: i,
+							children: [/* @__PURE__ */ s("span", {
+								className: a,
+								style: { backgroundColor: e.color },
+								"aria-hidden": !0
+							}), /* @__PURE__ */ s("span", { children: g(e.seriesId) })]
+						}), /* @__PURE__ */ s("strong", { children: v(e.data.y) })]
+					}, `${o}-${e.seriesId}`))]
+				});
+			},
+			legends: C,
+			useMesh: !0,
+			ariaLabel: m,
+			theme: {
+				text: {
+					fill: o.colors.textSecondary,
+					fontSize: 12
+				},
+				axis: {
+					domain: { line: { stroke: o.colors.borderLight } },
+					ticks: { line: { stroke: "transparent" } },
+					legend: { text: { fill: o.colors.textSecondary } }
+				},
+				grid: { line: { stroke: o.colors.borderLight } },
+				crosshair: { line: {
+					stroke: o.colors.primary,
+					strokeWidth: 1,
+					strokeOpacity: .35
+				} },
+				tooltip: { container: {
+					background: "transparent",
+					boxShadow: "none",
+					padding: 0
+				} },
+				legends: { text: { fill: o.colors.textSecondary } }
+			}
+		})
+	});
 };
-export {
-  P as BillingUsageLineChart
-};
-//# sourceMappingURL=BillingUsageLineChart.js.map
+//#endregion
+export { m as BillingUsageLineChart };
+
+//# sourceMappingURL=BillingUsageLineChart.js.map

package/lib/esm/components/charts/BillingUsageLineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BillingUsageLineChart.js","sources":["../../../../src/components/charts/BillingUsageLineChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './billingUsageLineChart.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type BillingUsageLineChartPoint = {\n  x: string;\n  y: number;\n};\n\nexport type BillingUsageLineChartSerie<Category extends string> = {\n  id: Category;\n  data: readonly BillingUsageLineChartPoint[];\n};\n\ntype SlicePointPayload<Category extends string> = {\n  seriesId: Category;\n  data: {\n    y: number;\n  };\n  color: string;\n};\n\nexport type BillingUsageLineChartProps<Category extends string> = {\n  series: readonly BillingUsageLineChartSerie<Category>[];\n  categoryOrder: readonly Category[];\n  categoryColorById: Readonly<Record<Category, string>>;\n  categoryLabel: (category: Category) => string;\n  formatValue: (value: number) => string;\n  ariaLabel: string;\n};\n\nconst MAX_X_TICKS = 6;\n\nconst compactNumberFormatter = new Intl.NumberFormat('en-US', {\n  notation: 'compact',\n  maximumFractionDigits: 1,\n});\n\n/**\n * Limits the number of visible day ticks while always keeping the last point.\n */\nfunction getVisibleDayTicks<Category extends string>(\n  series: readonly BillingUsageLineChartSerie<Category>[],\n): readonly string[] {\n  const firstSerie = series[0];\n  if (firstSerie == null || firstSerie.data.length <= MAX_X_TICKS) {\n    if (firstSerie == null) {\n      return [];\n    }\n\n    return firstSerie.data.map((point) => {\n      return point.x;\n    });\n  }\n\n  const step = Math.ceil(firstSerie.data.length / MAX_X_TICKS);\n  const visibleTicks = firstSerie.data\n    .filter((_, index) => {\n      return index % step === 0;\n    })\n    .map((point) => {\n      return point.x;\n    });\n\n  const lastPoint = firstSerie.data.at(-1);\n  if (lastPoint != null && visibleTicks.at(-1) !== lastPoint.x) {\n    visibleTicks.push(lastPoint.x);\n  }\n\n  return visibleTicks;\n}\n\n/**\n * Formats a `YYYY-MM-DD` key into a short month/day label for the x-axis.\n */\nfunction formatDayTick(dayKey: string): string {\n  const parsed = new Date(`${dayKey}T00:00:00Z`);\n  return parsed.toLocaleDateString(undefined, {\n    month: 'short',\n    day: '2-digit',\n  });\n}\n\nexport const BillingUsageLineChart = <Category extends string>(\n  props: BillingUsageLineChartProps<Category>,\n): JSX.Element => {\n  const {\n    ariaLabel,\n    categoryColorById,\n    categoryLabel,\n    categoryOrder,\n    formatValue,\n    series,\n  } = props;\n\n  const visibleTicks = getVisibleDayTicks(series);\n  const categoryOrderString = categoryOrder as readonly string[];\n  const isCategory = (value: string): value is Category => {\n    return categoryOrderString.includes(value);\n  };\n\n  const legends = [\n    {\n      anchor: 'bottom' as const,\n      direction: 'row' as const,\n      translateY: 56,\n      itemWidth: 90,\n      itemHeight: 16,\n      itemsSpacing: 8,\n      symbolSize: 10,\n      symbolShape: 'circle' as const,\n      itemTextColor: vars.colors.textSecondary,\n      data: categoryOrder.map((category) => {\n        return {\n          id: category,\n          label: categoryLabel(category),\n          color: categoryColorById[category],\n        };\n      }),\n    },\n  ];\n\n  const colorById = (serie: { id: string | number }): string => {\n    if (typeof serie.id !== 'string' || !isCategory(serie.id)) {\n      return vars.colors.primary;\n    }\n\n    return categoryColorById[serie.id];\n  };\n\n  const sliceTooltip = ({\n    slice,\n  }: SliceTooltipProps<BillingUsageLineChartSerie<Category>>): JSX.Element => {\n    const dayKey = String(slice.id);\n    const fallbackCategory = categoryOrder[0] ?? null;\n    const points = [...slice.points]\n      .map((point): SlicePointPayload<Category> | null => {\n        let credits = 0;\n        if (typeof point.data.y === 'number') {\n          credits = point.data.y;\n        }\n\n        let seriesId = fallbackCategory;\n        if (typeof point.seriesId === 'string' && isCategory(point.seriesId)) {\n          seriesId = point.seriesId;\n        }\n        if (seriesId == null) {\n          return null;\n        }\n\n        return {\n          seriesId,\n          data: { y: credits },\n          color: point.seriesColor,\n        };\n      })\n      .filter((point): point is SlicePointPayload<Category> => {\n        return point != null;\n      })\n      .sort((left, right) => {\n        const leftIndex = categoryOrder.indexOf(left.seriesId);\n        const rightIndex = categoryOrder.indexOf(right.seriesId);\n\n        return leftIndex - rightIndex;\n      });\n\n    return (\n      <div className={styles.tooltip}>\n        <p className={styles.tooltipDate}>{formatDayTick(dayKey)}</p>\n        {points.map((point) => {\n          return (\n            <div\n              key={`${dayKey}-${point.seriesId}`}\n              className={styles.tooltipRow}\n            >\n              <span className={styles.tooltipRowLabel}>\n                <span\n                  className={styles.tooltipSwatch}\n                  style={{ backgroundColor: point.color }}\n                  aria-hidden\n                />\n                <span>{categoryLabel(point.seriesId)}</span>\n              </span>\n              <strong>{formatValue(point.data.y)}</strong>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.chartContainer}>\n      <ResponsiveLine\n        data={series}\n        margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n        colors={colorById}\n        xScale={{ type: 'point' }}\n        yScale={{ type: 'linear', min: 0, max: 'auto' }}\n        curve=\"monotoneX\"\n        lineWidth={2.5}\n        pointSize={4}\n        pointBorderWidth={2}\n        pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n        enableArea\n        areaOpacity={0.1}\n        enableGridX={false}\n        enableGridY\n        axisTop={null}\n        axisRight={null}\n        axisBottom={{\n          tickValues: visibleTicks,\n          format: (value) => {\n            return formatDayTick(String(value));\n          },\n          tickSize: 0,\n          tickPadding: 10,\n        }}\n        axisLeft={{\n          tickSize: 0,\n          tickPadding: 8,\n          tickValues: 4,\n          format: (value) => {\n            return compactNumberFormatter.format(Number(value));\n          },\n        }}\n        enableSlices=\"x\"\n        sliceTooltip={sliceTooltip}\n        legends={legends}\n        useMesh\n        ariaLabel={ariaLabel}\n        theme={{\n          text: {\n            fill: vars.colors.textSecondary,\n            fontSize: 12,\n          },\n          axis: {\n            domain: {\n              line: {\n                stroke: vars.colors.borderLight,\n              },\n            },\n            ticks: {\n              line: {\n                stroke: 'transparent',\n              },\n            },\n            legend: {\n              text: {\n                fill: vars.colors.textSecondary,\n              },\n            },\n          },\n          grid: {\n            line: {\n              stroke: vars.colors.borderLight,\n            },\n          },\n          crosshair: {\n            line: {\n              stroke: vars.colors.primary,\n              strokeWidth: 1,\n              strokeOpacity: 0.35,\n            },\n          },\n          tooltip: {\n            container: {\n              background: 'transparent',\n              boxShadow: 'none',\n              padding: 0,\n            },\n          },\n          legends: {\n            text: {\n              fill: vars.colors.textSecondary,\n            },\n          },\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["MAX_X_TICKS","compactNumberFormatter","getVisibleDayTicks","series","firstSerie","point","step","visibleTicks","_","index","lastPoint","formatDayTick","dayKey","BillingUsageLineChart","props","ariaLabel","categoryColorById","categoryLabel","categoryOrder","formatValue","categoryOrderString","isCategory","value","legends","vars","category","jsx","styles.chartContainer","ResponsiveLine","serie","slice","fallbackCategory","points","credits","seriesId","left","right","leftIndex","rightIndex","jsxs","styles.tooltip","styles.tooltipDate","styles.tooltipRow","styles.tooltipRowLabel","styles.tooltipSwatch"],"mappings":"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"}
+{"version":3,"file":"BillingUsageLineChart.js","names":[],"sources":["../../../../src/components/charts/BillingUsageLineChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './billingUsageLineChart.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type BillingUsageLineChartPoint = {\n  x: string;\n  y: number;\n};\n\nexport type BillingUsageLineChartSerie<Category extends string> = {\n  id: Category;\n  data: readonly BillingUsageLineChartPoint[];\n};\n\ntype SlicePointPayload<Category extends string> = {\n  seriesId: Category;\n  data: {\n    y: number;\n  };\n  color: string;\n};\n\nexport type BillingUsageLineChartProps<Category extends string> = {\n  series: readonly BillingUsageLineChartSerie<Category>[];\n  categoryOrder: readonly Category[];\n  categoryColorById: Readonly<Record<Category, string>>;\n  categoryLabel: (category: Category) => string;\n  formatValue: (value: number) => string;\n  ariaLabel: string;\n};\n\nconst MAX_X_TICKS = 6;\n\nconst compactNumberFormatter = new Intl.NumberFormat('en-US', {\n  notation: 'compact',\n  maximumFractionDigits: 1,\n});\n\n/**\n * Limits the number of visible day ticks while always keeping the last point.\n */\nfunction getVisibleDayTicks<Category extends string>(\n  series: readonly BillingUsageLineChartSerie<Category>[],\n): readonly string[] {\n  const firstSerie = series[0];\n  if (firstSerie == null || firstSerie.data.length <= MAX_X_TICKS) {\n    if (firstSerie == null) {\n      return [];\n    }\n\n    return firstSerie.data.map((point) => {\n      return point.x;\n    });\n  }\n\n  const step = Math.ceil(firstSerie.data.length / MAX_X_TICKS);\n  const visibleTicks = firstSerie.data\n    .filter((_, index) => {\n      return index % step === 0;\n    })\n    .map((point) => {\n      return point.x;\n    });\n\n  const lastPoint = firstSerie.data.at(-1);\n  if (lastPoint != null && visibleTicks.at(-1) !== lastPoint.x) {\n    visibleTicks.push(lastPoint.x);\n  }\n\n  return visibleTicks;\n}\n\n/**\n * Formats a `YYYY-MM-DD` key into a short month/day label for the x-axis.\n */\nfunction formatDayTick(dayKey: string): string {\n  const parsed = new Date(`${dayKey}T00:00:00Z`);\n  return parsed.toLocaleDateString(undefined, {\n    month: 'short',\n    day: '2-digit',\n  });\n}\n\nexport const BillingUsageLineChart = <Category extends string>(\n  props: BillingUsageLineChartProps<Category>,\n): JSX.Element => {\n  const {\n    ariaLabel,\n    categoryColorById,\n    categoryLabel,\n    categoryOrder,\n    formatValue,\n    series,\n  } = props;\n\n  const visibleTicks = getVisibleDayTicks(series);\n  const categoryOrderString = categoryOrder as readonly string[];\n  const isCategory = (value: string): value is Category => {\n    return categoryOrderString.includes(value);\n  };\n\n  const legends = [\n    {\n      anchor: 'bottom' as const,\n      direction: 'row' as const,\n      translateY: 56,\n      itemWidth: 90,\n      itemHeight: 16,\n      itemsSpacing: 8,\n      symbolSize: 10,\n      symbolShape: 'circle' as const,\n      itemTextColor: vars.colors.textSecondary,\n      data: categoryOrder.map((category) => {\n        return {\n          id: category,\n          label: categoryLabel(category),\n          color: categoryColorById[category],\n        };\n      }),\n    },\n  ];\n\n  const colorById = (serie: { id: string | number }): string => {\n    if (typeof serie.id !== 'string' || !isCategory(serie.id)) {\n      return vars.colors.primary;\n    }\n\n    return categoryColorById[serie.id];\n  };\n\n  const sliceTooltip = ({\n    slice,\n  }: SliceTooltipProps<BillingUsageLineChartSerie<Category>>): JSX.Element => {\n    const dayKey = String(slice.id);\n    const fallbackCategory = categoryOrder[0] ?? null;\n    const points = [...slice.points]\n      .map((point): SlicePointPayload<Category> | null => {\n        let credits = 0;\n        if (typeof point.data.y === 'number') {\n          credits = point.data.y;\n        }\n\n        let seriesId = fallbackCategory;\n        if (typeof point.seriesId === 'string' && isCategory(point.seriesId)) {\n          seriesId = point.seriesId;\n        }\n        if (seriesId == null) {\n          return null;\n        }\n\n        return {\n          seriesId,\n          data: { y: credits },\n          color: point.seriesColor,\n        };\n      })\n      .filter((point): point is SlicePointPayload<Category> => {\n        return point != null;\n      })\n      .sort((left, right) => {\n        const leftIndex = categoryOrder.indexOf(left.seriesId);\n        const rightIndex = categoryOrder.indexOf(right.seriesId);\n\n        return leftIndex - rightIndex;\n      });\n\n    return (\n      <div className={styles.tooltip}>\n        <p className={styles.tooltipDate}>{formatDayTick(dayKey)}</p>\n        {points.map((point) => {\n          return (\n            <div\n              key={`${dayKey}-${point.seriesId}`}\n              className={styles.tooltipRow}\n            >\n              <span className={styles.tooltipRowLabel}>\n                <span\n                  className={styles.tooltipSwatch}\n                  style={{ backgroundColor: point.color }}\n                  aria-hidden\n                />\n                <span>{categoryLabel(point.seriesId)}</span>\n              </span>\n              <strong>{formatValue(point.data.y)}</strong>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.chartContainer}>\n      <ResponsiveLine\n        data={series}\n        margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n        colors={colorById}\n        xScale={{ type: 'point' }}\n        yScale={{ type: 'linear', min: 0, max: 'auto' }}\n        curve=\"monotoneX\"\n        lineWidth={2.5}\n        pointSize={4}\n        pointBorderWidth={2}\n        pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n        enableArea\n        areaOpacity={0.1}\n        enableGridX={false}\n        enableGridY\n        axisTop={null}\n        axisRight={null}\n        axisBottom={{\n          tickValues: visibleTicks,\n          format: (value) => {\n            return formatDayTick(String(value));\n          },\n          tickSize: 0,\n          tickPadding: 10,\n        }}\n        axisLeft={{\n          tickSize: 0,\n          tickPadding: 8,\n          tickValues: 4,\n          format: (value) => {\n            return compactNumberFormatter.format(Number(value));\n          },\n        }}\n        enableSlices=\"x\"\n        sliceTooltip={sliceTooltip}\n        legends={legends}\n        useMesh\n        ariaLabel={ariaLabel}\n        theme={{\n          text: {\n            fill: vars.colors.textSecondary,\n            fontSize: 12,\n          },\n          axis: {\n            domain: {\n              line: {\n                stroke: vars.colors.borderLight,\n              },\n            },\n            ticks: {\n              line: {\n                stroke: 'transparent',\n              },\n            },\n            legend: {\n              text: {\n                fill: vars.colors.textSecondary,\n              },\n            },\n          },\n          grid: {\n            line: {\n              stroke: vars.colors.borderLight,\n            },\n          },\n          crosshair: {\n            line: {\n              stroke: vars.colors.primary,\n              strokeWidth: 1,\n              strokeOpacity: 0.35,\n            },\n          },\n          tooltip: {\n            container: {\n              background: 'transparent',\n              boxShadow: 'none',\n              padding: 0,\n            },\n          },\n          legends: {\n            text: {\n              fill: vars.colors.textSecondary,\n            },\n          },\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;AAiCA,IAAM,IAAc,GAEd,IAAyB,IAAI,KAAK,aAAa,SAAS;CAC5D,UAAU;CACV,uBAAuB;CACxB,CAAC;AAKF,SAAS,EACP,GACmB;CACnB,IAAM,IAAa,EAAO;AAC1B,KAAI,KAAc,QAAQ,EAAW,KAAK,UAAU,EAKlD,QAJI,KAAc,OACT,EAAE,GAGJ,EAAW,KAAK,KAAK,MACnB,EAAM,EACb;CAGJ,IAAM,IAAO,KAAK,KAAK,EAAW,KAAK,SAAS,EAAY,EACtD,IAAe,EAAW,KAC7B,QAAQ,GAAG,MACH,IAAQ,MAAS,EACxB,CACD,KAAK,MACG,EAAM,EACb,EAEE,IAAY,EAAW,KAAK,GAAG,GAAG;AAKxC,QAJI,KAAa,QAAQ,EAAa,GAAG,GAAG,KAAK,EAAU,KACzD,EAAa,KAAK,EAAU,EAAE,EAGzB;;AAMT,SAAS,EAAc,GAAwB;AAE7C,yBADe,IAAI,KAAK,GAAG,EAAO,YAAY,EAChC,mBAAmB,KAAA,GAAW;EAC1C,OAAO;EACP,KAAK;EACN,CAAC;;AAGJ,IAAa,KACX,MACgB;CAChB,IAAM,EACJ,cACA,sBACA,kBACA,kBACA,gBACA,cACE,GAEE,IAAe,EAAmB,EAAO,EACzC,IAAsB,GACtB,KAAc,MACX,EAAoB,SAAS,EAAM,EAGtC,IAAU,CACd;EACE,QAAQ;EACR,WAAW;EACX,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,cAAc;EACd,YAAY;EACZ,aAAa;EACb,eAAe,EAAK,OAAO;EAC3B,MAAM,EAAc,KAAK,OAChB;GACL,IAAI;GACJ,OAAO,EAAc,EAAS;GAC9B,OAAO,EAAkB;GAC1B,EACD;EACH,CACF;AAuED,QACE,kBAAC,OAAD;EAAK,WAAW;YACd,kBAAC,GAAD;GACE,MAAM;GACN,QAAQ;IAAE,KAAK;IAAI,OAAO;IAAI,QAAQ;IAAI,MAAM;IAAI;GACpD,SA1Ea,MACb,OAAO,EAAM,MAAO,YAAY,CAAC,EAAW,EAAM,GAAG,GAChD,EAAK,OAAO,UAGd,EAAkB,EAAM;GAsE3B,QAAQ,EAAE,MAAM,SAAS;GACzB,QAAQ;IAAE,MAAM;IAAU,KAAK;IAAG,KAAK;IAAQ;GAC/C,OAAM;GACN,WAAW;GACX,WAAW;GACX,kBAAkB;GAClB,kBAAkB;IAAE,MAAM;IAAe,WAAW,CAAC,CAAC,UAAU,GAAI,CAAC;IAAE;GACvE,YAAA;GACA,aAAa;GACb,aAAa;GACb,aAAA;GACA,SAAS;GACT,WAAW;GACX,YAAY;IACV,YAAY;IACZ,SAAS,MACA,EAAc,OAAO,EAAM,CAAC;IAErC,UAAU;IACV,aAAa;IACd;GACD,UAAU;IACR,UAAU;IACV,aAAa;IACb,YAAY;IACZ,SAAS,MACA,EAAuB,OAAO,OAAO,EAAM,CAAC;IAEtD;GACD,cAAa;GACC,eAjGE,EACpB,eAC0E;IAC1E,IAAM,IAAS,OAAO,EAAM,GAAG,EACzB,IAAmB,EAAc,MAAM,MACvC,IAAS,CAAC,GAAG,EAAM,OAAO,CAC7B,KAAK,MAA8C;KAClD,IAAI,IAAU;AACd,KAAI,OAAO,EAAM,KAAK,KAAM,aAC1B,IAAU,EAAM,KAAK;KAGvB,IAAI,IAAW;AAQf,YAPI,OAAO,EAAM,YAAa,YAAY,EAAW,EAAM,SAAS,KAClE,IAAW,EAAM,WAEf,KAAY,OACP,OAGF;MACL;MACA,MAAM,EAAE,GAAG,GAAS;MACpB,OAAO,EAAM;MACd;MACD,CACD,QAAQ,MACA,KAAS,KAChB,CACD,MAAM,GAAM,MACO,EAAc,QAAQ,EAAK,SAAS,GACnC,EAAc,QAAQ,EAAM,SAAS,CAGxD;AAEJ,WACE,kBAAC,OAAD;KAAK,WAAW;eAAhB,CACE,kBAAC,KAAD;MAAG,WAAW;gBAAqB,EAAc,EAAO;MAAK,CAAA,EAC5D,EAAO,KAAK,MAET,kBAAC,OAAD;MAEE,WAAW;gBAFb,CAIE,kBAAC,QAAD;OAAM,WAAW;iBAAjB,CACE,kBAAC,QAAD;QACE,WAAW;QACX,OAAO,EAAE,iBAAiB,EAAM,OAAO;QACvC,eAAA;QACA,CAAA,EACF,kBAAC,QAAD,EAAA,UAAO,EAAc,EAAM,SAAS,EAAQ,CAAA,CACvC;UACP,kBAAC,UAAD,EAAA,UAAS,EAAY,EAAM,KAAK,EAAE,EAAU,CAAA,CACxC;QAZC,GAAG,EAAO,GAAG,EAAM,WAYpB,CAER,CACE;;;GAyCK;GACT,SAAA;GACW;GACX,OAAO;IACL,MAAM;KACJ,MAAM,EAAK,OAAO;KAClB,UAAU;KACX;IACD,MAAM;KACJ,QAAQ,EACN,MAAM,EACJ,QAAQ,EAAK,OAAO,aACrB,EACF;KACD,OAAO,EACL,MAAM,EACJ,QAAQ,eACT,EACF;KACD,QAAQ,EACN,MAAM,EACJ,MAAM,EAAK,OAAO,eACnB,EACF;KACF;IACD,MAAM,EACJ,MAAM,EACJ,QAAQ,EAAK,OAAO,aACrB,EACF;IACD,WAAW,EACT,MAAM;KACJ,QAAQ,EAAK,OAAO;KACpB,aAAa;KACb,eAAe;KAChB,EACF;IACD,SAAS,EACP,WAAW;KACT,YAAY;KACZ,WAAW;KACX,SAAS;KACV,EACF;IACD,SAAS,EACP,MAAM,EACJ,MAAM,EAAK,OAAO,eACnB,EACF;IACF;GACD,CAAA;EACE,CAAA"}

package/lib/esm/components/charts/billingUsageLineChart.css.js

@@ -1,12 +1,8 @@
-/* empty css                                       */
-/* empty css                                         */
-var v = "_1a38h831 _1a38h830 txvbqbnux txvbqboi6 txvbqbp5f txvbqblx6 txvbqbu6f txvbqb1df txvbqb1qf txvbqbx6 txvbqb1ro txvbqbv2r", x = "_1a38h832 txvbqbogo txvbqbp3x txvbqbp5f txvbqblx6 txvbqb9io txvbqbai6 txvbqbb9o txvbqb1df txvbqb1qf txvbqbwf txvbqb1rf txvbqbv2x txvbqb8q6", q = "_1a38h833 txvbqb8o txvbqbv8t txvbqbamf txvbqbfbo", o = "_1a38h834 txvbqb9io txvbqbco txvbqbdoo txvbqbaof txvbqb8x txvbqbv8p", a = "_1a38h835 txvbqb9jf txvbqbco txvbqbb9o", r = "_1a38h837 _1a38h836 txvbqbtvo txvbqbc56 txvbqb1t6";
-export {
-  v as chartContainer,
-  x as tooltip,
-  q as tooltipDate,
-  o as tooltipRow,
-  a as tooltipRowLabel,
-  r as tooltipSwatch
-};
-//# sourceMappingURL=billingUsageLineChart.css.js.map
+/* empty css                                   */
+/* empty css                                     */
+//#region src/components/charts/billingUsageLineChart.css.ts
+var e = "_1a38h831 _1a38h830 txvbqbnux txvbqboi6 txvbqbp5f txvbqblx6 txvbqbu6f txvbqb1df txvbqb1qf txvbqbx6 txvbqb1ro txvbqbv2r", t = "_1a38h832 txvbqbogo txvbqbp3x txvbqbp5f txvbqblx6 txvbqb9io txvbqbai6 txvbqbb9o txvbqb1df txvbqb1qf txvbqbwf txvbqb1rf txvbqbv2x txvbqb8q6", n = "_1a38h833 txvbqb8o txvbqbv8t txvbqbamf txvbqbfbo", r = "_1a38h834 txvbqb9io txvbqbco txvbqbdoo txvbqbaof txvbqb8x txvbqbv8p", i = "_1a38h835 txvbqb9jf txvbqbco txvbqbb9o", a = "_1a38h837 _1a38h836 txvbqbtvo txvbqbc56 txvbqb1t6";
+//#endregion
+export { e as chartContainer, t as tooltip, n as tooltipDate, r as tooltipRow, i as tooltipRowLabel, a as tooltipSwatch };
+
+//# sourceMappingURL=billingUsageLineChart.css.js.map

package/lib/esm/components/charts/billingUsageLineChart.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"billingUsageLineChart.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"billingUsageLineChart.css.js","names":[],"sources":["../../../../src/components/charts/billingUsageLineChart.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const chartContainer = style([\n  sprinkles({\n    width: 'full',\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    borderColor: 'borderLight',\n    borderRadius: 'lg',\n    backgroundColor: 'surface',\n    paddingY: 2,\n    paddingX: 2,\n  }),\n  {\n    height: '260px',\n    '@media': {\n      'screen and (min-width: 768px)': {\n        height: '340px',\n      },\n    },\n  },\n]);\n\nexport const tooltip = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1.5,\n  borderWidth: 'px',\n  borderStyle: 'solid',\n  borderColor: 'border',\n  borderRadius: 'md',\n  backgroundColor: 'surfaceElevated',\n  paddingY: 2,\n  paddingX: 2.5,\n  boxShadow: 'lg',\n});\n\nexport const tooltipDate = sprinkles({\n  fontSize: 'xs',\n  color: 'textMuted',\n  fontWeight: 'medium',\n  margin: 0,\n});\n\nexport const tooltipRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 3,\n  fontSize: 'sm',\n  color: 'text',\n});\n\nexport const tooltipRowLabel = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 1.5,\n});\n\nexport const tooltipSwatch = style([\n  sprinkles({\n    width: 2,\n    height: 2,\n    borderRadius: 'full',\n  }),\n]);\n"],"mappings":""}

package/lib/esm/components/data-table/DataTable.css.js

@@ -1,24 +1,84 @@
-/* empty css                                       */
-/* empty css                             */
-import { createRuntimeFn as b } from "@vanilla-extract/recipes/createRuntimeFn";
-var s = b({ defaultClassName: "ysn8463 ysn8460 txvbqb9io txvbqbai6 txvbqbu6f txvbqb1k", variantClassNames: { kind: { default: "ysn8464 ysn8461 txvbqbuzn txvbqbwf txvbqb1ro txvbqb1qf txvbqb1co txvbqbl6f", brandTable: "ysn8465 ysn8462 txvbqbuzj txvbqb1qo txvbqb1px txvbqb12f txvbqbl6x" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), v = b({ defaultClassName: "ysn8468", variantClassNames: { kind: { default: "ysn8469 ysn8466 txvbqb12f txvbqb1qf txvbqb62o txvbqb3no txvbqbv2t", brandTable: "ysn846a ysn8467 txvbqbuzj txvbqb12f txvbqb1qf txvbqb62o txvbqb3s6" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), x = "ysn846b txvbqb9ix txvbqbu6f txvbqbc6", e = "var(--ysn846c)", q = "var(--ysn846d)", l = "var(--ysn846e)", d = b({ defaultClassName: "ysn846j ysn846f txvbqbco txvbqb9io txvbqbaj6 txvbqbao6 txvbqbl6f txvbqbt6f txvbqbuw6", variantClassNames: { kind: { default: "ysn846k ysn846h ysn846g txvbqbv8p txvbqbamo", brandTable: "ysn846l ysn846i txvbqbnuf txvbqboho txvbqbp5x txvbqblxo txvbqbv7p txvbqbamx txvbqb8o txvbqbeef txvbqb66 txvbqb54x" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), r = b({ defaultClassName: "ysn846o ysn846m txvbqb9io txvbqbai6", variantClassNames: { kind: { default: "ysn846p", brandTable: "ysn846q ysn846n txvbqbuzj" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), y = b({ defaultClassName: "ysn846w ysn846r txvbqbc6 txvbqb1qf txvbqb12f txvbqb9ix txvbqb78 txvbqb6x txvbqb7k", variantClassNames: { kind: { default: "ysn846x ysn846t ysn846s txvbqbv2r txvbqb3of txvbqb62o", brandTable: "ysn846y ysn846v ysn846u txvbqbuzj txvbqb3s6 txvbqb62o" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), i = b({ defaultClassName: "ysn84611", variantClassNames: { kind: { default: "ysn84612 ysn846z txvbqbv2v", brandTable: "ysn84613 ysn84610 txvbqbuzj" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), o = b({ defaultClassName: "ysn84616", variantClassNames: { kind: { default: "ysn84617 ysn84614 txvbqbv2r", brandTable: "ysn84618 ysn84615 txvbqbuzj" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), u = b({ defaultClassName: "ysn8461d ysn84619 txvbqbco txvbqb9io txvbqbao6 txvbqbk4x txvbqbl6f", variantClassNames: { kind: { default: "ysn8461e ysn8461b ysn8461a txvbqbv8r", brandTable: "ysn8461f ysn8461c txvbqbnuf txvbqboho txvbqbp5x txvbqblxo txvbqbv8p txvbqbamo txvbqb8x txvbqb54x" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), f = "ysn8461g txvbqbamo txvbqbv8p", m = "ysn8461h txvbqbv8p", p = "ysn8461i", C = "ysn8461j txvbqb96 txvbqbv8r txvbqbt5x", V = b({ defaultClassName: "ysn8461k", variantClassNames: { minVisibleAt: { sm: "ysn8461l", md: "ysn8461m", lg: "ysn8461n", xl: "ysn8461o", xxl: "ysn8461p" } }, defaultVariants: {}, compoundVariants: [] });
-export {
-  r as body,
-  u as cell,
-  s as container,
-  C as emptyCell,
-  p as emptyRow,
-  v as header,
-  d as headerCell,
-  x as headerRow,
-  V as hideBelowRecipe,
-  f as primaryCell,
-  m as primaryHeaderCell,
-  y as row,
-  i as rowEven,
-  o as rowOdd,
-  q as tableCellFontSizeVar,
-  e as tableCellPaddingVar,
-  l as tableEmptyRowPaddingVar
-};
-//# sourceMappingURL=DataTable.css.js.map
+/* empty css                                   */
+/* empty css                         */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/components/data-table/DataTable.css.ts
+var t = e({
+	defaultClassName: "ysn8463 ysn8460 txvbqb9io txvbqbai6 txvbqbu6f txvbqb1k",
+	variantClassNames: { kind: {
+		default: "ysn8464 ysn8461 txvbqbuzn txvbqbwf txvbqb1ro txvbqb1qf txvbqb1co txvbqbl6f",
+		brandTable: "ysn8465 ysn8462 txvbqbuzj txvbqb1qo txvbqb1px txvbqb12f txvbqbl6x"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), n = e({
+	defaultClassName: "ysn8468",
+	variantClassNames: { kind: {
+		default: "ysn8469 ysn8466 txvbqb12f txvbqb1qf txvbqb62o txvbqb3no txvbqbv2t",
+		brandTable: "ysn846a ysn8467 txvbqbuzj txvbqb12f txvbqb1qf txvbqb62o txvbqb3s6"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), r = "ysn846b txvbqb9ix txvbqbu6f txvbqbc6", i = "var(--ysn846c)", a = "var(--ysn846d)", o = "var(--ysn846e)", s = e({
+	defaultClassName: "ysn846j ysn846f txvbqbco txvbqb9io txvbqbaj6 txvbqbao6 txvbqbl6f txvbqbt6f txvbqbuw6",
+	variantClassNames: { kind: {
+		default: "ysn846k ysn846h ysn846g txvbqbv8p txvbqbamo",
+		brandTable: "ysn846l ysn846i txvbqbnuf txvbqboho txvbqbp5x txvbqblxo txvbqbv7p txvbqbamx txvbqb8o txvbqbeef txvbqb66 txvbqb54x"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), c = e({
+	defaultClassName: "ysn846o ysn846m txvbqb9io txvbqbai6",
+	variantClassNames: { kind: {
+		default: "ysn846p",
+		brandTable: "ysn846q ysn846n txvbqbuzj"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), l = e({
+	defaultClassName: "ysn846w ysn846r txvbqbc6 txvbqb1qf txvbqb12f txvbqb9ix txvbqb78 txvbqb6x txvbqb7k",
+	variantClassNames: { kind: {
+		default: "ysn846x ysn846t ysn846s txvbqbv2r txvbqb3of txvbqb62o",
+		brandTable: "ysn846y ysn846v ysn846u txvbqbuzj txvbqb3s6 txvbqb62o"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), u = e({
+	defaultClassName: "ysn84611",
+	variantClassNames: { kind: {
+		default: "ysn84612 ysn846z txvbqbv2v",
+		brandTable: "ysn84613 ysn84610 txvbqbuzj"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), d = e({
+	defaultClassName: "ysn84616",
+	variantClassNames: { kind: {
+		default: "ysn84617 ysn84614 txvbqbv2r",
+		brandTable: "ysn84618 ysn84615 txvbqbuzj"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), f = e({
+	defaultClassName: "ysn8461d ysn84619 txvbqbco txvbqb9io txvbqbao6 txvbqbk4x txvbqbl6f",
+	variantClassNames: { kind: {
+		default: "ysn8461e ysn8461b ysn8461a txvbqbv8r",
+		brandTable: "ysn8461f ysn8461c txvbqbnuf txvbqboho txvbqbp5x txvbqblxo txvbqbv8p txvbqbamo txvbqb8x txvbqb54x"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), p = "ysn8461g txvbqbamo txvbqbv8p", m = "ysn8461h txvbqbv8p", h = "ysn8461i", g = "ysn8461j txvbqb96 txvbqbv8r txvbqbt5x", _ = e({
+	defaultClassName: "ysn8461k",
+	variantClassNames: { minVisibleAt: {
+		sm: "ysn8461l",
+		md: "ysn8461m",
+		lg: "ysn8461n",
+		xl: "ysn8461o",
+		xxl: "ysn8461p"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+//#endregion
+export { c as body, f as cell, t as container, g as emptyCell, h as emptyRow, n as header, s as headerCell, r as headerRow, _ as hideBelowRecipe, p as primaryCell, m as primaryHeaderCell, l as row, u as rowEven, d as rowOdd, a as tableCellFontSizeVar, i as tableCellPaddingVar, o as tableEmptyRowPaddingVar };
+
+//# sourceMappingURL=DataTable.css.js.map

package/lib/esm/components/data-table/DataTable.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"DataTable.css.js","names":[],"sources":["../../../../src/components/data-table/DataTable.css.ts"],"sourcesContent":["import {\n  createVar,\n  fallbackVar,\n  style,\n  type StyleRule,\n} from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { vars } from '../../theme/themeContract.js';\n\nimport {\n  DATA_TABLE_BREAKPOINT_ENTRIES,\n  type DataTableBreakpoint,\n} from './tableBreakpoints.js';\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const container = recipe({\n  base: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    width: 'full',\n    containerType: 'inline-size',\n  }),\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'white',\n        borderColor: 'border',\n        borderRadius: 'lg',\n        borderStyle: 'solid',\n        borderWidth: 'default',\n        overflow: 'hidden',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderRadius: 'none',\n        borderStyle: 'none',\n        borderWidth: 0,\n        overflow: 'visible',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const header = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'border',\n        backgroundColor: 'surfaceSecondary',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'brandSecondaryOrange-20',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const headerRow = sprinkles({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'stretch',\n});\n\nexport const tableCellPaddingVar = createVar();\nexport const tableCellFontSizeVar = createVar();\nexport const tableEmptyRowPaddingVar = createVar();\n\nexport const headerCell = recipe({\n  base: sprinkles({\n    alignItems: 'center',\n    display: 'flex',\n    flexShrink: 0,\n    gap: 2,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          color: 'text',\n          fontWeight: 'semibold',\n        }),\n        {\n          padding: fallbackVar(\n            tableCellPaddingVar,\n            `${vars.spacing[3]} ${vars.spacing[4]}`,\n          ),\n          fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n          borderRight: `1px solid ${vars.colors.border}`,\n          selectors: {\n            '&:last-child': {\n              borderRight: 'none',\n            },\n          },\n        },\n      ]),\n      brandTable: sprinkles({\n        color: 'black-300',\n        fontWeight: 'bold',\n        fontSize: 'xs',\n        letterSpacing: 'caps',\n        textTransform: 'uppercase',\n        paddingY: 4,\n        paddingX: 0,\n        borderRightWidth: 0,\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const body = recipe({\n  base: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  variants: {\n    kind: {\n      default: {},\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const row = recipe({\n  base: sprinkles({\n    alignItems: 'stretch',\n    borderStyle: 'solid',\n    borderWidth: 0,\n    display: 'grid',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          backgroundColor: 'surface',\n          borderBottomColor: 'borderLight',\n          borderBottomWidth: 'default',\n        }),\n        {\n          selectors: {\n            '&:last-child': {\n              borderBottomWidth: 0,\n            },\n            '&:hover': {\n              backgroundColor: vars.colors.surfaceSecondary,\n            },\n          },\n        },\n      ]),\n      brandTable: style([\n        sprinkles({\n          backgroundColor: 'transparent',\n          borderBottomColor: 'brandSecondaryOrange-20',\n          borderBottomWidth: 'default',\n        }),\n        {\n          selectors: {\n            '&:last-child': {\n              borderBottomWidth: 0,\n            },\n            '&:hover': {\n              backgroundColor: 'transparent',\n            },\n          },\n        },\n      ]),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const rowEven = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surfaceMuted',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const rowOdd = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surface',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const cell = recipe({\n  base: sprinkles({\n    alignItems: 'center',\n    display: 'flex',\n    gap: 2,\n    minWidth: 0,\n    overflow: 'hidden',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          color: 'textSecondary',\n        }),\n        {\n          padding: fallbackVar(\n            tableCellPaddingVar,\n            `${vars.spacing[3]} ${vars.spacing[4]}`,\n          ),\n          fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n          borderRight: `1px solid ${vars.colors.borderLight}`,\n          selectors: {\n            '&:last-child': {\n              borderRight: 'none',\n            },\n          },\n        },\n      ]),\n      brandTable: sprinkles({\n        color: 'text',\n        fontWeight: 'semibold',\n        fontSize: 'sm',\n        paddingY: 4,\n        paddingX: 0,\n        borderRightWidth: 0,\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const primaryCell = sprinkles({\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const primaryHeaderCell = sprinkles({\n  color: 'text',\n});\n\nexport const emptyRow = style({\n  padding: fallbackVar(\n    tableEmptyRowPaddingVar,\n    `${vars.spacing[6]} ${vars.spacing[4]}`,\n  ),\n});\n\nexport const emptyCell = sprinkles({\n  fontSize: 'base',\n  color: 'textSecondary',\n  textAlign: 'center',\n});\n\nconst hideBelowMap: Record<DataTableBreakpoint, StyleRule> = {} as Record<\n  DataTableBreakpoint,\n  StyleRule\n>;\n\nDATA_TABLE_BREAKPOINT_ENTRIES.forEach(([breakpoint, width]) => {\n  hideBelowMap[breakpoint] = {\n    '@container': {\n      [`(max-width: ${width - 0.5}px)`]: {\n        visibility: 'hidden',\n        opacity: 0,\n        pointerEvents: 'none',\n        paddingInline: 0,\n        paddingBlock: 0,\n        borderRight: 'none',\n        overflow: 'hidden',\n      },\n    },\n  };\n});\n\nexport const hideBelowRecipe = recipe({\n  variants: {\n    minVisibleAt: hideBelowMap,\n  },\n});\n"],"mappings":""}