@canonical/maas-react-components 2.7.0 → 2.7.2

package/dist/@canonical/maas-react-components.es.js

@@ -1,678 +1,2 @@
-import { C as Re, D as Ae, F as Me, G as Le, I as Fe, L as De, a as Be, M as Oe, N as Ue, b as je, e as Ve, f as Te, P as qe, S as Ge, c as Ke, T as Qe, d as $e, m as He, t as ze, u as Ze } from "../QueryInput-D7uXzKgr.mjs";
-import { jsx as a, jsxs as w, Fragment as te } from "react/jsx-runtime";
-import { Link as ne, Spinner as H, Label as le, Button as V, Icon as K, CheckboxInput as se, useClickOutside as oe, useOnEscapePressed as ae, SearchBox as z } from "@canonical/react-components";
-import L from "classnames";
-import { useReducer as ie, useCallback as S, useId as q, useMemo as O, useState as U, useEffect as G, useRef as T } from "react";
-import { useDropzone as re } from "react-dropzone";
-const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href: l, rel: "noreferrer noopener", target: "_blank", children: t }), ce = ({
-  percentComplete: t
-}) => /* @__PURE__ */ w("small", { className: "progress-indicator", children: [
-  t,
-  "% ",
-  /* @__PURE__ */ a(H, { className: "progress-indicator__spinner" })
-] }), Z = ({
-  children: t,
-  className: l,
-  isVisible: e
-}) => /* @__PURE__ */ a(
-  "div",
-  {
-    className: L("fade-in--down", l),
-    "aria-hidden": e ? "false" : "true",
-    style: { visibility: e ? "visible" : "hidden" },
-    children: t
-  }
-), we = ({
-  children: t,
-  ...l
-}) => /* @__PURE__ */ a(Z, { isVisible: !l["aria-hidden"], children: /* @__PURE__ */ a("div", { className: "p-form__nested-group", ...l, children: t }) }), Se = ({ activeStep: t, items: l }) => /* @__PURE__ */ a("ol", { className: "stepper", children: l.map((e, n) => {
-  const r = n === t, p = n < t;
-  return /* @__PURE__ */ a("li", { "aria-label": e, className: "stepper__item", children: /* @__PURE__ */ a(
-    "p",
-    {
-      "aria-label": p ? `${e} (completed)` : e,
-      className: L("stepper__title", {
-        "stepper__title--is-active": r,
-        "stepper__title--is-complete": p
-      }),
-      children: e
-    }
-  ) }, n);
-}) }), de = () => {
-  const t = (u, g) => {
-    switch (g.type) {
-      case "add-files":
-        return {
-          acceptedFiles: [
-            ...u.acceptedFiles,
-            ...g.payload.acceptedFiles
-          ],
-          fileRejections: [
-            ...u.fileRejections,
-            ...g.payload.fileRejections
-          ]
-        };
-      case "remove-accepted":
-        return {
-          ...u,
-          acceptedFiles: u.acceptedFiles.filter(
-            (v) => v !== g.payload
-          )
-        };
-      case "remove-rejected":
-        return {
-          ...u,
-          fileRejections: u.fileRejections.filter(
-            (v) => v !== g.payload
-          )
-        };
-    }
-  }, [{ acceptedFiles: l, fileRejections: e }, n] = ie(
-    t,
-    {
-      acceptedFiles: [],
-      fileRejections: []
-    }
-  ), r = S(
-    (u, g) => n({
-      type: "add-files",
-      payload: { acceptedFiles: u, fileRejections: g }
-    }),
-    [n]
-  );
-  return { acceptedFiles: l, fileRejections: e, onFileUpload: r, removeFile: (u) => n({ type: "remove-accepted", payload: u }), removeRejectedFile: (u) => n({ type: "remove-rejected", payload: u }) };
-}, Ie = ({
-  accept: t,
-  error: l,
-  files: e,
-  help: n,
-  label: r,
-  maxFiles: p,
-  maxSize: m,
-  minSize: u,
-  onFileUpload: g,
-  onRemoveFile: v,
-  rejectedFiles: C
-}) => {
-  const d = de(), b = e ?? d.acceptedFiles, f = C ?? d.fileRejections, E = g ?? d.onFileUpload, h = (c) => {
-    v ? v(c) : "file" in c && "errors" in c ? d.removeRejectedFile(c) : d.removeFile(c);
-  }, { getRootProps: x, getInputProps: i } = re({
-    accept: t,
-    maxFiles: p,
-    maxSize: m,
-    minSize: u,
-    onDrop: E
-  }), y = q();
-  return /* @__PURE__ */ w(
-    "div",
-    {
-      className: L("p-form__group p-form-validation", {
-        "is-error": !!l
-      }),
-      children: [
-        r && /* @__PURE__ */ a(le, { id: y, children: r }),
-        n && /* @__PURE__ */ a("p", { className: "p-form-help-text", children: n }),
-        /* @__PURE__ */ w("div", { className: "p-form__control", children: [
-          !p || b.length + f.length < p ? /* @__PURE__ */ a("div", { className: "file-upload__wrapper", children: /* @__PURE__ */ w(
-            "div",
-            {
-              ...x(),
-              "aria-labelledby": r ? y : void 0,
-              className: "file-upload",
-              "data-testid": "file-upload",
-              children: [
-                /* @__PURE__ */ a("input", { ...i() }),
-                /* @__PURE__ */ a("button", { className: "file-upload__button", type: "button", children: "Drag and drop files here or click to upload" })
-              ]
-            }
-          ) }) : null,
-          /* @__PURE__ */ w("div", { className: "file-upload__files-list", children: [
-            f && f.map((c) => /* @__PURE__ */ a("span", { className: "is-error", children: /* @__PURE__ */ w("div", { className: "file-upload__file is-rejected", children: [
-              c.file.name,
-              /* @__PURE__ */ a(
-                V,
-                {
-                  appearance: "base",
-                  className: "file-upload__file-remove-button",
-                  onClick: () => h(c),
-                  type: "button",
-                  children: /* @__PURE__ */ a(K, { name: "close", children: "Remove file" })
-                }
-              )
-            ] }) }, c.file.name)),
-            b && b.map((c) => /* @__PURE__ */ w("div", { className: "file-upload__file", children: [
-              c.name,
-              c.percentUploaded !== void 0 ? /* @__PURE__ */ a(ce, { percentComplete: c.percentUploaded }) : /* @__PURE__ */ a(
-                V,
-                {
-                  appearance: "base",
-                  className: "file-upload__file-remove-button",
-                  onClick: () => h(c),
-                  type: "button",
-                  children: /* @__PURE__ */ a(K, { name: "close", children: "Remove file" })
-                }
-              )
-            ] }, c.name))
-          ] }),
-          l ? /* @__PURE__ */ w("p", { className: "p-form-validation__message", children: [
-            /* @__PURE__ */ a("strong", { children: "Error: " }),
-            l
-          ] }) : null
-        ] })
-      ]
-    }
-  );
-}, X = (t, l) => t.label.localeCompare(l.label, "en", { numeric: !0 }), ue = (t) => (l, e) => {
-  if (t) {
-    const n = t.has(l.value), r = t.has(e.value);
-    if (n && !r) return -1;
-    if (!n && r) return 1;
-  }
-  return 0;
-}, pe = (t) => {
-  const l = /* @__PURE__ */ new Map();
-  return t.forEach((e) => {
-    const n = e.group || "Ungrouped", r = l.get(n) || [];
-    r.push(e), l.set(n, r);
-  }), Array.from(l, ([e, n]) => ({ group: e, items: n }));
-}, he = ({
-  items: t,
-  selectedItems: l,
-  disabledItems: e,
-  header: n,
-  updateItems: r,
-  isOpen: p,
-  footer: m,
-  sortFn: u = X,
-  groupFn: g = pe,
-  ...v
-}) => {
-  const C = O(
-    () => new Set(l.map((i) => i.value)),
-    [l]
-  ), d = O(
-    () => new Set(e.map((i) => i.value)),
-    [e]
-  ), [b, f] = U(new Set(C));
-  G(() => {
-    p && f(new Set(C));
-  }, [p]);
-  const E = O(() => t.some((i) => i.group), [t]), h = O(
-    () => E ? g(t) : [{ group: "Ungrouped", items: t }],
-    [t, g]
-  ), x = (i) => {
-    const { checked: y, value: c } = i.target, P = t.find((I) => `${I.value}` === c);
-    if (P) {
-      const I = y ? [...l, P] : l.filter((F) => `${F.value}` !== c) ?? [];
-      r(I);
-    }
-  };
-  return /* @__PURE__ */ a(Z, { isVisible: p, className: "put-above", children: /* @__PURE__ */ w("div", { className: "multi-select__dropdown", role: "listbox", ...v, children: [
-    n || null,
-    h.map(({ group: i, items: y }) => /* @__PURE__ */ w("div", { className: "multi-select__group", children: [
-      E ? /* @__PURE__ */ a("h5", { className: "multi-select__dropdown-header", children: i }) : null,
-      /* @__PURE__ */ a("ul", { className: "multi-select__dropdown-list", "aria-label": i, children: y.sort(u).sort(ue(b)).map((c) => /* @__PURE__ */ a("li", { className: "multi-select__dropdown-item", children: /* @__PURE__ */ a(
-        se,
-        {
-          disabled: d.has(c.value),
-          label: c.label,
-          checked: C.has(c.value),
-          value: c.value,
-          onChange: x
-        },
-        c.value
-      ) }, c.value)) })
-    ] }, i)),
-    m ? /* @__PURE__ */ a("div", { className: "multi-select__footer", children: m }) : null
-  ] }) });
-}, Ce = ({
-  disabled: t,
-  selectedItems: l = [],
-  label: e,
-  onItemsUpdate: n,
-  placeholder: r,
-  required: p = !1,
-  items: m = [],
-  disabledItems: u = [],
-  dropdownHeader: g,
-  dropdownFooter: v,
-  variant: C = "search"
-}) => {
-  const d = oe(() => {
-    f(!1), h("");
-  });
-  ae(() => {
-    f(!1), h("");
-  });
-  const [b, f] = U(!1), [E, h] = U("");
-  G(() => {
-    b || h("");
-  }, [b]);
-  const [x, i] = U([]), y = l || x, c = (_) => {
-    const R = Array.from(new Set(_));
-    i(R), n && n(R);
-  }, P = q(), I = q(), F = y.filter(
-    (_) => m.some((R) => R.value === _.value)
-  ).sort(X).map((_) => _.label).join(", ");
-  return /* @__PURE__ */ a("div", { ref: d, children: /* @__PURE__ */ w("div", { className: "multi-select", children: [
-    C === "search" ? /* @__PURE__ */ a(
-      z,
-      {
-        externallyControlled: !0,
-        "aria-controls": P,
-        "aria-expanded": b,
-        id: I,
-        role: "combobox",
-        "aria-label": e || r || "Search",
-        disabled: t,
-        autoComplete: "off",
-        onChange: (_) => {
-          h(_), f(!0);
-        },
-        onFocus: () => f(!0),
-        placeholder: r ?? "Search",
-        required: p,
-        type: "text",
-        value: E,
-        className: "multi-select__input"
-      }
-    ) : /* @__PURE__ */ a(
-      "button",
-      {
-        role: "combobox",
-        type: "button",
-        "aria-label": e || r || "Select items",
-        "aria-controls": P,
-        "aria-expanded": b,
-        className: "multi-select__select-button",
-        onClick: () => {
-          f((_) => !_);
-        },
-        children: /* @__PURE__ */ a("span", { className: "multi-select__condensed-text", children: y.length > 0 ? F : r ?? "Select items" })
-      }
-    ),
-    /* @__PURE__ */ a(
-      he,
-      {
-        id: P,
-        isOpen: b,
-        items: E.length > 0 ? m.filter(
-          (_) => _.label.toLowerCase().includes(E.toLowerCase())
-        ) : m,
-        selectedItems: y,
-        disabledItems: u,
-        header: g,
-        updateItems: c,
-        footer: v || /* @__PURE__ */ w(te, { children: [
-          /* @__PURE__ */ a(
-            V,
-            {
-              appearance: "link",
-              onClick: () => {
-                const _ = m.filter(
-                  (R) => !u.some(
-                    (D) => D.value === R.value
-                  )
-                );
-                c([...y, ..._]);
-              },
-              type: "button",
-              children: "Select all"
-            }
-          ),
-          /* @__PURE__ */ a(
-            V,
-            {
-              appearance: "link",
-              onClick: () => {
-                const _ = y.filter(
-                  (R) => u.some(
-                    (D) => D.value === R.value
-                  )
-                );
-                c(_);
-              },
-              type: "button",
-              children: "Clear"
-            }
-          )
-        ] })
-      }
-    )
-  ] }) });
-}, Q = {
-  DEFAULT: 4,
-  EXPANDED: 15
-}, k = {
-  OPEN_PAREN: "(",
-  CLOSE_PAREN: ")",
-  EQUALS: "=",
-  COLON: ":",
-  COMMA: ","
-}, j = (t, l = t.length) => {
-  const e = me(t, l), { token: n, tokenStart: r, tokenEnd: p } = fe(t, l);
-  return { context: e, token: n, tokenStart: r, tokenEnd: p };
-}, me = (t, l) => {
-  let e = 0;
-  for (let n = l - 1; n >= 0; n--) {
-    const r = t[n];
-    if (r === k.CLOSE_PAREN)
-      e++;
-    else if (r === k.OPEN_PAREN) {
-      if (e === 0) {
-        const m = t.slice(0, n).trimEnd().match(/([a-zA-Z0-9_-]+)\s*:\s*$/);
-        return (m == null ? void 0 : m[1]) || "";
-      }
-      e--;
-    }
-  }
-  return "";
-}, fe = (t, l) => {
-  let e = l, n = l;
-  for (; n < t.length && /[^\s=(),]/.test(t[n]); )
-    n++;
-  for (; e > 0 && /[^\s=(),]/.test(t[e - 1]); )
-    e--;
-  return { token: t.slice(e, n), tokenStart: e, tokenEnd: n };
-}, $ = (t, l) => {
-  const e = t.charAt(l - 1);
-  return l > 0 && (e === k.CLOSE_PAREN || e === k.COMMA);
-}, Ee = ({
-  className: t,
-  disabled: l = !1,
-  search: e,
-  setSearch: n,
-  context: r,
-  setContext: p,
-  setToken: m,
-  suggestions: u,
-  isLoading: g = !1,
-  placeholder: v,
-  ...C
-}) => {
-  const [d, b] = U({
-    isVisible: !1,
-    highlightedIndex: -1,
-    showingMore: !1,
-    cursorPosition: 0
-  }), f = T(null), E = T(null), h = T(null), x = O(() => {
-    const s = d.showingMore ? Q.EXPANDED : Q.DEFAULT, o = u.slice(0, s);
-    return !d.showingMore && u.length > s ? [...o, { value: "Show more...", type: "more" }] : o;
-  }, [u, d.showingMore]), i = S(
-    (s) => {
-      b(typeof s == "function" ? (o) => ({ ...o, ...s(o) }) : (o) => ({ ...o, ...s }));
-    },
-    []
-  ), y = S(
-    (s) => {
-      f.current && !f.current.contains(s.target) && i({
-        isVisible: !1,
-        highlightedIndex: -1
-      });
-    },
-    [i]
-  ), c = S(
-    (s, o) => {
-      const { tokenStart: N, tokenEnd: A } = o;
-      if (s.type === "filter") {
-        const B = s.value + k.COLON + k.OPEN_PAREN;
-        return e.slice(0, N) + B + e.slice(A);
-      }
-      if (r.length === 0) {
-        const B = s.type + k.COLON + k.OPEN_PAREN + k.EQUALS + s.value;
-        return e.slice(0, N) + B + e.slice(A);
-      }
-      const M = e.charAt(N - 1) === k.EQUALS ? s.value : k.EQUALS + s.value;
-      return e.slice(0, N) + M + e.slice(A);
-    },
-    [e, r]
-  ), P = S(
-    (s) => {
-      const o = x[s];
-      if (!o) return;
-      if (o.type === "more") {
-        i({ showingMore: !0 });
-        return;
-      }
-      const N = j(
-        e,
-        d.cursorPosition
-      ), A = c(o, N), M = N.tokenStart + (o.type === "filter" ? o.value.length + 2 : r.length === 0 ? o.type.length + o.value.length + 3 : o.value.length + 1), { context: B, token: ee } = j(
-        A,
-        M
-      );
-      p(B), m(ee), n(A), setTimeout(() => {
-        h.current && (h.current.focus(), h.current.setSelectionRange(
-          M,
-          M
-        ));
-      }, 0), i({
-        highlightedIndex: 0,
-        showingMore: !1,
-        isVisible: o.type === "filter",
-        cursorPosition: M
-      });
-    },
-    [
-      x,
-      c,
-      e,
-      d.cursorPosition,
-      r,
-      p,
-      m,
-      n,
-      i
-    ]
-  ), I = S(() => {
-    if (!h.current) return;
-    const s = h.current.selectionStart || 0, { context: o, token: N } = j(
-      e,
-      s
-    );
-    p(o), m(N), i((A) => ({
-      ...A,
-      isVisible: !$(e, s),
-      cursorPosition: s
-    }));
-  }, [e, p, m, i]), F = S(
-    (s) => {
-      const { key: o } = s;
-      if (d.isVisible) {
-        const N = x.length;
-        switch (o) {
-          case "Tab":
-          case "ArrowDown":
-            s.preventDefault(), i({
-              highlightedIndex: (d.highlightedIndex + 1) % N
-            });
-            return;
-          case "ArrowUp":
-            s.preventDefault(), i({
-              highlightedIndex: d.highlightedIndex <= 0 ? N - 1 : d.highlightedIndex - 1
-            });
-            return;
-          case "Enter":
-            s.preventDefault(), d.highlightedIndex >= 0 ? P(d.highlightedIndex) : i({ isVisible: !1 });
-            return;
-          case "Escape":
-            s.preventDefault(), i({
-              isVisible: !1,
-              highlightedIndex: -1
-            });
-            return;
-        }
-      }
-      (o === "ArrowLeft" || o === "ArrowRight" || o === "Home" || o === "End") && setTimeout(I, 0);
-    },
-    [
-      d,
-      x.length,
-      i,
-      P,
-      I
-    ]
-  ), _ = S(
-    (s) => {
-      const { key: o } = s;
-      (o === "ArrowLeft" || o === "ArrowRight" || o === "Home" || o === "End") && I();
-    },
-    [I]
-  ), R = S(() => {
-    i({
-      isVisible: !0,
-      highlightedIndex: 0
-    });
-  }, [i]), D = S(
-    (s) => {
-      var M;
-      const o = ((M = h.current) == null ? void 0 : M.selectionStart) || s.length, { context: N, token: A } = j(
-        s,
-        o
-      );
-      p(N), m(A), n(s), i({
-        highlightedIndex: 0,
-        isVisible: !$(s, o),
-        showingMore: !1,
-        cursorPosition: o
-      });
-    },
-    [p, m, n, i]
-  ), Y = S(() => {
-    setTimeout(I, 0);
-  }, [I]), J = S(() => {
-    i({
-      isVisible: !1,
-      highlightedIndex: -1
-    });
-  }, [i]), W = S(
-    (s) => {
-      i({ highlightedIndex: s });
-    },
-    [i]
-  );
-  return G(() => (document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y)), [y]), /* @__PURE__ */ w(
-    "div",
-    {
-      className: L("p-query-input", t),
-      "data-testid": "p-query-input",
-      ref: f,
-      ...C,
-      children: [
-        /* @__PURE__ */ a(
-          z,
-          {
-            disabled: l,
-            placeholder: v,
-            value: e,
-            externallyControlled: !0,
-            autoComplete: "off",
-            id: "query-input",
-            name: "query-input",
-            ref: h,
-            onFocus: R,
-            onChange: D,
-            onKeyDown: F,
-            onKeyUp: _,
-            onClear: J,
-            onClick: Y,
-            "aria-disabled": l,
-            "aria-expanded": d.isVisible,
-            "aria-haspopup": "listbox",
-            "aria-owns": "query-suggestions"
-          }
-        ),
-        d.isVisible && u.length > 0 && /* @__PURE__ */ a(
-          "ul",
-          {
-            className: "p-query-input__list",
-            ref: E,
-            id: "query-suggestions",
-            role: "listbox",
-            "aria-label": "Search suggestions",
-            children: g ? /* @__PURE__ */ a("div", { className: "p-query-input__loading", children: /* @__PURE__ */ a(H, { text: "Loading..." }) }) : x.map((s, o) => /* @__PURE__ */ w(
-              "li",
-              {
-                className: L("p-query-input__item", {
-                  highlight: o === d.highlightedIndex
-                }),
-                onClick: () => P(o),
-                onKeyDown: () => P(o),
-                onMouseEnter: () => W(o),
-                role: "option",
-                "aria-selected": o === d.highlightedIndex,
-                tabIndex: -1,
-                children: [
-                  /* @__PURE__ */ w("span", { className: "p-query-input__item-label", children: [
-                    /* @__PURE__ */ a(
-                      "span",
-                      {
-                        className: L({
-                          "u-text--muted": s.type === "more"
-                        }),
-                        children: s.value
-                      }
-                    ),
-                    s.type === "filter" && /* @__PURE__ */ a("span", { className: "u-text--muted", children: ":()" })
-                  ] }),
-                  s.type !== "more" && /* @__PURE__ */ a("span", { className: "u-text--muted u-align-text--right", children: s.type })
-                ]
-              },
-              `${s.value}-${o}`
-            ))
-          }
-        )
-      ]
-    }
-  );
-}, xe = ({ value: t, unit: l }, {
-  binary: e = !1,
-  convertTo: n,
-  decimals: r = 2,
-  roundFunc: p = "round"
-} = {}) => {
-  const m = t < 0, u = Math.abs(t);
-  if (u === 0)
-    return { value: 0, unit: n || "B" };
-  const g = e ? 1024 : 1e3, v = e ? ["B", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"] : ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], C = v.findIndex((h) => h === l) || 0, d = u * Math.pow(g, C), b = n ? v.findIndex((h) => h === n) : Math.floor(Math.log(d) / Math.log(g));
-  let f = d / Math.pow(g, b);
-  if (f % 1 !== 0) {
-    const h = Math.pow(10, r);
-    f = Math[p](f * h) / h;
-  }
-  return {
-    value: m ? -f : f,
-    unit: v[b]
-  };
-};
-export {
-  Re as ContentSection,
-  Ae as DynamicTable,
-  Ne as ExternalLink,
-  Ie as FileUpload,
-  Me as FormSection,
-  Le as GenericTable,
-  Fe as InputGroup,
-  De as Layout,
-  Be as MainToolbar,
-  Oe as Meter,
-  Ce as MultiSelect,
-  he as MultiSelectDropdown,
-  Ue as Navigation,
-  je as NavigationBar,
-  we as NestedFormGroup,
-  Ve as Pagination,
-  Te as PaginationContainer,
-  qe as Placeholder,
-  ce as ProgressIndicator,
-  Ee as QueryInput,
-  Ge as SidePanel,
-  Ke as SidePanelContextProvider,
-  Se as Stepper,
-  Qe as TableCaption,
-  $e as defaultFilledColors,
-  xe as formatBytes,
-  He as meterColor,
-  ze as testIds,
-  Ze as useSidePanel
-};
+import { A as e, C as t, D as n, E as r, O as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, k as g, l as _, m as v, n as y, o as b, p as x, r as S, s as C, t as w, u as T, v as E, w as D, x as O, y as k } from "../lib-BEVV6FLF.mjs";
+export { t as ContentSection, c as DynamicTable, r as ExternalLink, u as FileUpload, a as FormSection, S as GenericTable, O as InputGroup, p as Layout, m as MainToolbar, n as Meter, b as MultiSelect, C as MultiSelectDropdown, x as Navigation, v as NavigationBar, f as NestedFormGroup, T as Pagination, d as PaginationContainer, D as Placeholder, o as ProgressIndicator, y as QueryInput, E as SidePanel, k as SidePanelContextProvider, _ as Stepper, h as TableCaption, i as defaultFilledColors, w as formatBytes, s as lazyLoadSidePanel, g as meterColor, e as testIds, l as useSidePanel };

package/dist/components/DynamicTable/DynamicTable.d.ts

@@ -15,15 +15,15 @@ export type DynamicTableProps = PropsWithChildren<{
  * @returns
  */
 export declare const DynamicTable: {
-    ({ className, children, variant, ...props }: DynamicTableProps): import("react/jsx-runtime").JSX.Element;
-    Body: ({ className, children, style, ...props }: DynamicTableBodyProps) => import("react/jsx-runtime").JSX.Element;
+    ({ className, children, variant, ...props }: DynamicTableProps): import("react").JSX.Element;
+    Body: ({ className, children, style, ...props }: DynamicTableBodyProps) => import("react").JSX.Element;
     Loading: <TData extends RowData>({ className, table, }: {
         className?: string;
         table?: Table<TData>;
         placeholderLengths?: {
             [key: string]: string;
         };
-    }) => import("react/jsx-runtime").JSX.Element;
+    }) => import("react").JSX.Element;
 };
 interface DynamicTableBodyProps extends AriaAttributes {
     className?: string;

package/dist/components/DynamicTable/DynamicTable.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { DynamicTable } from './DynamicTable';
 declare const meta: Meta<typeof DynamicTable>;
 export default meta;