@epam/ai-dial-ui-kit 0.14.0-dev.4 → 0.14.0-dev.41

package/dist/components/New/Grid/Grid.js

@@ -0,0 +1,301 @@
+import { jsx as o } from "react/jsx-runtime";
+import { themeBalham as ge, colorSchemeLight as _e } from "../../../node_modules/ag-grid-community/dist/package/main.esm.js";
+import { AgGridReact as Ne } from "../../../node_modules/ag-grid-react/dist/package/index.esm.js";
+import { IconZoomCancel as Ie } from "@tabler/icons-react";
+import { useState as Te, useRef as D, useId as Ae, useCallback as s, useMemo as m, useEffect as g } from "react";
+import { useIsMobileScreen as Ge } from "../../../hooks/use-is-mobile-screen.js";
+import { useIsTabletScreen as De } from "../../../hooks/use-is-tablet-screen.js";
+import { GridSelectionMode as Q } from "../../../models/selection-mode.js";
+import { DropdownTrigger as be } from "../../../types/dropdown.js";
+import { debounceFn as Le } from "../../../utils/debounce.js";
+import { baseColumnComparator as Oe, omitUndefined as we } from "../../../utils/grid-comparators.js";
+import { registerAgGridModulesOnce as ye } from "../../../utils/grid-registration.js";
+import { mergeClasses as X } from "../../../utils/merge-classes.js";
+import { Dropdown as ve } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as xe } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { NoDataContent as He } from "../NoDataContent/NoDataContent.js";
+import { SelectionCell as We } from "./components/SelectionCell.js";
+import { SelectionHeader as ke } from "./components/SelectionHeader.js";
+import { GRID_THEME_PARAMS as b, SelectionEventSourceType as S, GRID_ROW_SELECT_CLASS as ze, GRID_HEADER_SELECT_CLASS as Pe, ROW_HEIGHT as Y, GRID_WITHOUT_HEADER_BORDERS_CLASS as Fe, GRID_SELECTION_VISIBLE_CLASS as Ue, GRID_WITH_SELECTION_CLASS as Me, GRID_ROOT_CLASS as Be } from "./constants.js";
+import { SELECTION_COL_DEF as Ve } from "./renderers/constants.js";
+const je = "dial-kit-grid-selection", Je = 150, Ze = 100, Sr = ({
+  columnDefs: _,
+  rowData: c,
+  additionalGridOptions: L,
+  getContextMenuItems: N,
+  className: ee,
+  ariaLabel: re = "Data grid",
+  wrapCustomCellRenderers: I = !0,
+  disabledRowIds: p,
+  selectedRowIds: l,
+  onSelectionChange: O,
+  onGridApiChange: te,
+  getRowId: w,
+  alternateOddRowColors: y = !1,
+  filterPlaceholder: v = "Enter value",
+  emptyStateIcon: x,
+  emptyStateTitle: H = "No results found",
+  emptyStateDescription: W = "Sorry, we couldn't find any results for your search.",
+  loading: k = !1,
+  wrapperBorder: z = !0,
+  withoutHeaderBorders: oe = !1,
+  allowDisabledContextMenu: P = !1,
+  selectionMode: n,
+  selectRowLabel: F,
+  selectAllLabel: U = "Select all rows"
+}) => {
+  ye();
+  const [t, ne] = Te(), ie = Ge(), se = De(), T = D(/* @__PURE__ */ new Set()), M = D(
+    void 0
+  ), B = `dial-kit-grid-selection-${Ae()}`, d = D({
+    getRowId: w,
+    getContextMenuItems: N,
+    onSelectionChange: O,
+    selectRowLabel: F,
+    wrapCustomCellRenderers: I
+  });
+  d.current = {
+    getRowId: w,
+    getContextMenuItems: N,
+    onSelectionChange: O,
+    selectRowLabel: F,
+    wrapCustomCellRenderers: I
+  };
+  const a = s((e) => {
+    const r = d.current.getRowId;
+    return r ? r(e) : String(e.id ?? JSON.stringify(e));
+  }, []), V = !!N, j = !!I, ae = m(
+    () => ge.withPart(_e).withParams({
+      ...b,
+      oddRowBackgroundColor: y ? b.oddRowBackgroundColor : b.backgroundColor,
+      wrapperBorder: z
+    }),
+    [y, z]
+  ), le = s((e) => {
+    e.api.sizeColumnsToFit();
+  }, []), ce = ie || se || (l?.size ?? 0) > 0, u = s(
+    (e) => !!e && !!p?.has(a(e)),
+    [p, a]
+  ), C = s(
+    (e, r, i) => V ? /* @__PURE__ */ o(
+      ve,
+      {
+        trigger: [be.ContextMenu],
+        items: e.data ? d.current.getContextMenuItems?.(e.data) ?? [] : [],
+        anchorToMouse: !0,
+        matchReferenceWidth: !0,
+        className: X(
+          "size-full",
+          i && "cursor-not-allowed opacity-75"
+        ),
+        disabled: i && !P,
+        children: /* @__PURE__ */ o("span", { className: "block min-w-0 max-w-full flex-1", children: r })
+      }
+    ) : r,
+    [V, P]
+  ), A = s(
+    (e) => {
+      if (!e.data) return null;
+      const r = u(e.data);
+      return C(
+        e,
+        /* @__PURE__ */ o(
+          xe,
+          {
+            text: e.value == null ? "" : String(e.value),
+            className: "max-w-full dial-small-text text-primary",
+            hideTooltip: r
+          }
+        ),
+        r
+      );
+    },
+    [u, C]
+  ), R = s(
+    (e) => e === S.API || e === S.ROW_DATA_CHANGED,
+    []
+  ), de = m(
+    () => Le((e) => {
+      const i = (e.selectedNodes ?? []).map((q) => q.data), f = new Set(i.map(a));
+      T.current = f, M.current = e.source, !R(e.source) && d.current.onSelectionChange?.(f, i);
+    }, Ze),
+    [R, a]
+  ), G = m(() => {
+    if (n)
+      return {
+        ...Ve,
+        colId: je,
+        headerName: "",
+        headerClass: Pe,
+        cellClass: ze,
+        headerComponent: n === Q.MULTIPLE ? ke : void 0,
+        headerComponentParams: { label: U },
+        cellRenderer: (e) => {
+          if (!e.data) return null;
+          const r = a(e.data);
+          return /* @__PURE__ */ o(
+            We,
+            {
+              params: e,
+              mode: n,
+              rowId: r,
+              radioName: B,
+              label: d.current.selectRowLabel?.(e.data) ?? "Select row",
+              disabled: p?.has(r)
+            }
+          );
+        }
+      };
+  }, [
+    n,
+    U,
+    a,
+    p,
+    B
+  ]), J = s(
+    (e) => {
+      if (!e.cellRenderer)
+        return { ...e, cellRenderer: A };
+      const r = d.current.wrapCustomCellRenderers;
+      if (!(typeof r == "function" ? r(e) : !!r))
+        return e;
+      const f = e.cellRenderer;
+      return { ...e, cellRenderer: (E) => {
+        const he = u(E.data), K = typeof f == "function" ? f : void 0, Ee = K ? /* @__PURE__ */ o(K, { ...E }) : A(E);
+        return C(E, Ee, he);
+      } };
+    },
+    [u, A, C]
+  ), ue = m(() => {
+    const e = j ? (_ ?? []).map(J) : _ ?? [];
+    return G ? [G, ...e] : e;
+  }, [_, j, J, G]), {
+    defaultColDef: Z,
+    rowSelection: h,
+    ...me
+  } = L ?? {}, fe = m(
+    () => ({
+      minWidth: Je,
+      resizable: !0,
+      sortable: !0,
+      floatingFilter: !0,
+      filter: "agTextColumnFilter",
+      filterParams: {
+        filterPlaceholder: v,
+        buttons: ["reset"]
+      },
+      comparator: Oe,
+      ...we(Z)
+    }),
+    [v, Z]
+  ), Se = (e) => {
+    e.api.sizeColumnsToFit(), ne(e.api), L?.onGridReady?.(e), te?.(e.api);
+  };
+  g(() => {
+    t && c && t.setGridOption("rowData", c);
+  }, [t, c]);
+  const pe = s(
+    () => /* @__PURE__ */ o(
+      He,
+      {
+        live: !0,
+        title: H,
+        description: W,
+        icon: x ?? /* @__PURE__ */ o(Ie, { size: 100, stroke: 0.5, "aria-hidden": "true" })
+      }
+    ),
+    [H, W, x]
+  ), $ = typeof h == "object" ? h : void 0, Ce = m(() => n ? {
+    isRowSelectable: (e) => !u(e.data),
+    /*
+      Merged, not replaced, the way `defaultColDef` is: a consumer reaching
+      for `isRowSelectable` alone would otherwise hand ag-Grid a whole new
+      object and lose the three settings below with it.
+    */
+    ...$,
+    /*
+      `selectionMode` owns the mode, because it also decides whether the
+      selection column draws checkboxes or radios.
+    */
+    mode: n === Q.SINGLE ? "singleRow" : "multiRow",
+    // The controls live in this component's own selection column, so
+    // ag-Grid's inputs are switched off and only its behaviour is used.
+    checkboxes: !1,
+    headerCheckbox: !1
+  } : h, [
+    h,
+    $,
+    u,
+    n
+  ]);
+  g(() => {
+    t && c && T.current.size && T.current.forEach((e) => {
+      const r = t.getRowNode(e);
+      r && !r.isSelected() && r.setSelected(!0, !1, S.API);
+    });
+  }, [t, c]), g(() => {
+    t && l && (t.deselectAll("all", S.API), l.forEach((e) => {
+      const r = t.getRowNode(e);
+      r && !r.isSelected() && r.setSelected(!0, !1, S.API);
+    }));
+  }, [t, l]);
+  const Re = s(
+    (e) => e.data ? a(e.data) : "",
+    [a]
+  );
+  return g(() => {
+    const e = R(
+      M.current
+    );
+    if (t && l?.size && e) {
+      const r = Array.from(l)[0];
+      if (r) {
+        const i = t.getRowNode(r);
+        i && t.ensureNodeVisible(i);
+      }
+    }
+  }, [t, R, l]), /* @__PURE__ */ o(
+    "div",
+    {
+      className: X(
+        Be,
+        "size-full",
+        n && Me,
+        n && ce && Ue,
+        oe && Fe,
+        ee
+      ),
+      role: "region",
+      "aria-label": re,
+      "aria-busy": k,
+      children: /* @__PURE__ */ o("div", { className: "h-full overflow-x-auto", children: /* @__PURE__ */ o(
+        Ne,
+        {
+          rowModelType: "clientSide",
+          headerHeight: Y,
+          rowHeight: Y,
+          cellSelection: !1,
+          theme: ae,
+          autoSizeStrategy: { type: "fitGridWidth" },
+          columnDefs: ue,
+          defaultColDef: fe,
+          onGridSizeChanged: le,
+          onGridReady: Se,
+          loading: k,
+          suppressCellFocus: !0,
+          suppressDragLeaveHidesColumns: !0,
+          noRowsOverlayComponent: pe,
+          rowData: c,
+          rowSelection: Ce,
+          onSelectionChanged: de,
+          getRowId: Re,
+          ...me
+        }
+      ) })
+    }
+  );
+};
+export {
+  je as GRID_SELECTION_COLUMN_ID,
+  Sr as Grid
+};

