@hybridcore/ui 1.5.15 → 1.5.16

package/dist/assets/index3.css

@@ -1 +1 @@
-#react-doc-viewer{background-color:#ededed}#react-doc-viewer #pdf-controls{position:fixed;z-index:9999;left:50%;top:7px;transform:translate(-50%);box-shadow:none}#react-doc-viewer #pdf-controls button,#react-doc-viewer #pdf-controls a{box-shadow:none;color:#9e9e9e}#react-doc-viewer #pdf-controls #pdf-download{display:none}#react-doc-viewer #image-img{max-width:100%;max-height:100%}#react-doc-viewer #pdf-page-wrapper{margin-top:20px;margin-bottom:20px}:root{--react-pdf-text-layer: 1;--highlight-bg-color: rgba(180, 0, 170, 1);--highlight-selected-bg-color: rgba(0, 100, 0, 1)}@media screen and (forced-colors: active){:root{--highlight-bg-color: Highlight;--highlight-selected-bg-color: ButtonText}}[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg) translate(-100%)}.textLayer{position:absolute;text-align:initial;top:0;right:0;bottom:0;left:0;overflow:hidden;line-height:1;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:2}.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;margin:0;transform-origin:0 0}.textLayer span.markedContent{top:0;height:0}.textLayer .highlight{margin:-1px;padding:1px;background-color:var(--highlight-bg-color);border-radius:4px}.textLayer .highlight.appended{position:initial}.textLayer .highlight.begin{border-radius:4px 0 0 4px}.textLayer .highlight.end{border-radius:0 4px 4px 0}.textLayer .highlight.middle{border-radius:0}.textLayer .highlight.selected{background-color:var(--highlight-selected-bg-color)}.textLayer br::selection{background:transparent}.textLayer .endOfContent{display:block;position:absolute;top:100%;right:0;bottom:0;left:0;z-index:-1;cursor:default;-webkit-user-select:none;user-select:none}.textLayer.selecting .endOfContent{top:0}.hiddenCanvasElement{position:absolute;top:0;left:0;width:0;height:0;display:none}:root{--react-pdf-annotation-layer: 1;--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");--input-focus-border-color: Highlight;--input-focus-outline: 1px solid Canvas;--input-unfocused-border-color: transparent;--input-disabled-border-color: transparent;--input-hover-border-color: black;--link-outline: none}@media screen and (forced-colors: active){:root{--input-focus-border-color: CanvasText;--input-unfocused-border-color: ActiveText;--input-disabled-border-color: GrayText;--input-hover-border-color: Highlight;--link-outline: 1.5px solid LinkText}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid selectedItem}.annotationLayer .linkAnnotation:hover{-webkit-backdrop-filter:invert(100%);backdrop-filter:invert(100%)}}.annotationLayer{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0;z-index:3}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg) translate(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg) translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg) translateY(-100%)}.annotationLayer canvas{position:absolute;width:100%;height:100%}.annotationLayer section{position:absolute;text-align:initial;pointer-events:auto;box-sizing:border-box;margin:0;transform-origin:0 0}.annotationLayer .linkAnnotation{outline:var(--link-outline)}.textLayer.selecting~.annotationLayer section{pointer-events:none}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{position:absolute;font-size:1em;top:0;left:0;width:100%;height:100%}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a:hover{opacity:.2;background:#ff0;box-shadow:0 2px 10px #ff0}.annotationLayer .textAnnotation img{position:absolute;cursor:pointer;width:100%;height:100%;top:0;left:0}.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--scale-factor)) sans-serif;height:100%;margin:0;vertical-align:top;width:100%}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .textWidgetAnnotation :is(input,textarea)[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{background:none;border:2px solid var(--input-disabled-border-color);cursor:not-allowed}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{border-radius:2px}.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{background:none;border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-image:none;background-color:transparent}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{background-color:CanvasText;content:"";display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{height:80%;left:45%;width:1px}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{border-radius:50%;height:50%;left:30%;top:20%;width:50%}.annotationLayer .textWidgetAnnotation input.comb{font-family:monospace;padding-left:2px;padding-right:0}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.annotationLayer .popupTriggerArea{height:100%;width:100%}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{position:absolute}.annotationLayer .popupWrapper{position:absolute;font-size:calc(9px * var(--scale-factor));width:100%;min-width:calc(180px * var(--scale-factor));pointer-events:none}.annotationLayer .popup{position:absolute;max-width:calc(180px * var(--scale-factor));background-color:#ff9;box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) #888;border-radius:calc(2px * var(--scale-factor));padding:calc(6px * var(--scale-factor));margin-left:calc(5px * var(--scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto}.annotationLayer .popup>*{font-size:calc(9px * var(--scale-factor))}.annotationLayer .popup h1{display:inline-block}.annotationLayer .popupDate{display:inline-block;margin-left:calc(5px * var(--scale-factor))}.annotationLayer .popupContent{border-top:1px solid rgba(51,51,51,1);margin-top:calc(2px * var(--scale-factor));padding-top:calc(2px * var(--scale-factor))}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--scale-factor))}.annotationLayer .highlightAnnotation,.annotationLayer .underlineAnnotation,.annotationLayer .squigglyAnnotation,.annotationLayer .strikeoutAnnotation,.annotationLayer .freeTextAnnotation,.annotationLayer .lineAnnotation svg line,.annotationLayer .squareAnnotation svg rect,.annotationLayer .circleAnnotation svg ellipse,.annotationLayer .polylineAnnotation svg polyline,.annotationLayer .polygonAnnotation svg polygon,.annotationLayer .caretAnnotation,.annotationLayer .inkAnnotation svg polyline,.annotationLayer .stampAnnotation,.annotationLayer .fileAttachmentAnnotation{cursor:pointer}.annotationLayer section svg{position:absolute;width:100%;height:100%;top:0;left:0}.annotationLayer .annotationTextContent{position:absolute;width:100%;height:100%;opacity:0;color:transparent;-webkit-user-select:none;user-select:none;pointer-events:none}.annotationLayer .annotationTextContent span{width:100%;display:inline-block}
+#react-doc-viewer #proxy-renderer{background-color:#ededed;min-height:calc(100vh - 85px)}#react-doc-viewer #pdf-controls{position:fixed;z-index:9999;left:50%;top:7px;transform:translate(-50%);box-shadow:none}#react-doc-viewer #pdf-controls button,#react-doc-viewer #pdf-controls a{box-shadow:none;color:#9e9e9e}#react-doc-viewer #pdf-controls #pdf-download{display:none}#react-doc-viewer #image-img{max-width:100%;max-height:100%}#react-doc-viewer #pdf-page-wrapper{margin-top:20px;margin-bottom:20px}:root{--react-pdf-text-layer: 1;--highlight-bg-color: rgba(180, 0, 170, 1);--highlight-selected-bg-color: rgba(0, 100, 0, 1)}@media screen and (forced-colors: active){:root{--highlight-bg-color: Highlight;--highlight-selected-bg-color: ButtonText}}[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg) translate(-100%)}.textLayer{position:absolute;text-align:initial;top:0;right:0;bottom:0;left:0;overflow:hidden;line-height:1;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:2}.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;margin:0;transform-origin:0 0}.textLayer span.markedContent{top:0;height:0}.textLayer .highlight{margin:-1px;padding:1px;background-color:var(--highlight-bg-color);border-radius:4px}.textLayer .highlight.appended{position:initial}.textLayer .highlight.begin{border-radius:4px 0 0 4px}.textLayer .highlight.end{border-radius:0 4px 4px 0}.textLayer .highlight.middle{border-radius:0}.textLayer .highlight.selected{background-color:var(--highlight-selected-bg-color)}.textLayer br::selection{background:transparent}.textLayer .endOfContent{display:block;position:absolute;top:100%;right:0;bottom:0;left:0;z-index:-1;cursor:default;-webkit-user-select:none;user-select:none}.textLayer.selecting .endOfContent{top:0}.hiddenCanvasElement{position:absolute;top:0;left:0;width:0;height:0;display:none}:root{--react-pdf-annotation-layer: 1;--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");--input-focus-border-color: Highlight;--input-focus-outline: 1px solid Canvas;--input-unfocused-border-color: transparent;--input-disabled-border-color: transparent;--input-hover-border-color: black;--link-outline: none}@media screen and (forced-colors: active){:root{--input-focus-border-color: CanvasText;--input-unfocused-border-color: ActiveText;--input-disabled-border-color: GrayText;--input-hover-border-color: Highlight;--link-outline: 1.5px solid LinkText}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid selectedItem}.annotationLayer .linkAnnotation:hover{-webkit-backdrop-filter:invert(100%);backdrop-filter:invert(100%)}}.annotationLayer{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0;z-index:3}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg) translate(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg) translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg) translateY(-100%)}.annotationLayer canvas{position:absolute;width:100%;height:100%}.annotationLayer section{position:absolute;text-align:initial;pointer-events:auto;box-sizing:border-box;margin:0;transform-origin:0 0}.annotationLayer .linkAnnotation{outline:var(--link-outline)}.textLayer.selecting~.annotationLayer section{pointer-events:none}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{position:absolute;font-size:1em;top:0;left:0;width:100%;height:100%}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a:hover{opacity:.2;background:#ff0;box-shadow:0 2px 10px #ff0}.annotationLayer .textAnnotation img{position:absolute;cursor:pointer;width:100%;height:100%;top:0;left:0}.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--scale-factor)) sans-serif;height:100%;margin:0;vertical-align:top;width:100%}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .textWidgetAnnotation :is(input,textarea)[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{background:none;border:2px solid var(--input-disabled-border-color);cursor:not-allowed}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{border-radius:2px}.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{background:none;border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-image:none;background-color:transparent}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{background-color:CanvasText;content:"";display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{height:80%;left:45%;width:1px}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{border-radius:50%;height:50%;left:30%;top:20%;width:50%}.annotationLayer .textWidgetAnnotation input.comb{font-family:monospace;padding-left:2px;padding-right:0}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.annotationLayer .popupTriggerArea{height:100%;width:100%}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{position:absolute}.annotationLayer .popupWrapper{position:absolute;font-size:calc(9px * var(--scale-factor));width:100%;min-width:calc(180px * var(--scale-factor));pointer-events:none}.annotationLayer .popup{position:absolute;max-width:calc(180px * var(--scale-factor));background-color:#ff9;box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) #888;border-radius:calc(2px * var(--scale-factor));padding:calc(6px * var(--scale-factor));margin-left:calc(5px * var(--scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto}.annotationLayer .popup>*{font-size:calc(9px * var(--scale-factor))}.annotationLayer .popup h1{display:inline-block}.annotationLayer .popupDate{display:inline-block;margin-left:calc(5px * var(--scale-factor))}.annotationLayer .popupContent{border-top:1px solid rgba(51,51,51,1);margin-top:calc(2px * var(--scale-factor));padding-top:calc(2px * var(--scale-factor))}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--scale-factor))}.annotationLayer .highlightAnnotation,.annotationLayer .underlineAnnotation,.annotationLayer .squigglyAnnotation,.annotationLayer .strikeoutAnnotation,.annotationLayer .freeTextAnnotation,.annotationLayer .lineAnnotation svg line,.annotationLayer .squareAnnotation svg rect,.annotationLayer .circleAnnotation svg ellipse,.annotationLayer .polylineAnnotation svg polyline,.annotationLayer .polygonAnnotation svg polygon,.annotationLayer .caretAnnotation,.annotationLayer .inkAnnotation svg polyline,.annotationLayer .stampAnnotation,.annotationLayer .fileAttachmentAnnotation{cursor:pointer}.annotationLayer section svg{position:absolute;width:100%;height:100%;top:0;left:0}.annotationLayer .annotationTextContent{position:absolute;width:100%;height:100%;opacity:0;color:transparent;-webkit-user-select:none;user-select:none;pointer-events:none}.annotationLayer .annotationTextContent span{width:100%;display:inline-block}

