@sberbusiness/triplex-next 0.1.9 → 0.10.0

package/components/IslandWidget/components/IslandWidgetBody.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+const e = ({ children: d, ...o }) => /* @__PURE__ */ t("div", { ...o, children: d });
+e.displayName = "IslandWidgetBody";
+export {
+  e as IslandWidgetBody
+};
+//# sourceMappingURL=IslandWidgetBody.js.map

package/components/IslandWidget/components/IslandWidgetExtraFooter.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useContext as i, useEffect as d } from "react";
+import { c as n } from "../../../chunks/vendor-BlJo2ILB.js";
+import { ExpandAnimation as x } from "../../ExpandAnimation/ExpandAnimation.js";
+import { IslandWidgetContext as l } from "../IslandWidgetContext.js";
+const m = "islandWidgetExtraFooter__ebe647b0", c = {
+  islandWidgetExtraFooter: m
+}, E = ({
+  children: e,
+  className: r,
+  open: t = !1,
+  ...a
+}) => {
+  const { setHasExtraFooter: s } = i(l);
+  return d(() => {
+    s(t);
+  }, [t]), /* @__PURE__ */ o("div", { ...a, className: n(r, c.islandWidgetExtraFooter), children: /* @__PURE__ */ o(x, { expanded: t, children: e }) });
+};
+E.displayName = "IslandWidgetExtraFooter";
+export {
+  E as IslandWidgetExtraFooter
+};
+//# sourceMappingURL=IslandWidgetExtraFooter.js.map

package/components/IslandWidget/components/IslandWidgetFooter.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import { c as i } from "../../../chunks/vendor-BlJo2ILB.js";
+import { s as n } from "../../../chunks/IslandWidgetFooter.module-DANV-WDZ.js";
+import { IslandWidgetFooterContent as d } from "./IslandWidgetFooterContent.js";
+import { IslandWidgetFooterControls as m } from "./IslandWidgetFooterControls.js";
+const o = ({ children: t, className: r, ...s }) => /* @__PURE__ */ e("div", { ...s, className: i(r, n.islandWidgetFooter), children: t });
+o.Content = d;
+o.Controls = m;
+o.displayName = "IslandWidgetFooter";
+export {
+  o as IslandWidgetFooter
+};
+//# sourceMappingURL=IslandWidgetFooter.js.map

package/components/IslandWidget/components/IslandWidgetFooterContent.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import { s } from "../../../chunks/IslandWidgetFooter.module-DANV-WDZ.js";
+const n = ({
+  children: t,
+  ...o
+}) => /* @__PURE__ */ e("div", { ...o, className: s.islandWidgetFooterContent, children: t });
+n.displayName = "IslandWidgetFooterContent";
+export {
+  n as IslandWidgetFooterContent
+};
+//# sourceMappingURL=IslandWidgetFooterContent.js.map

package/components/IslandWidget/components/IslandWidgetFooterControls.js

@@ -0,0 +1,11 @@
+import { jsx as t } from "react/jsx-runtime";
+import { s as r } from "../../../chunks/IslandWidgetFooter.module-DANV-WDZ.js";
+const e = ({
+  children: o,
+  ...s
+}) => /* @__PURE__ */ t("div", { ...s, className: r.islandWidgetFooterControls, children: o });
+e.displayName = "IslandWidgetFooterControls";
+export {
+  e as IslandWidgetFooterControls
+};
+//# sourceMappingURL=IslandWidgetFooterControls.js.map

package/components/IslandWidget/components/IslandWidgetHeader.js

