@genai-fi/base 4.3.2 → 4.3.4

package/dist/assets/Help.css

@@ -1 +1 @@
-._helpButton_p1m35_1{position:absolute;z-index:10;left:-3rem;top:.5rem;color:#0a4bd6;background:#fff6;transition:opacity .3s ease-out;opacity:0}._helpButtonInplace_p1m35_12{color:#0a4bd6;margin-left:8px;transition:opacity .3s ease-out;opacity:.2}._helpButton_p1m35_1:hover{background:#fff}._container_p1m35_23{position:relative;border-radius:6px}._container_p1m35_23:hover ._helpButton_p1m35_1{opacity:1}._inplaceContainer_p1m35_32{display:flex;align-items:center}._inplaceContainer_p1m35_32:hover ._helpButtonInplace_p1m35_12{opacity:1}._active_p1m35_41{box-shadow:0 0 10px #0a4bd6}._helpButtonInside_p1m35_45{left:1rem}
+._helpButton_cw98j_1{position:absolute;z-index:10;color:#0a4bd6;background:#fff6;transition:opacity .3s ease-out;opacity:0}._helpButton_cw98j_1._left_cw98j_10{left:-3rem;top:.5rem}._helpButton_cw98j_1._right_cw98j_15{right:-3rem;top:.5rem}._helpButton_cw98j_1._top_cw98j_20{top:-3rem;right:.5rem}._helpButton_cw98j_1._bottom_cw98j_25{bottom:-3rem;right:.5rem}._helpButtonInplace_cw98j_30{color:#0a4bd6;margin-left:8px;transition:opacity .3s ease-out;opacity:.2}._helpButton_cw98j_1:hover{background:#fff}._container_cw98j_41{position:relative;border-radius:6px}._container_cw98j_41:hover ._helpButton_cw98j_1{opacity:1}._helpButton_cw98j_1:focus{opacity:1;background:#fff}._inplaceContainer_cw98j_55{display:flex;align-items:center}._inplaceContainer_cw98j_55:hover ._helpButtonInplace_cw98j_30{opacity:1}._helpButtonInplace_cw98j_30:focus{opacity:1;background:#fff}._active_cw98j_69{box-shadow:0 0 10px #0a4bd6}._helpButtonInside_cw98j_73{left:1rem}._closeButton_cw98j_77{margin-top:.5rem;align-self:flex-end;font-size:.75rem;padding:3px 8px}

package/dist/assets/InfoPop.css

@@ -1 +1 @@
-._popper_35oif_1{display:flex;flex-direction:column;padding:1rem 1.5rem;border-radius:6px;box-shadow:2px 2px 4px #a4acbb;font-family:Andika,sans-serif;animation:_fadeIn_35oif_1 .3s ease-out;max-width:250px}._dark_35oif_12{background:#0a4bd6;color:#fff}._light_35oif_17{background:#fff;color:#444}._popper_35oif_1._bottom_35oif_22,._popper_35oif_1._top_35oif_27{margin-top:10px;margin-bottom:10px}._popper_35oif_1._right_35oif_32{margin-left:5px;margin-right:5px}._popper_35oif_1._left_35oif_37{margin-right:5px;margin-left:5px}@keyframes _fadeIn_35oif_1{0%{opacity:0}to{opacity:1}}._popper_35oif_1._right_35oif_32:before{content:"";position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #0a4bd6;left:0;top:calc(50% - 10px)}._popper_35oif_1._left_35oif_37:before{content:"";position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #0a4bd6;right:0;top:calc(50% - 10px)}._popper_35oif_1._bottom_35oif_22:before{content:"";position:absolute;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #0a4bd6;top:0;left:calc(50% - 8px)}._popper_35oif_1._top_35oif_27:before{content:"";position:absolute;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #0a4bd6;bottom:0;left:calc(50% - 8px)}._popper_35oif_1 h2{margin:0;font-size:1.2rem}._popper_35oif_1 p{margin:0;font-size:.9rem}
+._popper_19um0_1{position:relative;display:flex;flex-direction:column;padding:1rem 1.5rem;border-radius:6px;font-family:Andika,sans-serif;animation:_fadeIn_19um0_1 .3s ease-out;max-width:250px;--infopop-bg: #0a4bd6}._dark_19um0_13{--infopop-bg: #0a4bd6;background:var(--infopop-bg);color:#fff}._light_19um0_19{--infopop-bg: white;background:var(--infopop-bg);color:#444}._arrow_19um0_25{position:absolute;width:0;height:0;background:none;transform:rotate(45deg)}._root_19um0_34[data-popper-placement^=bottom] ._arrow_19um0_25{top:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #0a4bd6}._root_19um0_34[data-popper-placement^=top] ._arrow_19um0_25{bottom:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #0a4bd6}._root_19um0_34[data-popper-placement^=right] ._arrow_19um0_25{left:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #0a4bd6}._root_19um0_34[data-popper-placement^=left] ._arrow_19um0_25{right:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #0a4bd6}._popper_19um0_1._right_19um0_60:before{content:"";position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #0a4bd6;left:0;top:calc(50% - 10px)}._popper_19um0_1._left_19um0_72:before{content:"";position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #0a4bd6;right:0;top:calc(50% - 10px)}._popper_19um0_1._bottom_19um0_84:before{content:"";position:absolute;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #0a4bd6;top:0;left:calc(50% - 8px)}._popper_19um0_1._top_19um0_96:before{content:"";position:absolute;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #0a4bd6;bottom:0;left:calc(50% - 8px)}._popper_19um0_1 h2{margin:0;font-size:1.2rem}._popper_19um0_1 p{margin:0;font-size:.9rem}._root_19um0_34[data-popper-placement^=bottom] ._popper_19um0_1{margin-top:10px}._root_19um0_34[data-popper-placement^=top] ._popper_19um0_1{margin-bottom:10px}._root_19um0_34[data-popper-placement^=right] ._popper_19um0_1{margin-left:5px}._root_19um0_34[data-popper-placement^=left] ._popper_19um0_1{margin-right:5px}@keyframes _fadeIn_19um0_1{0%{opacity:0}to{opacity:1}}

package/dist/assets/SidePanel.css

@@ -1 +1 @@
-._sidePanel_fhsa8_1{background:#fff;display:flex;z-index:2;flex-shrink:0;position:relative;transition:opacity .3s ease-in;opacity:0}._sidePanelHorizontal_fhsa8_14{flex-direction:column;width:100%}._sidePanel_fhsa8_1._closed_fhsa8_19{opacity:0;transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-out}._sidePanel_fhsa8_1._opening_fhsa8_24{opacity:1;transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-in}._sidePanel_fhsa8_1._open_fhsa8_24{opacity:1}._resizer_fhsa8_33{background-color:transparent;box-sizing:border-box;position:absolute;opacity:1;touch-action:none;-webkit-user-select:none;user-select:none;z-index:2}._resizerHorizontal_fhsa8_44{height:30px;width:100%;cursor:ns-resize;left:0;top:-8px;right:0}._resizerVertical_fhsa8_53{width:30px;cursor:ew-resize;left:-8px;top:0;bottom:0}._noSelect_fhsa8_61{-webkit-user-select:none;user-select:none}._resizerBar_fhsa8_65{position:absolute;top:0;left:7px;width:2px;height:100%;background-color:#ddd;touch-action:none;-webkit-user-select:none;user-select:none}._resizerHorizontal_fhsa8_44 ._resizerBar_fhsa8_65{top:7px;left:0;width:100%;height:2px}._resizer_fhsa8_33:hover ._resizerBar_fhsa8_65{background-color:#75a4e288}._resizer_fhsa8_33._resizing_fhsa8_87 ._resizerBar_fhsa8_65{background-color:#75a4e2}._resizerHandle_fhsa8_91{position:absolute;top:50%;left:2px;width:10px;height:60px;transform:translateY(-50%);background-color:#fff;border-radius:3px;border:2px solid #ddd;box-shadow:0 0 4px #ccc;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}._resizerHorizontal_fhsa8_44 ._resizerHandle_fhsa8_91{top:2px;left:50%;width:60px;height:10px;transform:translate(-50%)}._resizerHandle_fhsa8_91._minimised_fhsa8_117{left:-15px;width:20px}._resizerHorizontal_fhsa8_44 ._resizerHandle_fhsa8_91._minimised_fhsa8_117{top:-15px;height:20px;left:50%;width:60px;transform:translate(-50%)}._resizerHandle_fhsa8_91:focus{outline:2px solid #75a4e2;outline-offset:2px}._resizerVertical_fhsa8_53 ._resizerHandle_fhsa8_91:before{content:"";display:block;width:4px;height:20px;background:radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 2px,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 8px,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 14px;background-repeat:no-repeat;background-size:4px 4px}._resizerHorizontal_fhsa8_44 ._resizerHandle_fhsa8_91:before{content:"";display:block;width:20px;height:4px;background:radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 2px 0,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 8px 0,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 14px 0;background-repeat:no-repeat;background-size:4px 4px}._resizer_fhsa8_33:hover ._resizerHandle_fhsa8_91,._resizer_fhsa8_33._resizing_fhsa8_87 ._resizerHandle_fhsa8_91{border-color:#75a4e2}._expand_fhsa8_167{position:absolute;top:2rem;right:0;height:40px;width:30px;background-color:#fff;border-radius:3px;border:2px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center}._content_fhsa8_183{flex-grow:1;overflow:auto;min-width:300px!important;position:relative}._closeButton_fhsa8_190{position:absolute;top:.5rem;right:.5rem}
+._sidePanel_aqxrv_1{background:#fff;display:flex;z-index:2;flex-shrink:0;position:relative;transition:opacity .3s ease-in;opacity:0}._sidePanelHorizontal_aqxrv_14{flex-direction:column;width:100%}._sidePanel_aqxrv_1._closed_aqxrv_19{opacity:0;transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-out}._sidePanel_aqxrv_1._opening_aqxrv_27{opacity:1;transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-in}@media (prefers-reduced-motion: reduce){._sidePanel_aqxrv_1,._sidePanel_aqxrv_1._closed_aqxrv_19,._sidePanel_aqxrv_1._opening_aqxrv_27{transition:none}}._sidePanel_aqxrv_1._open_aqxrv_27{opacity:1}._resizer_aqxrv_47{background-color:transparent;box-sizing:border-box;position:absolute;opacity:1;touch-action:none;-webkit-user-select:none;user-select:none;z-index:2}._resizerHorizontal_aqxrv_58{height:30px;width:100%;cursor:ns-resize;left:0;top:-8px;right:0}._resizerVertical_aqxrv_67{width:30px;cursor:ew-resize;left:-8px;top:0;bottom:0}._noSelect_aqxrv_75{-webkit-user-select:none;user-select:none}._resizerBar_aqxrv_79{position:absolute;top:0;left:7px;width:2px;height:100%;background-color:#bbb;touch-action:none;-webkit-user-select:none;user-select:none}._resizerHorizontal_aqxrv_58 ._resizerBar_aqxrv_79{top:7px;left:0;width:100%;height:2px}._resizer_aqxrv_47:hover ._resizerBar_aqxrv_79{background-color:#75a4e288}._resizer_aqxrv_47._resizing_aqxrv_101 ._resizerBar_aqxrv_79{background-color:#75a4e2}._resizerHandle_aqxrv_105{position:absolute;top:50%;left:2px;width:10px;height:60px;transform:translateY(-50%);background-color:#fff;border-radius:3px;border:2px solid #bbb;box-shadow:0 0 4px #ccc;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}._resizerHorizontal_aqxrv_58 ._resizerHandle_aqxrv_105{top:2px;left:50%;width:60px;height:10px;transform:translate(-50%)}._resizerHandle_aqxrv_105._minimised_aqxrv_131{left:-15px;width:20px}._resizerHorizontal_aqxrv_58 ._resizerHandle_aqxrv_105._minimised_aqxrv_131{top:-15px;height:20px;left:50%;width:60px;transform:translate(-50%)}._resizerHandle_aqxrv_105:focus{outline:2px solid #75a4e2;outline-offset:2px}._resizerVertical_aqxrv_67 ._resizerHandle_aqxrv_105:before{content:"";display:block;width:4px;height:20px;background:radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 2px,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 8px,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 14px;background-repeat:no-repeat;background-size:4px 4px}._resizerHorizontal_aqxrv_58 ._resizerHandle_aqxrv_105:before{content:"";display:block;width:20px;height:4px;background:radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 2px 0,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 8px 0,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 14px 0;background-repeat:no-repeat;background-size:4px 4px}._resizer_aqxrv_47:hover ._resizerHandle_aqxrv_105,._resizer_aqxrv_47._resizing_aqxrv_101 ._resizerHandle_aqxrv_105{border-color:#75a4e2}._expand_aqxrv_183{position:absolute;top:2rem;right:0;height:40px;width:30px;background-color:#fff;border-radius:3px;border:2px solid #aaa;cursor:pointer;display:flex;align-items:center;justify-content:center}._content_aqxrv_199{flex-grow:1;overflow:auto;min-width:300px!important}._closeButton_aqxrv_206{position:sticky;top:.5rem;margin-left:auto;width:min-content;z-index:100}

package/dist/components/Help/Help.d.ts

@@ -5,8 +5,11 @@ interface Props extends PropsWithChildren {
     active?: boolean;
     style?: CSSProperties;
     placement?: 'top' | 'bottom' | 'left' | 'right';
+    buttonPlacement?: 'top' | 'bottom' | 'left' | 'right';
     inplace?: boolean;
     inside?: boolean;
+    keepOpen?: boolean;
+    closeLabel?: string;
 }
-export default function Help({ message, children, widget, style: customStyle, active, placement, inplace, inside, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Help({ message, children, widget, style: customStyle, active, placement, inplace, inside, keepOpen, closeLabel, buttonPlacement, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Help/Help.js

@@ -1,69 +1,108 @@
-import { jsx as e, jsxs as I } from "react/jsx-runtime";
-import { IconButton as s } from "@mui/material";
-import f from "../InfoPop/InfoPop.js";
-import { c as v } from "../../createSvgIcon-BM4dw4Lw.js";
-import { useState as C } from "react";
-import '../../assets/Help.css';const p = v(/* @__PURE__ */ e("path", {
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { IconButton as p } from "@mui/material";
+import w from "../InfoPop/InfoPop.js";
+import { c as g } from "../../createSvgIcon-BM4dw4Lw.js";
+import { useState as S } from "react";
+import { C as $ } from "../../Close-Cv_QwhIN.js";
+import "../../state/webrtcState.js";
+import "react-i18next";
+import "../../hooks/peer.js";
+import { Button as z } from "../Button/Button.js";
+import "../../index-SOhdqzHq.js";
+import "../../style/theme.js";
+import "../../util/canvas.js";
+import "../../FileSaver.min-DhePf63e.js";
+import "../BusyButton/BusyButton.js";
+import "../../browser-HW-wgeM2.js";
+import "../WorkflowLayout/lines.js";
+import "../WorkflowLayout/svgContext.js";
+import "../WorkflowLayout/Widget.js";
+import "../IconMenu/context.js";
+import "@emotion/react";
+import '../../assets/Help.css';const u = g(/* @__PURE__ */ o("path", {
   d: "M11 18h2v-2h-2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4"
-}), "HelpOutline"), S = "_helpButton_p1m35_1", g = "_helpButtonInplace_p1m35_12", $ = "_container_p1m35_23", k = "_inplaceContainer_p1m35_32", x = "_active_p1m35_41", y = "_helpButtonInside_p1m35_45", t = {
-  helpButton: S,
-  helpButtonInplace: g,
-  container: $,
+}), "HelpOutline"), N = "_helpButton_cw98j_1", b = "_left_cw98j_10", x = "_right_cw98j_15", y = "_top_cw98j_20", E = "_bottom_cw98j_25", H = "_helpButtonInplace_cw98j_30", M = "_container_cw98j_41", k = "_inplaceContainer_cw98j_55", L = "_active_cw98j_69", T = "_helpButtonInside_cw98j_73", A = "_closeButton_cw98j_77", t = {
+  helpButton: N,
+  left: b,
+  right: x,
+  top: y,
+  bottom: E,
+  helpButtonInplace: H,
+  container: M,
   inplaceContainer: k,
-  active: x,
-  helpButtonInside: y
+  active: L,
+  helpButtonInside: T,
+  closeButton: A
 };
-function j({
-  message: u,
+function lt({
+  message: _,
   children: h,
-  widget: m,
-  style: _,
-  active: d,
-  placement: B,
+  widget: d,
+  style: f,
+  active: B,
+  placement: I,
   inplace: n,
-  inside: o
+  inside: e,
+  keepOpen: c,
+  closeLabel: j,
+  buttonPlacement: C = "left"
 }) {
-  const [c, l] = C(null), a = (i) => {
-    l(n || o ? i.currentTarget : i.currentTarget.parentElement);
-  }, r = () => {
-    l(null);
+  const [l, r] = S(null), s = (a) => {
+    r(
+      (v) => v ? null : n || e ? a.currentTarget : a.currentTarget.parentElement
+    );
+  }, i = () => {
+    r(null);
   };
-  return /* @__PURE__ */ I(
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: `${n ? t.inplaceContainer : t.container} ${c && !n && !o ? t.active : ""}`,
-      "data-widget": m,
-      "data-active": d ? "true" : "false",
-      style: _,
+      className: `${n ? t.inplaceContainer : t.container} ${l && !n && !e ? t.active : ""}`,
+      "data-widget": d,
+      "data-active": B ? "true" : "false",
+      style: f,
       children: [
-        !n && /* @__PURE__ */ e(
-          s,
+        !n && /* @__PURE__ */ o(
+          p,
           {
-            onClick: a,
-            onMouseLeave: r,
-            className: `${t.helpButton} ${o ? t.helpButtonInside : ""}`,
+            onClick: s,
+            onMouseLeave: c ? void 0 : i,
+            className: `${t.helpButton} ${e ? t.helpButtonInside : ""} ${t[C]}`,
             color: "inherit",
-            children: /* @__PURE__ */ e(p, { fontSize: "medium" })
+            children: /* @__PURE__ */ o(u, { fontSize: "medium" })
           }
         ),
         h,
-        n && /* @__PURE__ */ e(
-          s,
+        n && /* @__PURE__ */ o(
+          p,
           {
-            onClick: a,
-            onMouseLeave: r,
+            onClick: s,
+            onMouseLeave: c ? void 0 : i,
             className: t.helpButtonInplace,
             color: "inherit",
-            children: /* @__PURE__ */ e(p, { fontSize: "medium" })
+            children: /* @__PURE__ */ o(u, { fontSize: "medium" })
           }
         ),
-        /* @__PURE__ */ e(
-          f,
+        /* @__PURE__ */ m(
+          w,
           {
-            anchorEl: c,
-            open: !!c,
-            placement: B,
-            children: u
+            anchorEl: l,
+            open: !!l,
+            placement: I,
+            children: [
+              _,
+              c && /* @__PURE__ */ o(
+                z,
+                {
+                  onClick: i,
+                  className: t.closeButton,
+                  color: "inherit",
+                  startIcon: /* @__PURE__ */ o($, { fontSize: "small" }),
+                  variant: "outlined",
+                  children: j || "Close"
+                }
+              )
+            ]
           }
         )
       ]
@@ -71,5 +110,5 @@ function j({
   );
 }
 export {
-  j as default
+  lt as default
 };

package/dist/components/InfoPop/InfoPop.d.ts

@@ -6,5 +6,5 @@ interface Props extends Omit<PopperProps, 'children'>, PropsWithChildren {
     offsetX?: number;
     delay?: number;
 }
-export default function InfoPop({ open, delay, children, offsetY, offsetX, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function InfoPop({ open, delay, children, offsetY, offsetX, modifiers: userModifiers, theme, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfoPop/InfoPop.js

@@ -1,48 +1,75 @@
-import { jsx as c } from "react/jsx-runtime";
-import { Popper as u } from "@mui/material";
-import { useState as d, useRef as h, useEffect as g } from "react";
-import '../../assets/InfoPop.css';const I = "_popper_35oif_1", b = "_fadeIn_35oif_1", k = "_dark_35oif_12", x = "_light_35oif_17", O = "_bottom_35oif_22", $ = "_top_35oif_27", v = "_right_35oif_32", P = "_left_35oif_37", i = {
-  popper: I,
-  fadeIn: b,
-  dark: k,
-  light: x,
-  bottom: O,
-  top: $,
-  right: v,
-  left: P
+import { jsx as f, jsxs as E } from "react/jsx-runtime";
+import { Popper as N } from "@mui/material";
+import { useState as d, useRef as O, useEffect as j, useMemo as v } from "react";
+import '../../assets/InfoPop.css';const P = "_popper_19um0_1", R = "_fadeIn_19um0_1", T = "_dark_19um0_13", $ = "_light_19um0_19", z = "_arrow_19um0_25", A = "_root_19um0_34", S = "_right_19um0_60", q = "_left_19um0_72", B = "_bottom_19um0_84", C = "_top_19um0_96", e = {
+  popper: P,
+  fadeIn: R,
+  dark: T,
+  light: $,
+  arrow: z,
+  root: A,
+  right: S,
+  left: q,
+  bottom: B,
+  top: C
 };
-function z({ open: t, delay: o, children: m, offsetY: f = 0, offsetX: r = 0, ...e }) {
-  const [p, s] = d(t), n = h(t);
-  n.current = t, g(() => {
+function H({
+  open: t,
+  delay: r,
+  children: h,
+  offsetY: s = 0,
+  offsetX: n = 0,
+  modifiers: c,
+  theme: w = "dark",
+  ...x
+}) {
+  const [g, i] = d(t), p = O(t), [a, I] = d(null);
+  p.current = t, j(() => {
     if (t) {
-      const _ = o ? setTimeout(() => {
-        n.current && s(t);
-      }, o) : void 0;
+      const o = r ? setTimeout(() => {
+        p.current && i(t);
+      }, r) : void 0;
       return () => {
-        _ && clearTimeout(_);
+        o && clearTimeout(o);
       };
     } else
-      s(!1);
-  }, [t, o]);
-  const a = e.placement || "bottom", l = r || f ? [
-    {
+      i(!1);
+  }, [t, r]);
+  const k = v(() => {
+    const o = [...c ?? []], m = (b, u) => {
+      const l = o.findIndex((_) => (_ == null ? void 0 : _.name) === b);
+      l >= 0 ? o[l] = u : o.push(u);
+    };
+    return (n || s) && m("offset", {
       name: "offset",
-      options: {
-        offset: [r, f]
-      }
-    }
-  ] : e.modifiers;
-  return /* @__PURE__ */ c(
-    u,
+      options: { offset: [n, s] }
+    }), a && m("arrow", {
+      name: "arrow",
+      options: { element: a, padding: 8 }
+    }), o;
+  }, [c, n, s, a]);
+  return /* @__PURE__ */ f(
+    N,
     {
-      open: o ? p : t,
-      ...e,
-      modifiers: l,
+      open: r ? g : t,
+      ...x,
+      className: e.root,
+      modifiers: k,
       sx: { zIndex: 10 },
-      children: /* @__PURE__ */ c("div", { className: `${i.popper} ${i[a]} ${i[e.theme || "dark"]}`, children: m })
+      children: /* @__PURE__ */ E("div", { className: `${e.popper} ${e[w]}`, children: [
+        /* @__PURE__ */ f(
+          "span",
+          {
+            ref: I,
+            className: e.arrow,
+            "data-popper-arrow": !0
+          }
+        ),
+        h
+      ] })
     }
   );
 }
 export {
-  z as default
+  H as default
 };

package/dist/components/SidePanel/SidePanel.d.ts

@@ -4,6 +4,7 @@ interface Props extends PropsWithChildren {
     onClose?: () => void;
     onOpen?: () => void;
     position?: 'right' | 'bottom';
+    closeLabel?: string;
 }
-export default function SidePanel({ children, open, onClose, onOpen, position }: Props): import("react/jsx-runtime").JSX.Element;
+export default function SidePanel({ children, open, onClose, onOpen, closeLabel, position }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SidePanel/SidePanel.js

@@ -1,109 +1,126 @@
-import { jsxs as g, jsx as a } from "react/jsx-runtime";
-import { useState as m, useRef as B, useEffect as w } from "react";
-import { C as A } from "../../Close-Cv_QwhIN.js";
-import { IconButton as D } from "@mui/material";
-import '../../assets/SidePanel.css';const L = "_sidePanel_fhsa8_1", T = "_sidePanelHorizontal_fhsa8_14", C = "_closed_fhsa8_19", k = "_opening_fhsa8_24", V = "_open_fhsa8_24", W = "_resizer_fhsa8_33", Z = "_resizerHorizontal_fhsa8_44", U = "_resizerVertical_fhsa8_53", X = "_noSelect_fhsa8_61", j = "_resizerBar_fhsa8_65", K = "_resizing_fhsa8_87", O = "_resizerHandle_fhsa8_91", Y = "_minimised_fhsa8_117", F = "_content_fhsa8_183", G = "_closeButton_fhsa8_190", e = {
-  sidePanel: L,
-  sidePanelHorizontal: T,
-  closed: C,
-  opening: k,
-  open: V,
-  resizer: W,
-  resizerHorizontal: Z,
-  resizerVertical: U,
-  noSelect: X,
-  resizerBar: j,
-  resizing: K,
-  resizerHandle: O,
-  minimised: Y,
-  content: F,
-  closeButton: G
-}, h = 30, N = 300, v = Math.max(N, Math.floor(window.innerWidth * 0.25)), M = "sidePanelWidth";
-function ie({ children: R, open: r, onClose: S, onOpen: I, position: t = "right" }) {
-  const [l, s] = m(r ? v : 0), _ = B(null), [c, E] = m(!1), [f, H] = m(!1), [p, P] = m(!r), b = B(
-    window.sessionStorage.getItem(M) ? Number(window.sessionStorage.getItem(M)) : v
-  ), o = Math.max(
+import { jsxs as M, jsx as m } from "react/jsx-runtime";
+import { useState as h, useRef as v, useEffect as I } from "react";
+import { C as L } from "../../Close-Cv_QwhIN.js";
+import { IconButton as T } from "@mui/material";
+import '../../assets/SidePanel.css';const k = "_sidePanel_aqxrv_1", V = "_sidePanelHorizontal_aqxrv_14", W = "_closed_aqxrv_19", Z = "_opening_aqxrv_27", C = "_open_aqxrv_27", K = "_resizer_aqxrv_47", U = "_resizerHorizontal_aqxrv_58", X = "_resizerVertical_aqxrv_67", j = "_noSelect_aqxrv_75", F = "_resizerBar_aqxrv_79", O = "_resizing_aqxrv_101", Y = "_resizerHandle_aqxrv_105", G = "_minimised_aqxrv_131", J = "_content_aqxrv_199", Q = "_closeButton_aqxrv_206", t = {
+  sidePanel: k,
+  sidePanelHorizontal: V,
+  closed: W,
+  opening: Z,
+  open: C,
+  resizer: K,
+  resizerHorizontal: U,
+  resizerVertical: X,
+  noSelect: j,
+  resizerBar: F,
+  resizing: O,
+  resizerHandle: Y,
+  minimised: G,
+  content: J,
+  closeButton: Q
+}, p = 30, N = 300, E = Math.max(N, Math.floor(window.innerWidth * 0.25)), c = "sidePanelWidth";
+function re({ children: D, open: o, onClose: d, onOpen: q, closeLabel: $, position: i = "right" }) {
+  const [u, s] = h(o ? E : 0), w = v(null), [_, H] = h(!1), [g, P] = h(!1), [b, y] = h(!o), S = v(null), z = v(null), l = v(
+    window.sessionStorage.getItem(c) ? Number(window.sessionStorage.getItem(c)) : E
+  ), a = Math.max(
     N,
-    Math.floor(t === "right" ? window.innerWidth / 2 : window.innerHeight / 2)
+    Math.floor(i === "right" ? window.innerWidth * 0.9 : window.innerHeight * 0.9)
   );
-  w(() => {
-    if (r)
-      H(!0), P(!1);
+  I(() => {
+    if (o)
+      P(!0), y(!1), z.current = document.activeElement ? document.activeElement : null;
     else {
       s(0);
-      const i = setTimeout(() => {
-        P(!0);
+      const n = setTimeout(() => {
+        y(!0), z.current && document.contains(z.current) && z.current.focus();
       }, 300);
-      return () => clearTimeout(i);
+      return () => clearTimeout(n);
     }
-  }, [r]), w(() => {
-    if (f) {
-      s(b.current || v);
-      const i = setTimeout(() => {
-        H(!1);
+  }, [o]), I(() => {
+    if (g) {
+      S.current && S.current.focus(), s(l.current || E);
+      const n = setTimeout(() => {
+        P(!1);
       }, 300);
-      return () => clearTimeout(i);
+      return () => clearTimeout(n);
     }
-  }, [f]), w(() => {
-    if (c) {
-      let i = function(u) {
-        if (c && _.current) {
-          const x = _.current.getBoundingClientRect(), y = t === "right" ? x.right - u.clientX : x.bottom - u.clientY, d = Math.max(Math.min(y, o), h);
-          d - y > 10 ? s(0) : (b.current = d, s(d), window.sessionStorage.setItem(M, d.toString())), u.preventDefault();
+  }, [g]), I(() => {
+    if (_) {
+      let n = function(e) {
+        if (_ && w.current) {
+          const R = w.current.getBoundingClientRect(), B = i === "right" ? R.right - e.clientX : R.bottom - e.clientY, f = Math.max(Math.min(B, a), p);
+          f - B > 10 ? s(0) : (l.current = f, s(f), window.sessionStorage.setItem(c, f.toString())), e.preventDefault();
         }
-      }, n = function() {
-        E(!1);
+      }, r = function() {
+        H(!1);
       };
-      return window.addEventListener("pointermove", i, { passive: !1 }), window.addEventListener("pointerup", n), document.body.classList.add(e.noSelect), () => {
-        window.removeEventListener("pointermove", i), window.removeEventListener("pointerup", n), document.body.classList.remove(e.noSelect);
+      return window.addEventListener("pointermove", n, { passive: !1 }), window.addEventListener("pointerup", r), document.body.classList.add(t.noSelect), () => {
+        window.removeEventListener("pointermove", n), window.removeEventListener("pointerup", r), document.body.classList.remove(t.noSelect);
       };
     }
-  }, [c, t, o]);
-  const z = l === 0, $ = /* @__PURE__ */ g(
+  }, [_, i, a]);
+  const x = u === 0, A = /* @__PURE__ */ M(
     "div",
     {
-      className: `${e.resizer} ${c ? e.resizing : ""} ${t === "right" ? e.resizerVertical : e.resizerHorizontal}`,
+      className: `${t.resizer} ${_ ? t.resizing : ""} ${i === "right" ? t.resizerVertical : t.resizerHorizontal}`,
       onPointerDown: () => {
-        E(!0), I && I();
+        H(!0), q && q();
       },
       children: [
-        /* @__PURE__ */ a("div", { className: e.resizerBar }),
-        r && /* @__PURE__ */ a(
+        /* @__PURE__ */ m("div", { className: t.resizerBar }),
+        o && /* @__PURE__ */ m(
           "div",
           {
-            className: `${e.resizerHandle} ${z ? e.minimised : ""}`,
+            className: `${t.resizerHandle} ${x ? t.minimised : ""}`,
             role: "separator",
-            "aria-orientation": t === "right" ? "vertical" : "horizontal",
+            "aria-orientation": i === "right" ? "vertical" : "horizontal",
             "aria-label": "Resize sidebar",
             tabIndex: 0,
-            "aria-valuenow": l,
-            "aria-valuemin": h,
-            "aria-valuemax": o,
-            onKeyDown: (i) => {
-              t === "right" ? i.key === "ArrowRight" ? s((n) => Math.min(o, Math.max(0, n - 50))) : i.key === "ArrowLeft" && s((n) => Math.max(h, Math.min(o, n + 50))) : i.key === "ArrowDown" ? s((n) => Math.min(o, Math.max(0, n - 50))) : i.key === "ArrowUp" && s((n) => Math.max(h, Math.min(o, n + 50)));
+            "aria-valuenow": u,
+            "aria-valuemin": 0,
+            "aria-valuemax": a,
+            ref: S,
+            onKeyDown: (n) => {
+              i === "right" ? n.key === "ArrowRight" ? s((r) => {
+                const e = Math.min(a, Math.max(0, r - 50));
+                return l.current = e, window.sessionStorage.setItem(c, e.toString()), e;
+              }) : n.key === "ArrowLeft" && s((r) => {
+                const e = Math.max(p, Math.min(a, r + 50));
+                return l.current = e, window.sessionStorage.setItem(c, e.toString()), e;
+              }) : n.key === "ArrowDown" ? s((r) => {
+                const e = Math.min(a, Math.max(0, r - 50));
+                return l.current = e, window.sessionStorage.setItem(c, e.toString()), e;
+              }) : n.key === "ArrowUp" && s((r) => {
+                const e = Math.max(p, Math.min(a, r + 50));
+                return l.current = e, window.sessionStorage.setItem(c, e.toString()), e;
+              });
             }
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ g(
-    "section",
+  return /* @__PURE__ */ M(
+    "aside",
     {
-      className: `${e.sidePanel} ${r ? e.open : e.closed} ${f ? e.opening : ""} ${t === "right" ? e.sidePanelVertical : e.sidePanelHorizontal}`,
-      style: t === "right" ? { width: z ? 0 : l, visibility: p ? "hidden" : void 0 } : { height: z ? 0 : l, visibility: p ? "hidden" : void 0 },
-      ref: _,
-      "aria-hidden": !r,
+      className: `${t.sidePanel} ${o ? t.open : t.closed} ${g ? t.opening : ""} ${i === "right" ? t.sidePanelVertical : t.sidePanelHorizontal}`,
+      style: i === "right" ? { width: x ? 0 : u, visibility: b ? "hidden" : void 0 } : { height: x ? 0 : u, visibility: b ? "hidden" : void 0 },
+      ref: w,
+      "aria-hidden": !o,
+      onKeyDownCapture: (n) => {
+        n.key === "Escape" && (n.stopPropagation(), d == null || d());
+      },
       children: [
-        (t === "right" || t === "bottom") && $,
-        /* @__PURE__ */ g("div", { className: e.content, children: [
-          S && /* @__PURE__ */ a("div", { className: e.closeButton, children: /* @__PURE__ */ a(
-            D,
+        (i === "right" || i === "bottom") && A,
+        /* @__PURE__ */ M("div", { className: t.content, children: [
+          d && /* @__PURE__ */ m("div", { className: t.closeButton, children: /* @__PURE__ */ m(
+            T,
             {
-              onClick: S,
+              onClick: d,
               "data-testid": "sidepanel-close-button",
-              children: /* @__PURE__ */ a(
-                A,
+              "aria-label": $ ?? "Close side panel",
+              children: /* @__PURE__ */ m(
+                L,
                 {
                   fontSize: "medium",
                   htmlColor: "#444"
@@ -111,12 +128,12 @@ function ie({ children: R, open: r, onClose: S, onOpen: I, position: t = "right"
               )
             }
           ) }),
-          R
+          D
         ] })
       ]
     }
   );
 }
 export {
-  ie as default
+  re as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genai-fi/base",
-    "version": "4.3.2",
+    "version": "4.3.4",
     "license": "MIT",
     "type": "module",
     "main": "dist/main.js",