package/dist/components/New/Grid/components/SelectionCell.js

@@ -0,0 +1,50 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useState as E, useEffect as d } from "react";
+import { GridSelectionMode as S } from "../../../../models/selection-mode.js";
+import { Checkbox as u } from "../../Checkbox/Checkbox.js";
+import { Radio as p } from "../../Radio/Radio.js";
+import { SelectionEventSourceType as C } from "../constants.js";
+const g = ({
+  params: l,
+  mode: r,
+  label: n,
+  radioName: m,
+  rowId: a,
+  disabled: o
+}) => {
+  const e = l.node, [c, f] = E(() => !!e.isSelected());
+  d(() => {
+    const t = () => f(!!e.isSelected());
+    return t(), e.addEventListener("rowSelected", t), () => e.removeEventListener("rowSelected", t);
+  }, [e]);
+  const i = (t) => {
+    o || e.setSelected(
+      t,
+      // Single mode clears the rest of the selection, as a radio group does.
+      r === S.SINGLE,
+      C.CHECKBOX_SELECTED
+    );
+  };
+  return r === S.SINGLE ? /* @__PURE__ */ s(
+    p,
+    {
+      name: m,
+      value: a,
+      isSelected: c,
+      disabled: o,
+      "aria-label": n,
+      onChange: () => i(!0)
+    }
+  ) : /* @__PURE__ */ s(
+    u,
+    {
+      isSelected: c,
+      disabled: o,
+      "aria-label": n,
+      onChange: i
+    }
+  );
+};
+export {
+  g as SelectionCell
+};