@@ -0,0 +1,13 @@
+import { jsx as d } from "react/jsx-runtime";
+import { c as i } from "../../../chunks/vendor-BlJo2ILB.js";
+import { s as a } from "../../../chunks/IslandWidgetHeader.module-D9N9d8U0.js";
+import { IslandWidgetHeaderContent as o } from "./IslandWidgetHeaderContent.js";
+import { IslandWidgetHeaderDescription as m } from "./IslandWidgetHeaderDescription.js";
+const e = ({ children: t, className: r, ...s }) => /* @__PURE__ */ d("div", { ...s, className: i(r, a.islandWidgetHeader), children: t });
+e.Content = o;
+e.Description = m;
+e.displayName = "IslandWidgetHeader";
+export {
+  e as IslandWidgetHeader
+};
+//# sourceMappingURL=IslandWidgetHeader.js.map

package/components/IslandWidget/components/IslandWidgetHeaderContent.js

@@ -0,0 +1,13 @@
+import { jsx as a } from "react/jsx-runtime";
+import { c as d } from "../../../chunks/vendor-BlJo2ILB.js";
+import { s as o } from "../../../chunks/IslandWidgetHeader.module-D9N9d8U0.js";
+const n = ({
+  children: e,
+  className: t,
+  ...s
+}) => /* @__PURE__ */ a("div", { ...s, className: d(o.islandWidgetHeaderContent, t), children: e });
+n.displayName = "IslandWidgetHeaderContent";
+export {
+  n as IslandWidgetHeaderContent
+};
+//# sourceMappingURL=IslandWidgetHeaderContent.js.map

package/components/IslandWidget/components/IslandWidgetHeaderDescription.js

@@ -0,0 +1,13 @@
+import { jsx as r } from "react/jsx-runtime";
+import { c as a } from "../../../chunks/vendor-BlJo2ILB.js";
+import { s as t } from "../../../chunks/IslandWidgetHeader.module-D9N9d8U0.js";
+const d = ({
+  children: s,
+  className: e,
+  ...i
+}) => /* @__PURE__ */ r("div", { ...i, className: a(t.islandWidgetHeaderDescription, e), children: s });
+d.displayName = "IslandWidgetHeaderDescription";
+export {
+  d as IslandWidgetHeaderDescription
+};
+//# sourceMappingURL=IslandWidgetHeaderDescription.js.map

package/components/IslandWidget/components/IslandWidgetWrapper.js

@@ -0,0 +1,17 @@
+import { jsx as r } from "react/jsx-runtime";
+import i, { useState as p } from "react";
+import { c as l } from "../../../chunks/vendor-BlJo2ILB.js";
+import { IslandWidgetContext as n } from "../IslandWidgetContext.js";
+const W = "islandWidgetWrapper__7a079a3c", c = {
+  islandWidgetWrapper: W
+}, m = i.forwardRef(
+  ({ children: e, className: a, ...t }, s) => {
+    const [o, d] = p(!1);
+    return /* @__PURE__ */ r(n.Provider, { value: { hasExtraFooter: o, setHasExtraFooter: d }, children: /* @__PURE__ */ r("div", { className: l(c.islandWidgetWrapper, a), ...t, ref: s, children: e }) });
+  }
+);
+m.displayName = "IslandWidgetWrapper";
+export {
+  m as IslandWidgetWrapper
+};
+//# sourceMappingURL=IslandWidgetWrapper.js.map

package/components/IslandWidget/components/index.js

@@ -0,0 +1,15 @@
+import { IslandWidgetHeader as o } from "./IslandWidgetHeader.js";
+import { IslandWidgetHeaderContent as t } from "./IslandWidgetHeaderContent.js";
+import { IslandWidgetHeaderDescription as n } from "./IslandWidgetHeaderDescription.js";
+import { IslandWidgetBody as i } from "./IslandWidgetBody.js";
+import { IslandWidgetFooter as W } from "./IslandWidgetFooter.js";
+import { IslandWidgetWrapper as g } from "./IslandWidgetWrapper.js";
+export {
+  i as IslandWidgetBody,
+  W as IslandWidgetFooter,
+  o as IslandWidgetHeader,
+  t as IslandWidgetHeaderContent,
+  n as IslandWidgetHeaderDescription,
+  g as IslandWidgetWrapper
+};
+//# sourceMappingURL=index.js.map

