@pdf-viewer/react 1.9.0-beta.4 → 1.9.0-beta.6

package/dist/components/page/RPPage.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { z as _ } from "../../RPLayout-5892502c.js";
+import { H as ro } from "../../ToolbarLayout.module-88476995.js";
 import "../../contexts/RPDocumentContext.js";
 import "../../contexts/DocumentPasswordContext.js";
 import "../../contexts/DarkModeContext.js";
@@ -26,29 +26,32 @@ import "../../contexts/SmoothScrollContext.js";
 import "../../contexts/ElementPageContext.js";
 import "../../contexts/PagesRotateContext.js";
 import "../../contexts/LoaderContext.js";
-import "../RPConfig.js";
-import "../../contexts/ThemeContext.js";
-import "../RPDropFileZone.js";
-import "../../contexts/ToolbarComponentContext.js";
 import "../../contexts/ToolComponentContext.js";
+import "../../contexts/IconToolContext.js";
+import "../../contexts/OtherToolContext.js";
+import "../RPConfig.js";
 import "../ui/Button.js";
-import "../../SearchCloseButton-cbf182aa.js";
 import "../ui/Input.js";
-import "../ui/Checkbox.js";
-import "../icons/LoaderIcon.js";
 import "../../contexts/IconContext.js";
-import "../ui/RPTooltip.js";
+import "../../contexts/ToolbarComponentContext.js";
 import "../../contexts/ViewportContext.js";
-import "../ui/DropDown.js";
-import "../../contexts/IconToolContext.js";
-import "../layout/toolbar/MenuItem.js";
-import "../layout/toolbar/MenuSeparator.js";
+import "../ui/RPTooltip.js";
+import "../../MenuItem.module-bc11d0d3.js";
+import "../../DropDown.module-a78567cb.js";
 import "../../utils/dateFormatter.js";
-import "../layout/toolbar/PropertyItem.js";
-import "../../contexts/OtherToolContext.js";
-import "../layout/toolbar/RotateTool.js";
+import "../../PropertyItem.module-db0150cc.js";
+import "../../MenuSeparator.module-89b2ff7f.js";
+import "../../RotateTool.module-03987eba.js";
+import "../../SearchTool.module-016f3a8d.js";
+import "../../Checkbox.module-3edaacbb.js";
+import "../icons/LoaderIcon.js";
+import "../../RPSplitter.module-13d612c4.js";
+import "../../Container.module-f8b5c306.js";
+import "../../WrapperLayout.module-147bc943.js";
+import "../../RPTheme.module-bd9038da.js";
+import "../../contexts/ThemeContext.js";
 import "./CustomElement.js";
 import "../../utils/withRef.js";
 export {
-  _ as RPPage
+  ro as RPPage
 };

package/dist/components/page/SinglePage.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { E as m } from "../../RPLayout-5892502c.js";
+import { K as m } from "../../ToolbarLayout.module-88476995.js";
 export {
   m as SinglePage
 };

package/dist/components/page/TextHighlightLayer.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "../../contexts/RPDocumentContext.js";
 import "../../contexts/DocumentPasswordContext.js";
-import { y as _ } from "../../RPLayout-5892502c.js";
+import { G as tr } from "../../ToolbarLayout.module-88476995.js";
 import "../../contexts/DarkModeContext.js";
 import "../../contexts/RotationContext.js";
 import "../../contexts/LayerContext.js";
@@ -26,29 +26,32 @@ import "../../contexts/SmoothScrollContext.js";
 import "../../contexts/ElementPageContext.js";
 import "../../contexts/PagesRotateContext.js";
 import "../../contexts/LoaderContext.js";
-import "../RPConfig.js";
-import "../../contexts/ThemeContext.js";
-import "../RPDropFileZone.js";
-import "../../contexts/ToolbarComponentContext.js";
 import "../../contexts/ToolComponentContext.js";
+import "../../contexts/IconToolContext.js";
+import "../../contexts/OtherToolContext.js";
+import "../RPConfig.js";
 import "../ui/Button.js";
-import "../../SearchCloseButton-cbf182aa.js";
 import "../ui/Input.js";
-import "../ui/Checkbox.js";
-import "../icons/LoaderIcon.js";
 import "../../contexts/IconContext.js";
