@epam/ai-dial-usage-dashboard 1.1.0-dev.245 → 1.1.0-dev.248

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/components/ModelLimitsSection/ModelLimitsRow.d.ts.map +1 -1
  2. package/index.js +156 -156
  3. package/package.json +2 -2
package/components/ModelLimitsSection/ModelLimitsRow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ModelLimitsRow.d.ts","sourceRoot":"","sources":["../../../src/components/ModelLimitsSection/ModelLimitsRow.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EACL,aAAa,IAAI,iBAAiB,EAClC,iBAAiB,EAEjB,qBAAqB,EACtB,MAAM,iCAAiC,CAAC;AAIzC,oGAAoG;AACpG,eAAO,MAAM,yBAAyB,sDACe,CAAC;AAkCtD,kCAAkC;AAClC,MAAM,WAAW,mBAAmB;IAClC,iCAAiC;IACjC,GAAG,EAAE,iBAAiB,CAAC;IACvB,6CAA6C;IAC7C,MAAM,EAAE,iBAAiB,CAAC;IAC1B,kCAAkC;IAClC,UAAU,EAAE,qBAAqB,CAAC;IAClC,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,2GAA2G;AAC3G,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAmHlD,CAAC"}
1
+ {"version":3,"file":"ModelLimitsRow.d.ts","sourceRoot":"","sources":["../../../src/components/ModelLimitsSection/ModelLimitsRow.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EACL,aAAa,IAAI,iBAAiB,EAClC,iBAAiB,EAEjB,qBAAqB,EACtB,MAAM,iCAAiC,CAAC;AAIzC,oGAAoG;AACpG,eAAO,MAAM,yBAAyB,sDACe,CAAC;AAkCtD,kCAAkC;AAClC,MAAM,WAAW,mBAAmB;IAClC,iCAAiC;IACjC,GAAG,EAAE,iBAAiB,CAAC;IACvB,6CAA6C;IAC7C,MAAM,EAAE,iBAAiB,CAAC;IAC1B,kCAAkC;IAClC,UAAU,EAAE,qBAAqB,CAAC;IAClC,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,2GAA2G;AAC3G,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAoHlD,CAAC"}
package/index.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { DeploymentIcon as e, InitialsAvatar as t, PanelEmptyState as n, buildCssVars as r, mergeClasses as i } from "@epam/ai-dial-chat-shared";
2
- import { ElementSize as a, ProgressBar as o, SegmentedControl as s } from "@epam/ai-dial-ui-kit";
3
- import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
4
- import { createElement as d, forwardRef as f } from "react";
2
+ import { ElementSize as a, EllipsisTooltip as o, ProgressBar as s, SegmentedControl as c } from "@epam/ai-dial-ui-kit";
3
+ import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
4
+ import { createElement as f, forwardRef as p } from "react";
5
5
  //#region src/models/usage-limit-card-props.ts
6
- var p = /* @__PURE__ */ function(e) {
6
+ var m = /* @__PURE__ */ function(e) {
7
7
  return e.Default = "default", e.RunningLow = "runningLow", e.LimitReached = "limitReached", e;
8
- }({}), m = {
8
+ }({}), h = {
9
9
  card: "_card_1b3el_1",
10
10
  title: "_title_1b3el_5",
11
11
  secondaryAmount: "_secondaryAmount_1b3el_9",
@@ -21,85 +21,85 @@ var p = /* @__PURE__ */ function(e) {
21
21
  defaultBadge: "_defaultBadge_1b3el_54",
22
22
  warningBadge: "_warningBadge_1b3el_59",
23
23
  errorBadge: "_errorBadge_1b3el_64"
24
- }, h = (e, t) => {
24
+ }, g = (e, t) => {
25
25
  switch (e) {
26
- case p.RunningLow: return t.runningLowBadgeLabel;
27
- case p.LimitReached: return t.limitReachedBadgeLabel;
28
- case p.Default: return t.defaultBadgeLabel;
26
+ case m.RunningLow: return t.runningLowBadgeLabel;
27
+ case m.LimitReached: return t.limitReachedBadgeLabel;
28
+ case m.Default: return t.defaultBadgeLabel;
29
29
  }
30
- }, g = ({ data: e, labels: t, styles: n }) => {
31
- let { colors: s, typography: d } = n ?? {}, { titleClassName: f = "dial-body-semi-text", amountClassName: g = "dial-display1-text", secondaryAmountClassName: _ = "dial-small-text", badgeClassName: v = "dial-caption-lead-semi-text", usedPercentLabelClassName: y = "dial-small-text" } = d ?? {}, b = r({
32
- "--uld-card-bg": s?.cardBackground,
33
- "--uld-title": s?.titleColor,
34
- "--uld-default-accent": s?.defaultAccentColor,
35
- "--uld-default-progress": s?.defaultProgressColor,
36
- "--uld-warning-accent": s?.warningAccentColor,
37
- "--uld-warning-progress": s?.warningProgressColor,
38
- "--uld-error-accent": s?.errorAccentColor,
39
- "--uld-error-progress": s?.errorProgressColor,
40
- "--uld-secondary-amount": s?.secondaryAmountColor,
41
- "--uld-progress-track": s?.progressTrackColor,
42
- "--uld-default-badge-bg": s?.defaultBadgeBackground,
43
- "--uld-default-badge-text": s?.defaultBadgeColor,
44
- "--uld-warning-badge-bg": s?.warningBadgeBackground,
45
- "--uld-warning-badge-text": s?.warningBadgeColor,
46
- "--uld-error-badge-bg": s?.errorBadgeBackground,
47
- "--uld-error-badge-text": s?.errorBadgeColor,
48
- "--uld-used-percent-label": s?.usedPercentLabelColor
49
- }), x = h(e.status, t);
50
- return /* @__PURE__ */ u("div", {
51
- className: i("flex min-w-0 flex-col gap-4 rounded-xl px-6 py-5 shadow-md", m.card),
30
+ }, _ = ({ data: e, labels: t, styles: n }) => {
31
+ let { colors: o, typography: c } = n ?? {}, { titleClassName: f = "dial-body-semi-text", amountClassName: p = "dial-display1-text", secondaryAmountClassName: _ = "dial-small-text", badgeClassName: v = "dial-caption-lead-semi-text", usedPercentLabelClassName: y = "dial-small-text" } = c ?? {}, b = r({
32
+ "--uld-card-bg": o?.cardBackground,
33
+ "--uld-title": o?.titleColor,
34
+ "--uld-default-accent": o?.defaultAccentColor,
35
+ "--uld-default-progress": o?.defaultProgressColor,
36
+ "--uld-warning-accent": o?.warningAccentColor,
37
+ "--uld-warning-progress": o?.warningProgressColor,
38
+ "--uld-error-accent": o?.errorAccentColor,
39
+ "--uld-error-progress": o?.errorProgressColor,
40
+ "--uld-secondary-amount": o?.secondaryAmountColor,
41
+ "--uld-progress-track": o?.progressTrackColor,
42
+ "--uld-default-badge-bg": o?.defaultBadgeBackground,
43
+ "--uld-default-badge-text": o?.defaultBadgeColor,
44
+ "--uld-warning-badge-bg": o?.warningBadgeBackground,
45
+ "--uld-warning-badge-text": o?.warningBadgeColor,
46
+ "--uld-error-badge-bg": o?.errorBadgeBackground,
47
+ "--uld-error-badge-text": o?.errorBadgeColor,
48
+ "--uld-used-percent-label": o?.usedPercentLabelColor
49
+ }), x = g(e.status, t);
50
+ return /* @__PURE__ */ d("div", {
51
+ className: i("flex min-w-0 flex-col gap-4 rounded-xl px-6 py-5 shadow-md", h.card),
52
52
  style: b,
53
53
  role: "group",
54
54
  "aria-label": `${e.title}, ${e.periodDescription}`,
55
- children: [/* @__PURE__ */ u("div", {
55
+ children: [/* @__PURE__ */ d("div", {
56
56
  className: "flex items-center justify-between gap-2",
57
- children: [/* @__PURE__ */ l("p", {
58
- className: i("m-0", f, m.title),
57
+ children: [/* @__PURE__ */ u("p", {
58
+ className: i("m-0", f, h.title),
59
59
  children: e.title
60
- }), /* @__PURE__ */ l("span", {
61
- className: i("shrink-0 rounded-full px-2 py-1", v, e.status === p.Default && m.defaultBadge, e.status === p.RunningLow && m.warningBadge, e.status === p.LimitReached && m.errorBadge),
60
+ }), /* @__PURE__ */ u("span", {
61
+ className: i("shrink-0 rounded-full px-2 py-1", v, e.status === m.Default && h.defaultBadge, e.status === m.RunningLow && h.warningBadge, e.status === m.LimitReached && h.errorBadge),
62
62
  children: x
63
63
  })]
64
- }), /* @__PURE__ */ u("div", {
64
+ }), /* @__PURE__ */ d("div", {
65
65
  className: "flex flex-col gap-2",
66
- children: [/* @__PURE__ */ u("p", {
66
+ children: [/* @__PURE__ */ d("p", {
67
67
  className: "m-0 flex flex-wrap items-baseline gap-2",
68
- children: [/* @__PURE__ */ l("span", {
69
- className: i(g, m.amount, e.status === p.Default && m.defaultAccent, e.status === p.RunningLow && m.warningAccent, e.status === p.LimitReached && m.errorAccent),
68
+ children: [/* @__PURE__ */ u("span", {
69
+ className: i(p, h.amount, e.status === m.Default && h.defaultAccent, e.status === m.RunningLow && h.warningAccent, e.status === m.LimitReached && h.errorAccent),
70
70
  children: e.usedLabel
71
- }), !e.isUnlimited && e.totalLabel != null && /* @__PURE__ */ l("span", {
72
- className: i(_, m.secondaryAmount),
71
+ }), !e.isUnlimited && e.totalLabel != null && /* @__PURE__ */ u("span", {
72
+ className: i(_, h.secondaryAmount),
73
73
  children: t.usedOfTotalLabel({ total: e.totalLabel })
74
74
  })]
75
- }), !e.isUnlimited && e.usedPercent != null && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(o, {
75
+ }), !e.isUnlimited && e.usedPercent != null && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(s, {
76
76
  value: Math.min(e.usedPercent, 100),
77
77
  max: 100,
78
78
  size: a.Small,
79
- className: i("!h-1 w-full", m.progressTrack, e.status === p.Default && m.progressFillDefault, e.status === p.RunningLow && m.progressFillWarning, e.status === p.LimitReached && m.progressFillDanger),
79
+ className: i("!h-1 w-full", h.progressTrack, e.status === m.Default && h.progressFillDefault, e.status === m.RunningLow && h.progressFillWarning, e.status === m.LimitReached && h.progressFillDanger),
80
80
  "aria-label": e.title,
81
81
  "aria-valuetext": e.progressAriaLabel
82
- }), /* @__PURE__ */ u("div", {
82
+ }), /* @__PURE__ */ d("div", {
83
83
  className: "flex items-center justify-between gap-2",
84
- children: [e.remainingLabel != null && /* @__PURE__ */ l("span", {
85
- className: i(_, m.secondaryAmount),
84
+ children: [e.remainingLabel != null && /* @__PURE__ */ u("span", {
85
+ className: i(_, h.secondaryAmount),
86
86
  children: t.remainingCaptionLabel({ remaining: e.remainingLabel })
87
- }), /* @__PURE__ */ l("span", {
88
- className: i("ms-auto", y, m.usedPercentLabel),
87
+ }), /* @__PURE__ */ u("span", {
88
+ className: i("ms-auto", y, h.usedPercentLabel),
89
89
  children: t.usedPercentLabel({ percent: Math.min(Math.round(e.usedPercent), 100) })
90
90
  })]
91
91
  })] })]
92
92
  })]
93
93
  });
94
- }, _ = ({ cards: e, labels: t, styles: n }) => e.length === 0 ? null : /* @__PURE__ */ l("div", {
94
+ }, v = ({ cards: e, labels: t, styles: n }) => e.length === 0 ? null : /* @__PURE__ */ u("div", {
95
95
  className: "grid grid-cols-1 gap-4 desktop:grid-cols-[repeat(var(--uld-card-count),minmax(0,1fr))]",
96
96
  style: { "--uld-card-count": e.length },
97
- children: e.map((e) => /* @__PURE__ */ l(g, {
97
+ children: e.map((e) => /* @__PURE__ */ u(_, {
98
98
  data: e,
99
99
  labels: t,
100
100
  styles: n
101
101
  }, e.title))
102
- }), v = {
102
+ }), y = {
103
103
  outline: {
104
104
  xmlns: "http://www.w3.org/2000/svg",
105
105
  width: 24,
@@ -119,10 +119,10 @@ var p = /* @__PURE__ */ function(e) {
119
119
  fill: "currentColor",
120
120
  stroke: "none"
121
121
  }
122
- }, y = ((e, t, n, r) => {
123
- let i = f(({ color: n = "currentColor", size: i = 24, stroke: a = 2, title: o, className: s, children: c, ...l }, u) => d("svg", {
122
+ }, b = ((e, t, n, r) => {
123
+ let i = p(({ color: n = "currentColor", size: i = 24, stroke: a = 2, title: o, className: s, children: c, ...l }, u) => f("svg", {
124
124
  ref: u,
125
- ...v[e],
125
+ ...y[e],
126
126
  width: i,
127
127
  height: i,
128
128
  className: [
@@ -136,8 +136,8 @@ var p = /* @__PURE__ */ function(e) {
136
136
  },
137
137
  ...l
138
138
  }, [
139
- o && d("title", { key: "svg-title" }, o),
140
- ...r.map(([e, t]) => d(e, t)),
139
+ o && f("title", { key: "svg-title" }, o),
140
+ ...r.map(([e, t]) => f(e, t)),
141
141
  ...Array.isArray(c) ? c : [c]
142
142
  ]));
143
143
  return i.displayName = `${n}`, i;
@@ -158,13 +158,13 @@ var p = /* @__PURE__ */ function(e) {
158
158
  d: "M4 20h14",
159
159
  key: "svg-3"
160
160
  }]
161
- ]), b = /* @__PURE__ */ function(e) {
161
+ ]), x = /* @__PURE__ */ function(e) {
162
162
  return e.WithinLimits = "within-limits", e.RunningLow = "running-low", e.LimitReached = "limit-reached", e.NoLimit = "no-limit", e.Unavailable = "unavailable", e;
163
- }({}), x = /* @__PURE__ */ function(e) {
164
- return e.LastMinute = "last-minute", e.LastHour = "last-hour", e.Last24Hours = "last-24-hours", e.Last7Days = "last-7-days", e.Last30Days = "last-30-days", e;
165
163
  }({}), S = /* @__PURE__ */ function(e) {
164
+ return e.LastMinute = "last-minute", e.LastHour = "last-hour", e.Last24Hours = "last-24-hours", e.Last7Days = "last-7-days", e.Last30Days = "last-30-days", e;
165
+ }({}), C = /* @__PURE__ */ function(e) {
166
166
  return e.Finite = "finite", e.Unlimited = "unlimited", e.Unavailable = "unavailable", e;
167
- }({}), C = {
167
+ }({}), w = {
168
168
  container: "_container_bw9jz_1",
169
169
  heading: "_heading_bw9jz_5",
170
170
  headingCount: "_headingCount_bw9jz_9",
@@ -186,151 +186,151 @@ var p = /* @__PURE__ */ function(e) {
186
186
  warningBadge: "_warningBadge_bw9jz_84",
187
187
  errorBadge: "_errorBadge_bw9jz_89",
188
188
  neutralStatus: "_neutralStatus_bw9jz_94"
189
- }, w = (e) => {
189
+ }, T = (e) => {
190
190
  switch (e) {
191
- case b.RunningLow: return C.progressFillWarning;
192
- case b.LimitReached: return C.progressFillError;
193
- default: return C.progressFillDefault;
191
+ case x.RunningLow: return w.progressFillWarning;
192
+ case x.LimitReached: return w.progressFillError;
193
+ default: return w.progressFillDefault;
194
194
  }
195
- }, T = ({ cell: e, mobileColumnLabel: t, labels: n, typography: r }) => {
196
- let { valueClassName: s = "dial-small-text", secondaryValueClassName: c = "dial-tiny-text" } = r, d = /* @__PURE__ */ l("span", {
197
- className: i(s, C.value),
195
+ }, E = ({ cell: e, mobileColumnLabel: t, labels: n, typography: r }) => {
196
+ let { valueClassName: o = "dial-small-text", secondaryValueClassName: c = "dial-tiny-text" } = r, l = /* @__PURE__ */ u("span", {
197
+ className: i(o, w.value),
198
198
  children: e.usedLabel
199
199
  });
200
- return /* @__PURE__ */ u("div", {
200
+ return /* @__PURE__ */ d("div", {
201
201
  role: "cell",
202
202
  className: "flex min-w-0 flex-col gap-1 py-2 desktop:py-0",
203
203
  children: [
204
- /* @__PURE__ */ l("span", {
205
- className: i("dial-caption-lead-semi-text mobile:block desktop:hidden", C.mobileColumnLabel),
204
+ /* @__PURE__ */ u("span", {
205
+ className: i("dial-caption-lead-semi-text mobile:block desktop:hidden", w.mobileColumnLabel),
206
206
  children: t
207
207
  }),
208
- e.kind === S.Unlimited && /* @__PURE__ */ u("div", {
208
+ e.kind === C.Unlimited && /* @__PURE__ */ d("div", {
209
209
  className: "flex min-w-0 flex-col gap-1",
210
- children: [d, /* @__PURE__ */ l("span", {
211
- className: i(c, C.secondaryValue),
210
+ children: [l, /* @__PURE__ */ u("span", {
211
+ className: i(c, w.secondaryValue),
212
212
  children: n.noLimitLabel
213
213
  })]
214
214
  }),
215
- e.kind === S.Unavailable && /* @__PURE__ */ l("span", {
216
- className: i(c, C.secondaryValue),
215
+ e.kind === C.Unavailable && /* @__PURE__ */ u("span", {
216
+ className: i(c, w.secondaryValue),
217
217
  children: n.unavailableLabel
218
218
  }),
219
- e.kind === S.Finite && /* @__PURE__ */ u("div", {
219
+ e.kind === C.Finite && /* @__PURE__ */ d("div", {
220
220
  className: "flex min-w-0 flex-col gap-3",
221
- children: [/* @__PURE__ */ u("div", {
221
+ children: [/* @__PURE__ */ d("div", {
222
222
  className: "flex min-w-0 items-baseline gap-1 whitespace-nowrap",
223
- children: [d, /* @__PURE__ */ u("span", {
224
- className: i(s, C.secondaryValue),
223
+ children: [l, /* @__PURE__ */ d("span", {
224
+ className: i(o, w.secondaryValue),
225
225
  children: ["/ ", e.totalLabel]
226
226
  })]
227
- }), /* @__PURE__ */ l(o, {
227
+ }), /* @__PURE__ */ u(s, {
228
228
  value: Math.min(e.usedPercent ?? 0, 100),
229
229
  max: 100,
230
230
  size: a.Small,
231
- className: i("!h-1 w-full", C.progressTrack, w(e.status)),
231
+ className: i("!h-1 w-full", w.progressTrack, T(e.status)),
232
232
  "aria-label": t,
233
233
  "aria-valuetext": e.ariaLabel
234
234
  })]
235
235
  })
236
236
  ]
237
237
  });
238
- }, E = "desktop:grid-cols-[repeat(4,minmax(0,1fr))_10rem]", D = (e) => {
238
+ }, D = "desktop:grid-cols-[repeat(4,minmax(0,1fr))_10rem]", O = (e) => {
239
239
  switch (e) {
240
- case b.WithinLimits: return C.defaultBadge;
241
- case b.RunningLow: return C.warningBadge;
242
- case b.LimitReached: return C.errorBadge;
243
- case b.NoLimit:
244
- case b.Unavailable: return;
240
+ case x.WithinLimits: return w.defaultBadge;
241
+ case x.RunningLow: return w.warningBadge;
242
+ case x.LimitReached: return w.errorBadge;
243
+ case x.NoLimit:
244
+ case x.Unavailable: return;
245
245
  }
246
- }, O = (e, t) => {
246
+ }, k = (e, t) => {
247
247
  switch (e) {
248
- case b.WithinLimits: return t.withinLimitsBadgeLabel;
249
- case b.RunningLow: return t.runningLowBadgeLabel;
250
- case b.LimitReached: return t.limitReachedBadgeLabel;
251
- case b.NoLimit: return t.noLimitBadgeLabel;
252
- case b.Unavailable: return t.unavailableBadgeLabel;
248
+ case x.WithinLimits: return t.withinLimitsBadgeLabel;
249
+ case x.RunningLow: return t.runningLowBadgeLabel;
250
+ case x.LimitReached: return t.limitReachedBadgeLabel;
251
+ case x.NoLimit: return t.noLimitBadgeLabel;
252
+ case x.Unavailable: return t.unavailableBadgeLabel;
253
253
  }
254
- }, k = ({ row: n, labels: r, typography: a, avatarSize: o }) => {
255
- let { nameClassName: s = "dial-small-semi-text", modelTypeClassName: c = "dial-caption-lead-semi-text", versionClassName: d = "dial-small-text", valueClassName: f = "dial-small-text", badgeClassName: p = "dial-caption-lead-semi-text" } = a, m = n.status !== b.NoLimit && n.status !== b.Unavailable;
256
- return /* @__PURE__ */ u("div", {
254
+ }, A = ({ row: n, labels: r, typography: a, avatarSize: s }) => {
255
+ let { nameClassName: c = "dial-small-semi-text", modelTypeClassName: l = "dial-caption-lead-semi-text", versionClassName: f = "dial-small-text", valueClassName: p = "dial-small-text", badgeClassName: m = "dial-caption-lead-semi-text" } = a, h = n.status !== x.NoLimit && n.status !== x.Unavailable;
256
+ return /* @__PURE__ */ d("div", {
257
257
  role: "row",
258
- className: i("grid grid-cols-1 gap-2 px-4 py-3 desktop:min-h-16 desktop:items-start desktop:gap-4 desktop:px-6", E, C.row),
258
+ className: i("grid grid-cols-1 gap-2 px-4 py-3 desktop:min-h-16 desktop:items-start desktop:gap-4 desktop:px-6", D, w.row),
259
259
  children: [
260
- /* @__PURE__ */ u("div", {
260
+ /* @__PURE__ */ d("div", {
261
261
  role: "cell",
262
262
  className: "flex min-w-0 items-center gap-3 overflow-hidden",
263
- children: [/* @__PURE__ */ l("div", {
263
+ children: [/* @__PURE__ */ u("div", {
264
264
  className: "shrink-0",
265
- children: /* @__PURE__ */ l(e, {
265
+ children: /* @__PURE__ */ u(e, {
266
266
  src: n.avatarSrc,
267
- size: o,
267
+ size: s,
268
268
  initialsName: n.name,
269
- fallback: /* @__PURE__ */ l(t, {
269
+ fallback: /* @__PURE__ */ u(t, {
270
270
  name: n.name,
271
- size: o,
271
+ size: s,
272
272
  className: "!rounded-xl",
273
273
  textClassName: "!text-lg"
274
274
  }),
275
275
  styles: { badgeClassName: "!rounded-xl" }
276
276
  })
277
- }), /* @__PURE__ */ u("div", {
277
+ }), /* @__PURE__ */ d("div", {
278
278
  className: "flex min-w-0 flex-1 flex-col gap-0.5 overflow-hidden",
279
- children: [/* @__PURE__ */ l("span", {
280
- className: i(c, C.modelType),
279
+ children: [/* @__PURE__ */ u("span", {
280
+ className: i(l, w.modelType),
281
281
  children: r.modelTypeLabel
282
- }), /* @__PURE__ */ u("div", {
282
+ }), /* @__PURE__ */ d("div", {
283
283
  className: "flex min-w-0 items-center gap-1 overflow-hidden",
284
- children: [/* @__PURE__ */ l("span", {
285
- className: i("min-w-0 flex-1 truncate", s, C.name),
284
+ children: [/* @__PURE__ */ u("span", {
285
+ className: i("min-w-0 flex-1 truncate", c, w.name),
286
286
  title: n.name,
287
287
  children: n.name
288
- }), n.version != null && /* @__PURE__ */ l("span", {
289
- className: i("shrink-0", d, C.version),
290
- children: n.version
288
+ }), n.version != null && /* @__PURE__ */ u(o, {
289
+ text: n.version,
290
+ className: i("max-w-[30%] shrink-0", f, w.version)
291
291
  })]
292
292
  })]
293
293
  })]
294
294
  }),
295
- /* @__PURE__ */ l(T, {
295
+ /* @__PURE__ */ u(E, {
296
296
  cell: n.cost,
297
297
  mobileColumnLabel: r.costColumnLabel,
298
298
  labels: r,
299
299
  typography: a
300
300
  }),
301
- /* @__PURE__ */ l(T, {
301
+ /* @__PURE__ */ u(E, {
302
302
  cell: n.tokens,
303
303
  mobileColumnLabel: r.tokensColumnLabel,
304
304
  labels: r,
305
305
  typography: a
306
306
  }),
307
- /* @__PURE__ */ l(T, {
307
+ /* @__PURE__ */ u(E, {
308
308
  cell: n.requests,
309
309
  mobileColumnLabel: r.requestsColumnLabel,
310
310
  labels: r,
311
311
  typography: a
312
312
  }),
313
- /* @__PURE__ */ l("div", {
313
+ /* @__PURE__ */ u("div", {
314
314
  role: "cell",
315
315
  className: "flex items-center",
316
- children: m ? /* @__PURE__ */ l("span", {
317
- className: i("inline-flex h-6 shrink-0 items-center rounded-full px-2", p, D(n.status)),
318
- children: O(n.status, r)
319
- }) : /* @__PURE__ */ l("span", {
320
- className: i(f, C.neutralStatus),
321
- children: O(n.status, r)
316
+ children: h ? /* @__PURE__ */ u("span", {
317
+ className: i("inline-flex h-6 shrink-0 items-center rounded-full px-2", m, O(n.status)),
318
+ children: k(n.status, r)
319
+ }) : /* @__PURE__ */ u("span", {
320
+ className: i(p, w.neutralStatus),
321
+ children: k(n.status, r)
322
322
  })
323
323
  })
324
324
  ]
325
325
  });
326
- }, A = 40, j = [
327
- x.LastMinute,
328
- x.LastHour,
329
- x.Last24Hours,
330
- x.Last7Days,
331
- x.Last30Days
332
- ], M = "max-w-full overflow-x-auto overflow-y-hidden [&>button]:flex-none mobile:[&>button]:h-11", N = ({ rows: e, period: t, onPeriodChange: a, labels: o, styles: d, emptyStateIconSize: f = 48 }) => {
333
- let { colors: p, typography: m = {} } = d ?? {}, { headingClassName: h = "dial-body-semi-text", headingCountClassName: g = "dial-tiny-semi-text", columnHeaderClassName: _ = "dial-caption-lead-semi-text" } = m, v = r({
326
+ }, j = 40, M = [
327
+ S.LastMinute,
328
+ S.LastHour,
329
+ S.Last24Hours,
330
+ S.Last7Days,
331
+ S.Last30Days
332
+ ], N = "max-w-full overflow-x-auto overflow-y-hidden [&>button]:flex-none mobile:[&>button]:h-11", P = ({ rows: e, period: t, onPeriodChange: a, labels: o, styles: s, emptyStateIconSize: f = 48 }) => {
333
+ let { colors: p, typography: m = {} } = s ?? {}, { headingClassName: h = "dial-body-semi-text", headingCountClassName: g = "dial-tiny-semi-text", columnHeaderClassName: _ = "dial-caption-lead-semi-text" } = m, v = r({
334
334
  "--mls-container-bg": p?.containerBackground,
335
335
  "--mls-heading": p?.headingColor,
336
336
  "--mls-heading-count": p?.headingCountColor,
@@ -352,70 +352,70 @@ var p = /* @__PURE__ */ function(e) {
352
352
  "--mls-badge-error-bg": p?.errorBadgeBackground,
353
353
  "--mls-badge-error-text": p?.errorBadgeColor,
354
354
  "--mls-badge-neutral-text": p?.neutralBadgeColor
355
- }), b = `${o.headingLabel} ${e.length}`;
356
- return /* @__PURE__ */ u("div", {
355
+ }), y = `${o.headingLabel} ${e.length}`;
356
+ return /* @__PURE__ */ d("div", {
357
357
  className: "flex flex-col gap-4",
358
358
  style: v,
359
- children: [/* @__PURE__ */ u("div", {
359
+ children: [/* @__PURE__ */ d("div", {
360
360
  className: "flex min-h-10 flex-wrap items-center justify-between gap-2",
361
- children: [/* @__PURE__ */ u("h3", {
361
+ children: [/* @__PURE__ */ d("h3", {
362
362
  className: "m-0 flex items-center gap-2",
363
- children: [/* @__PURE__ */ l("span", {
364
- className: i(h, C.heading),
363
+ children: [/* @__PURE__ */ u("span", {
364
+ className: i(h, w.heading),
365
365
  children: o.headingLabel
366
- }), /* @__PURE__ */ l("span", {
367
- className: i(g, C.headingCount),
366
+ }), /* @__PURE__ */ u("span", {
367
+ className: i(g, w.headingCount),
368
368
  children: e.length
369
369
  })]
370
- }), /* @__PURE__ */ l(s, {
370
+ }), /* @__PURE__ */ u(c, {
371
371
  "aria-label": o.periodSelectorAriaLabel,
372
372
  value: t,
373
373
  onChange: a,
374
- className: i(M, C.periodSelector),
375
- items: j.map((e) => ({
374
+ className: i(N, w.periodSelector),
375
+ items: M.map((e) => ({
376
376
  value: e,
377
377
  label: o.periodLabels[e]
378
378
  }))
379
379
  })]
380
- }), /* @__PURE__ */ l("div", {
380
+ }), /* @__PURE__ */ u("div", {
381
381
  role: "table",
382
- "aria-label": b,
383
- className: i("overflow-hidden rounded-xl shadow-md", C.container),
384
- children: e.length === 0 ? /* @__PURE__ */ l("div", {
382
+ "aria-label": y,
383
+ className: i("overflow-hidden rounded-xl shadow-md", w.container),
384
+ children: e.length === 0 ? /* @__PURE__ */ u("div", {
385
385
  className: "flex items-center justify-center px-6 py-10",
386
- children: /* @__PURE__ */ l(n, {
387
- icon: /* @__PURE__ */ l(y, {
386
+ children: /* @__PURE__ */ u(n, {
387
+ icon: /* @__PURE__ */ u(b, {
388
388
  "aria-hidden": !0,
389
389
  size: f,
390
390
  stroke: 1
391
391
  }),
392
392
  label: o.emptyStateLabel
393
393
  })
394
- }) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
394
+ }) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
395
395
  role: "row",
396
- className: i("hidden gap-4 px-6 py-3 desktop:grid", E, C.headerRow),
396
+ className: i("hidden gap-4 px-6 py-3 desktop:grid", D, w.headerRow),
397
397
  children: [
398
398
  o.itemColumnLabel,
399
399
  o.costColumnLabel,
400
400
  o.tokensColumnLabel,
401
401
  o.requestsColumnLabel,
402
402
  o.statusColumnLabel
403
- ].map((e) => /* @__PURE__ */ l("span", {
403
+ ].map((e) => /* @__PURE__ */ u("span", {
404
404
  role: "columnheader",
405
- className: i(_, C.columnHeader),
405
+ className: i(_, w.columnHeader),
406
406
  children: e
407
407
  }, e))
408
- }), /* @__PURE__ */ l("div", {
408
+ }), /* @__PURE__ */ u("div", {
409
409
  role: "rowgroup",
410
- children: e.map((e) => /* @__PURE__ */ l(k, {
410
+ children: e.map((e) => /* @__PURE__ */ u(A, {
411
411
  row: e,
412
412
  labels: o,
413
413
  typography: m,
414
- avatarSize: A
414
+ avatarSize: j
415
415
  }, e.id))
416
416
  })] })
417
417
  })]
418
418
  });
419
419
  };
420
420
  //#endregion
421
- export { S as ModelLimitMetricKind, b as ModelLimitStatus, x as ModelLimitsPeriod, N as ModelLimitsSection, g as UsageLimitCard, _ as UsageLimitCardGroup, p as UsageLimitStatus };
421
+ export { C as ModelLimitMetricKind, x as ModelLimitStatus, S as ModelLimitsPeriod, P as ModelLimitsSection, _ as UsageLimitCard, v as UsageLimitCardGroup, m as UsageLimitStatus };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-usage-dashboard",
3
3
  "description": "Presentational aggregate cost-limit cards for the Usage settings dashboard",
4
- "version": "1.1.0-dev.245",
4
+ "version": "1.1.0-dev.248",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -16,7 +16,7 @@
16
16
  }
17
17
  },
18
18
  "peerDependencies": {
19
- "@epam/ai-dial-chat-shared": "1.1.0-dev.245",
19
+ "@epam/ai-dial-chat-shared": "1.1.0-dev.248",
20
20
  "@epam/ai-dial-ui-kit": "^0.14.0-dev.4",
21
21
  "@tabler/icons-react": "^3.44.0",
22
22
  "react": "^19.2.7"