package/components/IslandWidget/index.js

@@ -0,0 +1,17 @@
+import { IslandWidget as o } from "./IslandWidget.js";
+import { IslandWidgetHeader as t } from "./components/IslandWidgetHeader.js";
+import { IslandWidgetHeaderContent as n } from "./components/IslandWidgetHeaderContent.js";
+import { IslandWidgetHeaderDescription as i } from "./components/IslandWidgetHeaderDescription.js";
+import { IslandWidgetBody as W } from "./components/IslandWidgetBody.js";
+import { IslandWidgetFooter as g } from "./components/IslandWidgetFooter.js";
+import { IslandWidgetWrapper as m } from "./components/IslandWidgetWrapper.js";
+export {
+  o as IslandWidget,
+  W as IslandWidgetBody,
+  g as IslandWidgetFooter,
+  t as IslandWidgetHeader,
+  n as IslandWidgetHeaderContent,
+  i as IslandWidgetHeaderDescription,
+  m as IslandWidgetWrapper
+};
+//# sourceMappingURL=index.js.map

package/components/KeyDownListener/ComposedKeyDownListener.js

@@ -0,0 +1,13 @@
+import { KeyDownListener as r } from "./KeyDownListener.js";
+import { jsx as l } from "react/jsx-runtime";
+const d = ({ keyDownListeners: e, children: n }) => {
+  let o = n;
+  if (e.length)
+    for (let t = 0; t < e.length; t++)
+      o = /* @__PURE__ */ l(r, { onMatch: e[t].onMatch, eventKeyCode: e[t].eventKeyCode, children: o });
+  return o;
+};
+export {
+  d as ComposedKeyDownListener
+};
+//# sourceMappingURL=ComposedKeyDownListener.js.map

package/components/KeyDownListener/KeyDownListener.js

