@cognite/aura 0.3.0 → 0.3.2

package/dist/components/ui/core/message/message.js

@@ -1,145 +1,313 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { memo as i, createContext as b } from "react";
-import { mermaid as _ } from "@streamdown/mermaid";
-import "@tabler/icons-react";
-import { Streamdown as p } from "streamdown";
-import { cn as d } from "../../../../lib/utils.js";
-import { Button as u } from "../button/button.js";
-import { Tooltip as w, TooltipTrigger as g, TooltipContent as k } from "../tooltip/tooltip.js";
-import { MESSAGE_RESPONSE_DEFAULT_STREAMDOWN_CONTROLS as v } from "./message-response-default-streamdown-controls.js";
-const R = ({
-  className: t,
-  isResponse: o = !1,
-  ...a
-}) => /* @__PURE__ */ e(
+import { jsx as t, jsxs as l, Fragment as h } from "react/jsx-runtime";
+import { createContext as A, memo as T, useState as w, useCallback as v, useMemo as k, useEffect as z, useContext as C } from "react";
+import { mermaid as I } from "@streamdown/mermaid";
+import { IconX as f, IconPaperclip as P, IconChevronRight as E, IconChevronLeft as S } from "@tabler/icons-react";
+import { Streamdown as R } from "streamdown";
+import { cn as c, getInitials as j } from "../../../../lib/utils.js";
+import { Avatar as q, AvatarImage as L, AvatarFallback as O, AvatarIcon as F } from "../avatar/avatar.js";
+import { Button as g } from "../button/button.js";
+import { ButtonGroupText as G, ButtonGroup as D } from "../button-group/button-group.js";
+import { Tooltip as x, TooltipTrigger as N, TooltipContent as y } from "../tooltip/tooltip.js";
+import { MESSAGE_RESPONSE_DEFAULT_STREAMDOWN_CONTROLS as W } from "./message-response-default-streamdown-controls.js";
+const oe = ({
+  className: e,
+  isResponse: a = !1,
+  ...o
+}) => /* @__PURE__ */ t(
   "div",
   {
     "data-slot": "message",
-    className: d(
+    className: c(
       "group flex w-full items-start justify-start gap-3 mb-0 py-3",
-      o ? "is-assistant items-start" : "is-user flex-row-reverse",
-      t
+      a ? "is-assistant items-start" : "is-user flex-row-reverse",
+      e
     ),
-    ...a
+    ...o
   }
-), j = ({
-  children: t,
-  className: o,
-  ...a
-}) => /* @__PURE__ */ e(
+), re = ({
+  children: e,
+  className: a,
+  ...o
+}) => /* @__PURE__ */ t(
   "div",
   {
     "data-slot": "message-content",
-    className: d(
+    className: c(
       "is-user:dark flex flex-col gap-4 rounded-md text-base leading-tight tracking-tightest",
       "max-w-4/5",
       "group-[.is-user]:overflow-hidden group-[.is-user]:bg-accent-background group-[.is-user]:p-2 group-[.is-user]:text-foreground",
       "group-[.is-assistant]:text-foreground group-[.is-assistant]:pt-1",
-      o
+      a
     ),
-    ...a,
-    children: t
+    ...o,
+    children: e
   }
-), q = ({
-  className: t,
-  children: o,
-  ...a
-}) => /* @__PURE__ */ e(
+), de = ({
+  avatarUrl: e,
+  name: a,
+  className: o,
+  children: r,
+  variant: s,
+  sizes: n,
+  ...d
+}) => {
+  const m = a ? j(a) : "ME";
+  return /* @__PURE__ */ t(
+    q,
+    {
+      "data-slot": "message-avatar",
+      className: c("size-7 group-[.is-user]:mt-1", o),
+      variant: s,
+      sizes: n,
+      ...d,
+      children: r || /* @__PURE__ */ l(h, { children: [
+        e && /* @__PURE__ */ t(
+          L,
+          {
+            alt: a || "",
+            className: "mt-0 mb-0",
+            src: e
+          }
+        ),
+        /* @__PURE__ */ t(O, { children: m })
+      ] })
+    }
+  );
+}, se = (e) => /* @__PURE__ */ t(F, { "data-slot": "message-avatar-icon", ...e }), ne = ({
+  className: e,
+  children: a,
+  ...o
+}) => /* @__PURE__ */ t(
   "div",
   {
     "data-slot": "message-actions",
-    className: d("flex items-center gap-2 pt-2", t),
-    ...a,
-    children: o
+    className: c("flex items-center gap-2 pt-2", e),
+    ...o,
+    children: a
   }
-), O = ({
-  tooltip: t,
-  children: o,
-  label: a,
+), ce = ({
+  tooltip: e,
+  children: a,
+  label: o,
   className: r,
   variant: s = "ghost",
-  size: c = "sm",
-  ...l
+  size: n = "sm",
+  ...d
 }) => {
-  const n = /* @__PURE__ */ m(
-    u,
+  const m = /* @__PURE__ */ l(
+    g,
     {
       "data-slot": "message-action",
-      className: d(
+      className: c(
         "relative icon-sm text-muted-foreground hover:text-foreground",
         r
       ),
-      size: c,
+      size: n,
       type: "button",
       variant: s,
-      ...l,
+      ...d,
       children: [
-        o,
-        /* @__PURE__ */ e("span", { className: "sr-only", children: a || t })
+        a,
+        /* @__PURE__ */ t("span", { className: "sr-only", children: o || e })
       ]
     }
   );
-  return t ? /* @__PURE__ */ m(w, { children: [
-    /* @__PURE__ */ e(g, { render: n }),
-    /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e("p", { children: t }) })
-  ] }) : n;
-};
-b(
+  return e ? /* @__PURE__ */ l(x, { children: [
+    /* @__PURE__ */ t(N, { render: m }),
+    /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t("p", { children: e }) })
+  ] }) : m;
+}, M = A(
   null
-);
-const f = {
-  h1: ({ children: t }) => /* @__PURE__ */ e("h1", { className: "mt-0 mb-2 scroll-m-20 text-xl font-medium tracking-tightest", children: t }),
-  h2: ({ children: t }) => /* @__PURE__ */ e("h2", { className: "mt-4 mb-1 scroll-m-20 text-lg font-medium tracking-tightest", children: t }),
-  h3: ({ children: t }) => /* @__PURE__ */ e("h3", { className: "mt-4 mb-1 scroll-m-20 text-base font-medium tracking-tighter", children: t }),
-  h4: ({ children: t }) => /* @__PURE__ */ e("h4", { className: "mt-2 mb-0 scroll-m-20 text-sm font-medium tracking-normal", children: t }),
-  h5: ({ children: t }) => /* @__PURE__ */ e("h5", { className: "mt-0 mb-0 scroll-m-20 text-xs font-medium tracking-tighter", children: t }),
-  h6: ({ children: t }) => /* @__PURE__ */ e("h6", { className: "mt-0 mb-0 scroll-m-20 text-2xs font-medium tracking-tighter", children: t }),
-  p: ({ children: t }) => /* @__PURE__ */ e("p", { className: "mt-2 mb-3 text-base font-normal leading-5 tracking-tightest", children: t }),
-  strong: ({ children: t }) => /* @__PURE__ */ e("strong", { className: "font-medium", children: t }),
-  em: ({ children: t }) => /* @__PURE__ */ e("em", { className: "italic", children: t }),
-  b: ({ children: t }) => /* @__PURE__ */ e("b", { className: "font-medium", children: t }),
-  i: ({ children: t }) => /* @__PURE__ */ e("i", { className: "italic", children: t }),
-  ul: ({ children: t }) => /* @__PURE__ */ e("ul", { className: "ml-8.25 mb-3 pt-2 pl-0 pb-0 list-disc text-base font-normal tracking-tightest", children: t }),
-  ol: ({ children: t }) => /* @__PURE__ */ e("ol", { className: "ml-8.25 mb-3 pt-2 pl-0 pb-0 list-decimal text-base font-normal tracking-tightest", children: t }),
-  li: ({ children: t }) => /* @__PURE__ */ e("li", { className: "py-0", children: t }),
-  blockquote: ({ children: t }) => /* @__PURE__ */ e("blockquote", { className: "my-3 pr-2 pl-2 border-l border-l-border text-sm text-muted-foreground font-normal tracking-tight not-italic", children: t }),
-  hr: () => /* @__PURE__ */ e("hr", { className: "my-4 border-border" }),
-  a: ({ children: t, href: o, ...a }) => /* @__PURE__ */ e(
+), p = () => {
+  const e = C(M);
+  if (!e)
+    throw new Error(
+      "MessageBranch components must be used within MessageBranch"
+    );
+  return e;
+}, me = ({
+  defaultBranch: e = 0,
+  onBranchChange: a,
+  className: o,
+  ...r
+}) => {
+  const [s, n] = w(e), [d, m] = w([]), i = v(() => {
+    n((b) => {
+      const u = b > 0 ? b - 1 : d.length - 1;
+      return a?.(u), u;
+    });
+  }, [d.length, a]), _ = v(() => {
+    n((b) => {
+      const u = b < d.length - 1 ? b + 1 : 0;
+      return a?.(u), u;
+    });
+  }, [d.length, a]), B = k(
+    () => ({
+      currentBranch: s,
+      totalBranches: d.length,
+      goToPrevious: i,
+      goToNext: _,
+      branches: d,
+      setBranches: m
+    }),
+    [s, d, i, _, m]
+  );
+  return /* @__PURE__ */ t(M.Provider, { value: B, children: /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "message-branch",
+      className: c("grid w-full gap-2 [&>div]:pb-0", o),
+      ...r
+    }
+  ) });
+}, le = ({
+  children: e,
+  ...a
+}) => {
+  const { currentBranch: o, setBranches: r, branches: s } = p(), n = k(
+    () => Array.isArray(e) ? e : [e],
+    [e]
+  );
+  return z(() => {
+    s.length !== n.length && r(n);
+  }, [n, s, r]), n.map((d, m) => /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "message-branch-content",
+      className: c(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        m === o ? "block" : "hidden"
+      ),
+      ...a,
+      children: d
+    },
+    d.key
+  ));
+}, ie = ({
+  ...e
+}) => {
+  const { totalBranches: a } = p();
+  return a <= 1 ? null : /* @__PURE__ */ t(
+    D,
+    {
+      "data-slot": "message-branch-selector",
+      className: "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
+      orientation: "horizontal",
+      ...e
+    }
+  );
+}, be = ({
+  children: e,
+  ...a
+}) => {
+  const { goToPrevious: o, totalBranches: r } = p();
+  return /* @__PURE__ */ t(
+    g,
+    {
+      "data-slot": "message-branch-previous",
+      "aria-label": "Previous branch",
+      disabled: r <= 1,
+      onClick: o,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...a,
+      children: e ?? /* @__PURE__ */ t(S, { size: 14 })
+    }
+  );
+}, ue = ({
+  children: e,
+  ...a
+}) => {
+  const { goToNext: o, totalBranches: r } = p();
+  return /* @__PURE__ */ t(
+    g,
+    {
+      "data-slot": "message-branch-next",
+      "aria-label": "Next branch",
+      disabled: r <= 1,
+      onClick: o,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...a,
+      children: e ?? /* @__PURE__ */ t(E, { size: 14 })
+    }
+  );
+}, ge = ({
+  className: e,
+  ...a
+}) => {
+  const { currentBranch: o, totalBranches: r } = p();
+  return /* @__PURE__ */ l(
+    G,
+    {
+      "data-slot": "message-branch-page",
+      className: c(
+        "border-none bg-transparent text-muted-foreground shadow-none px-2",
+        e
+      ),
+      ...a,
+      children: [
+        o + 1,
+        "/",
+        r
+      ]
+    }
+  );
+}, V = {
+  h1: ({ children: e }) => /* @__PURE__ */ t("h1", { className: "mt-0 mb-2 scroll-m-20 text-xl font-medium tracking-tightest", children: e }),
+  h2: ({ children: e }) => /* @__PURE__ */ t("h2", { className: "mt-4 mb-1 scroll-m-20 text-lg font-medium tracking-tightest", children: e }),
+  h3: ({ children: e }) => /* @__PURE__ */ t("h3", { className: "mt-4 mb-1 scroll-m-20 text-base font-medium tracking-tighter", children: e }),
+  h4: ({ children: e }) => /* @__PURE__ */ t("h4", { className: "mt-2 mb-0 scroll-m-20 text-sm font-medium tracking-normal", children: e }),
+  h5: ({ children: e }) => /* @__PURE__ */ t("h5", { className: "mt-0 mb-0 scroll-m-20 text-xs font-medium tracking-tighter", children: e }),
+  h6: ({ children: e }) => /* @__PURE__ */ t("h6", { className: "mt-0 mb-0 scroll-m-20 text-2xs font-medium tracking-tighter", children: e }),
+  p: ({ children: e }) => /* @__PURE__ */ t("p", { className: "mt-2 mb-3 text-base font-normal leading-5 tracking-tightest", children: e }),
+  strong: ({ children: e }) => /* @__PURE__ */ t("strong", { className: "font-medium", children: e }),
+  em: ({ children: e }) => /* @__PURE__ */ t("em", { className: "italic", children: e }),
+  b: ({ children: e }) => /* @__PURE__ */ t("b", { className: "font-medium", children: e }),
+  i: ({ children: e }) => /* @__PURE__ */ t("i", { className: "italic", children: e }),
+  ul: ({ children: e }) => /* @__PURE__ */ t("ul", { className: "ml-8.25 mb-3 pt-2 pl-0 pb-0 list-disc text-base font-normal tracking-tightest", children: e }),
+  ol: ({ children: e }) => /* @__PURE__ */ t("ol", { className: "ml-8.25 mb-3 pt-2 pl-0 pb-0 list-decimal text-base font-normal tracking-tightest", children: e }),
+  li: ({ children: e }) => /* @__PURE__ */ t("li", { className: "py-0", children: e }),
+  blockquote: ({ children: e }) => /* @__PURE__ */ t("blockquote", { className: "my-3 pr-2 pl-2 border-l border-l-border text-sm text-muted-foreground font-normal tracking-tight not-italic", children: e }),
+  hr: () => /* @__PURE__ */ t("hr", { className: "my-4 border-border" }),
+  a: ({ children: e, href: a, ...o }) => /* @__PURE__ */ t(
     "a",
     {
       className: "text-link-foreground no-underline hover:underline underline-offset-4",
-      href: o,
-      ...a,
-      children: t
+      href: a,
+      ...o,
+      children: e
     }
   ),
-  table: ({ children: t }) => /* @__PURE__ */ e(
+  table: ({ children: e }) => /* @__PURE__ */ t(
     "div",
     {
       className: "my-6 overflow-x-auto",
       tabIndex: 0,
       role: "group",
       "aria-label": "Atlas AI Chat Table",
-      children: /* @__PURE__ */ e("table", { className: "w-full", children: t })
+      children: /* @__PURE__ */ t("table", { className: "w-full", children: e })
     }
   ),
-  thead: ({ children: t }) => /* @__PURE__ */ e("thead", { children: t }),
-  tbody: ({ children: t }) => /* @__PURE__ */ e("tbody", { children: t }),
-  tr: ({ children: t }) => /* @__PURE__ */ e("tr", { className: "m-0 border-t p-0 even:bg-muted-background", children: t }),
-  th: ({ children: t }) => /* @__PURE__ */ e("th", { className: "border px-4 py-2 text-left font-bold", children: t }),
-  td: ({ children: t }) => /* @__PURE__ */ e("td", { className: "border px-4 py-2 text-left", children: t })
-}, h = i(
+  thead: ({ children: e }) => /* @__PURE__ */ t("thead", { children: e }),
+  tbody: ({ children: e }) => /* @__PURE__ */ t("tbody", { children: e }),
+  tr: ({ children: e }) => /* @__PURE__ */ t("tr", { className: "m-0 border-t p-0 even:bg-muted-background", children: e }),
+  th: ({ children: e }) => /* @__PURE__ */ t("th", { className: "border px-4 py-2 text-left font-bold", children: e }),
+  td: ({ children: e }) => /* @__PURE__ */ t("td", { className: "border px-4 py-2 text-left", children: e })
+}, X = T(
   ({
-    className: t,
-    components: o,
-    plugins: a,
+    className: e,
+    components: a,
+    plugins: o,
     controls: r,
     ...s
-  }) => /* @__PURE__ */ e(
-    p,
+  }) => /* @__PURE__ */ t(
+    R,
     {
       "data-slot": "message-response",
-      className: d(
+      className: c(
         "size-full",
         // Blockquote paragraph overrides
         "[&_blockquote_p]:text-sm",
@@ -238,21 +406,139 @@ const f = {
         // First and last child margin resets
         "[&>*:first-child]:mt-0",
         "[&>*:last-child]:mb-0",
-        t
+        e
       ),
-      components: { ...f, ...o },
-      controls: r ?? v,
-      plugins: { ...a, mermaid: _ },
+      components: { ...V, ...a },
+      controls: r ?? W,
+      plugins: { ...o, mermaid: I },
       ...s
     }
   ),
-  (t, o) => t.children === o.children
+  (e, a) => e.children === a.children
+);
+X.displayName = "MessageResponse";
+function pe({
+  data: e,
+  className: a,
+  onRemove: o,
+  ...r
+}) {
+  const s = e.filename || "", d = (e.mediaType?.startsWith("image/") && e.url ? "image" : "file") === "image", m = s || (d ? "Image" : "Attachment");
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "message-attachment",
+      className: c(
+        "group relative size-24 overflow-hidden rounded-lg",
+        a
+      ),
+      ...r,
+      children: d ? /* @__PURE__ */ l(h, { children: [
+        /* @__PURE__ */ t(
+          "img",
+          {
+            alt: s || "attachment",
+            className: "size-full object-cover",
+            height: 100,
+            src: e.url,
+            width: 100
+          }
+        ),
+        o && /* @__PURE__ */ l(
+          g,
+          {
+            "aria-label": "Remove attachment",
+            className: "absolute top-2 right-2 size-6 rounded-full bg-background/80 p-0 opacity-0 backdrop-blur-sm transition-opacity hover:bg-background group-hover:opacity-100 [&>svg]:size-3",
+            onClick: (i) => {
+              i.stopPropagation(), o();
+            },
+            type: "button",
+            variant: "ghost",
+            children: [
+              /* @__PURE__ */ t(f, {}),
+              /* @__PURE__ */ t("span", { className: "sr-only", children: "Remove" })
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ l(h, { children: [
+        /* @__PURE__ */ l(x, { children: [
+          /* @__PURE__ */ t(
+            N,
+            {
+              render: /* @__PURE__ */ t("div", { className: "flex size-full shrink-0 items-center justify-center rounded-lg bg-muted-background text-muted-foreground", children: /* @__PURE__ */ t(P, { className: "size-4" }) })
+            }
+          ),
+          /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t("p", { children: m }) })
+        ] }),
+        o && /* @__PURE__ */ l(
+          g,
+          {
+            "aria-label": "Remove attachment",
+            className: "size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity hover:bg-accent-background group-hover:opacity-100 [&>svg]:size-3",
+            onClick: (i) => {
+              i.stopPropagation(), o();
+            },
+            type: "button",
+            variant: "ghost",
+            children: [
+              /* @__PURE__ */ t(f, {}),
+              /* @__PURE__ */ t("span", { className: "sr-only", children: "Remove" })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function he({
+  children: e,
+  className: a,
+  ...o
+}) {
+  return e ? /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "message-attachments",
+      className: c(
+        "ml-auto flex w-fit flex-wrap items-start gap-2",
+        a
+      ),
+      ...o,
+      children: e
+    }
+  ) : null;
+}
+const _e = ({
+  className: e,
+  children: a,
+  ...o
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    "data-slot": "message-toolbar",
+    className: c(
+      "mt-4 flex w-full items-center justify-between gap-4",
+      e
+    ),
+    ...o,
+    children: a
+  }
 );
-h.displayName = "MessageResponse";
 export {
-  R as Message,
-  O as MessageAction,
-  q as MessageActions,
-  j as MessageContent,
-  h as MessageResponse
+  oe as Message,
+  ce as MessageAction,
+  ne as MessageActions,
+  pe as MessageAttachment,
+  he as MessageAttachments,
+  de as MessageAvatar,
+  se as MessageAvatarIcon,
+  me as MessageBranch,
+  le as MessageBranchContent,
+  ue as MessageBranchNext,
+  ge as MessageBranchPage,
+  be as MessageBranchPrevious,
+  ie as MessageBranchSelector,
+  re as MessageContent,
+  X as MessageResponse,
+  _e as MessageToolbar
 };

package/dist/components/ui/core/pagination/pagination.js

@@ -1,11 +1,12 @@
 import { jsx as i, jsxs as L } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
-import { IconDots as I, IconChevronsLeft as w, IconChevronsRight as C, IconChevronRight as T, IconChevronLeft as B } from "@tabler/icons-react";
+import { IconChevronsLeft as I, IconChevronLeft as w, IconChevronRight as C, IconChevronsRight as T, IconDots as B } from "@tabler/icons-react";
 import { cva as x } from "class-variance-authority";
 import { cn as l } from "../../../../lib/utils.js";
 import { Button as z } from "../button/button.js";
 import { SelectTrigger as _ } from "../select/select.js";
 import { PaginationSizeContext as k, usePaginationSize as g } from "./pagination-size-context.js";
+import { PaginationTeleport as ra } from "./pagination-teleport.js";
 const y = x(
   "text-base font-normal leading-5 tracking-tightest text-secondary-foreground hover:bg-active-muted-background-hover hover:text-active-foreground focus-visible:bg-active-muted-background focus-visible:text-active-foreground focus-visible:shadow-focus-ring",
   {
@@ -224,7 +225,7 @@ const Z = r(({ className: a, size: t, label: e = "Go to first page", ...n }, o)
     ref: o,
     dataSlot: "pagination-first",
     ariaLabel: e,
-    icon: /* @__PURE__ */ i(w, {}),
+    icon: /* @__PURE__ */ i(I, {}),
     className: a,
     size: t,
     ...n
@@ -237,7 +238,7 @@ const K = r(({ className: a, size: t, label: e = "Go to previous page", ...n },
     ref: o,
     dataSlot: "pagination-previous",
     ariaLabel: e,
-    icon: /* @__PURE__ */ i(B, {}),
+    icon: /* @__PURE__ */ i(w, {}),
     className: a,
     size: t,
     ...n
@@ -250,7 +251,7 @@ const M = r(({ className: a, size: t, label: e = "Go to next page", ...n }, o) =
     ref: o,
     dataSlot: "pagination-next",
     ariaLabel: e,
-    icon: /* @__PURE__ */ i(T, {}),
+    icon: /* @__PURE__ */ i(C, {}),
     className: a,
     size: t,
     ...n
@@ -263,7 +264,7 @@ const U = r(({ className: a, size: t, label: e = "Go to last page", ...n }, o) =
     ref: o,
     dataSlot: "pagination-last",
     ariaLabel: e,
-    icon: /* @__PURE__ */ i(C, {}),
+    icon: /* @__PURE__ */ i(T, {}),
     className: a,
     size: t,
     ...n
@@ -284,7 +285,7 @@ const X = r(({ className: a, size: t, label: e = "More pages", ...n }, o) => {
       ),
       ...n,
       children: [
-        /* @__PURE__ */ i(I, { "aria-hidden": "true", className: "h-4 w-4" }),
+        /* @__PURE__ */ i(B, { "aria-hidden": "true", className: "h-4 w-4" }),
         /* @__PURE__ */ i("span", { className: "sr-only", children: e })
       ]
     }
@@ -331,5 +332,6 @@ export {
   q as PaginationResultsPerPage,
   J as PaginationResultsPerPageLabel,
   O as PaginationSelectTrigger,
-  H as PaginationStatus
+  H as PaginationStatus,
+  ra as PaginationTeleport
 };