@plumile/ui 0.1.55 → 0.1.57

package/lib/esm/atomic/molecules/toast/ToastProvider.js

@@ -0,0 +1,83 @@
+import { INFO_TOAST_DURATION_MS as e } from "./constants.js";
+import { ToastViewport as t } from "./ToastViewport.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { createContext as i, useCallback as a, useContext as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+//#region src/atomic/molecules/toast/ToastProvider.tsx
+var d = i(null), f = (e, t) => (n, r) => e.push({
+	kind: t,
+	title: n,
+	message: r
+}), p = ({ children: i, maxToasts: o = 4 }) => {
+	let [p, m] = u([]), h = l(0), g = l(/* @__PURE__ */ new Map()), _ = a((e) => {
+		let t = g.current.get(e);
+		t != null && (clearTimeout(t), g.current.delete(e)), m((t) => t.filter((t) => t.id !== e));
+	}, []), v = a(() => {
+		g.current.forEach((e) => {
+			clearTimeout(e);
+		}), g.current.clear(), m([]);
+	}, []), y = a((e) => {
+		let t = e.id ?? `toast-${h.current++}`;
+		return m((n) => {
+			let r = [...n, {
+				...e,
+				kind: e.kind ?? "info",
+				id: t
+			}];
+			return r.length > o ? r.slice(r.length - o) : r;
+		}), t;
+	}, [o]);
+	s(() => {
+		let t = /* @__PURE__ */ new Set();
+		p.forEach((n) => {
+			if (n.kind !== "info" || (t.add(n.id), g.current.has(n.id))) return;
+			let r = setTimeout(() => {
+				g.current.delete(n.id), m((e) => e.filter((e) => e.id !== n.id));
+			}, e);
+			g.current.set(n.id, r);
+		}), g.current.forEach((e, n) => {
+			t.has(n) || (clearTimeout(e), g.current.delete(n));
+		});
+	}, [p]), s(() => {
+		let e = g.current;
+		return () => {
+			e.forEach((e) => {
+				clearTimeout(e);
+			}), e.clear();
+		};
+	}, []);
+	let b = c(() => {
+		let e = {
+			push: y,
+			dismiss: _,
+			clear: v,
+			info: () => "",
+			warning: () => "",
+			error: () => ""
+		};
+		return {
+			...e,
+			info: f(e, "info"),
+			warning: f(e, "warning"),
+			error: f(e, "error")
+		};
+	}, [
+		v,
+		_,
+		y
+	]);
+	return /* @__PURE__ */ r(d.Provider, {
+		value: b,
+		children: [i, /* @__PURE__ */ n(t, {
+			toasts: p,
+			onDismiss: _
+		})]
+	});
+}, m = () => {
+	let e = o(d);
+	if (e == null) throw Error("useToast must be used within a ToastProvider");
+	return e;
+};
+//#endregion
+export { p as ToastProvider, m as useToast };
+
+//# sourceMappingURL=ToastProvider.js.map