package/dist/components/document-viewer/components/action-buttons/index.js

@@ -1,16 +1,21 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Box as r, Divider as i } from "@mui/material";
-import { Button as t } from "../../styled.js";
-import { Subject as n, BookmarkBorder as o, PrintOutlined as m, OpenInFull as a, FileDownloadOutlined as c } from "@mui/icons-material";
-const p = ({}) => /* @__PURE__ */ l(r, { display: "flex", gap: 1, alignItems: "center", children: [
-  /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(n, { fontSize: "small" }) }),
-  /* @__PURE__ */ e(i, { orientation: "vertical", flexItem: !0 }),
-  /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(o, { fontSize: "small" }) }),
-  /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(m, { fontSize: "small" }) }),
-  /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(a, { fontSize: "small" }) }),
-  /* @__PURE__ */ e(i, { orientation: "vertical", flexItem: !0 }),
-  /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(c, { fontSize: "small" }) })
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { Box as m, Divider as t, Tooltip as i } from "@mui/material";
+import { Button as l } from "../../styled.js";
+import { Subject as a, BookmarkBorder as s, PrintOutlined as f, OpenInFull as u, FileDownloadOutlined as h } from "@mui/icons-material";
+const S = ({
+  onBookmark: n,
+  onDownload: o,
+  onFullScreen: r,
+  onPrint: c
+}) => /* @__PURE__ */ d(m, { display: "flex", gap: 1, alignItems: "center", children: [
+  /* @__PURE__ */ e(l, { disabled: !0, children: /* @__PURE__ */ e(a, { fontSize: "small" }) }),
+  /* @__PURE__ */ e(t, { orientation: "vertical", flexItem: !0 }),
+  /* @__PURE__ */ e(i, { title: "Bookmark Document", children: /* @__PURE__ */ e(l, { onClick: n, children: /* @__PURE__ */ e(s, { fontSize: "small" }) }) }),
+  /* @__PURE__ */ e(i, { title: "Print", children: /* @__PURE__ */ e(l, { onClick: c, children: /* @__PURE__ */ e(f, { fontSize: "small" }) }) }),
+  /* @__PURE__ */ e(i, { title: "Fullscreen", children: /* @__PURE__ */ e(l, { onClick: r, children: /* @__PURE__ */ e(u, { fontSize: "small" }) }) }),
+  /* @__PURE__ */ e(t, { orientation: "vertical", flexItem: !0 }),
+  /* @__PURE__ */ e(i, { title: "Download", children: /* @__PURE__ */ e(l, { onClick: o, children: /* @__PURE__ */ e(h, { fontSize: "small" }) }) })
 ] });
 export {
-  p as ActionButtons
+  S as ActionButtons
 };