@@ -0,0 +1,27 @@
+var r = Object.defineProperty;
+var s = (o, n, e) => n in o ? r(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
+var i = (o, n, e) => s(o, typeof n != "symbol" ? n + "" : n, e);
+import l from "react";
+class y extends l.Component {
+  constructor() {
+    super(...arguments);
+    /** Обработчик для нажатия клавиш. */
+    i(this, "handleKeyDown", (e) => {
+      const { eventKeyCode: t, onMatch: d } = this.props;
+      typeof t == "number" ? t === e.keyCode && d(e) : t.includes(e.keyCode) && d(e);
+    });
+  }
+  componentDidMount() {
+    window.addEventListener("keydown", this.handleKeyDown);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("keydown", this.handleKeyDown);
+  }
+  render() {
+    return this.props.children || null;
+  }
+}
+export {
+  y as KeyDownListener
+};
+//# sourceMappingURL=KeyDownListener.js.map

package/components/KeyDownListener/index.js

@@ -0,0 +1,7 @@
+import { KeyDownListener as r } from "./KeyDownListener.js";
+import { ComposedKeyDownListener as t } from "./ComposedKeyDownListener.js";
+export {
+  t as ComposedKeyDownListener,
+  r as KeyDownListener
+};
+//# sourceMappingURL=index.js.map

package/components/LightBox/LightBox.js

@@ -0,0 +1,112 @@
+import { jsxs as x, Fragment as F, jsx as o } from "react/jsx-runtime";
+import { useRef as n, useEffect as B } from "react";
+import { c as V, F as A } from "../../chunks/vendor-BlJo2ILB.js";
+import { L as D, s as e } from "../../chunks/LightBoxContent-3M4bOnUh.js";
+import { LightBoxControls as I } from "./LightBoxControls/LightBoxControls.js";
+import { LightBoxSideOverlay as R } from "./LightBoxSideOverlay/LightBoxSideOverlay.js";
+import { Portal as k } from "../Portal/Portal.js";
+import { addClassNameWithScrollbarWidth as T } from "../../utils/scroll/scrollbar.js";
+import { TopOverlay as j } from "../TopOverlay/TopOverlay.js";
+import { LightBoxViewManager as q } from "./LightBoxViewManager/LightBoxViewManager.js";
+import { MobileView as W } from "../MobileView/MobileView.js";
+import { FocusTrapUtils as $ } from "../../utils/focus/FocusTrapUtils.js";
+import { useToken as z } from "../ThemeProvider/useToken.js";
+import { LightBoxLeftSidebar as H } from "./LightBoxSidebars/LightBoxLeftSidebar.js";
+import { LightBoxRightSidebar as U } from "./LightBoxSidebars/LightBoxRightSidebar.js";
+import "./LightBoxSideOverlay/enums.js";
+const Z = {
+  "scroll-0": "scroll-0__cc33f065",
+  "scroll-15": "scroll-15__b0ecb173",
+  "scroll-16": "scroll-16__c8bf4328",
+  "scroll-17": "scroll-17__158776ce"
+}, p = "LightBox-next-mount-node", L = "LightBox-next-view-manager-node", b = [e.bodyOverflowHidden], N = ({
+  children: v,
+  className: M,
+  focusTrapProps: r,
+  forwardRef: a,
+  mountNode: s,
+  lightBoxViewManagerNodeId: m = L,
+  isLoading: d,
+  isSideOverlayOpened: i,
+  isTopOverlayOpened: y,
+  ...S
+}) => {
+  const l = n(null), u = n(null), { scopeClassName: C } = z(), E = () => {
+    let t = null;
+    return s ? t = s : (t = document.querySelector(`#${p}`), t || (t = document.createElement("div"), t.setAttribute("id", p), document.body.appendChild(t))), t;
+  }, _ = () => {
+    let t = null;
+    return m && (t = document.querySelector(`#${m}`)), t || (t = document.createElement("div"), t.setAttribute("id", L), document.body.appendChild(t)), t;
+  }, c = n(E()), g = n(_()), h = () => {
+    b.forEach((t) => document.documentElement.classList.add(t));
+  };
+  B(() => (T(Z), h(), setTimeout(h, 100), () => b.forEach((t) => document.documentElement.classList.remove(t))), []), B(() => {
+    if (!i && l.current) {
+      const t = Math.round(Math.random() * 100);
+      l.current.style.zIndex = t.toString();
+    }
+  }, [i]);
+  const w = (t) => {
+    u.current = t, a && (a.current = t);
+  }, O = V(
+    C,
+    e.lightBox,
+    {
+      [e.isLoading]: !!d,
+      [e.lightBoxSideOverlayActive]: !!i,
+      [e.lightBoxTopOverlayActive]: !!y
+    },
+    M
+  );
+  if (!c.current)
+    return null;
+  const f = () => /* @__PURE__ */ x("div", { className: O, ref: w, role: "dialog", "aria-modal": "true", ...S, children: [
+    /* @__PURE__ */ o("div", { className: e.lightBoxBackdrop }),
+    v,
+    /* @__PURE__ */ o("span", { ref: l, className: e.tempElSafariBug })
+  ] });
+  return /* @__PURE__ */ x(F, { children: [
+    /* @__PURE__ */ o(k, { container: c.current, children: /* @__PURE__ */ o(
+      W,
+      {
+        fallback: /* @__PURE__ */ o(
+          A,
+          {
+            active: !d,
+            ...r,
+            focusTrapOptions: {
+              clickOutsideDeactivates: !0,
+              initialFocus: () => $.getFirstInteractionElementByDataAttr(u.current),
+              preventScroll: !0,
+              ...r == null ? void 0 : r.focusTrapOptions
+            },
+            children: f()
+          }
+        ),
+        children: f()
+      }
+    ) }),
+    g.current && /* @__PURE__ */ o(
+      q,
+      {
+        lightBoxViewManagerNode: g.current,
+        lightBoxMountNode: c.current
+      }
+    )
+  ] });
+};
+N.displayName = "LightBoxBase";
+const st = Object.assign(N, {
+  Content: D,
+  SideOverlay: R,
+  TopOverlay: j,
+  Controls: I,
+  LeftSidebar: H,
+  RightSidebar: U
+});
+export {
+  st as LightBox,
+  p as lightBoxMountNodeIdDefault,
+  L as lightBoxViewManagerNodeIdDefault
+};
+//# sourceMappingURL=LightBox.js.map

package/components/LightBox/LightBoxContent.js

@@ -0,0 +1,10 @@
+import "react/jsx-runtime";
+import "react";
+import "../../chunks/vendor-BlJo2ILB.js";
+import "../WindowResizeListener/WindowResizeListener.js";
+import "../LoaderScreen/LoaderScreen.js";
+import { L as n } from "../../chunks/LightBoxContent-3M4bOnUh.js";
+export {
+  n as LightBoxContent
+};
+//# sourceMappingURL=LightBoxContent.js.map

package/components/LightBox/LightBoxControls/LightBoxClose.js

@@ -0,0 +1,53 @@
+import { jsxs as n, jsx as e, Fragment as f } from "react/jsx-runtime";
+import { useRef as h } from "react";
+import { c as u } from "../../../chunks/vendor-BlJo2ILB.js";
+import { CrossStrokeSrvIcon32 as x, CrossStrokeSrvIcon20 as C } from "@sberbusiness/icons-next";
+import { TriggerClickOnKeyDownEvent as E } from "../../Triggers/TriggerClickOnKeyDownEvent.js";
+import { EVENT_KEY_CODES as g } from "../../../utils/keyboard.js";
+import { EButtonTheme as i } from "../../Button/enums.js";
+import { Button as l } from "../../Button/Button.js";
+import { EComponentSize as a } from "../../../enums/EComponentSize.js";
+import { s as o } from "../../../chunks/LightBoxControls.module-C1sKSbiw.js";
+const N = ({
+  className: c,
+  onClick: t,
+  title: r = "Закрыть",
+  ...d
+}) => {
+  const s = h(null), m = (p) => /* @__PURE__ */ n(f, { children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        className: o.lightBoxControlsDesktop,
+        onClick: t,
+        title: r,
+        "data-exclude-modal-focus": !0,
+        ref: p,
+        icon: /* @__PURE__ */ e(x, { paletteIndex: 0 }),
+        size: a.LG,
+        theme: i.SECONDARY_LIGHT
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        className: o.lightBoxControlsMobile,
+        onClick: t,
+        title: r,
+        "data-exclude-modal-focus": !0,
+        icon: /* @__PURE__ */ e(C, { paletteIndex: 0 }),
+        size: a.MD,
+        theme: i.SECONDARY_LIGHT
+      }
+    )
+  ] });
+  return /* @__PURE__ */ n("div", { className: u(c, o.lightBoxClose), ...d, children: [
+    /* @__PURE__ */ e("span", { className: o.withKeyboardEvent, children: /* @__PURE__ */ e(E, { eventKeyCode: g.ESCAPE, targetRef: s, children: m(s) }) }),
+    /* @__PURE__ */ e("span", { className: o.withoutKeyboardEvent, children: m() })
+  ] });
+};
+N.displayName = "LightBoxClose";
+export {
+  N as LightBoxClose
+};
+//# sourceMappingURL=LightBoxClose.js.map

