@epam/ai-dial-ui-kit 0.15.0-dev.5 → 0.15.0-dev.50

package/dist/components/New/ToggleIconButton/ToggleIconButton.js

@@ -1,54 +1,56 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useCallback as f } from "react";
-import { ButtonAppearance as b, ButtonVariant as B } from "../../../types/button.js";
+import { ButtonAppearance as B, ButtonVariant as b } from "../../../types/button.js";
 import { ElementSize as C } from "../../../types/size.js";
-import { mergeClasses as h } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as v } from "../../../utils/accessible-name.js";
-import { IconButton as x } from "../IconButton/IconButton.js";
-import { Tooltip as g } from "../Tooltip/Tooltip.js";
-const E = ({
-  icon: o,
+import { mergeClasses as I } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as g } from "../../../utils/accessible-name.js";
+import { IconButton as A } from "../IconButton/IconButton.js";
+import { Tooltip as h } from "../Tooltip/Tooltip.js";
+import { DIAL_KIT_CLASS as v } from "../../../constants/public-class-names.js";
+const y = ({
+  icon: t,
   selectedIcon: l,
-  isSelected: r = !1,
-  onToggle: t,
+  isSelected: o = !1,
+  onToggle: a,
   onClick: m,
-  tooltipProps: a,
+  tooltipProps: r,
   size: s = C.Small,
   className: c,
   ...n
 }) => {
   const p = f(
     (u) => {
-      m?.(u), t?.(!r);
+      m?.(u), a?.(!o);
     },
-    [m, t, r]
+    [m, a, o]
   ), e = /* @__PURE__ */ i(
-    x,
+    A,
     {
       ...n,
       size: s,
-      variant: B.Primary,
-      appearance: b.Ghost,
-      icon: r ? l ?? o : o,
-      "aria-pressed": r,
-      "aria-label": v(
+      variant: b.Primary,
+      appearance: B.Ghost,
+      icon: o ? l ?? t : t,
+      "aria-pressed": o,
+      "aria-label": g(
         n["aria-label"],
-        a?.tooltip
+        r?.tooltip
       ),
       onClick: p,
-      className: h(
+      className: I(
         "!rounded",
         // The glyph stays 16px at every size tier — only the tint square grows.
         // CSS outranks the width/height attributes Tabler renders, so callers
         // need not pass a size and the two icons can never disagree.
         "[&_svg]:size-4",
-        r && "!text-accent",
-        c
+        o && "!text-accent",
+        c,
+        v.toggleIconButton
       )
     }
   );
-  return a ? /* @__PURE__ */ i(g, { asChild: !0, ...a, children: e }) : e;
+  return r ? /* @__PURE__ */ i(h, { asChild: !0, ...r, children: e }) : e;
 };
 export {
-  E as ToggleIconButton
+  y as ToggleIconButton
 };

package/dist/components/New/Tooltip/TooltipContent.js

@@ -1,20 +1,21 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useMergeRefs as i, FloatingPortal as c, FloatingArrow as p } from "@floating-ui/react";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useMergeRefs as i, FloatingPortal as p, FloatingArrow as c } from "@floating-ui/react";
 import f from "classnames";
 import { useRef as g } from "react";
 import { useThemeScope as u } from "../ThemeScope/ThemeScope.js";
 import { useHasHover as x } from "../../../hooks/use-has-hover.js";
 import { arrowClassName as d, tooltipClassName as h } from "./constants.js";
 import { useTooltipContext as N } from "./TooltipContext.js";
-const T = ({
+import { DIAL_KIT_CLASS as C } from "../../../constants/public-class-names.js";
+const j = ({
   style: r,
   ...t
 }) => {
-  const o = N(), s = x(), l = u(), a = g(null), n = i([o.refs.setFloating, a]);
-  return !o.open || !s ? null : /* @__PURE__ */ e(c, { id: "tooltip-portal", children: /* @__PURE__ */ m(
+  const o = N(), s = x(), l = u(), a = g(null), m = i([o.refs.setFloating, a]);
+  return !o.open || !s ? null : /* @__PURE__ */ e(p, { id: "tooltip-portal", children: /* @__PURE__ */ n(
     "div",
     {
-      ref: n,
+      ref: m,
       "data-placement": o.placement,
       style: {
         ...o.floatingStyles,
@@ -24,12 +25,13 @@ const T = ({
       className: f(
         h,
         l,
-        o.getFloatingProps(t).className
+        o.getFloatingProps(t).className,
+        C.tooltip
       ),
       children: [
         t.children,
         /* @__PURE__ */ e(
-          p,
+          c,
           {
             ref: o.arrowRef,
             context: o.context,
@@ -41,5 +43,5 @@ const T = ({
   ) });
 };
 export {
-  T as TooltipContent
+  j as TooltipContent
 };

package/dist/components/New/Tooltip/constants.js

@@ -1,4 +1,4 @@
-const t = 7, o = 2, e = 500, r = "fill-control-inverted", s = "z-[55] max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";
+const t = 7, o = 2, e = 500, r = "fill-control-inverted", s = "z-tooltip max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";
 export {
   o as ARROW_GAP,
   t as ARROW_HEIGHT,

package/dist/components/New/TransferQueue/TransferQueue.js

@@ -0,0 +1,124 @@
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { useState as h, useId as Q, useCallback as m, useEffect as w } from "react";
+import { ConfirmationPopup as D } from "../ConfirmationPopup/ConfirmationPopup.js";
+import { ProgressBar as U } from "../../ProgressBar/ProgressBar.js";
+import { DIAL_KIT_CLASS as F } from "../../../constants/public-class-names.js";
+import { ConfirmationPopupVariant as R } from "../../../types/confirmation-popup.js";
+import { ElementSize as N } from "../../../types/size.js";
+import { TransferQueueItemStatus as l } from "../../../types/transfer-queue.js";
+import { mergeClasses as T } from "../../../utils/merge-classes.js";
+import { DEFAULT_TRANSFER_QUEUE_LABELS as O, TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS as y } from "./constants.js";
+import { TransferQueueHeader as M } from "./TransferQueueHeader.js";
+import { TransferQueueRow as j } from "./TransferQueueRow.js";
+const q = (n) => Math.round(
+  n.reduce(
+    (e, r) => e + (r.percent ?? (r.status === l.InProgress ? 0 : 100)),
+    0
+  ) / n.length
+), z = (n, e, r) => n && e ? r.closeConfirmDescriptionMixed : e ? r.closeConfirmDescriptionFailed : r.closeConfirmDescriptionInProgress, ee = ({
+  title: n,
+  items: e,
+  onClose: r,
+  onCancelItem: E,
+  labels: S,
+  autoCloseDelay: i = y,
+  className: v,
+  bodyClassName: x
+}) => {
+  const [c, I] = h(!1), [L, f] = h(!1), p = Q(), s = { ...O, ...S }, d = e.filter(
+    (o) => o.status === l.InProgress
+  ).length, a = d > 0, g = e.filter(
+    (o) => o.status === l.Failed
+  ).length, u = g > 0, C = e.length > 0 && e.every((o) => o.status === l.Success), P = m(() => {
+    a || u ? f(!0) : r();
+  }, [a, u, r]), A = m(() => {
+    f(!1), r();
+  }, [r]), _ = m(() => {
+    I((o) => !o);
+  }, []);
+  return w(() => {
+    if (!C || i <= 0) return;
+    const o = setTimeout(r, i);
+    return () => clearTimeout(o);
+  }, [C, i, r]), e.length === 0 ? null : /* @__PURE__ */ b(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: T(
+        "w-[370px] max-w-[calc(100vw-2rem)] rounded-xl bg-layer-raised shadow-md",
+        v,
+        F.transferQueue
+      ),
+      children: [
+        /* @__PURE__ */ t(
+          M,
+          {
+            title: n,
+            failedCount: g,
+            isCollapsed: c,
+            itemsId: p,
+            labels: s,
+            onToggleCollapse: _,
+            onClose: P
+          }
+        ),
+        c && a && /*
+        * Only while collapsed: expanded, every running row already shows its
+        * own spinner, so an aggregate bar would restate what is on screen.
+        */
+        /* @__PURE__ */ t(
+          U,
+          {
+            value: q(e),
+            size: N.Small,
+            "aria-label": s.queueProgressAriaLabel,
+            "aria-valuetext": s.queueProgressValueText(
+              e.length - d,
+              e.length
+            )
+          }
+        ),
+        !c && /* @__PURE__ */ t(
+          "div",
+          {
+            id: p,
+            className: T(
+              "flex max-h-[40vh] flex-col overflow-y-auto py-1",
+              x
+            ),
+            children: e.map((o) => /* @__PURE__ */ t(
+              j,
+              {
+                item: o,
+                labels: s,
+                onCancel: E
+              },
+              o.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ t(
+          D,
+          {
+            open: L,
+            header: s.closeConfirmHeader,
+            description: z(
+              a,
+              u,
+              s
+            ),
+            confirmLabel: s.closeConfirmLabel,
+            cancelLabel: s.closeCancelLabel,
+            variant: R.Danger,
+            onConfirm: A,
+            onClose: () => f(!1)
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ee as TransferQueue
+};

package/dist/components/New/TransferQueue/TransferQueueHeader.js

@@ -0,0 +1,71 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { IconChevronUp as f, IconChevronDown as S, IconX as I } from "@tabler/icons-react";
+import { GhostIconButton as t } from "../IconButton/IconButtonWrappers.js";
+import { DIAL_KIT_ICON_STROKE as o } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
+import { ElementSize as m } from "../../../types/size.js";
+import { STATUS_SLOT_CLASS as c } from "./constants.js";
+const k = ({
+  title: l,
+  failedCount: n,
+  isCollapsed: r,
+  itemsId: p,
+  labels: a,
+  onToggleCollapse: d,
+  onClose: x
+}) => {
+  const h = r ? f : S;
+  return /* @__PURE__ */ i("div", { className: "mx-4 flex items-center justify-between border-b border-tertiary py-3", children: [
+    /* @__PURE__ */ i("div", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ e("span", { className: "dial-small-paragraph-semi-text truncate text-primary", children: l }),
+      n > 0 && /*
+      * On the filled --bg-control-error swatch, so it takes the on-control
+      * token; --text-tertiary would contrast at under 2:1 over that fill.
+      */
+      /* @__PURE__ */ e("span", { className: "dial-small-paragraph-semi-text inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-control-error px-1 text-control-permanent", children: n })
+    ] }),
+    /* @__PURE__ */ i("div", { className: "flex shrink-0 items-center gap-1", children: [
+      /* @__PURE__ */ e(
+        t,
+        {
+          "aria-label": r ? a.expandAriaLabel : a.collapseAriaLabel,
+          "aria-expanded": !r,
+          "aria-controls": p,
+          size: m.Small,
+          icon: /* @__PURE__ */ e(
+            h,
+            {
+              size: s.SM,
+              stroke: o,
+              className: "text-secondary",
+              "aria-hidden": !0
+            }
+          ),
+          onClick: d,
+          className: c
+        }
+      ),
+      /* @__PURE__ */ e(
+        t,
+        {
+          "aria-label": a.closeAriaLabel,
+          size: m.Small,
+          icon: /* @__PURE__ */ e(
+            I,
+            {
+              size: s.SM,
+              stroke: o,
+              className: "text-secondary",
+              "aria-hidden": !0
+            }
+          ),
+          onClick: x,
+          className: c
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  k as TransferQueueHeader
+};

package/dist/components/New/TransferQueue/TransferQueueRow.js

@@ -0,0 +1,119 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { IconX as d, IconCheck as u, IconAlertCircleFilled as f, IconAlertTriangleFilled as g } from "@tabler/icons-react";
+import { EllipsisTooltip as I } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { FileIcon as h } from "../FileIcon/FileIcon.js";
+import { GhostIconButton as S } from "../IconButton/IconButtonWrappers.js";
+import { Tooltip as x } from "../Tooltip/Tooltip.js";
+import { DIAL_KIT_ICON_STROKE as m } from "../constants/icon.js";
+import { Spinner as y } from "../../Spinner/Spinner.js";
+import { DIAL_ICON_SIZE as t } from "../../../constants/icon.js";
+import { DialItemType as N } from "../../../types/item.js";
+import { ElementSize as T } from "../../../types/size.js";
+import { TransferQueueItemStatus as s } from "../../../types/transfer-queue.js";
+import { mergeClasses as i } from "../../../utils/merge-classes.js";
+import { STATUS_SLOT_CLASS as c } from "./constants.js";
+const p = ({ message: e, isError: a }) => /* @__PURE__ */ r(x, { tooltip: e, asChild: !0, children: /* @__PURE__ */ r(
+  "span",
+  {
+    className: c,
+    role: "img",
+    "aria-label": e,
+    tabIndex: 0,
+    children: /* @__PURE__ */ r(
+      a ? f : g,
+      {
+        size: t.SM,
+        className: a ? "text-error" : "text-warning-icon",
+        "aria-hidden": !0
+      }
+    )
+  }
+) }), j = ({
+  item: e,
+  labels: a,
+  onCancel: o
+}) => {
+  const n = e.status === s.Canceled;
+  return /* @__PURE__ */ l("div", { className: "group flex items-center gap-2 px-4 py-2", children: [
+    /* @__PURE__ */ r(
+      h,
+      {
+        type: N.File,
+        name: e.name,
+        size: t.MD,
+        className: i(n && "opacity-50"),
+        decorative: !0
+      }
+    ),
+    /* @__PURE__ */ r(
+      I,
+      {
+        text: e.name,
+        className: i(
+          "dial-small-text",
+          n ? "text-secondary" : "text-primary"
+        )
+      }
+    ),
+    e.status === s.InProgress && /* @__PURE__ */ l("div", { className: i(c, "grid"), children: [
+      /* @__PURE__ */ r(
+        y,
+        {
+          size: t.SM,
+          ariaLabel: a.itemProgressAriaLabel(e.name),
+          className: i(
+            "pointer-events-none col-start-1 row-start-1 transition-opacity",
+            o && "group-focus-within:opacity-0 group-hover:opacity-0"
+          )
+        }
+      ),
+      o && /* @__PURE__ */ r(
+        S,
+        {
+          "aria-label": a.cancelItemAriaLabel(e.name),
+          size: T.Small,
+          icon: /* @__PURE__ */ r(
+            d,
+            {
+              size: t.SM,
+              stroke: m,
+              className: "text-secondary",
+              "aria-hidden": !0
+            }
+          ),
+          onClick: () => o(e.id),
+          className: "col-start-1 row-start-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100"
+        }
+      )
+    ] }),
+    e.status === s.Success && /* @__PURE__ */ r(
+      "span",
+      {
+        className: c,
+        role: "img",
+        "aria-label": a.successLabel,
+        children: /* @__PURE__ */ r(
+          u,
+          {
+            size: t.SM,
+            stroke: m,
+            className: "text-accent",
+            "aria-hidden": !0
+          }
+        )
+      }
+    ),
+    e.status === s.Warning && /* @__PURE__ */ r(
+      p,
+      {
+        message: e.message || a.warningMessage,
+        isError: !1
+      }
+    ),
+    e.status === s.Failed && /* @__PURE__ */ r(p, { message: e.message || a.failedMessage, isError: !0 }),
+    n && /* @__PURE__ */ r("span", { className: "dial-small-text shrink-0 text-secondary", children: a.canceledLabel })
+  ] });
+};
+export {
+  j as TransferQueueRow
+};

package/dist/components/New/TransferQueue/constants.js

@@ -0,0 +1,24 @@
+const l = 8e3, a = "flex size-7 shrink-0 items-center justify-center", i = {
+  cancelItemAriaLabel: (e) => `Cancel "${e}"`,
+  itemProgressAriaLabel: (e) => `"${e}" in progress`,
+  successLabel: "Completed",
+  canceledLabel: "Canceled",
+  failedMessage: "Failed",
+  warningMessage: "Completed with warnings",
+  queueProgressAriaLabel: "Progress",
+  queueProgressValueText: (e, s) => `${e} of ${s}`,
+  collapseAriaLabel: "Collapse",
+  expandAriaLabel: "Expand",
+  closeAriaLabel: "Close",
+  closeConfirmHeader: "Close?",
+  closeConfirmDescriptionInProgress: "Some items are still in progress.",
+  closeConfirmDescriptionFailed: "Some items have failed.",
+  closeConfirmDescriptionMixed: "Some items are still in progress, and some have failed.",
+  closeConfirmLabel: "Close",
+  closeCancelLabel: "Cancel"
+};
+export {
+  i as DEFAULT_TRANSFER_QUEUE_LABELS,
+  a as STATUS_SLOT_CLASS,
+  l as TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS
+};

package/dist/components/New/constants/overlay.js

@@ -1,27 +1,35 @@
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
-const a = "rounded-xl bg-layer-raised p-1 shadow-md", l = e(
+const a = "rounded-xl bg-layer-raised p-1 shadow-md", s = "flex flex-col gap-0.5", l = e(
   a,
   "w-max"
 ), r = e(
-  "flex w-full cursor-pointer items-center gap-2 px-3 h-[40px] rounded-lg",
+  l,
+  s,
+  "py-2"
+), n = e(
+  // `shrink-0` keeps the 40px: a column squeezed by the panel's height cap
+  // would otherwise collapse the rows to their content.
+  "flex w-full shrink-0 cursor-pointer items-center gap-2 px-3 h-[40px] rounded-lg",
   "dial-small-text text-primary truncate",
   // Hover sits one step up the accent-alpha ramp from the selected tint, so a
   // hovered row reads as hovered whether or not it is also selected.
   "hover:bg-control-accent-alpha-hover",
   "focus-visible:outline focus-visible:outline-focus"
-), t = "bg-control-accent-alpha", s = e(
+), t = "bg-control-accent-alpha", c = e(
   t,
   "text-accent"
-), n = e(
+), m = e(
   "cursor-not-allowed text-control-disable-primary",
   "bg-transparent hover:bg-transparent"
-), c = 4;
+), i = 4;
 export {
-  c as overlayGap,
-  r as overlayItemClassName,
-  n as overlayItemDisabledClassName,
-  s as overlayItemHighlightClassName,
+  i as overlayGap,
+  n as overlayItemClassName,
+  m as overlayItemDisabledClassName,
+  c as overlayItemHighlightClassName,
   t as overlayItemSelectedClassName,
+  s as overlayListClassName,
   l as overlaySubMenuClassName,
+  r as overlaySubMenuListClassName,
   a as overlaySurfaceClassName
 };

package/dist/components/Popup/constants.js

@@ -1,12 +1,12 @@
-import { PopupSize as e } from "../../types/popup.js";
-const s = "z-[52] flex items-center justify-center bg-blackout md:p-4", i = "divide-tertiary divide-y", o = "flex flex-row justify-between py-4 px-6 items-center", t = {
-  [e.Sm]: "dial-sm-popup",
-  [e.Md]: "dial-md-popup",
-  [e.Lg]: "dial-lg-popup"
+import { PopupSize as p } from "../../types/popup.js";
+const o = "z-popup flex items-center justify-center bg-blackout md:p-4", s = "divide-tertiary divide-y", i = "flex flex-row justify-between py-4 px-6 items-center", t = {
+  [p.Sm]: "dial-sm-popup",
+  [p.Md]: "dial-md-popup",
+  [p.Lg]: "dial-lg-popup"
 };
 export {
-  s as overlayBaseClassName,
-  i as popupDividerClassName,
-  o as popupHeaderClassName,
+  o as overlayBaseClassName,
+  s as popupDividerClassName,
+  i as popupHeaderClassName,
   t as popupSizeClassMap
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,58 +1,70 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { useId as w } from "react";
-import { Label as y } from "../New/Label/Label.js";
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import { useId as y } from "react";
+import { Label as S } from "../New/Label/Label.js";
 import { ElementSize as f } from "../../types/size.js";
-import { resolveAccessibleName as I } from "../../utils/accessible-name.js";
-import { mergeClasses as M } from "../../utils/merge-classes.js";
-const A = ({
-  value: o,
-  max: s = 100,
+import { resolveAccessibleName as B } from "../../utils/accessible-name.js";
+import { mergeClasses as h } from "../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as p } from "../../constants/public-class-names.js";
+const z = ({
+  value: s,
+  max: l = 100,
   size: u = f.Standard,
   labelProps: e,
-  valueLabel: i,
-  id: h,
-  className: b,
-  "aria-label": p,
-  ...g
+  valueLabel: r,
+  id: b,
+  className: g,
+  "aria-label": x,
+  ...v
 }) => {
-  const x = w(), t = h ?? x, l = !!e?.label, n = l ? e?.id ?? `${t}-label` : void 0, a = s > 0 ? s : 0, v = Number.isFinite(o) ? o : 0, d = Math.min(Math.max(v, 0), a), N = a > 0 ? d / a * 100 : 0, c = /* @__PURE__ */ r(
+  const N = y(), t = b ?? N, a = !!e?.label, n = a ? e?.id ?? `${t}-label` : void 0, o = l > 0 ? l : 0, w = Number.isFinite(s) ? s : 0, d = Math.min(Math.max(w, 0), o), I = o > 0 ? d / o * 100 : 0, m = /* @__PURE__ */ i(
     "div",
     {
-      ...g,
+      ...v,
       id: t,
       role: "progressbar",
       "aria-valuenow": d,
       "aria-valuemin": 0,
-      "aria-valuemax": a,
+      "aria-valuemax": o,
       "aria-labelledby": n,
-      "aria-label": I(
-        p,
-        l ? void 0 : "Progress"
+      "aria-label": B(
+        x,
+        a ? void 0 : "Progress"
       ),
-      className: M(
+      className: h(
         "w-full overflow-hidden rounded-full bg-control-disable-primary",
         u === f.Small ? "h-1" : "h-2",
-        b
+        g,
+        /* The track is the component's root when there is no label and no
+           readout to wrap it, and the public class belongs on whichever
+           element that is. */
+        !a && !r && p.progressBar
       ),
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ i(
         "div",
         {
-          style: { width: `${N}%` },
+          style: { width: `${I}%` },
           className: "h-full rounded-full bg-control-accent transition-[width] duration-300 motion-reduce:transition-none"
         }
       )
     }
   );
-  return !l && !i ? c : /* @__PURE__ */ m("div", { className: "flex w-full flex-col gap-1", children: [
-    /* @__PURE__ */ m("div", { className: "flex items-baseline gap-2", children: [
-      e && /* @__PURE__ */ r(y, { ...e, id: n }),
-      i && // `ml-auto` rather than `justify-between` so the readout still sits
-      // at the end when there is no label beside it.
-      /* @__PURE__ */ r("span", { className: "dial-tiny-text text-secondary ml-auto shrink-0", children: i })
-    ] }),
-    c
-  ] });
+  return !a && !r ? m : /* @__PURE__ */ c(
+    "div",
+    {
+      className: h(
+        "flex w-full flex-col gap-1",
+        p.progressBar
+      ),
+      children: [
+        /* @__PURE__ */ c("div", { className: "flex items-baseline gap-2", children: [
+          e && /* @__PURE__ */ i(S, { ...e, id: n }),
+          r && /* @__PURE__ */ i("span", { className: "dial-tiny-text text-secondary ml-auto shrink-0", children: r })
+        ] }),
+        m
+      ]
+    }
+  );
 };
 export {
-  A as ProgressBar
+  z as ProgressBar
 };