-import "../ui/RPTooltip.js";
+import "../../contexts/ToolbarComponentContext.js";
 import "../../contexts/ViewportContext.js";
-import "../ui/DropDown.js";
-import "../../contexts/IconToolContext.js";
-import "../layout/toolbar/MenuItem.js";
-import "../layout/toolbar/MenuSeparator.js";
+import "../ui/RPTooltip.js";
+import "../../MenuItem.module-bc11d0d3.js";
+import "../../DropDown.module-a78567cb.js";
 import "../../utils/dateFormatter.js";
-import "../layout/toolbar/PropertyItem.js";
-import "../../contexts/OtherToolContext.js";
-import "../layout/toolbar/RotateTool.js";
+import "../../PropertyItem.module-db0150cc.js";
+import "../../MenuSeparator.module-89b2ff7f.js";
+import "../../RotateTool.module-03987eba.js";
+import "../../SearchTool.module-016f3a8d.js";
+import "../../Checkbox.module-3edaacbb.js";
+import "../icons/LoaderIcon.js";
+import "../../RPSplitter.module-13d612c4.js";
+import "../../Container.module-f8b5c306.js";
+import "../../WrapperLayout.module-147bc943.js";
+import "../../RPTheme.module-bd9038da.js";
+import "../../contexts/ThemeContext.js";
 import "./searchHighlight.js";
 import "../../utils/highlight.js";
 export {
-  _ as TextHighlightLayer
+  tr as TextHighlightLayer
 };

package/dist/components/page/TextLayer.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "../../contexts/RPDocumentContext.js";
 import "../../contexts/DocumentPasswordContext.js";
-import { x as _ } from "../../RPLayout-5892502c.js";
+import { E as or } from "../../ToolbarLayout.module-88476995.js";
 import "../../contexts/DarkModeContext.js";
 import "../../contexts/RotationContext.js";
 import "../../contexts/LayerContext.js";
@@ -26,29 +26,32 @@ import "../../contexts/SmoothScrollContext.js";
 import "../../contexts/ElementPageContext.js";
 import "../../contexts/PagesRotateContext.js";
 import "../../contexts/LoaderContext.js";
-import "../RPConfig.js";
-import "../../contexts/ThemeContext.js";
-import "../RPDropFileZone.js";
-import "../../contexts/ToolbarComponentContext.js";
 import "../../contexts/ToolComponentContext.js";
+import "../../contexts/IconToolContext.js";
+import "../../contexts/OtherToolContext.js";
+import "../RPConfig.js";
 import "../ui/Button.js";
-import "../../SearchCloseButton-cbf182aa.js";
 import "../ui/Input.js";
-import "../ui/Checkbox.js";
-import "../icons/LoaderIcon.js";
 import "../../contexts/IconContext.js";
-import "../ui/RPTooltip.js";
+import "../../contexts/ToolbarComponentContext.js";
 import "../../contexts/ViewportContext.js";
-import "../ui/DropDown.js";
-import "../../contexts/IconToolContext.js";
-import "../layout/toolbar/MenuItem.js";
-import "../layout/toolbar/MenuSeparator.js";
+import "../ui/RPTooltip.js";
+import "../../MenuItem.module-bc11d0d3.js";
+import "../../DropDown.module-a78567cb.js";
 import "../../utils/dateFormatter.js";
-import "../layout/toolbar/PropertyItem.js";
-import "../../contexts/OtherToolContext.js";
-import "../layout/toolbar/RotateTool.js";
+import "../../PropertyItem.module-db0150cc.js";
+import "../../MenuSeparator.module-89b2ff7f.js";
+import "../../RotateTool.module-03987eba.js";
+import "../../SearchTool.module-016f3a8d.js";
+import "../../Checkbox.module-3edaacbb.js";
+import "../icons/LoaderIcon.js";
+import "../../RPSplitter.module-13d612c4.js";
+import "../../Container.module-f8b5c306.js";
+import "../../WrapperLayout.module-147bc943.js";
+import "../../RPTheme.module-bd9038da.js";
+import "../../contexts/ThemeContext.js";
 import "pdfjs-dist";
 import "../../utils/highlight.js";
 export {
-  _ as TextLayer
+  or as TextLayer
 };

