@epam/ai-dial-ui-kit 0.16.0-dev.6 → 0.16.0-dev.61

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/Dropdown/constants.js

@@ -6,10 +6,10 @@ const i = o(
   "flex items-center gap-2 align-middle",
   "h-auto px-0 bg-transparent border-0"
 ), m = o(
-  "z-floating overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-none"
+  "z-floating overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-hidden"
 ), l = o(
   "flex w-full cursor-pointer items-center gap-3",
-  "focus-visible:border-none focus-visible:outline-none",
+  "focus-visible:border-none focus-visible:outline-hidden",
   "hover:bg-accent-primary-alpha px-3",
   "dial-small-text h-[34px] rounded text-primary",
   s.menuItem

package/dist/components/IconButton/IconButton.js

@@ -1,13 +1,13 @@
 import { jsx as i } from "react/jsx-runtime";
-import { ButtonAppearance as u } from "../../types/button.js";
+import { ButtonAppearance as f } from "../../types/button.js";
 import { getButtonClassNames as b } from "../Button/utils.js";
-import { DialTooltip as f } from "../Tooltip/Tooltip.js";
+import { DialTooltip as d } from "../Tooltip/Tooltip.js";
 import { mergeClasses as p } from "../../utils/merge-classes.js";
 import { resolveAccessibleName as x } from "../../utils/accessible-name.js";
 import { ElementSize as a } from "../../types/size.js";
 const v = ({
   variant: t,
-  appearance: n = u.Solid,
+  appearance: n = f.Solid,
   size: r = a.Standard,
   className: s,
   icon: m,
@@ -15,17 +15,17 @@ const v = ({
   type: c = "button",
   ...e
 }) => {
-  const d = p(
+  const u = p(
     t && b(t, n),
     r === a.Small ? "h-[24px] w-[24px]" : "h-[40px] w-[40px] dial-kit-enhanced-target",
-    "dial-icon-button disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-focus outline-offset-0 disabled:text-controls-secondary-disable",
+    "dial-icon-button disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-focus outline-offset-0",
     s
   ), l = /* @__PURE__ */ i(
     "button",
     {
       ...e,
       type: c,
-      className: d,
+      className: u,
       "aria-label": x(
         e["aria-label"],
         o?.tooltip
@@ -33,7 +33,7 @@ const v = ({
       children: m
     }
   );
-  return o ? /* @__PURE__ */ i(f, { ...o, children: l }) : l;
+  return o ? /* @__PURE__ */ i(d, { ...o, children: l }) : l;
 };
 export {
   v as DialIconButton

package/dist/components/LoadFileArea/EmptyFileArea.js

@@ -1,8 +1,8 @@
-import { jsx as t, jsxs as y, Fragment as B } from "react/jsx-runtime";
+import { jsx as t, jsxs as y, Fragment as z } from "react/jsx-runtime";
 import { DialErrorText as x } from "../CaptionText/CaptionText.js";
 import { ButtonAppearance as Q } from "../../types/button.js";
 import U from "classnames";
-import { useRef as C, useState as k, useCallback as G, useMemo as L, useEffect as W } from "react";
+import { useRef as B, useState as k, useCallback as C, useMemo as G, useEffect as W } from "react";
 import { DialPrimaryButton as X } from "../Button/ButtonWrappers.js";
 import { useDrop as Y } from "../../node_modules/react-dnd/dist/hooks/useDrop/useDrop.js";
 import { FILE as Z } from "../../node_modules/react-dnd-html5-backend/dist/NativeTypes.js";
@@ -13,45 +13,45 @@ const nr = ({
   emptyButtonLabel: O,
   acceptTypes: A,
   maxFilesCount: m,
-  multiple: M,
+  multiple: L,
   fileFormatError: j,
-  fileCountError: w,
-  fileSizeError: R,
+  fileCountError: R,
+  fileSizeError: g,
   getIsFileFormatError: n,
   getIsFileSizeError: a
 }) => {
-  const g = C(null), h = C(null), [c, D] = k([]), [i, f] = k(!1), [u, d] = k(!1), P = G(
+  const w = B(null), h = B(null), [c, D] = k([]), [i, f] = k(!1), [d, u] = k(!1), M = C(
     (r) => {
       const e = r.target.files;
       if (e && e.length > 0) {
         const o = Array.from(e), p = n?.(o), v = a?.(o);
-        p ? f(!0) : v ? d(!0) : l(o);
+        p ? f(!0) : v ? u(!0) : l(o);
       }
     },
     [n, a, l]
-  ), s = G(
+  ), s = C(
     (r) => m && r?.length > m,
     [m]
-  ), F = L(() => i || u || s(c), [i, u, s, c]), b = () => {
-    D([]), f(!1), d(!1);
-  }, S = L(() => i ? /* @__PURE__ */ t(x, { text: j }) : u ? /* @__PURE__ */ t(x, { text: R }) : s(c) ? /* @__PURE__ */ t(x, { text: w }) : null, [
-    w,
-    j,
+  ), F = G(() => i || d || s(c), [i, d, s, c]), b = () => {
+    D([]), f(!1), u(!1);
+  }, P = G(() => i ? /* @__PURE__ */ t(x, { text: j }) : d ? /* @__PURE__ */ t(x, { text: g }) : s(c) ? /* @__PURE__ */ t(x, { text: R }) : null, [
     R,
+    j,
+    g,
     c,
     s,
     i,
-    u
+    d
   ]);
   W(() => {
     b();
   }, [A]);
-  const [{ isOver: T, canDrop: K }, V] = Y(
+  const [{ isOver: S, canDrop: K }, T] = Y(
     () => ({
       accept: [Z],
       drop(r) {
         const e = r.files, o = n?.(e) ?? !1, p = a?.(e) ?? !1, v = s?.(e) ?? !1;
-        if (f(o), d(p), o || p || v) {
+        if (f(o), u(p), o || p || v) {
           D(e);
           return;
         }
@@ -63,27 +63,27 @@ const nr = ({
       })
     }),
     [l, n, a, s]
-  ), q = (r) => {
+  ), V = (r) => {
     (r.key === "Enter" || r.key === "Space") && (r.preventDefault(), h.current?.click());
-  }, z = (r) => {
+  }, q = (r) => {
     r?.preventDefault();
     const e = Array.from(r.dataTransfer?.items ?? []);
-    f(!!n?.(e)), d(!!a?.(e)), D(e);
+    f(!!n?.(e)), u(!!a?.(e)), D(e);
   }, H = (r) => {
     r.target === r.currentTarget && b();
   }, J = U(
-    "border border-dashed rounded w-full cursor-pointer relative h-full hover:border-hover",
+    "border border-dashed rounded size-full cursor-pointer relative hover:border-hover",
     !K && !F && "border-primary",
-    K && (T ? "border-accent-primary" : "border-hover"),
+    K && (S ? "border-accent-primary" : "border-hover"),
     F && "border-error"
   );
-  return V(g), /* @__PURE__ */ y(B, { children: [
+  return T(w), /* @__PURE__ */ y(z, { children: [
     /* @__PURE__ */ y(
       "div",
       {
         className: J,
-        ref: g,
-        onDragOver: z,
+        ref: w,
+        onDragOver: q,
         onDragLeave: H,
         children: [
           /* @__PURE__ */ y(
@@ -91,7 +91,7 @@ const nr = ({
             {
               htmlFor: "file",
               tabIndex: 0,
-              onKeyDown: q,
+              onKeyDown: V,
               className: "flex flex-col items-center cursor-pointer size-full text-secondary dial-tiny-text justify-center",
               children: [
                 E && /* @__PURE__ */ t("p", { className: "mb-1", children: E }),
@@ -110,19 +110,19 @@ const nr = ({
           /* @__PURE__ */ t(
             "input",
             {
-              multiple: M,
+              multiple: L,
               id: "file",
               type: "file",
               ref: h,
               hidden: !0,
               accept: A,
-              onChange: P
+              onChange: M
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ t(B, { children: S })
+    /* @__PURE__ */ t(z, { children: P })
   ] });
 };
 export {

package/dist/components/Loader/Loader.js

@@ -3,19 +3,19 @@ import e from "classnames";
 import { DialIcon as s } from "../Icon/Icon.js";
 import { loaderIconBaseClassName as t, loaderBaseClassName as d } from "./constants.js";
 import c from "../../assets/icons/loader.svg.js";
-const g = ({
+const h = ({
   size: o = 18,
   className: a,
-  iconClassName: l,
-  fullWidth: m = !0,
-  ariaLabel: i = "Loading"
+  iconClassName: i,
+  fullWidth: l = !0,
+  ariaLabel: m = "Loading"
 }) => /* @__PURE__ */ r(
   "div",
   {
     role: "status",
     className: e({
       [d]: !0,
-      "w-full h-full": m,
+      "size-full": l,
       [a || ""]: !!a
     }),
     children: /* @__PURE__ */ r(
@@ -26,9 +26,9 @@ const g = ({
           {
             width: o,
             height: o,
-            className: e(t, l),
+            className: e(t, i),
             role: "img",
-            "aria-label": i
+            "aria-label": m
           }
         )
       }
@@ -36,5 +36,5 @@ const g = ({
   }
 );
 export {
-  g as DialLoader
+  h as DialLoader
 };

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
+};