package/dist/components/New/Grid/components/SelectionHeader.js

@@ -0,0 +1,46 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useState as f, useEffect as E, useCallback as m } from "react";
+import { Checkbox as u } from "../../Checkbox/Checkbox.js";
+import { SelectionEventSourceType as s } from "../constants.js";
+const o = (e) => {
+  let n = 0, l = 0;
+  return e.forEachNodeAfterFilter((t) => {
+    t.selectable !== !1 && (l++, t.isSelected() && n++);
+  }), { selected: n, selectable: l };
+}, v = ({
+  api: e,
+  label: n
+}) => {
+  const [{ selected: l, selectable: t }, c] = f(
+    () => o(e)
+  );
+  E(() => {
+    const r = () => c(o(e));
+    return r(), e.addEventListener("selectionChanged", r), e.addEventListener("modelUpdated", r), () => {
+      e.isDestroyed() || (e.removeEventListener("selectionChanged", r), e.removeEventListener("modelUpdated", r));
+    };
+  }, [e]);
+  const d = m(
+    (r) => {
+      if (r) {
+        e.selectAll("filtered", s.CHECKBOX_SELECTED);
+        return;
+      }
+      e.deselectAll("filtered", s.CHECKBOX_SELECTED);
+    },
+    [e]
+  );
+  return /* @__PURE__ */ i(
+    u,
+    {
+      isSelected: t > 0 && l === t,
+      isIndeterminate: l > 0 && l < t,
+      disabled: t === 0,
+      "aria-label": n,
+      onChange: d
+    }
+  );
+};
+export {
+  v as SelectionHeader
+};

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

