@epam/ai-dial-ui-kit 0.16.0-dev.47 → 0.16.0-dev.49

package/dist/src/components/New/Steps/Steps.d.ts

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import { Step, StepStatus } from '../../../models/step';
+export interface StepsProps {
+    /** Ordered steps to render. */
+    steps: Step[];
+    /** `id` of the active step. */
+    currentStep: string;
+    /** Fired with the `id` of the step the user may move to. */
+    onChangeStep: (step: string) => void;
+    /**
+     * Already-translated text announced for a step's status, appended to the
+     * step's accessible name. Defaults to `'Completed'` / `'Error'`.
+     */
+    statusLabels?: Partial<Record<StepStatus, string>>;
+    /** Accessible name for the list of steps. */
+    ariaLabel?: string;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+/**
+ * A row of numbered steps for a multi-step flow, marking the active one and
+ * flagging completed and failed steps.
+ * aliases: StepWizard|ProgressSteps|Stepper
+ * Design system 2.0
+ *
+ * A step's number turns into a check once it is completed and the user has moved
+ * on, and into an alert icon while a failed step is the active one. A step can
+ * only be entered when every step before it is `StepStatus.VALID`; going back is
+ * always allowed.
+ *
+ * The list is an ordered list, the active step carries `aria-current="step"`,
+ * and a completed or failed step announces its status after its name.
+ *
+ * @example
+ * ```tsx
+ * <Steps
+ *   ariaLabel="Create deployment"
+ *   steps={[
+ *     { id: 'general', name: 'General', status: StepStatus.VALID },
+ *     { id: 'limits', name: 'Limits', status: StepStatus.ERROR },
+ *     { id: 'review', name: 'Review' },
+ *   ]}
+ *   currentStep="general"
+ *   onChangeStep={setCurrentStep}
+ * />
+ * ```
+ *
+ * @param steps - Ordered steps to render.
+ * @param currentStep - `id` of the active step.
+ * @param onChangeStep - Fired with the `id` of the step the user may move to.
+ * @param [statusLabels] - Translated status text announced after a step's name.
+ * @param [ariaLabel] - Accessible name for the list of steps.
+ * @param [className] - Additional CSS classes for the root element.
+ */
+export declare const Steps: FC<StepsProps>;

package/dist/src/constants/public-class-names.d.ts

@@ -32,6 +32,10 @@ export declare const DIAL_KIT_CLASS: {
     readonly errorText: "dial-kit-error-text";
     /** The `Label` root, which wraps the `label` element and its info button. */
     readonly label: "dial-kit-label";
+    /** The root of a `LabelledText`, wrapping its caption and value. */
+    readonly labelledText: "dial-kit-labelled-text";
+    /** The `ol` root of a `Steps`, holding one button per step. */
+    readonly steps: "dial-kit-steps";
     /** The root of an `AnalyticsCard`: the box holding its title, value and description. */
     readonly analyticsCard: "dial-kit-analytics-card";
     /** The root of an `AnalyticsBar`: the title row and track, stacked or inline. */

package/dist/src/index.d.ts

@@ -1,17 +1,4 @@
 export { DialCaptionText, DialErrorText, } from './components/CaptionText/CaptionText';
-export { DialAnalyticsCard } from './components/Analytics';
-export type { DialAnalyticsCardProps } from './components/Analytics';
-export { AnalyticsCardVariant } from './types/analytics';
-export { DialAnalyticsBar } from './components/Analytics';
-export type { DialAnalyticsBarProps } from './components/Analytics';
-export { DEFAULT_ANALYTICS_BAR_COLOR_MAP } from './components/Analytics';
-export type { AnalyticsBarColorStop, AnalyticsCardCompareItem, } from './models/analytics';
-export { DialAnalyticsErrorTag } from './components/Analytics';
-export type { DialAnalyticsErrorTagProps } from './components/Analytics';
-export { DialAnalyticsBarGroup } from './components/Analytics';
-export type { DialAnalyticsBarGroupProps } from './components/Analytics';
-export { DialAnalyticsHistogram } from './components/Analytics';
-export type { DialAnalyticsHistogramProps } from './components/Analytics';
 export { DialLabel } from './components/Label/Label';
 export { DialAccordion } from './components/Accordion/Accordion';
 export type { DialAccordionProps } from './components/Accordion/Accordion';
@@ -21,7 +8,6 @@ export { Spinner } from './components/Spinner/Spinner';
 export type { SpinnerProps } from './components/Spinner/Spinner';
 export { ProgressBar } from './components/ProgressBar/ProgressBar';
 export type { ProgressBarProps } from './components/ProgressBar/ProgressBar';
-export { DialSteps } from './components/Steps/Steps';
 export { DialNoDataContent } from './components/NoDataContent/NoDataContent';
 export type { DialNoDataContentProps } from './components/NoDataContent/NoDataContent';
 export { DialLabelledText } from './components/LabelledText/LabelledText';
@@ -124,15 +110,22 @@ export type { MultiSelectTagsProps } from './components/New/Select/MultiSelectTa
 export { InfoButton } from './components/New/InfoButton/InfoButton';
 export type { InfoButtonProps } from './components/New/InfoButton/InfoButton';
 export type { LabelProps } from './components/New/Label/Label';
+export { Steps } from './components/New/Steps/Steps';
+export type { StepsProps } from './components/New/Steps/Steps';
 export { AnalyticsCard } from './components/New/Analytics/Card/Card';
 export type { AnalyticsCardProps } from './components/New/Analytics/Card/Card';
+export { AnalyticsCardVariant } from './types/analytics';
 export { AnalyticsBar } from './components/New/Analytics/Bar/Bar';
 export type { AnalyticsBarProps } from './components/New/Analytics/Bar/Bar';
+export { DEFAULT_ANALYTICS_BAR_COLOR_MAP } from './components/New/Analytics/Bar/utils';
+export type { AnalyticsBarColorStop, AnalyticsCardCompareItem, } from './models/analytics';
 export { AnalyticsBarGroup } from './components/New/Analytics/BarGroup/BarGroup';
 export type { AnalyticsBarGroupProps } from './components/New/Analytics/BarGroup/BarGroup';
 export { AnalyticsHistogram } from './components/New/Analytics/Histogram/Histogram';
 export type { AnalyticsHistogramProps } from './components/New/Analytics/Histogram/Histogram';
 export { Label } from './components/New/Label/Label';
+export type { LabelledTextProps } from './components/New/LabelledText/LabelledText';
+export { LabelledText } from './components/New/LabelledText/LabelledText';
 export { Textarea, TextareaResize } from './components/New/Textarea/Textarea';
 export { Input } from './components/New/Input/Input';
 export type { InputProps } from './components/New/Input/Input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.16.0-dev.47",
+  "version": "0.16.0-dev.49",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",

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

@@ -1,80 +0,0 @@
-import { jsx as l, jsxs as t } from "react/jsx-runtime";
-import { DialAnalyticsErrorTag as C } from "../ErrorTag/ErrorTag.js";
-import { DialLoader as D } from "../../Loader/Loader.js";
-import { mergeClasses as r } from "../../../utils/merge-classes.js";
-import { getAnalyticsBarColor as T, DEFAULT_ANALYTICS_BAR_COLOR_MAP as _, getAnalyticsBarRatio as j } from "./utils.js";
-const L = ({
-  value: a,
-  maxValue: c = 1,
-  error: e,
-  isLoading: s,
-  title: i,
-  valueLabel: p,
-  colorMap: u = _,
-  className: m,
-  titleClassName: w,
-  valueClassName: y,
-  inline: o,
-  ariaLabel: v
-}) => {
-  const n = a == null, N = !!(e || s || !n), d = j(n ? 0 : a, c), b = T(d, u), g = p ?? (n ? "—" : a), A = v ?? (typeof i == "string" ? i : void 0), B = e || s, f = e ? /* @__PURE__ */ l(C, {}) : s ? /* @__PURE__ */ l(D, { fullWidth: !1 }) : /* @__PURE__ */ l(
-    "span",
-    {
-      className: r(
-        "shrink-0 tabular-nums text-end",
-        o ? "dial-small-text min-w-[5ch] text-primary" : "dial-small-semi-text text-primary",
-        y
-      ),
-      children: g
-    }
-  ), h = N ? /* @__PURE__ */ l(
-    "div",
-    {
-      role: "progressbar",
-      "aria-valuenow": e || s || typeof a != "number" ? void 0 : a,
-      "aria-valuemin": 0,
-      "aria-valuemax": c,
-      "aria-label": A,
-      className: r(
-        "w-full overflow-hidden rounded-xs",
-        o ? "h-1" : "h-2",
-        e ? "bg-error" : "bg-layer-1"
-      ),
-      children: !B && /* @__PURE__ */ l(
-        "div",
-        {
-          className: "h-full rounded-xs transition-[width] duration-300",
-          style: { width: `${d * 100}%`, backgroundColor: b }
-        }
-      )
-    }
-  ) : null, x = /* @__PURE__ */ l(
-    "span",
-    {
-      className: r("dial-small-text text-primary", w),
-      children: i
-    }
-  );
-  return o ? /* @__PURE__ */ t(
-    "div",
-    {
-      className: r("flex flex-row items-center gap-2", m),
-      children: [
-        /* @__PURE__ */ l("div", { className: "w-1/2 min-w-0", children: x }),
-        /* @__PURE__ */ t("div", { className: "flex w-1/2 flex-row items-center gap-2", children: [
-          /* @__PURE__ */ l("div", { className: "min-w-0 flex-1", children: h }),
-          f
-        ] })
-      ]
-    }
-  ) : /* @__PURE__ */ t("div", { className: r("flex flex-col gap-1", m), children: [
-    /* @__PURE__ */ t("div", { className: "flex flex-row items-center justify-between gap-2", children: [
-      x,
-      f
-    ] }),
-    h
-  ] });
-};
-export {
-  L as DialAnalyticsBar
-};

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

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

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

@@ -1,87 +0,0 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { DialAnalyticsErrorTag as u } from "../ErrorTag/ErrorTag.js";
-import { DialEllipsisTooltip as m } from "../../EllipsisTooltip/EllipsisTooltip.js";
-import { DialLoader as g } from "../../Loader/Loader.js";
-import { AnalyticsCardVariant as c } from "../../../types/analytics.js";
-import { mergeClasses as x } from "../../../utils/merge-classes.js";
-const b = {
-  [c.Default]: {
-    container: "bg-layer-3",
-    title: "dial-small-text text-secondary",
-    value: "dial-display2-text text-primary",
-    showDescription: !0
-  },
-  [c.Compact]: {
-    container: "bg-layer-2",
-    title: "dial-tiny-text text-secondary",
-    value: "dial-body-semi-text text-primary",
-    showDescription: !1
-  }
-}, E = ({
-  title: o,
-  value: p,
-  description: i,
-  variant: f = c.Default,
-  error: r,
-  isLoading: n,
-  className: y,
-  delta: t,
-  deltaPositive: d,
-  deltaUnit: h,
-  compareValues: l
-}) => {
-  const a = b[f], v = d !== void 0 ? d : (t ?? 0) >= 0, N = t === void 0 ? null : `${t >= 0 ? `+${t}` : String(t)}${h ?? ""}`;
-  return /* @__PURE__ */ s(
-    "div",
-    {
-      className: x(
-        "flex flex-col rounded-lg border border-secondary p-4",
-        r || n ? "gap-2" : "gap-1",
-        a.container,
-        y
-      ),
-      children: [
-        t !== void 0 ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ e("span", { className: a.title, children: o }),
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: x(
-                "dial-tiny-semi-text rounded-[120px] border border-transparent px-2",
-                v ? "bg-success text-success" : "bg-error text-error"
-              ),
-              children: N
-            }
-          )
-        ] }) : /* @__PURE__ */ e("span", { className: a.title, children: o }),
-        r ? /* @__PURE__ */ e(u, { className: "self-start" }) : n ? /* @__PURE__ */ e(g, { fullWidth: !1, className: "self-start" }) : l ? /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-            /* @__PURE__ */ e(
-              m,
-              {
-                text: l[0].title,
-                className: "dial-tiny-text text-secondary"
-              }
-            ),
-            /* @__PURE__ */ e("span", { className: a.value, children: l[0].value })
-          ] }),
-          /* @__PURE__ */ e("div", { className: "h-4 w-px flex-shrink-0 bg-controls-disable-accent" }),
-          /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-            /* @__PURE__ */ e(
-              m,
-              {
-                text: l[1].title,
-                className: "dial-tiny-text text-secondary"
-              }
-            ),
-            /* @__PURE__ */ e("span", { className: a.value, children: l[1].value })
-          ] })
-        ] }) : /* @__PURE__ */ e("span", { className: a.value, children: p }),
-        !r && !n && a.showDescription && i != null && i !== !1 && /* @__PURE__ */ e("span", { className: "dial-tiny-text text-secondary", children: i })
-      ]
-    }
-  );
-};
-export {
-  E as DialAnalyticsCard
-};