package/dist/components/document-viewer/components/viewer/index.js

@@ -1,35 +1,38 @@
-import { jsx as r, Fragment as a } from "react/jsx-runtime";
-import * as o from "react";
-import { K as s, T as t, o as m, a as i, l as p, s as d, b as n, E as u, d as f, S as l, _ as c, e as R } from "../../../../txt-U0b7DL6j.js";
-import '../../../../assets/index3.css';const w = ({ data: e }) => e ? /* @__PURE__ */ r(
-  s,
-  {
-    documents: [{ uri: window.URL.createObjectURL(e) }],
-    pluginRenderers: [
-      t,
-      m,
-      i,
-      p,
-      d,
-      n,
-      u,
-      f,
-      l,
-      c,
-      R
-    ],
-    config: {
-      header: {
-        disableHeader: !0
-      },
-      pdfZoom: {
-        defaultZoom: 0.5,
-        zoomJump: 0.1
-      },
-      pdfVerticalScrollByDefault: !0
+import { jsx as e, Fragment as o } from "react/jsx-runtime";
+import * as t from "react";
+import { K as s, T as d, o as f, a as i, l as m, s as n, b as u, E as l, d as p, S as c, _ as w, e as R } from "../../../../txt-U0b7DL6j.js";
+import { Box as S } from "@mui/material";
+import '../../../../assets/index3.css';const T = t.forwardRef(function(r, a) {
+  return r.data ? /* @__PURE__ */ e(S, { ref: a, overflow: "auto", children: /* @__PURE__ */ e(
+    s,
+    {
+      documents: [{ uri: window.URL.createObjectURL(r.data) }],
+      pluginRenderers: [
+        d,
+        f,
+        i,
+        m,
+        n,
+        u,
+        l,
+        p,
+        c,
+        w,
+        R
+      ],
+      config: {
+        header: {
+          disableHeader: !0
+        },
+        pdfZoom: {
+          defaultZoom: 0.5,
+          zoomJump: 0.1
+        },
+        pdfVerticalScrollByDefault: !0
+      }
     }
-  }
-) : /* @__PURE__ */ r(a, {}), g = o.memo(w);
+  ) }) : /* @__PURE__ */ e(o, {});
+});
 export {
-  g as default
+  T as default
 };

package/dist/components/document-viewer/index.js

@@ -1,19 +1,52 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { Box as e, AppBar as c, Toolbar as i } from "@mui/material";
-import { ActionButtons as d } from "./components/action-buttons/index.js";
-import l from "./components/viewer/index.js";
-const f = ({
-  logo: t,
-  data: n
-}) => /* @__PURE__ */ o(e, { bgcolor: "#ededed", children: [
-  /* @__PURE__ */ r(c, { color: "inherit", children: /* @__PURE__ */ o(i, { sx: { justifyContent: "space-between" }, children: [
-    /* @__PURE__ */ r(e, { children: t }),
-    /* @__PURE__ */ r(e, {}),
-    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(d, {}) })
-  ] }) }),
-  /* @__PURE__ */ r(i, {}),
-  /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(l, { data: n }) })
-] });
+import { jsxs as i, jsx as o, Fragment as h } from "react/jsx-runtime";
+import { Box as n, AppBar as d, Toolbar as l } from "@mui/material";
+import { ActionButtons as c } from "./components/action-buttons/index.js";
+import m from "./components/viewer/index.js";
+import { useDocumentViewerLogic as g } from "./logic.js";
+import { SidePanelToggleButton as s, SidePanel as f } from "./styled.js";
+import { DoubleArrow as u } from "@mui/icons-material";
+const S = (r) => {
+  const { refs: a, state: e, action: t } = g(r);
+  return /* @__PURE__ */ i(n, { bgcolor: "#ededed", children: [
+    /* @__PURE__ */ o(d, { color: "inherit", children: /* @__PURE__ */ i(l, { sx: { justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ o(n, { children: r.logo }),
+      /* @__PURE__ */ o(n, {}),
+      /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(
+        c,
+        {
+          onBookmark: r.onBookmark,
+          onDownload: t.onDownload,
+          onFullScreen: t.onFullScreen,
+          onPrint: t.onPrint
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ o(l, {}),
+    /* @__PURE__ */ o(n, { mr: `${e.rightPanelWidth}px`, sx: { transition: "all .3s" }, children: e.blob ? /* @__PURE__ */ o(m, { ref: a.viewer, data: e.blob }) : null }),
+    r.rightPanel ? /* @__PURE__ */ i(h, { children: [
+      /* @__PURE__ */ o(
+        s,
+        {
+          sx: { right: e.rightPanelWidth },
+          onClick: t.toggleRightPanel,
+          children: /* @__PURE__ */ o(
+            u,
+            {
+              sx: {
+                fontSize: 14,
+                transform: `rotate(${e.rightPanelWidth ? 0 : 180}deg)`
+              }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ i(f, { width: e.rightPanelWidth, right: 0, children: [
+        /* @__PURE__ */ o(l, {}),
+        r.rightPanel
+      ] })
+    ] }) : null
+  ] });
+};
 export {
-  f as DocumentViewer
+  S as DocumentViewer
 };

package/dist/components/document-viewer/logic.js

@@ -0,0 +1,44 @@
+import { useRef as f, useState as i, useEffect as b } from "react";
+import { b64toBlob as g, printBlob as p, downloadBlob as w } from "./utils.js";
+const D = ({
+  data: t,
+  title: s,
+  rightPanel: c,
+  rightPanelWidth: n = 450
+}) => {
+  const o = f(null), [e, u] = i();
+  b(() => ((async () => {
+    const a = await g(t, "application/pdf");
+    u(a);
+  })(), () => {
+  }), [t]);
+  const [r, l] = i(
+    c ? n : 0
+  );
+  return {
+    refs: {
+      viewer: o
+    },
+    state: {
+      blob: e,
+      rightPanelWidth: r
+    },
+    action: {
+      onPrint: () => {
+        e && p(e);
+      },
+      onFullScreen: () => {
+        o.current && o.current.requestFullscreen();
+      },
+      onDownload: () => {
+        e && w(e, s);
+      },
+      toggleRightPanel: () => {
+        l(r ? 0 : n);
+      }
+    }
+  };
+};
+export {
+  D as useDocumentViewerLogic
+};

package/dist/components/document-viewer/styled.js

@@ -1,12 +1,12 @@
-import { styled as o, Button as r, alpha as e, InputBase as n } from "@mui/material";
-const l = o(r)(({ theme: t }) => ({
+import { styled as o, Button as r, alpha as n, InputBase as e, Box as i } from "@mui/material";
+const a = o(r)(({ theme: t }) => ({
   color: t.palette.grey[500],
   minWidth: "auto",
   "&:hover": {
-    backgroundColor: e(t.palette.grey[500], 0.15),
+    backgroundColor: n(t.palette.grey[500], 0.15),
     color: t.palette.grey[700]
   }
-})), p = o(n)(() => ({
+})), d = o(e)(() => ({
   border: "1px solid",
   borderColor: "#E9E9EA",
   background: "#F8F8F8",
@@ -15,8 +15,25 @@ const l = o(r)(({ theme: t }) => ({
   "& .MuiInputBase-input": {
     textAlign: "center"
   }
-}));
+})), s = o(i)({
+  position: "fixed",
+  top: 0,
+  bottom: 0,
+  backgroundColor: "#fff",
+  transition: "all .3s",
+  overflow: "auto"
+}), p = o(a)({
+  position: "fixed",
+  top: 75,
+  marginRight: 10,
+  background: "#fff",
+  borderRadius: 4,
+  border: "1px solid rgba(0, 0, 0, 0.12)",
+  transition: "all .3s"
+});
 export {
-  l as Button,
-  p as Input
+  a as Button,
+  d as Input,
+  s as SidePanel,
+  p as SidePanelToggleButton
 };

package/dist/components/document-viewer/utils.js

@@ -1,4 +1,25 @@
-const e = async (b, o = "") => await (await fetch(`data:${o};base64,${b}`)).blob();
+const c = async (t, n = "") => await (await fetch(`data:${n};base64,${t}`)).blob();
+function a(t, n = "file.txt") {
+  const e = URL.createObjectURL(t), o = document.createElement("a");
+  o.href = e, o.download = n, document.body.appendChild(o), o.dispatchEvent(
+    new MouseEvent("click", {
+      bubbles: !0,
+      cancelable: !0,
+      view: window
+    })
+  ), document.body.removeChild(o);
+}
+const b = (t) => {
+  const n = URL.createObjectURL(t), e = document.createElement("iframe");
+  document.body.appendChild(e), e.style.display = "none", e.src = n, e.onload = function() {
+    setTimeout(function() {
+      var o;
+      e.focus(), (o = e.contentWindow) == null || o.print();
+    }, 1);
+  };
+};
 export {
-  e as b64toBlob
+  c as b64toBlob,
+  a as downloadBlob,
+  b as printBlob
 };

package/dist/main.d.ts

@@ -209,6 +209,17 @@ declare interface DisseminationListProps {
     onChange(value: string[]): void;
 }
 
+export declare const DocumentViewer: FC<DocumentViewerProps>;
+
+declare interface DocumentViewerProps {
+    data: string; // Base64
+    logo: default_2.ReactNode;
+    title: string;
+    rightPanel?: default_2.ReactNode;
+    rightPanelWidth?: number;
+    onBookmark(): void;
+}
+
 declare function encrypt(encryptionKey: any, data: any): Promise<{
     status: string;
     data: string;

package/dist/main.js

@@ -5,31 +5,32 @@ import { CardAlternate as $t } from "./components/card-alternate/index.js";
 import { CollapsibleCard as Et } from "./components/collapsible-card/index.js";
 import { ConditionalWrapper as zt } from "./components/conditional-wrapper/index.js";
 import { Container as Nt } from "./components/container/index.js";
-import { ContextMenu as _t } from "./components/context-menu/index.js";
+import { ContextMenu as Vt } from "./components/context-menu/index.js";
 import { DateTimePicker as qt } from "./components/date-time-picker/index.js";
-import { DisseminationList as Kt } from "./components/data-security-selectors/dissemination-list/index.js";
-import { GeometryPicker as Rt } from "./components/geometry-picker/index.js";
-import { IconButton as te } from "./components/icon-button/index.js";
-import { InstanceForm as re } from "./components/instance-form/index.js";
-import { InstanceHierarchyTable as ne } from "./components/instance-hierarchy-table/index.js";
-import { InstanceTable as ae } from "./components/instance-table/index.js";
-import { KeyProtectionMenu as he } from "./components/key-protection/menu.js";
-import { LinearIndicator as ue } from "./components/linear-indicator/index.js";
-import { Loading as fe } from "./components/loading/index.js";
-import { LocalizationProvider as le } from "@mui/x-date-pickers";
-import { PhoneInput as ye } from "./components/phone-input/index.js";
-import { SearchInput as De } from "./components/search-input/index.js";
-import { SecurityLevel as ge } from "./components/data-security-selectors/security-level/index.js";
-import { TemplateForm as Te } from "./components/template-form/index.js";
-import { TemplateFilters as we } from "./components/template-filters/index.js";
-import { TemplatePropertyFilters as ve } from "./components/template-property-filters/index.js";
-import { Property as Se } from "./components/template-property-filters/property.js";
-import { TreeSelect as be } from "./components/tree-select/index.js";
-import { TreeViewFilter as Fe } from "./components/treeview-filter/index.js";
-import { S as Ie } from "./utils-Bq0ye5vf.js";
-import { i as je } from "./index-DlnzUkwe.js";
-import { b as $e } from "./helpers-DaCoWmi2.js";
-import { ThemeProvider as Ee, createTheme as Ue } from "@mui/material";
+import { DocumentViewer as Kt } from "./components/document-viewer/index.js";
+import { DisseminationList as Rt } from "./components/data-security-selectors/dissemination-list/index.js";
+import { GeometryPicker as te } from "./components/geometry-picker/index.js";
+import { IconButton as re } from "./components/icon-button/index.js";
+import { InstanceForm as ne } from "./components/instance-form/index.js";
+import { InstanceHierarchyTable as ae } from "./components/instance-hierarchy-table/index.js";
+import { InstanceTable as he } from "./components/instance-table/index.js";
+import { KeyProtectionMenu as ue } from "./components/key-protection/menu.js";
+import { LinearIndicator as fe } from "./components/linear-indicator/index.js";
+import { Loading as le } from "./components/loading/index.js";
+import { LocalizationProvider as ye } from "@mui/x-date-pickers";
+import { PhoneInput as De } from "./components/phone-input/index.js";
+import { SearchInput as ge } from "./components/search-input/index.js";
+import { SecurityLevel as Te } from "./components/data-security-selectors/security-level/index.js";
+import { TemplateForm as we } from "./components/template-form/index.js";
+import { TemplateFilters as ve } from "./components/template-filters/index.js";
+import { TemplatePropertyFilters as Se } from "./components/template-property-filters/index.js";
+import { Property as be } from "./components/template-property-filters/property.js";
+import { TreeSelect as Fe } from "./components/tree-select/index.js";
+import { TreeViewFilter as Ie } from "./components/treeview-filter/index.js";
+import { S as je } from "./utils-Bq0ye5vf.js";
+import { i as $e } from "./index-DlnzUkwe.js";
+import { b as Ee } from "./helpers-DaCoWmi2.js";
+import { ThemeProvider as ze, createTheme as Ze } from "@mui/material";
 import { a as dt } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
 import I from "dayjs";
 import { h as U, j as z } from "./createTheme-DrgvKMA_.js";
@@ -158,10 +159,10 @@ var et = { exports: {} };
           w && (y = T[2]), n = this.$locale(), !S && y && (n = d.Ls[y]), this.$d = function(j, B, b, P) {
             try {
               if (["x", "X"].indexOf(B) > -1) return new Date((B === "X" ? 1e3 : 1) * j);
-              var m = F(B)(j), N = m.year, $ = m.month, nt = m.day, ot = m.hours, at = m.minutes, it = m.seconds, ht = m.milliseconds, R = m.zone, X = m.week, J = /* @__PURE__ */ new Date(), _ = nt || (N || $ ? 1 : J.getDate()), V = N || J.getFullYear(), W = 0;
+              var m = F(B)(j), N = m.year, $ = m.month, nt = m.day, ot = m.hours, at = m.minutes, it = m.seconds, ht = m.milliseconds, R = m.zone, X = m.week, J = /* @__PURE__ */ new Date(), V = nt || (N || $ ? 1 : J.getDate()), _ = N || J.getFullYear(), W = 0;
               N && !$ || (W = $ > 0 ? $ - 1 : J.getMonth());
               var E, q = ot || 0, G = at || 0, K = it || 0, Q = ht || 0;
-              return R ? new Date(Date.UTC(V, W, _, q, G, K, Q + 60 * R.offset * 1e3)) : b ? new Date(Date.UTC(V, W, _, q, G, K, Q)) : (E = new Date(V, W, _, q, G, K, Q), X && (E = P(E).week(X).toDate()), E);
+              return R ? new Date(Date.UTC(_, W, V, q, G, K, Q + 60 * R.offset * 1e3)) : b ? new Date(Date.UTC(_, W, V, q, G, K, Q)) : (E = new Date(_, W, V, q, G, K, Q), X && (E = P(E).week(X).toDate()), E);
             } catch {
               return /* @__PURE__ */ new Date("");
             }
@@ -386,38 +387,39 @@ class St {
 }
 export {
   Ht as Access,
-  $e as AccessUtils,
+  Ee as AccessUtils,
   St as AdapterDayjs,
   jt as Card,
   $t as CardAlternate,
   Et as CollapsibleCard,
   zt as ConditionalWrapper,
   Nt as Container,
-  _t as ContextMenu,
+  Vt as ContextMenu,
   qt as DateTimePicker,
-  Kt as DisseminationList,
-  Rt as GeometryPicker,
-  te as IconButton,
-  re as InstanceForm,
-  ne as InstanceHierarchyTable,
-  ae as InstanceTable,
-  Ie as KeyProductionUtils,
-  he as KeyProtectionMenu,
-  ue as LinearIndicator,
-  fe as Loading,
-  le as LocalizationProvider,
-  je as Map,
-  ye as PhoneInput,
-  Se as PropertyFilterInput,
-  De as SearchInput,
-  ge as SecurityLevel,
-  we as TemplateFilters,
-  Te as TemplateForm,
-  ve as TemplatePropertyFilters,
-  Ee as ThemeProvider,
-  be as TreeSelect,
-  Fe as TreeViewFilter,
+  Rt as DisseminationList,
+  Kt as DocumentViewer,
+  te as GeometryPicker,
+  re as IconButton,
+  ne as InstanceForm,
+  ae as InstanceHierarchyTable,
+  he as InstanceTable,
+  je as KeyProductionUtils,
+  ue as KeyProtectionMenu,
+  fe as LinearIndicator,
+  le as Loading,
+  ye as LocalizationProvider,
+  $e as Map,
+  De as PhoneInput,
+  be as PropertyFilterInput,
+  ge as SearchInput,
+  Te as SecurityLevel,
+  ve as TemplateFilters,
+  we as TemplateForm,
+  Se as TemplatePropertyFilters,
+  ze as ThemeProvider,
+  Fe as TreeSelect,
+  Ie as TreeViewFilter,
   Bt as alert,
   It as confirm,
-  Ue as createTheme
+  Ze as createTheme
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridcore/ui",
   "description": "Hybrid Core UI Library",
-  "version": "1.5.15",
+  "version": "1.5.16",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",