@@ -0,0 +1,44 @@
+const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-grid-without-header-borders", i = "dial-kit-grid-row-select", l = "dial-kit-grid-header-select", n = "dial-kit-grid-selection-visible", c = "dial-kit-grid-align-right", C = 40, o = "0.5px solid var(--stroke-tertiary, #E0E6F0)", E = {
+  accentColor: "var(--bg-control-accent, #1D4ED8)",
+  backgroundColor: "var(--bg-layer-raised, #FCFCFC)",
+  oddRowBackgroundColor: "var(--bg-layer-sunken, #EEF1F7)",
+  selectedRowBackgroundColor: "var(--bg-control-accent-alpha, #2764D90F)",
+  rowHoverColor: "var(--bg-control-accent-alpha-hover, #2764D924)",
+  borderColor: "var(--stroke-tertiary, #E0E6F0)",
+  // Dividers inside the table sit on the thin stroke (0.5px) rather than the
+  // 1px main stroke that controls and standalone dividers use, so a dense grid
+  // reads as rows of data instead of a set of boxes. Sub-pixel widths are
+  // antialiased rather than snapped, which is what makes the line look lighter.
+  // `wrapperBorder` and the pinned-column boundary are left on the main stroke
+  // by the theme: those frame the table and separate its regions rather than
+  // dividing rows and columns.
+  rowBorder: o,
+  headerRowBorder: o,
+  headerColumnBorder: o,
+  chromeBackgroundColor: "var(--bg-layer-base, #F5F7FA)",
+  foregroundColor: "var(--text-primary, #161B2D)",
+  headerTextColor: "var(--text-secondary, #57647A)",
+  // 1.0 asked the browser for dark native widgets while painting a light
+  // theme; the scheme now matches the palette it is used with.
+  browserColorScheme: "light",
+  headerFontSize: 14,
+  headerFontWeight: 600,
+  fontSize: 14,
+  fontFamily: "var(--theme-font, var(--font-inter))",
+  spacing: 4,
+  borderRadius: 4,
+  wrapperBorderRadius: 8
+};
+var e = /* @__PURE__ */ ((r) => (r.API = "api", r.ROW_DATA_CHANGED = "rowDataChanged", r.CHECKBOX_SELECTED = "checkboxSelected", r))(e || {});
+export {
+  c as GRID_ALIGN_RIGHT_CLASS,
+  l as GRID_HEADER_SELECT_CLASS,
+  a as GRID_ROOT_CLASS,
+  i as GRID_ROW_SELECT_CLASS,
+  n as GRID_SELECTION_VISIBLE_CLASS,
+  E as GRID_THEME_PARAMS,
+  d as GRID_WITHOUT_HEADER_BORDERS_CLASS,
+  t as GRID_WITH_SELECTION_CLASS,
+  C as ROW_HEIGHT,
+  e as SelectionEventSourceType
+};

