@cuemath/leap 3.2.17-pzd-0.1 → 3.2.18-mb

package/dist/features/stickers/stickers-effects/stickers-effects.js

@@ -0,0 +1,39 @@
+import { jsx as c } from "react/jsx-runtime";
+import { memo as l, useState as x, useEffect as D } from "react";
+import { Container as z, Sticker as E } from "./stickers-effects-styled.js";
+import { generateStickerData as d } from "./stickers-effects-utils.js";
+const h = ({ stickers: i, effect: t, count: o, duration: e }) => {
+  const [a, m] = x([]);
+  return D(() => {
+    const r = d({
+      count: o,
+      effect: t,
+      stickers: i,
+      minSize: 32,
+      maxSize: 48
+    });
+    m(r);
+    const s = setTimeout(() => m([]), e);
+    return () => clearTimeout(s);
+  }, [i, t, o, e]), /* @__PURE__ */ c(z, { children: a.map((r) => {
+    const { id: s, sticker: n, x: f, y: k, size: S, fromX: p, fromY: u } = r;
+    return /* @__PURE__ */ c(
+      E,
+      {
+        effect: t,
+        duration: e,
+        fromX: p,
+        fromY: u,
+        x: f,
+        y: k,
+        size: S,
+        children: n
+      },
+      s
+    );
+  }) });
+}, C = l(h);
+export {
+  C as default
+};
+//# sourceMappingURL=stickers-effects.js.map

package/dist/features/stickers/stickers-effects/stickers-effects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stickers-effects.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects.tsx"],"sourcesContent":["import type { TStickerData, IStickersProps } from './stickers-effects-types';\n\nimport React, { memo, useEffect, useState } from 'react';\n\nimport * as S from './stickers-effects-styled';\nimport { generateStickerData } from './stickers-effects-utils';\n\nconst StickersEffects: React.FC<IStickersProps> = ({ stickers, effect, count, duration }) => {\n  const [stickersData, setStickersData] = useState<ReturnType<typeof generateStickerData>>([]);\n\n  useEffect(() => {\n    const stickerData = generateStickerData({\n      count,\n      effect,\n      stickers,\n      minSize: 32,\n      maxSize: 48,\n    });\n\n    setStickersData(stickerData);\n\n    const timeout = setTimeout(() => setStickersData([]), duration);\n\n    return () => clearTimeout(timeout);\n  }, [stickers, effect, count, duration]);\n\n  return (\n    <S.Container>\n      {stickersData.map((data: TStickerData) => {\n        const { id, sticker, x, y, size, fromX, fromY } = data;\n\n        return (\n          <S.Sticker\n            key={id}\n            effect={effect}\n            duration={duration}\n            fromX={fromX}\n            fromY={fromY}\n            x={x}\n            y={y}\n            size={size}\n          >\n            {sticker}\n          </S.Sticker>\n        );\n      })}\n    </S.Container>\n  );\n};\n\nexport default memo(StickersEffects);\n"],"names":["StickersEffects","stickers","effect","count","duration","stickersData","setStickersData","useState","useEffect","stickerData","generateStickerData","timeout","S.Container","data","id","sticker","x","y","size","fromX","fromY","jsx","S.Sticker","stickersEffects","memo"],"mappings":";;;;AAOA,MAAMA,IAA4C,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAe;AAC3F,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAiD,CAAE,CAAA;AAE3F,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAcC,EAAoB;AAAA,MACtC,OAAAP;AAAA,MACA,QAAAD;AAAA,MACA,UAAAD;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,IAAA,CACV;AAED,IAAAK,EAAgBG,CAAW;AAE3B,UAAME,IAAU,WAAW,MAAML,EAAgB,CAAE,CAAA,GAAGF,CAAQ;AAEvD,WAAA,MAAM,aAAaO,CAAO;AAAA,KAChC,CAACV,GAAUC,GAAQC,GAAOC,CAAQ,CAAC,qBAGnCQ,GAAA,EACE,UAAaP,EAAA,IAAI,CAACQ,MAAuB;AAClC,UAAA,EAAE,IAAAC,GAAI,SAAAC,GAAS,GAAAC,GAAG,GAAAC,GAAG,MAAAC,GAAM,OAAAC,GAAO,OAAAC,EAAU,IAAAP;AAGhD,WAAA,gBAAAQ;AAAA,MAACC;AAAAA,MAAA;AAAA,QAEC,QAAApB;AAAA,QACA,UAAAE;AAAA,QACA,OAAAe;AAAA,QACA,OAAAC;AAAA,QACA,GAAAJ;AAAA,QACA,GAAAC;AAAA,QACA,MAAAC;AAAA,QAEC,UAAAH;AAAA,MAAA;AAAA,MATID;AAAA,IAAA;AAAA,EAYV,CAAA,EACH,CAAA;AAEJ,GAEeS,IAAAC,EAAKxB,CAAe;"}

package/dist/features/ui/arrow-tooltip/arrow-tooltip-styled.js

