@epam/ai-dial-ui-kit 0.16.0-dev.7 → 0.16.0-dev.70

package/dist/MarkdownEditor-5Jq0NTTP.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),k=require("@uiw/react-md-editor"),f=require("./editors.cjs"),O=require("./icon-4D9xu6E_.cjs"),o=require("@tabler/icons-react");function p(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(s,r,a.get?a:{enumerable:!0,get:()=>n[r]})}}return s.default=n,Object.freeze(s)}const C=p(k),v=O.DIAL_ICON_SIZE.SM,t={size:v,stroke:O.DIAL_KIT_ICON_STROKE},i=(n,s)=>({...n,icon:s}),E=()=>{const{bold:n,code:s,divider:r,group:a,heading1:c,heading2:l,heading3:u,italic:m,link:I,orderedListCommand:x,quote:d,strikethrough:g,table:j,unorderedListCommand:b}=C;return[i(n,e.jsx(o.IconBold,{...t})),i(m,e.jsx(o.IconItalic,{...t})),i(g,e.jsx(o.IconStrikethrough,{...t})),r,a([c,l,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,i(b,e.jsx(o.IconList,{...t})),i(x,e.jsx(o.IconListNumbers,{...t})),r,i(d,e.jsx(o.IconQuote,{...t})),i(I,e.jsx(o.IconLink,{...t})),i(s,e.jsx(o.IconCode,{...t})),r,i(j,e.jsx(o.IconTable,{...t}))]},L=()=>{const{codeEdit:n,codeLive:s,codePreview:r,divider:a,fullscreen:c}=C;return[i(n,e.jsx(o.IconPencil,{...t})),i(s,e.jsx(o.IconLayoutColumns,{...t})),i(r,e.jsx(o.IconEye,{...t})),a,i(c,e.jsx(o.IconMaximize,{...t}))]},M=({value:n,onChange:s,height:r=300,theme:a=f.EditorThemes.light,className:c,placeholder:l,defaultPreview:u="edit",id:m,ariaLabel:I,ariaDescribedBy:x,invalid:d=!1,showDragbar:g=!0})=>{const j=h.useMemo(()=>E(),[]),b=h.useMemo(()=>L(),[]);return e.jsx("div",{"data-color-mode":a,className:O.mergeClasses("dial-kit-markdown-editor",d&&"dial-kit-markdown-editor-invalid",c),children:e.jsx(k,{value:n,onChange:_=>s?.(_||""),height:r,preview:u,visibleDragbar:g,commands:j,extraCommands:b,textareaProps:{placeholder:l,id:m,"aria-label":I,"aria-describedby":x,"aria-invalid":d||void 0}})})};exports.MarkdownEditor=M;

package/dist/_virtual/_commonjsHelpers.js

@@ -1,31 +1,6 @@
-function u(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
-}
-function c(e) {
-  if (Object.prototype.hasOwnProperty.call(e, "__esModule")) return e;
-  var n = e.default;
-  if (typeof n == "function") {
-    var t = function r() {
-      var o = !1;
-      try {
-        o = this instanceof r;
-      } catch {
-      }
-      return o ? Reflect.construct(n, arguments, this.constructor) : n.apply(this, arguments);
-    };
-    t.prototype = n.prototype;
-  } else t = {};
-  return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(e).forEach(function(r) {
-    var o = Object.getOwnPropertyDescriptor(e, r);
-    Object.defineProperty(t, r, o.get ? o : {
-      enumerable: !0,
-      get: function() {
-        return e[r];
-      }
-    });
-  }), t;
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
 export {
-  c as getAugmentedNamespace,
-  u as getDefaultExportFromCjs
+  e as getDefaultExportFromCjs
 };

package/dist/_virtual/index.js

@@ -1,5 +1,7 @@
-import { __require as e } from "../node_modules/mime-types/index.js";
-var m = e();
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/fast-deep-equal/index.js";
+var t = r();
+const p = /* @__PURE__ */ e(t);
 export {
-  m
+  p as default
 };

package/dist/components/New/Analytics/Bar/Bar.js

@@ -0,0 +1,104 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { Badge as S } from "../../Badge/Badge.js";
+import { Spinner as _ } from "../../../Spinner/Spinner.js";
+import { DIAL_KIT_CLASS as h } from "../../../../constants/public-class-names.js";
+import { BadgeColor as R, BadgeVariant as T } from "../../../../types/badge.js";
+import { mergeClasses as r } from "../../../../utils/merge-classes.js";
+import { getAnalyticsBarColor as j, DEFAULT_ANALYTICS_BAR_COLOR_MAP as k, getAnalyticsBarRatio as F } from "./utils.js";
+const K = ({
+  value: e,
+  maxValue: c = 1,
+  error: l,
+  isLoading: t,
+  title: i,
+  valueLabel: u,
+  colorMap: w = k,
+  className: m,
+  titleClassName: y,
+  valueClassName: v,
+  inline: o,
+  ariaLabel: g
+}) => {
+  const n = e == null, N = !!(l || t || !n), d = F(n ? 0 : e, c), b = j(d, w), A = u ?? (n ? "—" : e), B = g ?? (typeof i == "string" ? i : void 0), C = l || t, f = l ? /* @__PURE__ */ a(
+    S,
+    {
+      label: "Error",
+      variant: T.Filled,
+      color: R.Red,
+      textClassName: "dial-tiny-semi-text"
+    }
+  ) : t ? /* @__PURE__ */ a(_, { size: 18, fullWidth: !1 }) : /* @__PURE__ */ a(
+    "span",
+    {
+      className: r(
+        "shrink-0 tabular-nums text-end",
+        o ? "dial-small-text min-w-[5ch] text-primary" : "dial-small-semi-text text-primary",
+        v
+      ),
+      children: A
+    }
+  ), x = N ? /* @__PURE__ */ a(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": l || t || typeof e != "number" ? void 0 : e,
+      "aria-valuemin": 0,
+      "aria-valuemax": c,
+      "aria-label": B,
+      className: r(
+        "w-full overflow-hidden rounded-xs",
+        o ? "h-1" : "h-2",
+        l ? "bg-error" : "bg-layer-1"
+      ),
+      children: !C && /* @__PURE__ */ a(
+        "div",
+        {
+          className: "h-full rounded-xs transition-[width] duration-300",
+          style: { width: `${d * 100}%`, backgroundColor: b }
+        }
+      )
+    }
+  ) : null, p = /* @__PURE__ */ a(
+    "span",
+    {
+      className: r("dial-small-text text-primary", y),
+      children: i
+    }
+  );
+  return o ? /* @__PURE__ */ s(
+    "div",
+    {
+      className: r(
+        "flex flex-row items-center gap-2",
+        m,
+        h.analyticsBar
+      ),
+      children: [
+        /* @__PURE__ */ a("div", { className: "w-1/2 min-w-0", children: p }),
+        /* @__PURE__ */ s("div", { className: "flex w-1/2 flex-row items-center gap-2", children: [
+          /* @__PURE__ */ a("div", { className: "min-w-0 flex-1", children: x }),
+          f
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ s(
+    "div",
+    {
+      className: r(
+        "flex flex-col gap-1",
+        m,
+        h.analyticsBar
+      ),
+      children: [
+        /* @__PURE__ */ s("div", { className: "flex flex-row items-center justify-between gap-2", children: [
+          p,
+          f
+        ] }),
+        x
+      ]
+    }
+  );
+};
+export {
+  K as AnalyticsBar
+};

package/dist/components/New/Analytics/BarGroup/BarGroup.js

@@ -0,0 +1,143 @@
+import { jsx as e, jsxs as f, Fragment as H } from "react/jsx-runtime";
+import { Fragment as J } from "react";
+import { Accordion as Q } from "../../Accordion/Accordion.js";
+import { AnalyticsBar as b } from "../Bar/Bar.js";
+import { Tooltip as x } from "../../Tooltip/Tooltip.js";
+import { Spinner as R } from "../../../Spinner/Spinner.js";
+import { DIAL_KIT_CLASS as U } from "../../../../constants/public-class-names.js";
+import { mergeClasses as o } from "../../../../utils/merge-classes.js";
+const et = ({
+  title: g,
+  titleTooltip: h,
+  description: G,
+  data: i,
+  compareData: r,
+  compareLabels: m,
+  maxValue: p,
+  colorMap: u,
+  defaultExpanded: I = !0,
+  nonCollapsible: K,
+  isLoading: T,
+  onBarClick: c,
+  inline: a,
+  barTitleClassName: N,
+  barValueClassName: _,
+  barClassName: v,
+  barDescriptions: C,
+  className: z
+}) => {
+  const E = Object.entries(i), P = a ? o("text-secondary", N) : N, j = m ? "dial-tiny-text text-secondary" : void 0, W = h ? /* @__PURE__ */ e(x, { tooltip: h, children: g }) : g, q = r ? [.../* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)])] : [], y = "cursor-pointer rounded-xs text-left focus-visible:outline focus-visible:outline-focus", A = "group flex flex-col gap-1.5", B = o(
+    "flex flex-col gap-1.5 pl-2",
+    c && "group-hover:bg-accent-primary-alpha group-focus-visible:bg-accent-primary-alpha",
+    v
+  );
+  return /* @__PURE__ */ e(
+    Q,
+    {
+      title: W,
+      description: G,
+      defaultExpanded: I,
+      nonCollapsible: K,
+      className: o(z, U.analyticsBarGroup),
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: o(
+            "flex flex-col",
+            r ? "gap-4" : a ? "gap-2" : "gap-3"
+          ),
+          children: T ? /* @__PURE__ */ e(R, { size: 18, fullWidth: !1, className: "self-center" }) : r ? q.map((t) => {
+            const l = t in i ? i[t] : null, n = t in r ? r[t] : null, s = typeof l == "number" && typeof n == "number" ? parseFloat((n - l).toFixed(3)) : null, F = s != null && s !== 0, L = F && s > 0, S = F ? L ? `+${s}` : String(s) : null, O = C?.[t], $ = /* @__PURE__ */ e("span", { className: "dial-small-text text-secondary", children: t }), w = /* @__PURE__ */ f(H, { children: [
+              /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
+                O ? /* @__PURE__ */ e(x, { tooltip: O, children: $ }) : $,
+                S != null && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: o(
+                      "dial-tiny-semi-text rounded-[120px] border border-transparent px-2",
+                      L ? "bg-success text-success" : "bg-error text-error"
+                    ),
+                    children: S
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ f("div", { className: B, children: [
+                /* @__PURE__ */ e(
+                  b,
+                  {
+                    title: m?.[0],
+                    value: l,
+                    maxValue: p,
+                    colorMap: u,
+                    inline: a,
+                    titleClassName: j,
+                    ariaLabel: t
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  b,
+                  {
+                    title: m?.[1],
+                    value: n,
+                    maxValue: p,
+                    colorMap: u,
+                    inline: a,
+                    titleClassName: j,
+                    ariaLabel: `${t} compare`
+                  }
+                )
+              ] })
+            ] });
+            return c ? /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => c(t, l),
+                className: o(
+                  A,
+                  y
+                ),
+                children: w
+              },
+              t
+            ) : /* @__PURE__ */ e("div", { className: A, children: w }, t);
+          }) : E.map(([t, l]) => {
+            const n = /* @__PURE__ */ e(
+              b,
+              {
+                title: t,
+                value: l,
+                maxValue: p,
+                colorMap: u,
+                inline: a,
+                titleClassName: P,
+                valueClassName: _,
+                className: v
+              }
+            ), d = c ? /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => c(t, l),
+                className: y,
+                children: n
+              }
+            ) : n, s = C?.[t];
+            return s ? /* @__PURE__ */ e(
+              x,
+              {
+                tooltip: s,
+                triggerClassName: "flex flex-col",
+                children: d
+              },
+              t
+            ) : /* @__PURE__ */ e(J, { children: d }, t);
+          })
+        }
+      )
+    }
+  );
+};
+export {
+  et as AnalyticsBarGroup
+};

package/dist/components/New/Analytics/Card/Card.js

@@ -0,0 +1,107 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { DIAL_KIT_CLASS as N } from "../../../../constants/public-class-names.js";
+import { Badge as g } from "../../Badge/Badge.js";
+import { BadgeColor as b, BadgeVariant as C } from "../../../../types/badge.js";
+import { EllipsisTooltip as x } from "../../EllipsisTooltip/EllipsisTooltip.js";
+import { Spinner as D } from "../../../Spinner/Spinner.js";
+import { AnalyticsCardVariant as o } from "../../../../types/analytics.js";
+import { mergeClasses as l } from "../../../../utils/merge-classes.js";
+const w = {
+  [o.Default]: {
+    container: "bg-layer-3",
+    title: "dial-small-text text-secondary",
+    value: "dial-display2-text text-primary",
+    compareDividerCell: "h-10",
+    showDescription: !0
+  },
+  [o.Compact]: {
+    container: "bg-layer-2",
+    title: "dial-tiny-text text-secondary",
+    value: "dial-body-semi-text text-primary",
+    compareDividerCell: "h-6",
+    showDescription: !1
+  }
+}, T = ({
+  title: d,
+  value: p,
+  description: r,
+  variant: y = o.Default,
+  error: i,
+  isLoading: n,
+  className: f,
+  delta: a,
+  deltaPositive: m,
+  deltaUnit: v,
+  compareValues: s
+}) => {
+  const t = w[y], h = m !== void 0 ? m : (a ?? 0) >= 0, u = a === void 0 ? null : `${a >= 0 ? `+${a}` : String(a)}${v ?? ""}`;
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: l(
+        "flex flex-col rounded-lg border border-secondary p-4",
+        i || n ? "gap-2" : "gap-1",
+        t.container,
+        f,
+        N.analyticsCard
+      ),
+      children: [
+        a !== void 0 ? /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("span", { className: t.title, children: d }),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: l(
+                "dial-tiny-semi-text rounded-[120px] border border-transparent px-2",
+                h ? "bg-success text-success" : "bg-error text-error"
+              ),
+              children: u
+            }
+          )
+        ] }) : /* @__PURE__ */ e("span", { className: t.title, children: d }),
+        i ? /* @__PURE__ */ e(
+          g,
+          {
+            label: "Error",
+            variant: C.Filled,
+            color: b.Red,
+            textClassName: "dial-tiny-semi-text",
+            className: "self-start"
+          }
+        ) : n ? /* @__PURE__ */ e(D, { size: 18, fullWidth: !1, className: "self-start" }) : s ? /* @__PURE__ */ c("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] gap-x-3 gap-y-0.5", children: [
+          /* @__PURE__ */ e(
+            x,
+            {
+              text: s[0].title,
+              className: "col-start-1 dial-tiny-text text-secondary"
+            }
+          ),
+          /* @__PURE__ */ e(
+            x,
+            {
+              text: s[1].title,
+              className: "col-start-3 dial-tiny-text text-secondary"
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: l("col-start-1 min-w-0", t.value), children: s[0].value }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: l(
+                "col-start-2 flex items-center self-start",
+                t.compareDividerCell
+              ),
+              children: /* @__PURE__ */ e("div", { className: "h-4 w-px bg-controls-disable-accent" })
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: l("col-start-3 min-w-0", t.value), children: s[1].value })
+        ] }) : /* @__PURE__ */ e("span", { className: t.value, children: p }),
+        !i && !n && t.showDescription && r != null && r !== !1 && /* @__PURE__ */ e("span", { className: "mt-auto dial-tiny-text text-secondary", children: r })
+      ]
+    }
+  );
+};
+export {
+  T as AnalyticsCard
+};

