@cuemath/leap 3.2.18-mb → 3.2.19-beta-0.1

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

@@ -0,0 +1,6 @@
+const T = 8, R = 100;
+export {
+  T as DEFAULT_ARROW_SIZE,
+  R as THROTTLE_DURATION
+};
+//# sourceMappingURL=arrow-tooltip-constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-tooltip-constants.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip-constants.ts"],"sourcesContent":["export const DEFAULT_ARROW_SIZE = 8;\nexport const THROTTLE_DURATION = 100;\n"],"names":["DEFAULT_ARROW_SIZE","THROTTLE_DURATION"],"mappings":"AAAO,MAAMA,IAAqB,GACrBC,IAAoB;"}

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

@@ -1,63 +1,15 @@
-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)};
-  `;
-});
+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};
+`;
 export {
-  P as TooltipBody
+  i as BackgroundOverlay
 };
 //# 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 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;"}
+{"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;"}

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

@@ -1,105 +1,100 @@
-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 { 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 { computeTooltipNewCoOrdinates as J } from "./arrow-tooltip-util.js";
-const K = 8, Q = 100, V = ({
-  isAnimated: O,
+import K from "./comps/tooltip-body.js";
+const Q = ({
+  isAnimated: C,
   alwaysVisible: o = !1,
-  arrowColor: T,
-  arrowSize: E = K,
-  arrowXCoOrdinates: g,
-  arrowYCoOrdinates: h,
+  arrowColor: O,
+  arrowSize: w = q,
+  arrowXCoOrdinates: E,
+  arrowYCoOrdinates: T,
   backgroundColor: v,
   borderColor: R,
-  children: x,
+  children: h,
   hidden: t,
   position: l,
-  renderAs: s,
+  renderAs: A,
   textVariant: L,
-  tooltipItem: c,
-  tooltipOffset: A,
-  tooltipXCoOrdinates: b,
-  tooltipYCoOrdinates: N,
-  width: k,
-  widthX: z,
-  zIndex: F,
-  parentWidth: M
+  tooltipItem: g,
+  tooltipOffset: x,
+  tooltipXCoOrdinates: z,
+  tooltipYCoOrdinates: I,
+  width: b,
+  widthX: k,
+  zIndex: B,
+  parentWidth: F,
+  isBlocking: M = !1
 }) => {
-  const { arrowTooltip: S } = P(), { tooltipVariants: a } = S, { backgroundColorName: X } = a[s], d = H(null), [_, f] = m(o), [j, B] = m(
+  const u = H(null), [N, d] = f(o), [S, X] = f(
     null
-  ), u = $(
+  ), s = p(
     (n, i) => {
-      B(n), f(i);
+      X(n), d(i);
     },
     []
-  ), D = $(() => {
+  ), _ = p(() => {
     if (t || o)
       return null;
-    u(null, !1);
-  }, [o, u, t]), r = Y(() => {
-    var p;
-    const { current: n } = d;
+    s(null, !1);
+  }, [o, s, t]), r = W(() => {
+    var a;
+    const { current: n } = u;
     if (t || !n) return null;
-    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(() => {
+    const i = (a = n.children[0]) == null ? void 0 : a.getBoundingClientRect(), j = i ? J(l, i) : null;
+    return s(j, !0), null;
+  }, Z);
+  m(() => {
     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]), C(() => {
-    t && f(!1), o && r();
-  }, [o, t]), /* @__PURE__ */ U(W, { children: [
+  }, [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: [
     /* @__PURE__ */ e(
-      w,
+      $,
       {
-        $width: M || "fit-content",
-        ref: d,
+        $width: F || "fit-content",
+        ref: u,
         onMouseEnter: r,
-        onMouseLeave: D,
-        children: /* @__PURE__ */ e(w, { children: x })
+        onMouseLeave: _,
+        children: /* @__PURE__ */ e($, { children: h })
       }
     ),
-    _ && /* @__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
-      }
-    ) })
+    N && /* @__PURE__ */ e(P, { portalId: "tooltip-root", children: M ? /* @__PURE__ */ e(G, { children: c }) : c })
   ] });
-}, co = V;
+}, so = Y(Q);
 export {
-  co as default
+  so 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 } 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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"}
+{"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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"}

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

@@ -0,0 +1,63 @@
+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 {
+  P as TooltipBody
+};
+//# sourceMappingURL=tooltip-body-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-body-styled.js","sources":["../../../../../src/features/ui/arrow-tooltip/comps/tooltip-body-styled.ts"],"sourcesContent":["import type { ITooltipBodyProps } from './tooltip-body-types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../layout/flex-view';\nimport { animateToolTip, arrowPosition, tooltipPosition } from '../arrow-tooltip-util';\n\nexport const 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"],"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":";;;AAOO,MAAMA,IAAcC,EAAOC,CAAQ,EAAqB,CAAC;AAAA,EAC9D,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/comps/tooltip-body.js

@@ -0,0 +1,21 @@
+import { jsx as t } from "react/jsx-runtime";
+import { memo as i } from "react";
+import { useTheme as n } from "styled-components";
+import l from "../../text/text.js";
+import { TooltipBody as m } from "./tooltip-body-styled.js";
+const d = (o) => {
+  const { arrowTooltip: r } = n(), { tooltipVariants: e } = r;
+  return /* @__PURE__ */ t(m, { ...o, children: typeof o.children == "string" ? /* @__PURE__ */ t(
+    l,
+    {
+      $renderAs: o.textVariant || "body3",
+      $color: e[o.$renderAs].textColorName,
+      $align: "center",
+      children: o.children
+    }
+  ) : o.children });
+}, h = i(d);
+export {
+  h as default
+};
+//# sourceMappingURL=tooltip-body.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-body.js","sources":["../../../../../src/features/ui/arrow-tooltip/comps/tooltip-body.tsx"],"sourcesContent":["import type { ITooltipBodyProps } from './tooltip-body-types';\n\nimport React, { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Text from '../../text/text';\nimport * as Styled from './tooltip-body-styled';\n\nconst TooltipBody: React.FC<ITooltipBodyProps> = props => {\n  const { arrowTooltip } = useTheme();\n  const { tooltipVariants } = arrowTooltip;\n\n  return (\n    <Styled.TooltipBody {...props}>\n      {typeof props.children === 'string' ? (\n        <Text\n          $renderAs={props.textVariant || 'body3'}\n          $color={tooltipVariants[props.$renderAs].textColorName}\n          $align=\"center\"\n        >\n          {props.children}\n        </Text>\n      ) : (\n        props.children\n      )}\n    </Styled.TooltipBody>\n  );\n};\n\nexport default memo(TooltipBody);\n"],"names":["TooltipBody","props","arrowTooltip","useTheme","tooltipVariants","jsx","Styled.TooltipBody","Text","TooltipBody$1","memo"],"mappings":";;;;;AAQA,MAAMA,IAA2C,CAASC,MAAA;AAClD,QAAA,EAAE,cAAAC,MAAiBC,KACnB,EAAE,iBAAAC,EAAoB,IAAAF;AAG1B,SAAA,gBAAAG,EAACC,GAAA,EAAoB,GAAGL,GACrB,UAAA,OAAOA,EAAM,YAAa,WACzB,gBAAAI;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,WAAWN,EAAM,eAAe;AAAA,MAChC,QAAQG,EAAgBH,EAAM,SAAS,EAAE;AAAA,MACzC,QAAO;AAAA,MAEN,UAAMA,EAAA;AAAA,IAAA;AAAA,EAAA,IAGTA,EAAM,SAEV,CAAA;AAEJ,GAEeO,IAAAC,EAAKT,CAAW;"}

package/dist/features/ui/buttons/button/button.js

@@ -1,55 +1,58 @@
-import { jsx as t, jsxs as B, Fragment as R } from "react/jsx-runtime";
-import { useCallback as g } from "react";
-import { useTheme as j } from "styled-components";
-import { ILLUSTRATIONS as I } from "../../../../assets/illustrations/illustrations.js";
-import O from "../../hooks/use-click-handler.js";
-import { Button as S, Loader as T, Icon as b, Label as v } from "./button-styled.js";
-const w = ({
-  label: r,
+import { jsx as t, jsxs as S, Fragment as T } from "react/jsx-runtime";
+import { useMemo as g, useCallback as j } from "react";
+import { useTheme as w } from "styled-components";
+import { ILLUSTRATIONS as D } from "../../../../assets/illustrations/illustrations.js";
+import F from "../../hooks/use-click-handler.js";
+import { EDeviceType as u } from "../../theme/constants.js";
+import { Button as H, Loader as M, Icon as N, Label as O } from "./button-styled.js";
+const P = ({
+  label: s,
   renderAs: o,
-  size: n = "regular",
-  shape: s = "curved",
-  disabled: a = !1,
+  size: r = "regular",
+  shape: m = "curved",
+  disabled: f = !1,
   busy: e = !1,
-  width: c,
-  widthX: d,
-  Icon: i,
-  iconPosition: u = "left",
-  onClick: m,
-  alignSelf: $,
-  justifyContent: f = "center",
-  analyticsLabel: h,
-  analyticsProps: p,
-  children: C,
-  ...L
+  width: $,
+  widthX: h,
+  Icon: a,
+  iconPosition: p = "left",
+  onClick: L,
+  alignSelf: B,
+  justifyContent: C = "center",
+  analyticsLabel: k,
+  analyticsProps: A,
+  children: v,
+  sizeOnMobile: d,
+  sizeOnTablet: i,
+  ...x
 }) => {
-  const { button: k } = j(), { textVariant: x } = k.sizes[n], { handleClick: l } = O({ label: r, analyticsLabel: h, analyticsProps: p }, m), A = g(() => {
+  const { button: E, device: c } = w(), n = g(() => c <= u.MOBILE ? d || i || r : c <= u.TABLET && i || r, [c, r, d, i]), { textVariant: I } = E.sizes[n], { handleClick: l } = F({ label: s, analyticsLabel: k, analyticsProps: A }, L), R = j(() => {
     if (e) return null;
     l();
   }, [e, l]);
   return /* @__PURE__ */ t(
-    S,
+    H,
     {
-      disabled: a,
-      $alignSelf: $,
-      $justifyContent: f,
-      $width: c,
-      $widthX: d,
+      disabled: f,
+      $alignSelf: B,
+      $justifyContent: C,
+      $width: $,
+      $widthX: h,
       $renderAs: o,
       $size: n,
-      $shape: s,
-      onClick: A,
+      $shape: m,
+      onClick: R,
       "data-busy": e,
-      ...L,
-      children: e ? /* @__PURE__ */ t(T, { src: I.LOADER, alt: "Loader", $size: n }) : /* @__PURE__ */ B(R, { children: [
-        i ? /* @__PURE__ */ t(b, { $buttonRenderAs: o, $iconPosition: u, $size: n, children: /* @__PURE__ */ t(i, {}) }) : void 0,
-        /* @__PURE__ */ t(v, { $renderAs: x, $buttonRenderAs: o, children: r }),
-        C
+      ...x,
+      children: e ? /* @__PURE__ */ t(M, { src: D.LOADER, alt: "Loader", $size: n }) : /* @__PURE__ */ S(T, { children: [
+        a ? /* @__PURE__ */ t(N, { $buttonRenderAs: o, $iconPosition: p, $size: n, children: /* @__PURE__ */ t(a, {}) }) : void 0,
+        /* @__PURE__ */ t(O, { $renderAs: I, $buttonRenderAs: o, children: s }),
+        v
       ] })
     }
   );
-}, P = w;
+}, K = P;
 export {
-  P as default
+  K as default
 };
 //# sourceMappingURL=button.js.map

package/dist/features/ui/buttons/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../../src/features/ui/buttons/button/button.tsx"],"sourcesContent":["import type { IButtonProps } from './button-types';\n\nimport React, { useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useClickHandler from '../../hooks/use-click-handler';\nimport * as Styled from './button-styled';\n\nconst Button: React.FC<IButtonProps> = ({\n  label,\n  renderAs,\n  size = 'regular',\n  shape = 'curved',\n  disabled = false,\n  busy = false,\n  width,\n  widthX,\n  Icon,\n  iconPosition = 'left',\n  onClick,\n  alignSelf,\n  justifyContent = 'center',\n  analyticsLabel,\n  analyticsProps,\n  children,\n  ...rest\n}) => {\n  const { button } = useTheme();\n  const { textVariant } = button.sizes[size];\n  const { handleClick } = useClickHandler({ label, analyticsLabel, analyticsProps }, onClick);\n\n  const handleOnClick = useCallback(() => {\n    if (busy) return null;\n\n    handleClick();\n  }, [busy, handleClick]);\n\n  return (\n    <Styled.Button\n      disabled={disabled}\n      $alignSelf={alignSelf}\n      $justifyContent={justifyContent}\n      $width={width}\n      $widthX={widthX}\n      $renderAs={renderAs}\n      $size={size}\n      $shape={shape}\n      onClick={handleOnClick}\n      data-busy={busy}\n      {...rest}\n    >\n      {busy ? (\n        <Styled.Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size={size} />\n      ) : (\n        <>\n          {Icon ? (\n            <Styled.Icon $buttonRenderAs={renderAs} $iconPosition={iconPosition} $size={size}>\n              <Icon />\n            </Styled.Icon>\n          ) : undefined}\n\n          <Styled.Label $renderAs={textVariant} $buttonRenderAs={renderAs}>\n            {label}\n          </Styled.Label>\n\n          {children}\n        </>\n      )}\n    </Styled.Button>\n  );\n};\n\nexport default Button;\n"],"names":["Button","label","renderAs","size","shape","disabled","busy","width","widthX","Icon","iconPosition","onClick","alignSelf","justifyContent","analyticsLabel","analyticsProps","children","rest","button","useTheme","textVariant","handleClick","useClickHandler","handleOnClick","useCallback","jsx","Styled.Button","Styled.Loader","ILLUSTRATIONS","jsxs","Fragment","Styled.Icon","Styled.Label","Button$1"],"mappings":";;;;;;AASA,MAAMA,IAAiC,CAAC;AAAA,EACtC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,QAAAC;AAAA,EAAA,MACAC;AAAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAA,EAAE,QAAAC,MAAWC,KACb,EAAE,aAAAC,EAAgB,IAAAF,EAAO,MAAMf,CAAI,GACnC,EAAE,aAAAkB,EAAgB,IAAAC,EAAgB,EAAE,OAAArB,GAAO,gBAAAa,GAAgB,gBAAAC,KAAkBJ,CAAO,GAEpFY,IAAgBC,EAAY,MAAM;AACtC,QAAIlB,EAAa,QAAA;AAEL,IAAAe;EAAA,GACX,CAACf,GAAMe,CAAW,CAAC;AAGpB,SAAA,gBAAAI;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAArB;AAAA,MACA,YAAYO;AAAA,MACZ,iBAAiBC;AAAA,MACjB,QAAQN;AAAA,MACR,SAASC;AAAA,MACT,WAAWN;AAAA,MACX,OAAOC;AAAA,MACP,QAAQC;AAAA,MACR,SAASmB;AAAA,MACT,aAAWjB;AAAA,MACV,GAAGW;AAAA,MAEH,UACCX,IAAA,gBAAAmB,EAACE,GAAA,EAAc,KAAKC,EAAc,QAAQ,KAAI,UAAS,OAAOzB,EAAM,CAAA,IAGjE,gBAAA0B,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAArB,IACE,gBAAAgB,EAAAM,GAAA,EAAY,iBAAiB7B,GAAU,eAAeQ,GAAc,OAAOP,GAC1E,UAAC,gBAAAsB,EAAAhB,GAAA,CAAA,CAAK,GACR,IACE;AAAA,QAEJ,gBAAAgB,EAACO,GAAA,EAAa,WAAWZ,GAAa,iBAAiBlB,GACpD,UACHD,GAAA;AAAA,QAECe;AAAA,MAAA,GACH;AAAA,IAAA;AAAA,EAAA;AAIR,GAEAiB,IAAejC;"}
+{"version":3,"file":"button.js","sources":["../../../../../src/features/ui/buttons/button/button.tsx"],"sourcesContent":["import type { IButtonProps } from './button-types';\n\nimport React, { useCallback, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useClickHandler from '../../hooks/use-click-handler';\nimport { EDeviceType } from '../../theme/constants';\nimport * as Styled from './button-styled';\n\nconst Button: React.FC<IButtonProps> = ({\n  label,\n  renderAs,\n  size = 'regular',\n  shape = 'curved',\n  disabled = false,\n  busy = false,\n  width,\n  widthX,\n  Icon,\n  iconPosition = 'left',\n  onClick,\n  alignSelf,\n  justifyContent = 'center',\n  analyticsLabel,\n  analyticsProps,\n  children,\n  sizeOnMobile,\n  sizeOnTablet,\n  ...rest\n}) => {\n  const { button, device } = useTheme();\n  const renderSize = useMemo(() => {\n    if (device <= EDeviceType.MOBILE) {\n      return sizeOnMobile || sizeOnTablet || size;\n    }\n\n    if (device <= EDeviceType.TABLET) {\n      return sizeOnTablet || size;\n    }\n\n    return size;\n  }, [device, size, sizeOnMobile, sizeOnTablet]);\n\n  const { textVariant } = button.sizes[renderSize];\n  const { handleClick } = useClickHandler({ label, analyticsLabel, analyticsProps }, onClick);\n\n  const handleOnClick = useCallback(() => {\n    if (busy) return null;\n\n    handleClick();\n  }, [busy, handleClick]);\n\n  return (\n    <Styled.Button\n      disabled={disabled}\n      $alignSelf={alignSelf}\n      $justifyContent={justifyContent}\n      $width={width}\n      $widthX={widthX}\n      $renderAs={renderAs}\n      $size={renderSize}\n      $shape={shape}\n      onClick={handleOnClick}\n      data-busy={busy}\n      {...rest}\n    >\n      {busy ? (\n        <Styled.Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size={renderSize} />\n      ) : (\n        <>\n          {Icon ? (\n            <Styled.Icon $buttonRenderAs={renderAs} $iconPosition={iconPosition} $size={renderSize}>\n              <Icon />\n            </Styled.Icon>\n          ) : undefined}\n\n          <Styled.Label $renderAs={textVariant} $buttonRenderAs={renderAs}>\n            {label}\n          </Styled.Label>\n\n          {children}\n        </>\n      )}\n    </Styled.Button>\n  );\n};\n\nexport default Button;\n"],"names":["Button","label","renderAs","size","shape","disabled","busy","width","widthX","Icon","iconPosition","onClick","alignSelf","justifyContent","analyticsLabel","analyticsProps","children","sizeOnMobile","sizeOnTablet","rest","button","device","useTheme","renderSize","useMemo","EDeviceType","textVariant","handleClick","useClickHandler","handleOnClick","useCallback","jsx","Styled.Button","Styled.Loader","ILLUSTRATIONS","jsxs","Fragment","Styled.Icon","Styled.Label","Button$1"],"mappings":";;;;;;;AAUA,MAAMA,IAAiC,CAAC;AAAA,EACtC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,QAAAC;AAAA,EAAA,MACAC;AAAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,QAAAC,GAAQ,QAAAC,EAAO,IAAIC,EAAS,GAC9BC,IAAaC,EAAQ,MACrBH,KAAUI,EAAY,SACjBR,KAAgBC,KAAgBf,IAGrCkB,KAAUI,EAAY,UACjBP,KAAgBf,GAIxB,CAACkB,GAAQlB,GAAMc,GAAcC,CAAY,CAAC,GAEvC,EAAE,aAAAQ,EAAgB,IAAAN,EAAO,MAAMG,CAAU,GACzC,EAAE,aAAAI,EAAgB,IAAAC,EAAgB,EAAE,OAAA3B,GAAO,gBAAAa,GAAgB,gBAAAC,KAAkBJ,CAAO,GAEpFkB,IAAgBC,EAAY,MAAM;AACtC,QAAIxB,EAAa,QAAA;AAEL,IAAAqB;EAAA,GACX,CAACrB,GAAMqB,CAAW,CAAC;AAGpB,SAAA,gBAAAI;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAA3B;AAAA,MACA,YAAYO;AAAA,MACZ,iBAAiBC;AAAA,MACjB,QAAQN;AAAA,MACR,SAASC;AAAA,MACT,WAAWN;AAAA,MACX,OAAOqB;AAAA,MACP,QAAQnB;AAAA,MACR,SAASyB;AAAA,MACT,aAAWvB;AAAA,MACV,GAAGa;AAAA,MAEH,UACCb,IAAA,gBAAAyB,EAACE,GAAA,EAAc,KAAKC,EAAc,QAAQ,KAAI,UAAS,OAAOX,EAAY,CAAA,IAGvE,gBAAAY,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA3B,IACE,gBAAAsB,EAAAM,GAAA,EAAY,iBAAiBnC,GAAU,eAAeQ,GAAc,OAAOa,GAC1E,UAAC,gBAAAQ,EAAAtB,GAAA,CAAA,CAAK,GACR,IACE;AAAA,QAEJ,gBAAAsB,EAACO,GAAA,EAAa,WAAWZ,GAAa,iBAAiBxB,GACpD,UACHD,GAAA;AAAA,QAECe;AAAA,MAAA,GACH;AAAA,IAAA;AAAA,EAAA;AAIR,GAEAuB,IAAevC;"}

package/dist/features/ui/buttons/icon-button/icon-button.js

@@ -1,34 +1,38 @@
-import { jsx as o } from "react/jsx-runtime";
-import { memo as p } from "react";
-import { ILLUSTRATIONS as u } from "../../../../assets/illustrations/illustrations.js";
-import f from "../../hooks/use-click-handler.js";
-import { Loader as I } from "../button/button-styled.js";
-import { IconButtonWrapper as $, IconWrapper as C } from "./icon-button-styled.js";
-const L = p((n) => {
+import { jsx as e } from "react/jsx-runtime";
+import { memo as b, useMemo as z } from "react";
+import { useTheme as B } from "styled-components";
+import { ILLUSTRATIONS as T } from "../../../../assets/illustrations/illustrations.js";
+import $ from "../../hooks/use-click-handler.js";
+import { EDeviceType as c } from "../../theme/constants.js";
+import { Loader as A } from "../button/button-styled.js";
+import { IconButtonWrapper as C, IconWrapper as O } from "./icon-button-styled.js";
+const h = b((m) => {
   const {
-    Icon: e,
-    size: r,
-    onClick: s,
-    renderAs: t,
-    disabled: c,
-    analyticsLabel: i,
-    analyticsProps: l,
-    customBgColor: m,
-    busy: a
-  } = n, { handleClick: d } = f({ analyticsLabel: i, analyticsProps: l }, s);
-  return /* @__PURE__ */ o(
-    $,
+    Icon: l,
+    size: o,
+    sizeOnMobile: n,
+    sizeOnTablet: r,
+    onClick: a,
+    renderAs: i,
+    disabled: u,
+    analyticsLabel: p,
+    analyticsProps: d,
+    customBgColor: f,
+    busy: I
+  } = m, { handleClick: L } = $({ analyticsLabel: p, analyticsProps: d }, a), { device: t } = B(), s = z(() => t <= c.MOBILE ? n || r || o : t <= c.TABLET && r || o, [t, o, n, r]);
+  return /* @__PURE__ */ e(
+    C,
     {
-      disabled: c,
-      $size: r,
-      $buttonRenderAs: t,
-      onClick: d,
-      $customBgColor: m,
-      children: a ? /* @__PURE__ */ o(I, { src: u.LOADER, alt: "Loader", $size: r || "small" }) : /* @__PURE__ */ o(C, { $size: r, $buttonRenderAs: t, children: /* @__PURE__ */ o(e, {}) })
+      disabled: u,
+      $size: o,
+      $buttonRenderAs: i,
+      onClick: L,
+      $customBgColor: f,
+      children: I ? /* @__PURE__ */ e(A, { src: T.LOADER, alt: "Loader", $size: s || "small" }) : /* @__PURE__ */ e(O, { $size: s, $buttonRenderAs: i, children: /* @__PURE__ */ e(l, {}) })
     }
   );
-}), h = L;
+}), x = h;
 export {
-  h as default
+  x as default
 };
 //# sourceMappingURL=icon-button.js.map