package/lib/esm/atomic/molecules/toast/ToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../../../src/atomic/molecules/toast/ToastProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useEffect,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n  type ReactNode,\n} from 'react';\n\nimport {\n  ToastViewport,\n  type ToastItem,\n  type ToastKind,\n} from './ToastViewport.js';\nimport { INFO_TOAST_DURATION_MS } from './constants.js';\n\nexport type ToastApi = {\n  push: (toast: Omit<ToastItem, 'id'> & { id?: string }) => string;\n  dismiss: (toastId: string) => void;\n  clear: () => void;\n  info: (title: ReactNode, message?: ReactNode) => string;\n  warning: (title: ReactNode, message?: ReactNode) => string;\n  error: (title: ReactNode, message?: ReactNode) => string;\n};\n\nexport type ToastProviderProps = {\n  children: ReactNode;\n  maxToasts?: number;\n};\n\nconst ToastContext = createContext<ToastApi | null>(null);\n\nconst pushWithKind = (api: ToastApi, kind: ToastKind) => {\n  return (title: ReactNode, message?: ReactNode): string => {\n    return api.push({ kind, title, message });\n  };\n};\n\nexport const ToastProvider = ({\n  children,\n  maxToasts = 4,\n}: ToastProviderProps): JSX.Element => {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n  const counter = useRef(0);\n  const infoToastTimers = useRef<Map<string, ReturnType<typeof setTimeout>>>(\n    new Map(),\n  );\n\n  const dismiss = useCallback((toastId: string) => {\n    const timer = infoToastTimers.current.get(toastId);\n    if (timer != null) {\n      clearTimeout(timer);\n      infoToastTimers.current.delete(toastId);\n    }\n    setToasts((prev) => {\n      return prev.filter((t) => {\n        return t.id !== toastId;\n      });\n    });\n  }, []);\n\n  const clear = useCallback(() => {\n    infoToastTimers.current.forEach((timer) => {\n      clearTimeout(timer);\n    });\n    infoToastTimers.current.clear();\n    setToasts([]);\n  }, []);\n\n  const push = useCallback(\n    (toast: Omit<ToastItem, 'id'> & { id?: string }): string => {\n      const id = toast.id ?? `toast-${counter.current++}`;\n      setToasts((prev) => {\n        const next = [...prev, { ...toast, kind: toast.kind ?? 'info', id }];\n        if (next.length > maxToasts) {\n          return next.slice(next.length - maxToasts);\n        }\n        return next;\n      });\n      return id;\n    },\n    [maxToasts],\n  );\n\n  useEffect(() => {\n    const activeInfoToastIds = new Set<string>();\n    toasts.forEach((toast) => {\n      if (toast.kind !== 'info') {\n        return;\n      }\n      activeInfoToastIds.add(toast.id);\n      if (infoToastTimers.current.has(toast.id)) {\n        return;\n      }\n      const timer = setTimeout(() => {\n        infoToastTimers.current.delete(toast.id);\n        setToasts((prev) => {\n          return prev.filter((item) => {\n            return item.id !== toast.id;\n          });\n        });\n      }, INFO_TOAST_DURATION_MS);\n      infoToastTimers.current.set(toast.id, timer);\n    });\n\n    infoToastTimers.current.forEach((timer, toastId) => {\n      if (activeInfoToastIds.has(toastId)) {\n        return;\n      }\n      clearTimeout(timer);\n      infoToastTimers.current.delete(toastId);\n    });\n  }, [toasts]);\n\n  useEffect(() => {\n    const timers = infoToastTimers.current;\n    return () => {\n      timers.forEach((timer) => {\n        clearTimeout(timer);\n      });\n      timers.clear();\n    };\n  }, []);\n\n  const api = useMemo<ToastApi>(() => {\n    const base: ToastApi = {\n      push,\n      dismiss,\n      clear,\n      info: () => {\n        return '';\n      },\n      warning: () => {\n        return '';\n      },\n      error: () => {\n        return '';\n      },\n    };\n    return {\n      ...base,\n      info: pushWithKind(base, 'info'),\n      warning: pushWithKind(base, 'warning'),\n      error: pushWithKind(base, 'error'),\n    };\n  }, [clear, dismiss, push]);\n\n  return (\n    <ToastContext.Provider value={api}>\n      {children}\n      <ToastViewport toasts={toasts} onDismiss={dismiss} />\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = (): ToastApi => {\n  const value = useContext(ToastContext);\n  if (value == null) {\n    throw new Error('useToast must be used within a ToastProvider');\n  }\n  return value;\n};\n"],"mappings":";;;;;AAiCA,IAAM,IAAe,EAA+B,KAAK,EAEnD,KAAgB,GAAe,OAC3B,GAAkB,MACjB,EAAI,KAAK;CAAE;CAAM;CAAO;CAAS,CAAC,EAIhC,KAAiB,EAC5B,aACA,eAAY,QACyB;CACrC,IAAM,CAAC,GAAQ,KAAa,EAAsB,EAAE,CAAC,EAC/C,IAAU,EAAO,EAAE,EACnB,IAAkB,kBACtB,IAAI,KAAK,CACV,EAEK,IAAU,GAAa,MAAoB;EAC/C,IAAM,IAAQ,EAAgB,QAAQ,IAAI,EAAQ;AAKlD,EAJI,KAAS,SACX,aAAa,EAAM,EACnB,EAAgB,QAAQ,OAAO,EAAQ,GAEzC,GAAW,MACF,EAAK,QAAQ,MACX,EAAE,OAAO,EAChB,CACF;IACD,EAAE,CAAC,EAEA,IAAQ,QAAkB;AAK9B,EAJA,EAAgB,QAAQ,SAAS,MAAU;AACzC,gBAAa,EAAM;IACnB,EACF,EAAgB,QAAQ,OAAO,EAC/B,EAAU,EAAE,CAAC;IACZ,EAAE,CAAC,EAEA,IAAO,GACV,MAA2D;EAC1D,IAAM,IAAK,EAAM,MAAM,SAAS,EAAQ;AAQxC,SAPA,GAAW,MAAS;GAClB,IAAM,IAAO,CAAC,GAAG,GAAM;IAAE,GAAG;IAAO,MAAM,EAAM,QAAQ;IAAQ;IAAI,CAAC;AAIpE,UAHI,EAAK,SAAS,IACT,EAAK,MAAM,EAAK,SAAS,EAAU,GAErC;IACP,EACK;IAET,CAAC,EAAU,CACZ;AAgCD,CA9BA,QAAgB;EACd,IAAM,oBAAqB,IAAI,KAAa;AAoB5C,EAnBA,EAAO,SAAS,MAAU;AAKxB,OAJI,EAAM,SAAS,WAGnB,EAAmB,IAAI,EAAM,GAAG,EAC5B,EAAgB,QAAQ,IAAI,EAAM,GAAG,EACvC;GAEF,IAAM,IAAQ,iBAAiB;AAE7B,IADA,EAAgB,QAAQ,OAAO,EAAM,GAAG,EACxC,GAAW,MACF,EAAK,QAAQ,MACX,EAAK,OAAO,EAAM,GACzB,CACF;MACD,EAAuB;AAC1B,KAAgB,QAAQ,IAAI,EAAM,IAAI,EAAM;IAC5C,EAEF,EAAgB,QAAQ,SAAS,GAAO,MAAY;AAC9C,KAAmB,IAAI,EAAQ,KAGnC,aAAa,EAAM,EACnB,EAAgB,QAAQ,OAAO,EAAQ;IACvC;IACD,CAAC,EAAO,CAAC,EAEZ,QAAgB;EACd,IAAM,IAAS,EAAgB;AAC/B,eAAa;AAIX,GAHA,EAAO,SAAS,MAAU;AACxB,iBAAa,EAAM;KACnB,EACF,EAAO,OAAO;;IAEf,EAAE,CAAC;CAEN,IAAM,IAAM,QAAwB;EAClC,IAAM,IAAiB;GACrB;GACA;GACA;GACA,YACS;GAET,eACS;GAET,aACS;GAEV;AACD,SAAO;GACL,GAAG;GACH,MAAM,EAAa,GAAM,OAAO;GAChC,SAAS,EAAa,GAAM,UAAU;GACtC,OAAO,EAAa,GAAM,QAAQ;GACnC;IACA;EAAC;EAAO;EAAS;EAAK,CAAC;AAE1B,QACE,kBAAC,EAAa,UAAd;EAAuB,OAAO;YAA9B,CACG,GACD,kBAAC,GAAD;GAAuB;GAAQ,WAAW;GAAW,CAAA,CAC/B;;GAIf,UAA2B;CACtC,IAAM,IAAQ,EAAW,EAAa;AACtC,KAAI,KAAS,KACX,OAAU,MAAM,+CAA+C;AAEjE,QAAO"}

package/lib/esm/atomic/molecules/toast/ToastViewport.js

@@ -0,0 +1,76 @@
+import { cx as e } from "../../../theme/tools.js";
+import { useUiTranslation as t } from "../../../i18n/useUiTranslation.js";
+import { Button as n } from "../../atoms/button/Button.js";
+import { ModalCloseSvg as r } from "../../../icons/ModalCloseSvg.js";
+import { actions as i, closeButton as a, header as o, kindRecipe as s, message as c, progressBar as l, progressTrack as u, title as d, toast as f, viewport as p } from "./toast.css.js";
+import { INFO_TOAST_DURATION_MS as m } from "./constants.js";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useMemo as _ } from "react";
+//#region src/atomic/molecules/toast/ToastViewport.tsx
+var v = ({ toasts: v, onDismiss: y, dismissLabel: b, className: x }) => {
+	let { t: S } = t(), C = b ?? S("toast.dismissAriaLabel"), w = _(() => v.map((t) => {
+		let p = t.kind ?? "info", _ = t.actions ?? [], v = null;
+		t.message != null && (v = /* @__PURE__ */ h("div", {
+			className: c,
+			children: t.message
+		}));
+		let b = null;
+		_.length > 0 && (b = /* @__PURE__ */ h("div", {
+			className: i,
+			children: _.map((e) => /* @__PURE__ */ h(n, {
+				type: "button",
+				size: "small",
+				variant: "secondary",
+				onClick: e.onClick,
+				children: e.label
+			}, e.id))
+		}));
+		let x = null;
+		return p === "info" && (x = /* @__PURE__ */ h("div", {
+			className: u,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ h("div", {
+				className: l,
+				style: { animationDuration: `${m}ms` }
+			})
+		})), /* @__PURE__ */ g("div", {
+			className: e(f, s({ kind: p })),
+			children: [
+				/* @__PURE__ */ g("div", {
+					className: o,
+					children: [/* @__PURE__ */ h("div", {
+						className: d,
+						children: t.title
+					}), /* @__PURE__ */ h("button", {
+						type: "button",
+						className: a,
+						"aria-label": C,
+						onClick: () => {
+							y(t.id);
+						},
+						children: /* @__PURE__ */ h(r, {
+							width: 18,
+							height: 18,
+							"aria-hidden": "true"
+						})
+					})]
+				}),
+				v,
+				b,
+				x
+			]
+		}, t.id);
+	}), [
+		y,
+		C,
+		v
+	]);
+	return v.length === 0 ? null : /* @__PURE__ */ h("div", {
+		className: e(p, x),
+		children: w
+	});
+};
+//#endregion
+export { v as ToastViewport };
+
+//# sourceMappingURL=ToastViewport.js.map

package/lib/esm/atomic/molecules/toast/ToastViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastViewport.js","names":[],"sources":["../../../../../src/atomic/molecules/toast/ToastViewport.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useMemo } from 'react';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { ModalCloseSvg } from '../../../icons/ModalCloseSvg.js';\nimport { Button } from '../../atoms/button/Button.js';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\n\nimport * as styles from './toast.css.js';\nimport { cx } from '../../../theme/tools.js';\nimport { INFO_TOAST_DURATION_MS } from './constants.js';\n\nexport type ToastKind = NonNullable<\n  NonNullable<RecipeVariants<typeof styles.kindRecipe>>['kind']\n>;\n\nexport type ToastAction = {\n  id: string;\n  label: string;\n  onClick: () => void;\n};\n\nexport type ToastItem = {\n  id: string;\n  kind?: ToastKind;\n  title: ReactNode;\n  message?: ReactNode;\n  actions?: readonly ToastAction[];\n};\n\nexport type ToastViewportProps = {\n  toasts: readonly ToastItem[];\n  onDismiss: (toastId: string) => void;\n  dismissLabel?: string;\n  className?: string;\n};\n\nexport const ToastViewport = ({\n  toasts,\n  onDismiss,\n  dismissLabel,\n  className,\n}: ToastViewportProps): JSX.Element | null => {\n  const { t } = useUiTranslation();\n  const resolvedDismissLabel = dismissLabel ?? t('toast.dismissAriaLabel');\n\n  const items = useMemo(() => {\n    return toasts.map((toast) => {\n      const kind = toast.kind ?? 'info';\n      const actions = toast.actions ?? [];\n\n      let messageNode: JSX.Element | null = null;\n      if (toast.message != null) {\n        messageNode = <div className={styles.message}>{toast.message}</div>;\n      }\n\n      let actionsNode: JSX.Element | null = null;\n      if (actions.length > 0) {\n        actionsNode = (\n          <div className={styles.actions}>\n            {actions.map((action) => {\n              return (\n                <Button\n                  key={action.id}\n                  type=\"button\"\n                  size=\"small\"\n                  variant=\"secondary\"\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </Button>\n              );\n            })}\n          </div>\n        );\n      }\n\n      let progressNode: JSX.Element | null = null;\n      if (kind === 'info') {\n        progressNode = (\n          <div className={styles.progressTrack} aria-hidden=\"true\">\n            <div\n              className={styles.progressBar}\n              style={{ animationDuration: `${INFO_TOAST_DURATION_MS}ms` }}\n            />\n          </div>\n        );\n      }\n\n      return (\n        <div\n          key={toast.id}\n          className={cx(styles.toast, styles.kindRecipe({ kind }))}\n        >\n          <div className={styles.header}>\n            <div className={styles.title}>{toast.title}</div>\n            <button\n              type=\"button\"\n              className={styles.closeButton}\n              aria-label={resolvedDismissLabel}\n              onClick={() => {\n                onDismiss(toast.id);\n              }}\n            >\n              <ModalCloseSvg width={18} height={18} aria-hidden=\"true\" />\n            </button>\n          </div>\n          {messageNode}\n          {actionsNode}\n          {progressNode}\n        </div>\n      );\n    });\n  }, [onDismiss, resolvedDismissLabel, toasts]);\n\n  if (toasts.length === 0) {\n    return null;\n  }\n\n  return <div className={cx(styles.viewport, className)}>{items}</div>;\n};\n"],"mappings":";;;;;;;;;AAoCA,IAAa,KAAiB,EAC5B,WACA,cACA,iBACA,mBAC4C;CAC5C,IAAM,EAAE,SAAM,GAAkB,EAC1B,IAAuB,KAAgB,EAAE,yBAAyB,EAElE,IAAQ,QACL,EAAO,KAAK,MAAU;EAC3B,IAAM,IAAO,EAAM,QAAQ,QACrB,IAAU,EAAM,WAAW,EAAE,EAE/B,IAAkC;AACtC,EAAI,EAAM,WAAW,SACnB,IAAc,kBAAC,OAAD;GAAK,WAAW;aAAiB,EAAM;GAAc,CAAA;EAGrE,IAAI,IAAkC;AACtC,EAAI,EAAQ,SAAS,MACnB,IACE,kBAAC,OAAD;GAAK,WAAW;aACb,EAAQ,KAAK,MAEV,kBAAC,GAAD;IAEE,MAAK;IACL,MAAK;IACL,SAAQ;IACR,SAAS,EAAO;cAEf,EAAO;IACD,EAPF,EAAO,GAOL,CAEX;GACE,CAAA;EAIV,IAAI,IAAmC;AAYvC,SAXI,MAAS,WACX,IACE,kBAAC,OAAD;GAAK,WAAW;GAAsB,eAAY;aAChD,kBAAC,OAAD;IACE,WAAW;IACX,OAAO,EAAE,mBAAmB,GAAG,EAAuB,KAAK;IAC3D,CAAA;GACE,CAAA,GAKR,kBAAC,OAAD;GAEE,WAAW,EAAG,GAAc,EAAkB,EAAE,SAAM,CAAC,CAAC;aAF1D;IAIE,kBAAC,OAAD;KAAK,WAAW;eAAhB,CACE,kBAAC,OAAD;MAAK,WAAW;gBAAe,EAAM;MAAY,CAAA,EACjD,kBAAC,UAAD;MACE,MAAK;MACL,WAAW;MACX,cAAY;MACZ,eAAe;AACb,SAAU,EAAM,GAAG;;gBAGrB,kBAAC,GAAD;OAAe,OAAO;OAAI,QAAQ;OAAI,eAAY;OAAS,CAAA;MACpD,CAAA,CACL;;IACL;IACA;IACA;IACG;KAnBC,EAAM,GAmBP;GAER,EACD;EAAC;EAAW;EAAsB;EAAO,CAAC;AAM7C,QAJI,EAAO,WAAW,IACb,OAGF,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAiB,EAAU;YAAG;EAAY,CAAA"}

package/lib/esm/atomic/molecules/toast/constants.js

@@ -0,0 +1,6 @@
+//#region src/atomic/molecules/toast/constants.ts
+var e = 15e3;
+//#endregion
+export { e as INFO_TOAST_DURATION_MS };
+
+//# sourceMappingURL=constants.js.map

package/lib/esm/atomic/molecules/toast/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../../../src/atomic/molecules/toast/constants.ts"],"sourcesContent":["export const INFO_TOAST_DURATION_MS = 15_000;\n"],"mappings":";AAAA,IAAa,IAAyB"}

package/lib/esm/atomic/molecules/toast/toast.css.js

@@ -0,0 +1,18 @@
+/* empty css                                      */
+/* empty css                     */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/atomic/molecules/toast/toast.css.ts
+var t = "_19cwz1i0 txvbqbpso txvbqbpuf txvbqb836 txvbqbuvx txvbqb9io txvbqbai6 txvbqbao6", n = "_19cwz1i3 _19cwz1i2 txvbqbnvf txvbqboio txvbqbp5o txvbqblxf txvbqbuzn txvbqbwf txvbqb1qf txvbqb1co txvbqb9io txvbqbai6 txvbqbanx txvbqb1ro txvbqb8q6", r = e({
+	defaultClassName: "_19cwz1i4",
+	variantClassNames: { kind: {
+		info: "_19cwz1i5",
+		warning: "_19cwz1i6",
+		error: "_19cwz1i7"
+	} },
+	defaultVariants: { kind: "info" },
+	compoundVariants: []
+}), i = "_19cwz1i8 txvbqb9io txvbqbcf txvbqbdoo txvbqbao6", a = "_19cwz1i9 txvbqbamo", o = "_19cwz1ia txvbqb8x", s = "_19cwz1ib txvbqb9jf txvbqbco txvbqbao6 txvbqbhwx", c = "_19cwz1id _19cwz1ic txvbqb9jf txvbqbco txvbqbdnx txvbqbtx6 txvbqbc6o txvbqb1rf txvbqb1px txvbqb12f txvbqbuzj txvbqbv", l = "_19cwz1if _19cwz1ie txvbqbhwx txvbqb1t6", u = "_19cwz1ih";
+//#endregion
+export { s as actions, c as closeButton, i as header, r as kindRecipe, o as message, u as progressBar, l as progressTrack, a as title, n as toast, t as viewport };
+
+//# sourceMappingURL=toast.css.js.map

package/lib/esm/atomic/molecules/toast/toast.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.css.js","names":[],"sources":["../../../../../src/atomic/molecules/toast/toast.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const viewport = sprinkles({\n  position: 'fixed',\n  right: 4,\n  bottom: 4,\n  zIndex: 'modal',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n\nconst slideIn = keyframes({\n  from: { transform: 'translateY(10px)', opacity: 0 },\n  to: { transform: 'translateY(0)', opacity: 1 },\n});\n\nexport const toast = style([\n  sprinkles({\n    backgroundColor: 'white',\n    borderColor: 'border',\n    borderStyle: 'solid',\n    borderWidth: 'default',\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 1,\n    paddingX: 4,\n    paddingY: 3,\n    borderRadius: 'lg',\n    boxShadow: 'lg',\n  }),\n  {\n    width: 'min(28rem, calc(100vw - 2rem))',\n    animation: `${slideIn} 140ms ease-out`,\n  },\n]);\n\nexport const kindRecipe = recipe({\n  variants: {\n    kind: {\n      info: { borderColor: vars.colors['blue-200'] },\n      warning: { borderColor: vars.colors['amber-200'] },\n      error: { borderColor: vars.colors['red-200'] },\n    },\n  },\n  defaultVariants: {\n    kind: 'info',\n  },\n});\n\nexport type KindVariants = RecipeVariants<typeof kindRecipe>;\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 2,\n});\n\nexport const title = sprinkles({\n  fontWeight: 'semibold',\n});\n\nexport const message = sprinkles({\n  fontSize: 'sm',\n});\n\nexport const actions = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  marginTop: 1,\n});\n\nexport const closeButton = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 8,\n    height: 8,\n    borderRadius: 'md',\n    borderStyle: 'none',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    cursor: 'pointer',\n  }),\n]);\n\nexport const progressTrack = style([\n  sprinkles({\n    marginTop: 1,\n    borderRadius: 'full',\n  }),\n  {\n    height: 4,\n    backgroundColor: vars.colors['blue-50'],\n    overflow: 'hidden',\n  },\n]);\n\nconst progressFill = keyframes({\n  from: { width: '0%' },\n  to: { width: '100%' },\n});\n\nexport const progressBar = style([\n  {\n    height: '100%',\n    width: '0%',\n    backgroundColor: vars.colors['blue-400'],\n    animationName: progressFill,\n    animationTimingFunction: 'linear',\n    animationFillMode: 'forwards',\n  },\n]);\n"],"mappings":""}

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":"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"}

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