package/dist/components/New/Analytics/Histogram/Histogram.js

@@ -0,0 +1,212 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { DEFAULT_ANALYTICS_BAR_COLOR_MAP as Y } from "../Bar/utils.js";
+import { Tooltip as w } from "../../Tooltip/Tooltip.js";
+import { Spinner as k } from "../../../Spinner/Spinner.js";
+import { DIAL_KIT_CLASS as P } from "../../../../constants/public-class-names.js";
+import { TooltipPlacement as A } from "../../../../types/tooltip.js";
+import { mergeClasses as H } from "../../../../utils/merge-classes.js";
+import { buildHistogramColumns as T, formatHistogramColumnLabel as L, getHistogramYTicks as O, getHistogramYMax as R } from "./utils.js";
+const u = 128, D = (s, i) => {
+  const l = L(s, i);
+  return s === i ? `scored ${l}` : `scored between ${l}`;
+}, _ = (s, i, l, o, c) => /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+  s && /* @__PURE__ */ t("strong", { children: s }),
+  /* @__PURE__ */ n("span", { children: [
+    i,
+    " out of ",
+    l,
+    " ",
+    o
+  ] }),
+  /* @__PURE__ */ t("span", { children: D(c.from, c.to) })
+] }), q = ({
+  title: s,
+  values: i,
+  colorMap: l = Y,
+  valueTitle: o = "values",
+  showCount: c,
+  isLoading: S,
+  className: I,
+  compareValues: h,
+  valueSetLabel: j,
+  compareValueSetLabel: B
+}) => {
+  const M = T(i, l), y = h ? T(h, l) : void 0, d = i.length, p = h?.length ?? 0, N = Math.max(d, p), b = R(N), m = O(N), v = (e) => e.map((r) => ({
+    ...r,
+    ratio: b > 0 ? r.count / b : 0
+  })), f = v(M), $ = y ? v(y) : void 0, C = (e, r, a, x) => {
+    if (e.count === 0)
+      return /* @__PURE__ */ t("div", { className: "flex h-full flex-1 items-end", "aria-hidden": "true", children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: "min-h-2 w-full rounded-xs",
+          style: { height: `${e.ratio * 100}%` }
+        }
+      ) });
+    const g = x ? {
+      backgroundImage: `repeating-linear-gradient(135deg, ${e.color} 0px, ${e.color} 1px, transparent 1px, transparent 4px)`,
+      borderColor: e.color
+    } : { backgroundColor: e.color };
+    return /* @__PURE__ */ t(
+      w,
+      {
+        placement: A.Bottom,
+        tooltip: r,
+        triggerClassName: "flex h-full flex-1 items-end",
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            role: "img",
+            "aria-label": a,
+            className: "flex min-h-2 w-full items-center justify-center rounded-xs border border-transparent",
+            style: { height: `${e.ratio * 100}%`, ...g },
+            children: c && /* @__PURE__ */ t("span", { className: "dial-tiny-semi-text text-primary", children: e.count })
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: H(
+        "flex flex-col gap-2",
+        I,
+        P.analyticsHistogram
+      ),
+      children: [
+        /* @__PURE__ */ t("span", { className: "dial-small-text text-primary", children: s }),
+        S ? /* @__PURE__ */ t(
+          "div",
+          {
+            className: "flex items-center justify-center",
+            style: { height: u },
+            children: /* @__PURE__ */ t(k, { size: 18, fullWidth: !1 })
+          }
+        ) : /* @__PURE__ */ n("div", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-1", children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              "data-histogram-y-axis": !0,
+              "aria-hidden": "true",
+              className: "relative",
+              style: { height: u },
+              children: m.map((e, r) => /* @__PURE__ */ t(
+                "span",
+                {
+                  className: "dial-tiny-text absolute right-0 whitespace-nowrap text-secondary",
+                  style: {
+                    top: `${r / (m.length - 1) * 100}%`,
+                    transform: "translateY(-50%)"
+                  },
+                  children: e
+                },
+                e
+              ))
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: "relative min-w-0", children: [
+            m.map((e, r) => /* @__PURE__ */ t(
+              "div",
+              {
+                "data-histogram-grid": !0,
+                className: "pointer-events-none absolute inset-x-0 border-t border-primary",
+                style: { top: `${r / (m.length - 1) * 100}%` }
+              },
+              e
+            )),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: "relative flex items-end gap-1",
+                style: { height: u },
+                children: $ ? f.map((e, r) => {
+                  const a = $[r], x = `${e.count} out of ${d} ${o}`, g = `${a.count} out of ${p} ${o}`;
+                  return /* @__PURE__ */ n("div", { className: "flex h-full flex-1 items-end", children: [
+                    C(
+                      e,
+                      _(
+                        j,
+                        e.count,
+                        d,
+                        o,
+                        e
+                      ),
+                      x,
+                      !0
+                    ),
+                    C(
+                      a,
+                      _(
+                        B,
+                        a.count,
+                        p,
+                        o,
+                        a
+                      ),
+                      g,
+                      !1
+                    )
+                  ] }, r);
+                }) : f.map((e, r) => {
+                  const a = `${e.count} out of ${d} ${o}`;
+                  return e.count === 0 ? /* @__PURE__ */ t(
+                    "div",
+                    {
+                      className: "flex h-full flex-1 items-end",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ t(
+                        "div",
+                        {
+                          className: "min-h-2 w-full rounded-xs",
+                          style: { height: `${e.ratio * 100}%` }
+                        }
+                      )
+                    },
+                    r
+                  ) : /* @__PURE__ */ t(
+                    w,
+                    {
+                      placement: A.Bottom,
+                      tooltip: a,
+                      triggerClassName: "flex h-full flex-1 items-end",
+                      children: /* @__PURE__ */ t(
+                        "div",
+                        {
+                          role: "img",
+                          "aria-label": a,
+                          className: H(
+                            "flex min-h-2 w-full items-center justify-center rounded-xs border",
+                            "border-transparent"
+                          ),
+                          style: {
+                            height: `${e.ratio * 100}%`,
+                            backgroundColor: e.color
+                          },
+                          children: c && e.count > 0 && /* @__PURE__ */ t("span", { className: "dial-tiny-semi-text text-primary", children: e.count })
+                        }
+                      )
+                    },
+                    r
+                  );
+                })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("div", {}),
+          /* @__PURE__ */ t("div", { "data-histogram-x-axis": !0, className: "flex gap-1", children: f.map((e, r) => /* @__PURE__ */ t(
+            "span",
+            {
+              className: "dial-caption-text flex-1 text-center text-secondary",
+              children: L(e.from, e.to)
+            },
+            r
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  q as AnalyticsHistogram
+};