package/components/LightBox/LightBoxControls/LightBoxControls.js

@@ -0,0 +1,15 @@
+import { jsx as i } from "react/jsx-runtime";
+import { LightBoxClose as m } from "./LightBoxClose.js";
+import { LightBoxNext as l } from "./LightBoxNext.js";
+import { LightBoxPrev as x } from "./LightBoxPrev.js";
+import { c as e } from "../../../chunks/vendor-BlJo2ILB.js";
+import { s as p } from "../../../chunks/LightBoxControls.module-C1sKSbiw.js";
+const o = ({ children: t, className: r, ...s }) => /* @__PURE__ */ i("div", { className: e(r, p.lightBoxControls), ...s, "data-lightbox-component": "controls", children: t });
+o.displayName = "LightBoxControls";
+o.Close = m;
+o.Next = l;
+o.Prev = x;
+export {
+  o as LightBoxControls
+};
+//# sourceMappingURL=LightBoxControls.js.map

package/components/LightBox/LightBoxControls/LightBoxNext.js

@@ -0,0 +1,58 @@
+import { jsx as e, jsxs as x, Fragment as N } from "react/jsx-runtime";
+import { useRef as m } from "react";
+import { c as n } from "../../../chunks/vendor-BlJo2ILB.js";
+import { CaretrightStrokeSrvIcon32 as E, CaretrightStrokeSrvIcon20 as D } from "@sberbusiness/icons-next";
+import { TriggerClickOnKeyDownEvent as I } from "../../Triggers/TriggerClickOnKeyDownEvent.js";
+import { EVENT_KEY_CODES as R } from "../../../utils/keyboard.js";
+import { Button as c } from "../../Button/Button.js";
+import { EButtonTheme as s } from "../../Button/enums.js";
+import { EComponentSize as f } from "../../../enums/EComponentSize.js";
+import { s as o } from "../../../chunks/LightBoxControls.module-C1sKSbiw.js";
+const v = ({
+  className: g,
+  clickByArrowRight: u,
+  dataTutorialId: d,
+  onClick: r,
+  title: l,
+  ...B
+}) => {
+  const h = m(null), i = (t) => /* @__PURE__ */ x(N, { children: [
+    /* @__PURE__ */ e(
+      c,
+      {
+        className: n(o.lightBoxControlsDesktop, o.lightBoxNextButton),
+        "data-test-id": t != null && t.addDataTestId ? "lightBox-next" : void 0,
+        "data-tutorial-id": d,
+        onClick: r,
+        title: l,
+        ref: t == null ? void 0 : t.buttonRef,
+        icon: /* @__PURE__ */ e(E, { paletteIndex: 0 }),
+        size: f.LG,
+        theme: s.SECONDARY_LIGHT
+      }
+    ),
+    /* @__PURE__ */ e(
+      c,
+      {
+        className: n(o.lightBoxControlsMobile, o.lightBoxNextButton),
+        "data-test-id": t != null && t.addDataTestId ? "lightBox-next" : void 0,
+        "data-tutorial-id": d,
+        onClick: r,
+        title: l,
+        ref: t == null ? void 0 : t.buttonRef,
+        icon: /* @__PURE__ */ e(D, { paletteIndex: 0 }),
+        size: f.MD,
+        theme: s.SECONDARY_LIGHT
+      }
+    )
+  ] });
+  return /* @__PURE__ */ e("div", { className: n(g, o.lightBoxNext), ...B, children: u ? /* @__PURE__ */ x("span", { children: [
+    /* @__PURE__ */ e("span", { className: o.withKeyboardEvent, children: /* @__PURE__ */ e(I, { targetRef: h, eventKeyCode: R.ARROW_RIGHT, children: i({ addDataTestId: !0, buttonRef: h }) }) }),
+    /* @__PURE__ */ e("span", { className: o.withoutKeyboardEvent, children: i() })
+  ] }) : i({ addDataTestId: !0 }) });
+};
+v.displayName = "LightBoxNext";
+export {
+  v as LightBoxNext
+};
+//# sourceMappingURL=LightBoxNext.js.map