@@ -1,15 +1,63 @@
-import o from "styled-components";
-const i = o.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  z-index: ${({ theme: t }) => t.zIndex.JOURNEY_OVERLAY};
-`;
+import w from "styled-components";
+import y from "../layout/flex-view.js";
+import { arrowPosition as T, tooltipPosition as k, animateToolTip as m } from "./arrow-tooltip-util.js";
+const P = w(y)(({
+  theme: o,
+  $arrowColor: r,
+  $arrowSize: t,
+  $arrowXCoOrdinates: c,
+  $arrowYCoOrdinates: d,
+  $borderColor: p,
+  $isAnimated: x,
+  $position: n,
+  $renderAs: s,
+  $tooltipCoOrdinates: e,
+  $tooltipOffset: f,
+  $tooltipXCoOrdinates: g,
+  $tooltipYCoOrdinates: u,
+  $zIndex: C,
+  $backgroundColor: O
+}) => {
+  const { gutter: l } = o.layout, { REAL_BLACK_15: $ } = o.colors, { tooltipVariants: a } = o.arrowTooltip;
+  let { backgroundColorName: i } = a[s];
+  const { textColorName: b } = a[s];
+  return i = O || i, `
+    position: fixed;
+    z-index: ${C || 1};
+    padding: ${l * 0.25}px ${l * 0.5}px;
+    color: ${b};
+    box-shadow: 0px 2px 15px 0px ${$};
+    background-color: ${o.colors[i]};
+    border: 1px solid ${p ? o.colors[p] : "transparent"};
+
+    &::after {
+      content: '';
+      position: absolute;
+      height: ${t}px;
+      width: ${t}px;
+      clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+      background-color: ${r ? o.colors[r] : o.colors[i]};
+      ${T({
+    position: n,
+    arrowXCoOrdinates: c,
+    arrowYCoOrdinates: d,
+    arrowSize: t
+  })};
+    }
+
+    ${k({
+    position: n,
+    arrowSize: t,
+    tooltipCoOrdinates: e,
+    tooltipOffset: f,
+    tooltipXCoOrdinates: g,
+    tooltipYCoOrdinates: u
+  })};
+
+    ${m(x)};
+  `;
+});
 export {
-  i as BackgroundOverlay
+  P as TooltipBody
 };
 //# sourceMappingURL=arrow-tooltip-styled.js.map

package/dist/features/ui/arrow-tooltip/arrow-tooltip-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrow-tooltip-styled.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const BackgroundOverlay = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  z-index: ${({ theme }) => theme.zIndex.JOURNEY_OVERLAY};\n`;\n"],"names":["BackgroundOverlay","styled","theme"],"mappings":";AAEO,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQ3B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,eAAe;AAAA;"}
+{"version":3,"file":"arrow-tooltip-styled.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip-styled.tsx"],"sourcesContent":["import type { TArrowTooltipVariants, TColorNames } from '../types';\nimport type { TPositionProps, TTooltipCoOrdinatesProps } from './arrow-tooltip-types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport { animateToolTip, arrowPosition, tooltipPosition } from './arrow-tooltip-util';\n\ninterface ITooltipBodyProps {\n  $arrowSize: number;\n  $arrowColor?: TColorNames;\n  $arrowXCoOrdinates?: number;\n  $arrowYCoOrdinates?: number;\n  $backgroundColor?: TColorNames;\n  $borderColor?: TColorNames;\n  $position: TPositionProps;\n  $renderAs: TArrowTooltipVariants;\n  $tooltipCoOrdinates: TTooltipCoOrdinatesProps | null;\n  $tooltipOffset?: number;\n  $tooltipXCoOrdinates?: number | string;\n  $tooltipYCoOrdinates?: number | string;\n  $zIndex?: number;\n  $isAnimated?: boolean;\n}\n\nconst TooltipBody = styled(FlexView)<ITooltipBodyProps>(({\n  theme,\n  $arrowColor,\n  $arrowSize,\n  $arrowXCoOrdinates,\n  $arrowYCoOrdinates,\n  $borderColor,\n  $isAnimated,\n  $position,\n  $renderAs,\n  $tooltipCoOrdinates,\n  $tooltipOffset,\n  $tooltipXCoOrdinates,\n  $tooltipYCoOrdinates,\n  $zIndex,\n  $backgroundColor,\n}) => {\n  const { gutter } = theme.layout;\n  const { REAL_BLACK_15 } = theme.colors;\n  const { tooltipVariants } = theme.arrowTooltip;\n  let { backgroundColorName } = tooltipVariants[$renderAs];\n  const { textColorName } = tooltipVariants[$renderAs];\n\n  backgroundColorName = $backgroundColor || backgroundColorName;\n\n  return `\n    position: fixed;\n    z-index: ${$zIndex || 1};\n    padding: ${gutter * 0.25}px ${gutter * 0.5}px;\n    color: ${textColorName};\n    box-shadow: 0px 2px 15px 0px ${REAL_BLACK_15};\n    background-color: ${theme.colors[backgroundColorName]};\n    border: 1px solid ${$borderColor ? theme.colors[$borderColor] : 'transparent'};\n\n    &::after {\n      content: '';\n      position: absolute;\n      height: ${$arrowSize}px;\n      width: ${$arrowSize}px;\n      clip-path: polygon(0% 0%, 100% 100%, 0% 100%);\n      background-color: ${\n        $arrowColor ? theme.colors[$arrowColor] : theme.colors[backgroundColorName]\n      };\n      ${arrowPosition({\n        position: $position,\n        arrowXCoOrdinates: $arrowXCoOrdinates,\n        arrowYCoOrdinates: $arrowYCoOrdinates,\n        arrowSize: $arrowSize,\n      })};\n    }\n\n    ${tooltipPosition({\n      position: $position,\n      arrowSize: $arrowSize,\n      tooltipCoOrdinates: $tooltipCoOrdinates,\n      tooltipOffset: $tooltipOffset,\n      tooltipXCoOrdinates: $tooltipXCoOrdinates,\n      tooltipYCoOrdinates: $tooltipYCoOrdinates,\n    })};\n\n    ${animateToolTip($isAnimated)};\n  `;\n});\n\nexport { TooltipBody };\n"],"names":["TooltipBody","styled","FlexView","theme","$arrowColor","$arrowSize","$arrowXCoOrdinates","$arrowYCoOrdinates","$borderColor","$isAnimated","$position","$renderAs","$tooltipCoOrdinates","$tooltipOffset","$tooltipXCoOrdinates","$tooltipYCoOrdinates","$zIndex","$backgroundColor","gutter","REAL_BLACK_15","tooltipVariants","backgroundColorName","textColorName","arrowPosition","tooltipPosition","animateToolTip"],"mappings":";;;AAyBA,MAAMA,IAAcC,EAAOC,CAAQ,EAAqB,CAAC;AAAA,EACvD,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAC,EAAO,IAAIf,EAAM,QACnB,EAAE,eAAAgB,EAAc,IAAIhB,EAAM,QAC1B,EAAE,iBAAAiB,EAAgB,IAAIjB,EAAM;AAClC,MAAI,EAAE,qBAAAkB,EAAA,IAAwBD,EAAgBT,CAAS;AACvD,QAAM,EAAE,eAAAW,EAAA,IAAkBF,EAAgBT,CAAS;AAEnD,SAAAU,IAAsBJ,KAAoBI,GAEnC;AAAA;AAAA,eAEML,KAAW,CAAC;AAAA,eACZE,IAAS,IAAI,MAAMA,IAAS,GAAG;AAAA,aACjCI,CAAa;AAAA,mCACSH,CAAa;AAAA,wBACxBhB,EAAM,OAAOkB,CAAmB,CAAC;AAAA,wBACjCb,IAAeL,EAAM,OAAOK,CAAY,IAAI,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKjEH,CAAU;AAAA,eACXA,CAAU;AAAA;AAAA,0BAGjBD,IAAcD,EAAM,OAAOC,CAAW,IAAID,EAAM,OAAOkB,CAAmB,CAC5E;AAAA,QACEE,EAAc;AAAA,IACd,UAAUb;AAAA,IACV,mBAAmBJ;AAAA,IACnB,mBAAmBC;AAAA,IACnB,WAAWF;AAAA,EAAA,CACZ,CAAC;AAAA;AAAA;AAAA,MAGFmB,EAAgB;AAAA,IAChB,UAAUd;AAAA,IACV,WAAWL;AAAA,IACX,oBAAoBO;AAAA,IACpB,eAAeC;AAAA,IACf,qBAAqBC;AAAA,IACrB,qBAAqBC;AAAA,EAAA,CACtB,CAAC;AAAA;AAAA,MAEAU,EAAehB,CAAW,CAAC;AAAA;AAEjC,CAAC;"}