package/dist/components/ui/Checkbox.js

@@ -1,264 +1,150 @@
-import { jsx as i, jsxs as w, Fragment as U } from "react/jsx-runtime";
-import * as s from "react";
-import { c as z, u as B, P as E, a as S, b as G, d as K, e as X } from "../../index-6b37f504.js";
-import { CheckIcon as J } from "../icons/CheckIcon.js";
-import '../../assets/Checkbox.css';function Q(e) {
-  const r = s.useRef({ value: e, previous: e });
-  return s.useMemo(() => (r.current.value !== e && (r.current.previous = r.current.value, r.current.value = e), r.current.previous), [e]);
+import { jsxs as S, jsx as s } from "react/jsx-runtime";
+import * as n from "react";
+import { c as j, u as A, e as B, P as w, a as g, b as H, f as K } from "../../index-2160dd99.js";
+import { c as R } from "../../Checkbox.module-3edaacbb.js";
+import { CheckIcon as L } from "../icons/CheckIcon.js";
+function q(e) {
+  const r = n.useRef({ value: e, previous: e });
+  return n.useMemo(() => (r.current.value !== e && (r.current.previous = r.current.value, r.current.value = e), r.current.previous), [e]);
 }
-var g = "Checkbox", [V, re] = z(g), [W, P] = V(g);
-function Y(e) {
-  const {
-    __scopeCheckbox: r,
-    checked: o,
-    children: d,
-    defaultChecked: n,
-    disabled: t,
-    form: h,
-    name: f,
-    onCheckedChange: u,
-    required: k,
-    value: C = "on",
-    // @ts-expect-error
-    internal_do_not_use_render: l
-  } = e, [p, v] = X({
-    prop: o,
-    defaultProp: n ?? !1,
-    onChange: u,
-    caller: g
-  }), [m, x] = s.useState(null), [_, c] = s.useState(null), a = s.useRef(!1), I = m ? !!h || !!m.closest("form") : (
-    // We set this to true by default so that events bubble to forms without JS (SSR)
-    !0
-  ), R = {
-    checked: p,
-    disabled: t,
-    setChecked: v,
-    control: m,
-    setControl: x,
-    name: f,
-    form: h,
-    value: C,
-    hasConsumerStoppedPropagationRef: a,
-    required: k,
-    defaultChecked: b(n) ? !1 : n,
-    isFormControl: I,
-    bubbleInput: _,
-    setBubbleInput: c
-  };
-  return /* @__PURE__ */ i(
-    W,
-    {
-      scope: r,
-      ...R,
-      children: Z(l) ? l(R) : d
-    }
-  );
-}
-var M = "CheckboxTrigger", T = s.forwardRef(
-  ({ __scopeCheckbox: e, onKeyDown: r, onClick: o, ...d }, n) => {
-    const {
-      control: t,
-      value: h,
-      disabled: f,
-      checked: u,
-      required: k,
-      setControl: C,
-      setChecked: l,
-      hasConsumerStoppedPropagationRef: p,
-      isFormControl: v,
-      bubbleInput: m
-    } = P(M, e), x = B(n, C), _ = s.useRef(u);
-    return s.useEffect(() => {
-      const c = t == null ? void 0 : t.form;
-      if (c) {
-        const a = () => l(_.current);
-        return c.addEventListener("reset", a), () => c.removeEventListener("reset", a);
-      }
-    }, [t, l]), /* @__PURE__ */ i(
-      E.button,
-      {
-        type: "button",
-        role: "checkbox",
-        "aria-checked": b(u) ? "mixed" : u,
-        "aria-required": k,
-        "data-state": O(u),
-        "data-disabled": f ? "" : void 0,
-        disabled: f,
-        value: h,
-        ...d,
-        ref: x,
-        onKeyDown: S(r, (c) => {
-          c.key === "Enter" && c.preventDefault();
-        }),
-        onClick: S(o, (c) => {
-          l((a) => b(a) ? !0 : !a), m && v && (p.current = c.isPropagationStopped(), p.current || c.stopPropagation());
-        })
-      }
-    );
-  }
-);
-T.displayName = M;
-var q = s.forwardRef(
+var E = "Checkbox", [z, Y] = j(E), [F, T] = z(E), N = n.forwardRef(
   (e, r) => {
     const {
-      __scopeCheckbox: o,
-      name: d,
-      checked: n,
-      defaultChecked: t,
+      __scopeCheckbox: t,
+      name: a,
+      checked: u,
+      defaultChecked: c,
       required: h,
-      disabled: f,
-      value: u,
-      onCheckedChange: k,
-      form: C,
-      ...l
-    } = e;
-    return /* @__PURE__ */ i(
-      Y,
-      {
-        __scopeCheckbox: o,
-        checked: n,
-        defaultChecked: t,
-        disabled: f,
-        required: h,
-        onCheckedChange: k,
-        name: d,
-        form: C,
-        value: u,
-        internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ w(U, { children: [
-          /* @__PURE__ */ i(
-            T,
-            {
-              ...l,
-              ref: r,
-              __scopeCheckbox: o
-            }
-          ),
-          p && /* @__PURE__ */ i(
-            L,
-            {
-              __scopeCheckbox: o
-            }
-          )
-        ] })
+      disabled: l,
+      value: b = "on",
+      onCheckedChange: C,
+      form: f,
+      ...v
+    } = e, [i, m] = n.useState(null), x = A(r, (o) => m(o)), y = n.useRef(!1), I = i ? f || !!i.closest("form") : !0, [p = !1, P] = B({
+      prop: u,
+      defaultProp: c,
+      onChange: C
+    }), O = n.useRef(p);
+    return n.useEffect(() => {
+      const o = i == null ? void 0 : i.form;
+      if (o) {
+        const k = () => P(O.current);
+        return o.addEventListener("reset", k), () => o.removeEventListener("reset", k);
       }
-    );
+    }, [i, P]), /* @__PURE__ */ S(F, { scope: t, state: p, disabled: l, children: [
+      /* @__PURE__ */ s(
+        w.button,
+        {
+          type: "button",
+          role: "checkbox",
+          "aria-checked": d(p) ? "mixed" : p,
+          "aria-required": h,
+          "data-state": M(p),
+          "data-disabled": l ? "" : void 0,
+          disabled: l,
+          value: b,
+          ...v,
+          ref: x,
+          onKeyDown: g(e.onKeyDown, (o) => {
+            o.key === "Enter" && o.preventDefault();
+          }),
+          onClick: g(e.onClick, (o) => {
+            P((k) => d(k) ? !0 : !k), I && (y.current = o.isPropagationStopped(), y.current || o.stopPropagation());
+          })
+        }
+      ),
+      I && /* @__PURE__ */ s(
+        X,
+        {
+          control: i,
+          bubbles: !y.current,
+          name: a,
+          value: b,
+          checked: p,
+          required: h,
+          disabled: l,
+          form: f,
+          style: { transform: "translateX(-100%)" },
+          defaultChecked: d(c) ? !1 : c
+        }
+      )
+    ] });
   }
 );
-q.displayName = g;
-var A = "CheckboxIndicator", F = s.forwardRef(
+N.displayName = E;
+var _ = "CheckboxIndicator", D = n.forwardRef(
   (e, r) => {
-    const { __scopeCheckbox: o, forceMount: d, ...n } = e, t = P(A, o);
-    return /* @__PURE__ */ i(
-      G,
+    const { __scopeCheckbox: t, forceMount: a, ...u } = e, c = T(_, t);
+    return /* @__PURE__ */ s(H, { present: a || d(c.state) || c.state === !0, children: /* @__PURE__ */ s(
+      w.span,
       {
-        present: d || b(t.checked) || t.checked === !0,
-        children: /* @__PURE__ */ i(
-          E.span,
-          {
-            "data-state": O(t.checked),
-            "data-disabled": t.disabled ? "" : void 0,
-            ...n,
-            ref: r,
-            style: { pointerEvents: "none", ...e.style }
-          }
-        )
+        "data-state": M(c.state),
+        "data-disabled": c.disabled ? "" : void 0,
+        ...u,
+        ref: r,
+        style: { pointerEvents: "none", ...e.style }
       }
-    );
+    ) });
   }
 );
-F.displayName = A;
-var D = "CheckboxBubbleInput", L = s.forwardRef(
-  ({ __scopeCheckbox: e, ...r }, o) => {
-    const {
-      control: d,
-      hasConsumerStoppedPropagationRef: n,
-      checked: t,
-      defaultChecked: h,
-      required: f,
-      disabled: u,
-      name: k,
-      value: C,
-      form: l,
-      bubbleInput: p,
-      setBubbleInput: v
-    } = P(D, e), m = B(o, v), x = Q(t), _ = K(d);
-    s.useEffect(() => {
-      const a = p;
-      if (!a)
-        return;
-      const I = window.HTMLInputElement.prototype, N = Object.getOwnPropertyDescriptor(
-        I,
-        "checked"
-      ).set, j = !n.current;
-      if (x !== t && N) {
-        const H = new Event("click", { bubbles: j });
-        a.indeterminate = b(t), N.call(a, b(t) ? !1 : t), a.dispatchEvent(H);
-      }
-    }, [p, x, t, n]);
-    const c = s.useRef(b(t) ? !1 : t);
-    return /* @__PURE__ */ i(
-      E.input,
-      {
-        type: "checkbox",
-        "aria-hidden": !0,
-        defaultChecked: h ?? c.current,
-        required: f,
-        disabled: u,
-        name: k,
-        value: C,
-        form: l,
-        ...r,
-        tabIndex: -1,
-        ref: m,
-        style: {
-          ...r.style,
-          ..._,
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0,
-          // We transform because the input is absolutely positioned but we have
-          // rendered it **after** the button. This pulls it back to sit on top
-          // of the button.
-          transform: "translateX(-100%)"
-        }
+D.displayName = _;
+var X = (e) => {
+  const { control: r, checked: t, bubbles: a = !0, defaultChecked: u, ...c } = e, h = n.useRef(null), l = q(t), b = K(r);
+  n.useEffect(() => {
+    const f = h.current, v = window.HTMLInputElement.prototype, m = Object.getOwnPropertyDescriptor(v, "checked").set;
+    if (l !== t && m) {
+      const x = new Event("click", { bubbles: a });
+      f.indeterminate = d(t), m.call(f, d(t) ? !1 : t), f.dispatchEvent(x);
+    }
+  }, [l, t, a]);
+  const C = n.useRef(d(t) ? !1 : t);
+  return /* @__PURE__ */ s(
+    "input",
+    {
+      type: "checkbox",
+      "aria-hidden": !0,
+      defaultChecked: u ?? C.current,
+      ...c,
+      tabIndex: -1,
+      ref: h,
+      style: {
+        ...e.style,
+        ...b,
+        position: "absolute",
+        pointerEvents: "none",
+        opacity: 0,
+        margin: 0
       }
-    );
-  }
-);
-L.displayName = D;
-function Z(e) {
-  return typeof e == "function";
-}
-function b(e) {
+    }
+  );
+};
+function d(e) {
   return e === "indeterminate";
 }
-function O(e) {
-  return b(e) ? "indeterminate" : e ? "checked" : "unchecked";
+function M(e) {
+  return d(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
-const y = {
-  "rp-checkbox": "_rp-checkbox_1vwg8_1",
-  "rp-checkbox-indicator": "_rp-checkbox-indicator_1vwg8_25"
-}, oe = ({
+var U = N, G = D;
+const Z = ({
   children: e,
   value: r,
-  name: o,
-  onChange: d,
-  tabIndex: n
-}) => /* @__PURE__ */ w("div", { style: { display: "flex", alignItems: "center", position: "relative" }, children: [
-  /* @__PURE__ */ i(
-    q,
+  name: t,
+  onChange: a,
+  tabIndex: u
+}) => /* @__PURE__ */ S("div", { style: { display: "flex", alignItems: "center", position: "relative" }, children: [
+  /* @__PURE__ */ s(
+    U,
     {
-      tabIndex: n,
-      className: y["rp-checkbox"],
+      tabIndex: u,
+      className: R["rp-checkbox"],
       checked: r,
-      id: o,
-      onCheckedChange: d,
-      children: /* @__PURE__ */ i(F, { className: y["rp-checkbox-indicator"], children: /* @__PURE__ */ i(J, {}) })
+      id: t,
+      onCheckedChange: a,
+      children: /* @__PURE__ */ s(G, { className: R["rp-checkbox-indicator"], children: /* @__PURE__ */ s(L, {}) })
     }
   ),
-  /* @__PURE__ */ i("label", { className: y["rp-checkbox-label"], htmlFor: o, children: e })
+  /* @__PURE__ */ s("label", { className: R["rp-checkbox-label"], htmlFor: t, children: e })
 ] });
 export {
-  oe as UICheckbox
+  Z as UICheckbox
 };

package/dist/components/ui/DropDown.js

@@ -1,29 +1,23 @@
-import { jsxs as l, jsx as d } from "react/jsx-runtime";
-import { R as p, T as c, P as _, C as A } from "../../index-00f8683a.js";
-import { c as F } from "../../clsx-0c6e471a.js";
-import '../../assets/DropDown.css';const w = "_slideDownAndFade_1vzkq_1", m = "_slideLeftAndFade_1vzkq_1", f = "_slideUpAndFade_1vzkq_1", g = "_slideRightAndFade_1vzkq_1", h = {
-  "rp-dropdown-content": "_rp-dropdown-content_1vzkq_1",
-  slideDownAndFade: w,
-  slideLeftAndFade: m,
-  slideUpAndFade: f,
-  slideRightAndFade: g,
-  "rp-dropdown-arrow": "_rp-dropdown-arrow_1vzkq_30"
-}, z = (e) => {
-  const { triggerComponent: n, children: o, container: s, className: r, open: t, onOpenChange: a, ...i } = e;
-  return /* @__PURE__ */ l(p, { modal: !1, open: t, onOpenChange: a, children: [
-    /* @__PURE__ */ d(c, { asChild: !0, children: n }),
-    /* @__PURE__ */ d(_, { container: s, children: /* @__PURE__ */ d(
-      A,
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { R as m, T as p, P as d, C as f } from "../../index-49b9a615.js";
+import { c as g } from "../../DropDown.module-a78567cb.js";
+import { c as h } from "../../clsx-0c6e471a.js";
+const u = (r) => {
+  const { triggerComponent: n, children: e, container: s, className: t, open: a, onOpenChange: c, ...i } = r;
+  return /* @__PURE__ */ l(m, { modal: !1, open: a, onOpenChange: c, children: [
+    /* @__PURE__ */ o(p, { asChild: !0, children: n }),
+    /* @__PURE__ */ o(d, { container: s, children: /* @__PURE__ */ o(
+      f,
       {
         sideOffset: 8,
         align: "end",
         ...i,
-        className: F(h["rp-dropdown-content"], r),
-        children: o
+        className: h(g["rp-dropdown-content"], t),
+        children: e
       }
     ) })
   ] });
 };
 export {
-  z as UIDropDown
+  u as UIDropDown
 };

package/dist/components/ui/LoadingIndicator.js

@@ -1,7 +1,24 @@
-import "react/jsx-runtime";
-import { K as i } from "../../RPLayout-5892502c.js";
-import "../../clsx-0c6e471a.js";
-import "../../contexts/LocalizationContext.js";
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+import { b as s, m as i } from "../../ToolbarLayout.module-88476995.js";
+import { c as n } from "../../clsx-0c6e471a.js";
+import { useLocalizationContext as d } from "../../contexts/LocalizationContext.js";
+const u = ({ percentage: o }) => {
+  const { cancel: l } = s(), { localeMessages: r } = d();
+  return o < 1 ? null : /* @__PURE__ */ a("div", { className: n(i["rp-loading-overlay"]), children: /* @__PURE__ */ t("div", { className: n(i["rp-loading-modal"]), children: [
+    /* @__PURE__ */ t("div", { className: n(i["rp-loading-title"]), children: [
+      r == null ? void 0 : r.printLoadingMessage,
+      "..."
+    ] }),
+    /* @__PURE__ */ a("div", { className: n(i["rp-loading-progress-bar"]), children: /* @__PURE__ */ a(
+      "div",
+      {
+        className: n(i["rp-loading-progress"]),
+        style: { width: `${o}%` }
+      }
+    ) }),
+    /* @__PURE__ */ a("button", { className: n(i["rp-loading-cancel-button"]), onClick: l, children: r == null ? void 0 : r.printCancelLabel })
+  ] }) });
+};
 export {
-  i as default
+  u as default
 };