package/components/LightBox/LightBoxControls/LightBoxPrev.js

@@ -0,0 +1,58 @@
+import { jsx as e, jsxs as f, Fragment as g } from "react/jsx-runtime";
+import { useRef as m } from "react";
+import { c as n } from "../../../chunks/vendor-BlJo2ILB.js";
+import { CaretleftStrokeSrvIcon32 as E, CaretleftStrokeSrvIcon20 as D } from "@sberbusiness/icons-next";
+import { EButtonTheme as h } from "../../Button/enums.js";
+import { TriggerClickOnKeyDownEvent as C } from "../../Triggers/TriggerClickOnKeyDownEvent.js";
+import { EVENT_KEY_CODES as I } from "../../../utils/keyboard.js";
+import { Button as s } from "../../Button/Button.js";
+import { EComponentSize as v } from "../../../enums/EComponentSize.js";
+import { s as o } from "../../../chunks/LightBoxControls.module-C1sKSbiw.js";
+const N = ({
+  className: u,
+  clickByArrowLeft: x,
+  dataTutorialId: r,
+  onClick: d,
+  title: l,
+  ...B
+}) => {
+  const c = m(null), i = (t) => /* @__PURE__ */ f(g, { children: [
+    /* @__PURE__ */ e(
+      s,
+      {
+        className: n(o.lightBoxControlsDesktop, o.lightBoxPrevButton),
+        "data-test-id": t != null && t.addDataTestId ? "lightBox-prev" : void 0,
+        "data-tutorial-id": r,
+        onClick: d,
+        title: l,
+        ref: t == null ? void 0 : t.buttonRef,
+        icon: /* @__PURE__ */ e(E, { paletteIndex: 0 }),
+        size: v.LG,
+        theme: h.SECONDARY_LIGHT
+      }
+    ),
+    /* @__PURE__ */ e(
+      s,
+      {
+        className: n(o.lightBoxControlsMobile, o.lightBoxPrevButton),
+        "data-test-id": t != null && t.addDataTestId ? "lightBox-prev" : void 0,
+        "data-tutorial-id": r,
+        onClick: d,
+        title: l,
+        ref: t == null ? void 0 : t.buttonRef,
+        icon: /* @__PURE__ */ e(D, { paletteIndex: 0 }),
+        size: v.MD,
+        theme: h.SECONDARY_LIGHT
+      }
+    )
+  ] });
+  return /* @__PURE__ */ e("div", { className: n(u, o.lightBoxPrev), ...B, children: x ? /* @__PURE__ */ f("span", { children: [
+    /* @__PURE__ */ e("span", { className: o.withKeyboardEvent, children: /* @__PURE__ */ e(C, { targetRef: c, eventKeyCode: I.ARROW_LEFT, children: i({ addDataTestId: !0, buttonRef: c }) }) }),
+    /* @__PURE__ */ e("span", { className: o.withoutKeyboardEvent, children: i() })
+  ] }) : i({ addDataTestId: !0 }) });
+};
+N.displayName = "LightBoxPrev";
+export {
+  N as LightBoxPrev
+};
+//# sourceMappingURL=LightBoxPrev.js.map