package/dist/components/New/Grid/renderers/DateCellRenderer.js

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import { convertToDate as p } from "../../../../utils/grid-date.js";
+import { mergeClasses as T } from "../../../../utils/merge-classes.js";
+import { EllipsisTooltip as c } from "../../EllipsisTooltip/EllipsisTooltip.js";
+import { DEFAULT_LOCALE as d, DEFAULT_DATE_FORMAT_OPTIONS as D } from "./constants.js";
+const L = ({
+  value: s,
+  locale: e = d,
+  options: o = D,
+  emptyPlaceholder: m,
+  className: a,
+  hideTooltip: l = !1
+}) => {
+  const t = p(s), i = f(() => t ? new Intl.DateTimeFormat(e, o).format(t) : m, [t, m, e, o]), n = t ? t.toISOString() : void 0;
+  return /* @__PURE__ */ r(
+    c,
+    {
+      text: n ? /* @__PURE__ */ r("time", { dateTime: n, children: i }) : /* @__PURE__ */ r("span", { children: i }),
+      className: T("dial-small-text text-primary", a),
+      hideTooltip: l
+    }
+  );
+};
+export {
+  L as DateCellRenderer
+};

package/dist/components/New/Grid/renderers/constants.js

@@ -0,0 +1,25 @@
+const t = "en-US", s = {
+  year: "numeric",
+  month: "numeric",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit"
+}, e = 40, i = {
+  minWidth: e,
+  width: e,
+  maxWidth: e,
+  resizable: !1,
+  sortable: !1,
+  filter: !1,
+  floatingFilter: !1,
+  suppressMovable: !0,
+  suppressHeaderMenuButton: !0,
+  suppressAutoSize: !0,
+  suppressSizeToFit: !0
+};
+export {
+  s as DEFAULT_DATE_FORMAT_OPTIONS,
+  t as DEFAULT_LOCALE,
+  i as SELECTION_COL_DEF
+};

package/dist/components/New/Highlight/Highlight.js

@@ -0,0 +1,50 @@
+import { jsx as c, jsxs as h, Fragment as g } from "react/jsx-runtime";
+import { mergeClasses as s } from "../../../utils/merge-classes.js";
+import { EllipsisTooltip as t } from "../EllipsisTooltip/EllipsisTooltip.js";
+const i = {
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
+}, C = (e) => e === 1 ? "!truncate !whitespace-nowrap" : `${i[e] ?? i[2]} !whitespace-normal`, d = ({
+  text: e,
+  query: a,
+  markClassName: m,
+  className: n,
+  maxLines: r = 2
+}) => {
+  const o = C(r);
+  if (!a.trim())
+    return /* @__PURE__ */ c(
+      t,
+      {
+        className: s(o, n),
+        text: e
+      }
+    );
+  const l = e.toLowerCase().indexOf(a.toLowerCase()), p = l === -1 ? e : /* @__PURE__ */ h(g, { children: [
+    e.slice(0, l),
+    /* @__PURE__ */ c(
+      "mark",
+      {
+        className: s(
+          "text-accent bg-control-accent-alpha-hover",
+          m
+        ),
+        children: e.slice(l, l + a.length)
+      }
+    ),
+    e.slice(l + a.length)
+  ] });
+  return /* @__PURE__ */ c(
+    t,
+    {
+      className: s(o, n),
+      text: p
+    }
+  );
+};
+export {
+  d as Highlight
+};