package/dist/components/Analytics/ErrorTag/ErrorTag.js

@@ -1,19 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { DialTag as t } from "../../Tag/Tag.js";
-import { mergeClasses as a } from "../../../utils/merge-classes.js";
-const l = ({
-  label: r = "Error",
-  className: o
-}) => /* @__PURE__ */ e(
-  t,
-  {
-    label: r,
-    className: a(
-      "dial-tiny-semi-text cursor-default rounded-[120px] border-transparent bg-error text-error",
-      o
-    )
-  }
-);
-export {
-  l as DialAnalyticsErrorTag
-};

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

@@ -1,200 +0,0 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { DEFAULT_ANALYTICS_BAR_COLOR_MAP as D } from "../Bar/utils.js";
-import { DialLoader as I } from "../../Loader/Loader.js";
-import { DialTooltip as w } from "../../Tooltip/Tooltip.js";
-import { mergeClasses as H } from "../../../utils/merge-classes.js";
-import { buildHistogramColumns as A, formatHistogramColumnLabel as _, getHistogramYTicks as S, getHistogramYMax as B } from "./utils.js";
-const u = 128, O = (s, i) => {
-  const l = _(s, i);
-  return s === i ? `scored ${l}` : `scored between ${l}`;
-}, T = (s, i, l, o, d) => /* @__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: O(d.from, d.to) })
-] }), W = ({
-  title: s,
-  values: i,
-  colorMap: l = D,
-  valueTitle: o = "values",
-  showCount: d,
-  isLoading: L,
-  className: j,
-  compareValues: h,
-  valueSetLabel: M,
-  compareValueSetLabel: Y
-}) => {
-  const k = A(i, l), y = h ? A(h, l) : void 0, c = i.length, p = h?.length ?? 0, N = Math.max(c, p), b = B(N), m = S(N), v = (e) => e.map((r) => ({
-    ...r,
-    ratio: b > 0 ? r.count / b : 0
-  })), f = v(k), $ = 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: "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: d && /* @__PURE__ */ t("span", { className: "dial-tiny-semi-text text-primary", children: e.count })
-          }
-        )
-      }
-    );
-  };
-  return /* @__PURE__ */ n("div", { className: H("flex flex-col gap-2", j), children: [
-    /* @__PURE__ */ t("span", { className: "dial-small-text text-primary", children: s }),
-    L ? /* @__PURE__ */ t(
-      "div",
-      {
-        className: "flex items-center justify-center",
-        style: { height: u },
-        children: /* @__PURE__ */ t(I, { 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 ${c} ${o}`, g = `${a.count} out of ${p} ${o}`;
-              return /* @__PURE__ */ n("div", { className: "flex h-full flex-1 items-end", children: [
-                C(
-                  e,
-                  T(
-                    M,
-                    e.count,
-                    c,
-                    o,
-                    e
-                  ),
-                  x,
-                  !0
-                ),
-                C(
-                  a,
-                  T(
-                    Y,
-                    a.count,
-                    p,
-                    o,
-                    a
-                  ),
-                  g,
-                  !1
-                )
-              ] }, r);
-            }) : f.map((e, r) => {
-              const a = `${e.count} out of ${c} ${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: "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: d && 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: _(e.from, e.to)
-        },
-        r
-      )) })
-    ] })
-  ] });
-};
-export {
-  W as DialAnalyticsHistogram
-};