package/components/LightBox/LightBoxSideOverlay/LightBoxSideOverlay.js

@@ -0,0 +1,103 @@
+import { jsx as t, jsxs as O, Fragment as C } from "react/jsx-runtime";
+import { useState as x, useRef as p, useEffect as W } from "react";
+import { c as m, F as X } from "../../../chunks/vendor-BlJo2ILB.js";
+import { OverlayBase as Y, EOverlayDirection as R } from "../../Overlay/OverlayBase.js";
+import { OverlayMask as j } from "../../Overlay/OverlayMask.js";
+import { LightBoxSideOverlayLoader as I } from "./LightBoxSideOverlayLoader.js";
+import { FocusTrapUtils as T } from "../../../utils/focus/FocusTrapUtils.js";
+import { LightBoxSideOverlayCloseMobile as A } from "./LightBoxSideOverlayCloseMobile.js";
+import { LightBoxSideOverlayCloseDesktop as U } from "./LightBoxSideOverlayCloseDesktop.js";
+import { ELightBoxSideOverlaySize as n } from "./enums.js";
+const q = "lightBoxSideOverlayMask__e9423a36", J = "lightBoxSideOverlayWrapper__6692e8a9", K = "overflowXHidden__a63f310a", Q = "overflowYHidden__d9b381ab", V = "closing__aac19ae7", Z = "opened__7e60bca4", $ = "lightBoxSideOverlayContent__5aaa0fae", P = "opening__5c6eec4e", ee = "sizeSM__774d9a61", ie = "sizeMD__40d48d58", te = "sizeLG__5f9bb7a9", oe = "lightBoxSideOverlay__e1d6ef1c", e = {
+  lightBoxSideOverlayMask: q,
+  lightBoxSideOverlayWrapper: J,
+  overflowXHidden: K,
+  overflowYHidden: Q,
+  closing: V,
+  opened: Z,
+  lightBoxSideOverlayContent: $,
+  opening: P,
+  sizeSM: ee,
+  sizeMD: ie,
+  sizeLG: te,
+  lightBoxSideOverlay: oe
+}, y = ({
+  children: _,
+  className: M,
+  focusTrapProps: l,
+  isLoading: s,
+  loadingTitle: u,
+  isTopLevelSideOverlayOpened: B,
+  isTopOverlayOpened: z,
+  onClose: c,
+  onOpen: d,
+  opened: i,
+  size: g = n.MD,
+  ...D
+}) => {
+  const [o, v] = x(!1), [a, f] = x(!1), h = p(i), S = p(null);
+  W(() => {
+    h.current && !i ? (f(!1), v(!0)) : !h.current && i && (v(!1), f(!0)), h.current = i;
+  }, [i]);
+  const k = (r) => {
+    const { target: G, currentTarget: N } = r;
+    G === N && (o ? (v(!1), c == null || c()) : a && (f(!1), d == null || d()));
+  }, H = ({ opened: r }) => /* @__PURE__ */ t(j, { opened: r, className: e.lightBoxSideOverlayMask }), L = () => /* @__PURE__ */ O(
+    "div",
+    {
+      className: m(e.lightBoxSideOverlayContent, {
+        [e.closing]: o,
+        [e.opening]: a,
+        [e.opened]: i
+      }),
+      onTransitionEnd: k,
+      ref: S,
+      children: [
+        _,
+        s && /* @__PURE__ */ t(I, { loadingTitle: u })
+      ]
+    }
+  ), w = () => {
+  }, b = m(M, e.lightBoxSideOverlayWrapper, {
+    [e.closing]: o,
+    [e.opened]: i,
+    [e.overflowXHidden]: !!B || !!s,
+    [e.overflowYHidden]: !!B || !!s || !!z,
+    [e.sizeSM]: g === n.SM,
+    [e.sizeMD]: g === n.MD,
+    [e.sizeLG]: g === n.LG
+  }), E = (r) => /* @__PURE__ */ O(C, { children: [
+    H(r),
+    L()
+  ] }), F = /* @__PURE__ */ t(
+    "div",
+    {
+      className: m(e.lightBoxSideOverlay, {
+        [e.closing]: o,
+        [e.opening]: a
+      }),
+      children: /* @__PURE__ */ t(Y, { direction: R.RIGHT, opened: i, setOpened: w, children: E })
+    }
+  );
+  return /* @__PURE__ */ t(
+    X,
+    {
+      active: i && !a && !o,
+      ...l,
+      focusTrapOptions: {
+        clickOutsideDeactivates: !0,
+        initialFocus: () => T.getFirstInteractionElementByDataAttr(S.current),
+        preventScroll: !0,
+        ...l == null ? void 0 : l.focusTrapOptions
+      },
+      children: /* @__PURE__ */ t("div", { className: b, role: "dialog", "aria-modal": "true", ...D, children: F })
+    }
+  );
+};
+y.displayName = "LightBoxSideOverlay";
+y.CloseDesktop = U;
+y.CloseMobile = A;
+export {
+  y as LightBoxSideOverlay
+};
+//# sourceMappingURL=LightBoxSideOverlay.js.map