package/dist/components/New/IconButton/IconButton.js

@@ -0,0 +1,46 @@
+import { jsx as r } from "react/jsx-runtime";
+import { ButtonAppearance as b } from "../../../types/button.js";
+import { mergeClasses as u } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as p } from "../../../utils/accessible-name.js";
+import { ElementSize as t } from "../../../types/size.js";
+import { Tooltip as S } from "../Tooltip/Tooltip.js";
+import { getButtonClassNames as f } from "../Button/utils.js";
+const g = {
+  [t.Small]: "size-[24px]",
+  [t.Standard]: "size-[40px] dial-kit-enhanced-target",
+  [t.Large]: "size-[48px] dial-kit-enhanced-target"
+}, B = ({
+  variant: a,
+  appearance: n = b.Solid,
+  size: l = t.Standard,
+  className: m,
+  icon: s,
+  tooltipProps: e,
+  type: c = "button",
+  ...o
+}) => {
+  const d = u(
+    "dial-kit-base-icon-button dial-kit-base-button",
+    a && f(a, n),
+    // 24px is below the AAA target size, so only the larger tiers get the
+    // enhanced pointer target — see the accessibility rules in AGENTS.md.
+    g[l],
+    m
+  ), i = /* @__PURE__ */ r(
+    "button",
+    {
+      ...o,
+      type: c,
+      className: d,
+      "aria-label": p(
+        o["aria-label"],
+        e?.tooltip
+      ),
+      children: s
+    }
+  );
+  return e ? /* @__PURE__ */ r(S, { asChild: !0, ...e, children: i }) : i;
+};
+export {
+  B as IconButton
+};

package/dist/components/New/IconButton/IconButtonWrappers.js

@@ -0,0 +1,40 @@
+import { jsx as u } from "react/jsx-runtime";
+import { ButtonAppearance as t, ButtonVariant as o } from "../../../types/button.js";
+import { IconButton as p } from "./IconButton.js";
+const e = (n, r) => ({ appearance: a, ...c }) => /* @__PURE__ */ u(
+  p,
+  {
+    ...c,
+    variant: n,
+    appearance: a || r
+  }
+), i = (n, r) => ({ variant: a, ...c }) => /* @__PURE__ */ u(
+  p,
+  {
+    ...c,
+    variant: a || r,
+    appearance: n
+  }
+), l = e(
+  o.Primary,
+  t.Solid
+), S = e(
+  o.Neutral,
+  t.Solid
+), W = e(
+  o.Danger,
+  t.Ghost
+), d = i(
+  t.Ghost,
+  o.Primary
+), f = i(
+  t.Solid,
+  o.Static
+);
+export {
+  W as DangerIconButton,
+  d as GhostIconButton,
+  S as NeutralIconButton,
+  l as PrimaryIconButton,
+  f as StaticIconButton
+};

package/dist/components/New/InfoButton/InfoButton.js

@@ -0,0 +1,39 @@
+import { jsx as t } from "react/jsx-runtime";
+import { IconInfoCircle as n } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as l } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
+import { ElementSize as m } from "../../../types/size.js";
+import { mergeClasses as a } from "../../../utils/merge-classes.js";
+import { IconButton as c } from "../IconButton/IconButton.js";
+const S = ({
+  caption: o,
+  onClick: e,
+  "aria-label": r
+}) => {
+  if (!o) return null;
+  const i = a(
+    "text-secondary hover:text-control-accent-hover active:text-control-accent-active",
+    "focus-visible:outline focus-visible:outline-focus"
+  );
+  return /* @__PURE__ */ t(
+    c,
+    {
+      "aria-label": r,
+      className: i,
+      icon: /* @__PURE__ */ t(
+        n,
+        {
+          size: s.SM,
+          stroke: l,
+          "aria-hidden": "true"
+        }
+      ),
+      onClick: e,
+      size: m.Small,
+      tooltipProps: { tooltip: o }
+    }
+  );
+};
+export {
+  S as InfoButton
+};