package/dist/features/ui/arrow-tooltip/arrow-tooltip.js

@@ -1,100 +1,105 @@
-import { jsxs as D, Fragment as U, jsx as e } from "react/jsx-runtime";
-import W from "../../../node_modules/lodash.throttle/index.js";
-import { memo as Y, useRef as H, useState as f, useCallback as p, useEffect as m } from "react";
-import $ from "../layout/flex-view.js";
-import P from "../portal/portal.js";
-import { THROTTLE_DURATION as Z, DEFAULT_ARROW_SIZE as q } from "./arrow-tooltip-constants.js";
-import { BackgroundOverlay as G } from "./arrow-tooltip-styled.js";
+import { jsxs as U, Fragment as W, jsx as e } from "react/jsx-runtime";
+import Y from "../../../node_modules/lodash.throttle/index.js";
+import { useRef as H, useState as m, useCallback as $, useEffect as C } from "react";
+import { useTheme as P } from "styled-components";
+import w from "../layout/flex-view.js";
+import Z from "../portal/portal.js";
+import q from "../text/text.js";
+import { TooltipBody as G } from "./arrow-tooltip-styled.js";
 import { computeTooltipNewCoOrdinates as J } from "./arrow-tooltip-util.js";
-import K from "./comps/tooltip-body.js";
-const Q = ({
-  isAnimated: C,
+const K = 8, Q = 100, V = ({
+  isAnimated: O,
   alwaysVisible: o = !1,
-  arrowColor: O,
-  arrowSize: w = q,
-  arrowXCoOrdinates: E,
-  arrowYCoOrdinates: T,
+  arrowColor: T,
+  arrowSize: E = K,
+  arrowXCoOrdinates: g,
+  arrowYCoOrdinates: h,
   backgroundColor: v,
   borderColor: R,
-  children: h,
+  children: x,
   hidden: t,
   position: l,
-  renderAs: A,
+  renderAs: s,
   textVariant: L,
-  tooltipItem: g,
-  tooltipOffset: x,
-  tooltipXCoOrdinates: z,
-  tooltipYCoOrdinates: I,
-  width: b,
-  widthX: k,
-  zIndex: B,
-  parentWidth: F,
-  isBlocking: M = !1
+  tooltipItem: c,
+  tooltipOffset: A,
+  tooltipXCoOrdinates: b,
+  tooltipYCoOrdinates: N,
+  width: k,
+  widthX: z,
+  zIndex: F,
+  parentWidth: M
 }) => {
-  const u = H(null), [N, d] = f(o), [S, X] = f(
+  const { arrowTooltip: S } = P(), { tooltipVariants: a } = S, { backgroundColorName: X } = a[s], d = H(null), [_, f] = m(o), [j, B] = m(
     null
-  ), s = p(
+  ), u = $(
     (n, i) => {
-      X(n), d(i);
+      B(n), f(i);
     },
     []
-  ), _ = p(() => {
+  ), D = $(() => {
     if (t || o)
       return null;
-    s(null, !1);
-  }, [o, s, t]), r = W(() => {
-    var a;
-    const { current: n } = u;
+    u(null, !1);
+  }, [o, u, t]), r = Y(() => {
+    var p;
+    const { current: n } = d;
     if (t || !n) return null;
-    const i = (a = n.children[0]) == null ? void 0 : a.getBoundingClientRect(), j = i ? J(l, i) : null;
-    return s(j, !0), null;
-  }, Z);
-  m(() => {
+    const i = (p = n.children[0]) == null ? void 0 : p.getBoundingClientRect(), I = i ? J(l, i) : null;
+    return u(I, !0), null;
+  }, Q);
+  return C(() => {
     if (!(!o || t))
       return window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
         window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
       };
-  }, [o, t, l, r]), m(() => {
-    t && d(!1), o && r();
-  }, [o, t]);
-  const c = /* @__PURE__ */ e(
-    K,
-    {
-      $arrowSize: w,
-      $arrowXCoOrdinates: E,
-      $arrowYCoOrdinates: T,
-      $position: l,
-      $renderAs: A,
-      $tooltipCoOrdinates: S,
-      $tooltipOffset: x,
-      $tooltipXCoOrdinates: z,
-      $tooltipYCoOrdinates: I,
-      $zIndex: B,
-      $backgroundColor: v,
-      $arrowColor: O,
-      $borderColor: R,
-      $isAnimated: C,
-      $width: b,
-      $widthX: k,
-      textVariant: L || "body3",
-      children: g
-    }
-  );
-  return /* @__PURE__ */ D(U, { children: [
+  }, [o, t, l, r]), C(() => {
+    t && f(!1), o && r();
+  }, [o, t]), /* @__PURE__ */ U(W, { children: [
     /* @__PURE__ */ e(
-      $,
+      w,
       {
-        $width: F || "fit-content",
-        ref: u,
+        $width: M || "fit-content",
+        ref: d,
         onMouseEnter: r,
-        onMouseLeave: _,
-        children: /* @__PURE__ */ e($, { children: h })
+        onMouseLeave: D,
+        children: /* @__PURE__ */ e(w, { children: x })
       }
     ),
-    N && /* @__PURE__ */ e(P, { portalId: "tooltip-root", children: M ? /* @__PURE__ */ e(G, { children: c }) : c })
+    _ && /* @__PURE__ */ e(Z, { portalId: "tooltip-root", children: /* @__PURE__ */ e(
+      G,
+      {
+        $arrowSize: E,
+        $arrowXCoOrdinates: g,
+        $arrowYCoOrdinates: h,
+        $position: l,
+        $renderAs: s,
+        $tooltipCoOrdinates: j,
+        $tooltipOffset: A,
+        $tooltipXCoOrdinates: b,
+        $tooltipYCoOrdinates: N,
+        $width: k,
+        $widthX: z,
+        $zIndex: F,
+        $background: X,
+        $backgroundColor: v,
+        $arrowColor: T,
+        $borderColor: R,
+        $isAnimated: O,
+        children: typeof c == "string" ? /* @__PURE__ */ e(
+          q,
+          {
+            $renderAs: L || "body3",
+            $color: a[s].textColorName,
+            $align: "center",
+            children: c
+          }
+        ) : c
+      }
+    ) })
   ] });
-}, so = Y(Q);
+}, co = V;
 export {
-  so as default
+  co as default
 };
 //# sourceMappingURL=arrow-tooltip.js.map

package/dist/features/ui/arrow-tooltip/arrow-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrow-tooltip.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip.tsx"],"sourcesContent":["import type {\n  IArrowTooltipProps,\n  THandleVisibleNCoOrdinatesProps,\n  TTooltipCoOrdinatesProps,\n} from './arrow-tooltip-types';\n\nimport throttle from 'lodash.throttle';\nimport { useState, type FC, useCallback, useRef, useEffect, memo } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport Portal from '../portal/portal';\nimport { DEFAULT_ARROW_SIZE, THROTTLE_DURATION } from './arrow-tooltip-constants';\nimport * as Styled from './arrow-tooltip-styled';\nimport { computeTooltipNewCoOrdinates } from './arrow-tooltip-util';\nimport TooltipBody from './comps/tooltip-body';\n\nconst ArrowTooltip: FC<IArrowTooltipProps> = ({\n  isAnimated,\n  alwaysVisible = false,\n  arrowColor,\n  arrowSize = DEFAULT_ARROW_SIZE,\n  arrowXCoOrdinates,\n  arrowYCoOrdinates,\n  backgroundColor,\n  borderColor,\n  children,\n  hidden,\n  position,\n  renderAs,\n  textVariant,\n  tooltipItem,\n  tooltipOffset,\n  tooltipXCoOrdinates,\n  tooltipYCoOrdinates,\n  width,\n  widthX,\n  zIndex,\n  parentWidth,\n  isBlocking = false,\n}) => {\n  const tooltipWrapperRef = useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = useState(alwaysVisible);\n  const [tooltipCoOrdinates, setTooltipCoOrdinates] = useState<TTooltipCoOrdinatesProps | null>(\n    null,\n  );\n\n  const handleVisibleNCoOrdinates: THandleVisibleNCoOrdinatesProps = useCallback(\n    (newCoOrdinates, visibility) => {\n      setTooltipCoOrdinates(newCoOrdinates);\n      setVisible(visibility);\n    },\n    [],\n  );\n\n  const handleVisibility = useCallback(() => {\n    if (hidden || alwaysVisible) {\n      return null;\n    }\n\n    handleVisibleNCoOrdinates(null, false);\n\n    return;\n  }, [alwaysVisible, handleVisibleNCoOrdinates, hidden]);\n\n  const handleOnMouseEnter = throttle(() => {\n    const { current } = tooltipWrapperRef;\n\n    if (hidden || !current) return null;\n\n    const boundingClientRect = current.children[0]?.getBoundingClientRect();\n    const newCoOrdinates = boundingClientRect\n      ? computeTooltipNewCoOrdinates(position, boundingClientRect)\n      : null;\n\n    handleVisibleNCoOrdinates(newCoOrdinates, true);\n\n    return null;\n  }, THROTTLE_DURATION);\n\n  useEffect(() => {\n    if (!alwaysVisible || hidden) return;\n\n    window.addEventListener('scroll', handleOnMouseEnter, true);\n    window.addEventListener('resize', handleOnMouseEnter);\n\n    return () => {\n      window.removeEventListener('scroll', handleOnMouseEnter, true);\n      window.removeEventListener('resize', handleOnMouseEnter);\n    };\n  }, [alwaysVisible, hidden, position, handleOnMouseEnter]);\n\n  useEffect(() => {\n    if (hidden) {\n      setVisible(false);\n    }\n\n    if (alwaysVisible) {\n      handleOnMouseEnter();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [alwaysVisible, hidden]);\n\n  const tooltipContent = (\n    <TooltipBody\n      $arrowSize={arrowSize}\n      $arrowXCoOrdinates={arrowXCoOrdinates}\n      $arrowYCoOrdinates={arrowYCoOrdinates}\n      $position={position}\n      $renderAs={renderAs}\n      $tooltipCoOrdinates={tooltipCoOrdinates}\n      $tooltipOffset={tooltipOffset}\n      $tooltipXCoOrdinates={tooltipXCoOrdinates}\n      $tooltipYCoOrdinates={tooltipYCoOrdinates}\n      $zIndex={zIndex}\n      $backgroundColor={backgroundColor}\n      $arrowColor={arrowColor}\n      $borderColor={borderColor}\n      $isAnimated={isAnimated}\n      $width={width}\n      $widthX={widthX}\n      textVariant={textVariant || 'body3'}\n    >\n      {tooltipItem}\n    </TooltipBody>\n  );\n\n  return (\n    <>\n      <FlexView\n        $width={parentWidth || 'fit-content'}\n        ref={tooltipWrapperRef}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleVisibility}\n      >\n        <FlexView>{children}</FlexView>\n      </FlexView>\n\n      {visible && (\n        <Portal portalId=\"tooltip-root\">\n          {isBlocking ? (\n            <Styled.BackgroundOverlay>{tooltipContent}</Styled.BackgroundOverlay>\n          ) : (\n            tooltipContent\n          )}\n        </Portal>\n      )}\n    </>\n  );\n};\n\nexport default memo(ArrowTooltip);\n"],"names":["ArrowTooltip","isAnimated","alwaysVisible","arrowColor","arrowSize","DEFAULT_ARROW_SIZE","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","children","hidden","position","renderAs","textVariant","tooltipItem","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","isBlocking","tooltipWrapperRef","useRef","visible","setVisible","useState","tooltipCoOrdinates","setTooltipCoOrdinates","handleVisibleNCoOrdinates","useCallback","newCoOrdinates","visibility","handleVisibility","handleOnMouseEnter","throttle","current","boundingClientRect","_a","computeTooltipNewCoOrdinates","THROTTLE_DURATION","useEffect","tooltipContent","jsx","TooltipBody","jsxs","Fragment","FlexView","Portal","Styled.BackgroundOverlay","ArrowTooltip$1","memo"],"mappings":"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"}
+{"version":3,"file":"arrow-tooltip.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip.tsx"],"sourcesContent":["import type {\n  IArrowTooltipProps,\n  THandleVisibleNCoOrdinatesProps,\n  TTooltipCoOrdinatesProps,\n} from './arrow-tooltip-types';\n\nimport throttle from 'lodash.throttle';\nimport { useState, type FC, useCallback, useRef, useEffect } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport Portal from '../portal/portal';\nimport Text from '../text/text';\nimport * as Styled from './arrow-tooltip-styled';\nimport { computeTooltipNewCoOrdinates } from './arrow-tooltip-util';\n\nconst DEFAULT_ARROW_SIZE = 8;\nconst THROTTLE_DURATION = 100;\n\nconst ArrowTooltip: FC<IArrowTooltipProps> = ({\n  isAnimated,\n  alwaysVisible = false,\n  arrowColor,\n  arrowSize = DEFAULT_ARROW_SIZE,\n  arrowXCoOrdinates,\n  arrowYCoOrdinates,\n  backgroundColor,\n  borderColor,\n  children,\n  hidden,\n  position,\n  renderAs,\n  textVariant,\n  tooltipItem,\n  tooltipOffset,\n  tooltipXCoOrdinates,\n  tooltipYCoOrdinates,\n  width,\n  widthX,\n  zIndex,\n  parentWidth,\n}) => {\n  const { arrowTooltip } = useTheme();\n  const { tooltipVariants } = arrowTooltip;\n  const { backgroundColorName } = tooltipVariants[renderAs];\n\n  const tooltipWrapperRef = useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = useState(alwaysVisible);\n  const [tooltipCoOrdinates, setTooltipCoOrdinates] = useState<TTooltipCoOrdinatesProps | null>(\n    null,\n  );\n\n  const handleVisibleNCoOrdinates: THandleVisibleNCoOrdinatesProps = useCallback(\n    (newCoOrdinates, visibility) => {\n      setTooltipCoOrdinates(newCoOrdinates);\n      setVisible(visibility);\n    },\n    [],\n  );\n\n  const handleVisibility = useCallback(() => {\n    if (hidden || alwaysVisible) {\n      return null;\n    }\n\n    handleVisibleNCoOrdinates(null, false);\n\n    return;\n  }, [alwaysVisible, handleVisibleNCoOrdinates, hidden]);\n\n  const handleOnMouseEnter = throttle(() => {\n    const { current } = tooltipWrapperRef;\n\n    if (hidden || !current) return null;\n\n    const boundingClientRect = current.children[0]?.getBoundingClientRect();\n    const newCoOrdinates = boundingClientRect\n      ? computeTooltipNewCoOrdinates(position, boundingClientRect)\n      : null;\n\n    handleVisibleNCoOrdinates(newCoOrdinates, true);\n\n    return null;\n  }, THROTTLE_DURATION);\n\n  useEffect(() => {\n    if (!alwaysVisible || hidden) return;\n\n    window.addEventListener('scroll', handleOnMouseEnter, true);\n    window.addEventListener('resize', handleOnMouseEnter);\n\n    return () => {\n      window.removeEventListener('scroll', handleOnMouseEnter, true);\n      window.removeEventListener('resize', handleOnMouseEnter);\n    };\n  }, [alwaysVisible, hidden, position, handleOnMouseEnter]);\n\n  useEffect(() => {\n    if (hidden) {\n      setVisible(false);\n    }\n\n    if (alwaysVisible) {\n      handleOnMouseEnter();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [alwaysVisible, hidden]);\n\n  return (\n    <>\n      <FlexView\n        $width={parentWidth || 'fit-content'}\n        ref={tooltipWrapperRef}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleVisibility}\n      >\n        <FlexView>{children}</FlexView>\n      </FlexView>\n      {visible && (\n        <Portal portalId=\"tooltip-root\">\n          <Styled.TooltipBody\n            $arrowSize={arrowSize}\n            $arrowXCoOrdinates={arrowXCoOrdinates}\n            $arrowYCoOrdinates={arrowYCoOrdinates}\n            $position={position}\n            $renderAs={renderAs}\n            $tooltipCoOrdinates={tooltipCoOrdinates}\n            $tooltipOffset={tooltipOffset}\n            $tooltipXCoOrdinates={tooltipXCoOrdinates}\n            $tooltipYCoOrdinates={tooltipYCoOrdinates}\n            $width={width}\n            $widthX={widthX}\n            $zIndex={zIndex}\n            $background={backgroundColorName}\n            $backgroundColor={backgroundColor}\n            $arrowColor={arrowColor}\n            $borderColor={borderColor}\n            $isAnimated={isAnimated}\n          >\n            {typeof tooltipItem === 'string' ? (\n              <Text\n                $renderAs={textVariant || 'body3'}\n                $color={tooltipVariants[renderAs].textColorName}\n                $align=\"center\"\n              >\n                {tooltipItem}\n              </Text>\n            ) : (\n              tooltipItem\n            )}\n          </Styled.TooltipBody>\n        </Portal>\n      )}\n    </>\n  );\n};\n\nexport default ArrowTooltip;\n"],"names":["DEFAULT_ARROW_SIZE","THROTTLE_DURATION","ArrowTooltip","isAnimated","alwaysVisible","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","children","hidden","position","renderAs","textVariant","tooltipItem","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","arrowTooltip","useTheme","tooltipVariants","backgroundColorName","tooltipWrapperRef","useRef","visible","setVisible","useState","tooltipCoOrdinates","setTooltipCoOrdinates","handleVisibleNCoOrdinates","useCallback","newCoOrdinates","visibility","handleVisibility","handleOnMouseEnter","throttle","current","boundingClientRect","_a","computeTooltipNewCoOrdinates","useEffect","jsxs","Fragment","jsx","FlexView","Portal","Styled.TooltipBody","Text","ArrowTooltip$1"],"mappings":"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"}

package/dist/features/ui/error/error.js

@@ -1,85 +1,47 @@
-import { jsxs as n, jsx as i, Fragment as X } from "react/jsx-runtime";
-import { useCallback as $ } from "react";
-import { ILLUSTRATIONS as p } from "../../../assets/illustrations/illustrations.js";
-import f from "../buttons/button/button.js";
-import u from "../image/image.js";
-import a from "../layout/flex-view.js";
-import m from "../text/text.js";
-const e = {
-  compact: {
-    widthX: 10,
-    heightX: 5,
-    borderRadiusX: 1,
-    marginBottomX: 1,
-    title: "h6",
-    description: "body3",
-    imageWidth: 54,
-    imageHeight: 44
-  },
-  full: {
-    widthX: 22.5,
-    heightX: 11.5,
-    borderRadiusX: 1,
-    marginBottomX: 1.5,
-    title: "h4",
-    description: "body2",
-    imageWidth: 122,
-    imageHeight: 100
-  }
-}, w = (l) => {
-  const { height: d, onTryAgain: r, theme: h = "light", title: s, description: g, size: t = "full" } = l, c = $(() => {
-    r ? r() : window.location.reload();
-  }, [r]), o = h === "dark" ? "WHITE_T_87" : "BLACK_T_87";
-  return /* @__PURE__ */ n(a, { $alignItems: "center", $justifyContent: "center", $height: d, children: [
-    /* @__PURE__ */ i(
-      a,
+import { jsxs as o, jsx as r, Fragment as h } from "react/jsx-runtime";
+import { useCallback as g } from "react";
+import { ILLUSTRATIONS as $ } from "../../../assets/illustrations/illustrations.js";
+import p from "../buttons/button/button.js";
+import f from "../image/image.js";
+import n from "../layout/flex-view.js";
+import i from "../text/text.js";
+const w = (a) => {
+  const { height: l, onTryAgain: t, theme: s = "light", title: m, description: c } = a, d = g(() => {
+    t ? t() : window.location.reload();
+  }, [t]), e = s === "dark" ? "WHITE_T_87" : "BLACK_T_87";
+  return /* @__PURE__ */ o(n, { $alignItems: "center", $justifyContent: "center", $height: l, children: [
+    /* @__PURE__ */ r(
+      n,
       {
-        $widthX: e[t].widthX,
-        $heightX: e[t].heightX,
-        $borderRadiusX: e[t].borderRadiusX,
-        $marginBottomX: e[t].marginBottomX,
+        $widthX: 22.5,
+        $heightX: 11.5,
+        $borderRadiusX: 1,
+        $marginBottomX: 1.5,
         $background: "GREY_1",
         $justifyContent: "center",
         $alignItems: "center",
-        children: /* @__PURE__ */ i(
-          u,
-          {
-            width: e[t].imageWidth,
-            height: e[t].imageHeight,
-            src: p.ROCKET_BROKEN,
-            withLoader: !1
-          }
-        )
+        children: /* @__PURE__ */ r(f, { width: 122, height: 100, src: $.ROCKET_BROKEN, withLoader: !1 })
       }
     ),
-    /* @__PURE__ */ i(
-      m,
-      {
-        $renderAs: e[t].title,
-        $marginBottomX: 0.5,
-        $color: o,
-        $align: "center",
-        children: s ?? "Oops! Looks like something went wrong"
-      }
-    ),
-    /* @__PURE__ */ i(m, { $renderAs: "body2", $align: "center", $marginBottomX: 1.5, $color: o, children: g ?? /* @__PURE__ */ n(X, { children: [
+    /* @__PURE__ */ r(i, { $renderAs: "h4", $marginBottomX: 0.5, $color: e, $align: "center", children: m ?? "Oops! Looks like something went wrong" }),
+    /* @__PURE__ */ r(i, { $renderAs: "body2", $align: "center", $marginBottomX: 1.5, $color: e, children: c ?? /* @__PURE__ */ o(h, { children: [
       "Please try again. Alternatively if that does not work,",
-      /* @__PURE__ */ i("br", {}),
+      /* @__PURE__ */ r("br", {}),
       " please contact support."
     ] }) }),
-    /* @__PURE__ */ i(
-      f,
+    /* @__PURE__ */ r(
+      p,
       {
         label: "Try again",
-        onClick: c,
+        onClick: d,
         renderAs: "primary",
         size: "small",
         widthX: 14
       }
     )
   ] });
-}, k = w;
+}, b = w;
 export {
-  k as default
+  b as default
 };
 //# sourceMappingURL=error.js.map

package/dist/features/ui/error/error.js.map

@@ -1 +1 @@
-{"version":3,"file":"error.js","sources":["../../../../src/features/ui/error/error.tsx"],"sourcesContent":["import type { TTextVariants } from '../types';\n\nimport React, { useCallback } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport Button from '../buttons/button/button';\nimport Image from '../image/image';\nimport FlexView from '../layout/flex-view';\nimport Text from '../text/text';\n\ninterface IErrorProps {\n  onTryAgain?: () => void;\n  height?: string | number;\n  theme?: 'light' | 'dark';\n  title?: string;\n  description?: string;\n  size?: 'compact' | 'full';\n}\n\ninterface IErrorConfig {\n  widthX: number;\n  heightX: number;\n  borderRadiusX: number;\n  marginBottomX: number;\n  title: TTextVariants;\n  description: TTextVariants;\n  imageWidth: number;\n  imageHeight: number;\n}\n\nconst ERROR_CONFIG: Record<'compact' | 'full', IErrorConfig> = {\n  compact: {\n    widthX: 10,\n    heightX: 5,\n    borderRadiusX: 1,\n    marginBottomX: 1,\n    title: 'h6',\n    description: 'body3',\n    imageWidth: 54,\n    imageHeight: 44,\n  },\n  full: {\n    widthX: 22.5,\n    heightX: 11.5,\n    borderRadiusX: 1,\n    marginBottomX: 1.5,\n    title: 'h4',\n    description: 'body2',\n    imageWidth: 122,\n    imageHeight: 100,\n  },\n};\n\nconst Error: React.FC<IErrorProps> = props => {\n  const { height, onTryAgain, theme = 'light', title, description, size = 'full' } = props;\n\n  const handleTryAgain = useCallback(() => {\n    if (onTryAgain) {\n      onTryAgain();\n    } else {\n      window.location.reload();\n    }\n  }, [onTryAgain]);\n\n  const textColor = theme === 'dark' ? 'WHITE_T_87' : 'BLACK_T_87';\n\n  return (\n    <FlexView $alignItems=\"center\" $justifyContent=\"center\" $height={height}>\n      <FlexView\n        $widthX={ERROR_CONFIG[size].widthX}\n        $heightX={ERROR_CONFIG[size].heightX}\n        $borderRadiusX={ERROR_CONFIG[size].borderRadiusX}\n        $marginBottomX={ERROR_CONFIG[size].marginBottomX}\n        $background=\"GREY_1\"\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n      >\n        <Image\n          width={ERROR_CONFIG[size].imageWidth}\n          height={ERROR_CONFIG[size].imageHeight}\n          src={ILLUSTRATIONS.ROCKET_BROKEN}\n          withLoader={false}\n        />\n      </FlexView>\n      <Text\n        $renderAs={ERROR_CONFIG[size].title}\n        $marginBottomX={0.5}\n        $color={textColor}\n        $align=\"center\"\n      >\n        {title ?? 'Oops! Looks like something went wrong'}\n      </Text>\n      <Text $renderAs=\"body2\" $align=\"center\" $marginBottomX={1.5} $color={textColor}>\n        {description ?? (\n          <>\n            Please try again. Alternatively if that does not work,\n            <br /> please contact support.\n          </>\n        )}\n      </Text>\n      <Button\n        label=\"Try again\"\n        onClick={handleTryAgain}\n        renderAs=\"primary\"\n        size=\"small\"\n        widthX={14}\n      />\n    </FlexView>\n  );\n};\n\nexport default Error;\n"],"names":["ERROR_CONFIG","Error","props","height","onTryAgain","theme","title","description","size","handleTryAgain","useCallback","textColor","FlexView","jsx","Image","ILLUSTRATIONS","Text","jsxs","Fragment","Button","Error$1"],"mappings":";;;;;;;AA8BA,MAAMA,IAAyD;AAAA,EAC7D,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,eAAe;AAAA,IACf,OAAO;AAAA,IACP,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,eAAe;AAAA,IACf,OAAO;AAAA,IACP,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AACF,GAEMC,IAA+B,CAASC,MAAA;AACtC,QAAA,EAAE,QAAAC,GAAQ,YAAAC,GAAY,OAAAC,IAAQ,SAAS,OAAAC,GAAO,aAAAC,GAAa,MAAAC,IAAO,OAAW,IAAAN,GAE7EO,IAAiBC,EAAY,MAAM;AACvC,IAAIN,IACSA,MAEX,OAAO,SAAS;EAClB,GACC,CAACA,CAAU,CAAC,GAETO,IAAYN,MAAU,SAAS,eAAe;AAEpD,2BACGO,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAAS,SAAST,GAC/D,UAAA;AAAA,IAAA,gBAAAU;AAAA,MAACD;AAAA,MAAA;AAAA,QACC,SAASZ,EAAaQ,CAAI,EAAE;AAAA,QAC5B,UAAUR,EAAaQ,CAAI,EAAE;AAAA,QAC7B,gBAAgBR,EAAaQ,CAAI,EAAE;AAAA,QACnC,gBAAgBR,EAAaQ,CAAI,EAAE;AAAA,QACnC,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,aAAY;AAAA,QAEZ,UAAA,gBAAAK;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAOd,EAAaQ,CAAI,EAAE;AAAA,YAC1B,QAAQR,EAAaQ,CAAI,EAAE;AAAA,YAC3B,KAAKO,EAAc;AAAA,YACnB,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,WAAWhB,EAAaQ,CAAI,EAAE;AAAA,QAC9B,gBAAgB;AAAA,QAChB,QAAQG;AAAA,QACR,QAAO;AAAA,QAEN,UAASL,KAAA;AAAA,MAAA;AAAA,IACZ;AAAA,IACA,gBAAAO,EAACG,GAAK,EAAA,WAAU,SAAQ,QAAO,UAAS,gBAAgB,KAAK,QAAQL,GAClE,UAAAJ,KACG,gBAAAU,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAA;AAAA,wBAEC,MAAG,EAAA;AAAA,MAAE;AAAA,IAAA,EAAA,CACR,EAEJ,CAAA;AAAA,IACA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAASV;AAAA,QACT,UAAS;AAAA,QACT,MAAK;AAAA,QACL,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF,EAAA,CAAA;AAEJ,GAEAW,IAAenB;"}
+{"version":3,"file":"error.js","sources":["../../../../src/features/ui/error/error.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport Button from '../buttons/button/button';\nimport Image from '../image/image';\nimport FlexView from '../layout/flex-view';\nimport Text from '../text/text';\n\ninterface IErrorProps {\n  onTryAgain?: () => void;\n  height?: string | number;\n  theme?: 'light' | 'dark';\n  title?: string;\n  description?: string;\n}\n\nconst Error: React.FC<IErrorProps> = props => {\n  const { height, onTryAgain, theme = 'light', title, description } = props;\n  const handleTryAgain = useCallback(() => {\n    if (onTryAgain) {\n      onTryAgain();\n    } else {\n      window.location.reload();\n    }\n  }, [onTryAgain]);\n\n  const textColor = theme === 'dark' ? 'WHITE_T_87' : 'BLACK_T_87';\n\n  return (\n    <FlexView $alignItems=\"center\" $justifyContent=\"center\" $height={height}>\n      <FlexView\n        $widthX={22.5}\n        $heightX={11.5}\n        $borderRadiusX={1}\n        $marginBottomX={1.5}\n        $background=\"GREY_1\"\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n      >\n        <Image width={122} height={100} src={ILLUSTRATIONS.ROCKET_BROKEN} withLoader={false} />\n      </FlexView>\n      <Text $renderAs=\"h4\" $marginBottomX={0.5} $color={textColor} $align=\"center\">\n        {title ?? 'Oops! Looks like something went wrong'}\n      </Text>\n      <Text $renderAs=\"body2\" $align=\"center\" $marginBottomX={1.5} $color={textColor}>\n        {description ?? (\n          <>\n            Please try again. Alternatively if that does not work,\n            <br /> please contact support.\n          </>\n        )}\n      </Text>\n      <Button\n        label=\"Try again\"\n        onClick={handleTryAgain}\n        renderAs=\"primary\"\n        size=\"small\"\n        widthX={14}\n      />\n    </FlexView>\n  );\n};\n\nexport default Error;\n"],"names":["Error","props","height","onTryAgain","theme","title","description","handleTryAgain","useCallback","textColor","FlexView","jsx","Image","ILLUSTRATIONS","Text","jsxs","Fragment","Button","Error$1"],"mappings":";;;;;;;AAgBA,MAAMA,IAA+B,CAASC,MAAA;AAC5C,QAAM,EAAE,QAAAC,GAAQ,YAAAC,GAAY,OAAAC,IAAQ,SAAS,OAAAC,GAAO,aAAAC,EAAgB,IAAAL,GAC9DM,IAAiBC,EAAY,MAAM;AACvC,IAAIL,IACSA,MAEX,OAAO,SAAS;EAClB,GACC,CAACA,CAAU,CAAC,GAETM,IAAYL,MAAU,SAAS,eAAe;AAEpD,2BACGM,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAAS,SAASR,GAC/D,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAACD;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,aAAY;AAAA,QAEZ,UAAA,gBAAAC,EAACC,GAAM,EAAA,OAAO,KAAK,QAAQ,KAAK,KAAKC,EAAc,eAAe,YAAY,GAAO,CAAA;AAAA,MAAA;AAAA,IACvF;AAAA,IACA,gBAAAF,EAACG,GAAK,EAAA,WAAU,MAAK,gBAAgB,KAAK,QAAQL,GAAW,QAAO,UACjE,UAAAJ,KAAS,wCACZ,CAAA;AAAA,IACA,gBAAAM,EAACG,GAAK,EAAA,WAAU,SAAQ,QAAO,UAAS,gBAAgB,KAAK,QAAQL,GAClE,UAAAH,KACG,gBAAAS,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAA;AAAA,wBAEC,MAAG,EAAA;AAAA,MAAE;AAAA,IAAA,EAAA,CACR,EAEJ,CAAA;AAAA,IACA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAASV;AAAA,QACT,UAAS;AAAA,QACT,MAAK;AAAA,QACL,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF,EAAA,CAAA;AAEJ,GAEAW,IAAelB;"}

package/dist/features/ui/lottie-animation/lottie-animation.js

@@ -1,32 +1,32 @@
-import { jsx as E } from "react/jsx-runtime";
-import g from "lottie-web";
-import { memo as w, forwardRef as A, useRef as u, useImperativeHandle as b, useEffect as I } from "react";
-import $ from "../layout/flex-view.js";
-import { fetchLottie as x } from "./helper.js";
-const O = A((v, L) => {
+import { jsx as y } from "react/jsx-runtime";
+import E from "lottie-web";
+import { memo as A, forwardRef as w, useRef as u, useImperativeHandle as b, useEffect as I } from "react";
+import S from "../layout/flex-view.js";
+import { fetchLottie as $ } from "./helper.js";
+const x = w((v, L) => {
   const {
     src: m,
     width: h = "100%",
-    height: y = "100%",
+    height: g = "100%",
     settings: l,
-    eventListener: n,
-    onRender: o,
+    eventListener: o,
+    onRender: i,
     animateOnIntersect: c
   } = v, a = u(null), r = u(null), s = u(null);
   return b(
     L,
     () => ({
-      playSegments: (t, i) => {
+      playSegments: (t, n) => {
         var e;
-        return (e = r.current) == null ? void 0 : e.playSegments(t, i);
+        return (e = r.current) == null ? void 0 : e.playSegments(t, n);
       },
-      addEventListener: (t, i) => {
+      addEventListener: (t, n) => {
         var e;
-        return (e = r.current) == null ? void 0 : e.addEventListener(t, i);
+        return (e = r.current) == null ? void 0 : e.addEventListener(t, n);
       },
-      removeEventListener: (t, i) => {
+      removeEventListener: (t, n) => {
         var e;
-        return (e = r.current) == null ? void 0 : e.removeEventListener(t, i);
+        return (e = r.current) == null ? void 0 : e.removeEventListener(t, n);
       },
       play: () => {
         var t;
@@ -35,6 +35,10 @@ const O = A((v, L) => {
       stop: () => {
         var t;
         return (t = r.current) == null ? void 0 : t.stop();
+      },
+      goToAndStop: (t, n) => {
+        var e;
+        return (e = r.current) == null ? void 0 : e.goToAndStop(t, n);
       }
     }),
     []
@@ -42,32 +46,32 @@ const O = A((v, L) => {
     let t = !1;
     return (async () => {
       try {
-        const e = await x(m);
+        const e = await $(m);
         requestAnimationFrame(() => {
-          !a.current || t || (r.current = g.loadAnimation({
+          !a.current || t || (r.current = E.loadAnimation({
             container: a.current,
             animationData: e,
             loop: !0,
             autoplay: !0,
             ...l
           }), c && (s.current = new IntersectionObserver(
-            ([f]) => {
-              var d, p;
-              f && f.isIntersecting ? (d = r.current) == null || d.play() : (p = r.current) == null || p.pause();
+            ([d]) => {
+              var f, p;
+              d && d.isIntersecting ? (f = r.current) == null || f.play() : (p = r.current) == null || p.pause();
             },
             { threshold: 0 }
-          ), s.current.observe(a.current)), o == null || o(), n && r.current.addEventListener(n.name, n.callback));
+          ), s.current.observe(a.current)), i == null || i(), o && r.current.addEventListener(o.name, o.callback));
         });
       } catch (e) {
         throw Error(`Error loading Lottie animation: ${e}`);
       }
     })(), () => {
       var e;
-      t = !0, r.current && (n && r.current.removeEventListener(n.name, n.callback), c && ((e = s.current) == null || e.disconnect()), r.current.destroy());
+      t = !0, r.current && (o && r.current.removeEventListener(o.name, o.callback), c && ((e = s.current) == null || e.disconnect()), r.current.destroy());
     };
-  }, [m, n, o, c, l]), /* @__PURE__ */ E($, { ref: a, $width: h, $height: y });
-}), D = w(O);
+  }, [m, o, i, c, l]), /* @__PURE__ */ y(S, { ref: a, $width: h, $height: g });
+}), q = A(x);
 export {
-  D as default
+  q as default
 };
 //# sourceMappingURL=lottie-animation.js.map