@cuemath/leap 3.2.15-link.1 → 3.2.16-pzd-beta-0.1

package/dist/features/trial-session/comps/teacher-intro/teacher-intro-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"teacher-intro-styled.js","sources":["../../../../../src/features/trial-session/comps/teacher-intro/teacher-intro-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst ContentWrapper = styled(FlexView)`\n  margin: auto;\n`;\n\nexport { Container, ContentWrapper };\n"],"names":["Container","styled","ContentWrapper","FlexView"],"mappings":";;AAIA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,GAKnBC,IAAiBD,EAAOE,CAAQ;AAAA;AAAA;"}
+{"version":3,"file":"teacher-intro-styled.js","sources":["../../../../../src/features/trial-session/comps/teacher-intro/teacher-intro-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport Image from '../../../ui/image/image';\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst ContentWrapper = styled(FlexView)`\n  margin: auto;\n`;\n\nconst ProfilePicture = styled(Image)`\n  object-fit: cover;\n`;\n\nconst GridContainer = styled.div(\n  ({ theme }) => `\n  flex: 1;\n  display: grid;\n  border-left: 1px solid ${theme.colors.BLACK_T_87};\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: auto auto auto;\n`,\n);\n\nconst GridItem = styled(FlexView)(\n  ({ theme }) => `\n  border: 0.5px solid ${theme.colors.WHITE_5};\n  &:first-child,\n  &:nth-child(2) {\n    grid-column: span 1;\n  }\n  &:nth-child(3),\n  &:nth-child(4) {\n    grid-column: span 2;\n  }\n  &:first-child {\n    border-left: none;\n    border-top: none;\n  }\n  &:nth-child(2) {\n    border-right: none;\n    border-top: none;\n  }\n  &:nth-child(3) {\n    border-left: none;\n    border-right: none;\n  }\n  &:nth-child(4) {\n    border-left: none;\n    border-right: none;\n    border-bottom: none;\n  }\n`,\n);\n\nexport { Container, ContentWrapper, ProfilePicture, GridContainer, GridItem };\n"],"names":["Container","styled","ContentWrapper","FlexView","ProfilePicture","Image","GridContainer","theme","GridItem"],"mappings":";;;AAKA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,GAKnBC,IAAiBD,EAAOE,CAAQ;AAAA;AAAA,GAIhCC,IAAiBH,EAAOI,CAAK;AAAA;AAAA,GAI7BC,IAAgBL,EAAO;AAAA,EAC3B,CAAC,EAAE,OAAAM,EAAA,MAAY;AAAA;AAAA;AAAA,2BAGUA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAIlD,GAEMC,IAAWP,EAAOE,CAAQ;AAAA,EAC9B,CAAC,EAAE,OAAAI,EAAA,MAAY;AAAA,wBACOA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2B5C;"}

package/dist/features/trial-session/comps/teacher-intro/teacher-intro.js

@@ -1,20 +1,74 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { memo as m } from "react";
-import n from "../../../ui/separator/separator.js";
-import { useTrialSessionContext as f } from "../../context/use-trial-session-context.js";
-import a from "../communication-slide/index.js";
-import p from "../slide-header/index.js";
-import { Container as s, ContentWrapper as c } from "./teacher-intro-styled.js";
-import h from "./teacher-profile/teacher-profile.js";
-const j = m(() => {
-  const { slideConfig: e } = f(), { renderAVIn: o, teacher_profile: t } = e || {};
-  return o === "right" ? /* @__PURE__ */ r(a, {}) : /* @__PURE__ */ i(s, { children: [
-    /* @__PURE__ */ r(n, { height: 60 }),
-    /* @__PURE__ */ r(p, {}),
-    /* @__PURE__ */ r(c, { $width: 750, children: /* @__PURE__ */ r(h, { teacherProfile: t }) })
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { memo as T, useMemo as I } from "react";
+import j from "../../../ui/image/image.js";
+import h from "../../../ui/layout/flex-view.js";
+import s from "../../../ui/separator/separator.js";
+import t from "../../../ui/text/text.js";
+import { useTrialSessionContext as k } from "../../context/use-trial-session-context.js";
+import O from "../communication-slide/index.js";
+import F from "../slide-header/index.js";
+import { COUNTRY_FLAGS as H } from "./teacher-intro-constants.js";
+import { Container as L, ContentWrapper as D, ProfilePicture as E, GridContainer as P, GridItem as i } from "./teacher-intro-styled.js";
+const z = T(() => {
+  const { slideConfig: f } = k(), { renderAVIn: m, teacher_profile: u } = f || {}, {
+    degree: g,
+    countries: o,
+    lower_grade: a,
+    higher_grade: n,
+    header_image: $,
+    years_of_experience: p,
+    number_of_students_taught: b
+  } = u || {}, { degree_name: c, field_of_study: d } = g || {}, _ = Object.values(H), l = n && parseInt(n, 10) > 8, x = I(() => l ? "High School" : ` ${a === "K" ? "" : "G"}${a} - G${n}`, [l, n, a]);
+  return m === "right" ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ r(L, { children: [
+    /* @__PURE__ */ e(s, { height: 60 }),
+    /* @__PURE__ */ e(F, {}),
+    /* @__PURE__ */ r(
+      D,
+      {
+        $flexDirection: "row",
+        $width: 750,
+        $borderColor: "BLACK_T_87",
+        $background: "WHITE_3",
+        children: [
+          /* @__PURE__ */ e(E, { withLoader: !0, src: $, width: 350, height: 350 }),
+          /* @__PURE__ */ r(P, { children: [
+            /* @__PURE__ */ r(i, { $justifyContent: "center", $gutter: 24, children: [
+              /* @__PURE__ */ e(t, { $renderAs: "ah3-black", children: p }),
+              /* @__PURE__ */ e(t, { $renderAs: "ub3", children: "Yrs of Teaching Experience" })
+            ] }),
+            /* @__PURE__ */ r(i, { $justifyContent: "center", $gutter: 24, children: [
+              /* @__PURE__ */ e(t, { $renderAs: "ah3-black", children: b }),
+              /* @__PURE__ */ e(t, { $renderAs: "ub3", children: "Students Taught" })
+            ] }),
+            c && d && /* @__PURE__ */ r(i, { $justifyContent: "center", $gutter: 24, children: [
+              /* @__PURE__ */ e(t, { $renderAs: "ab1-black", children: c }),
+              /* @__PURE__ */ r(t, { $renderAs: "ub3", children: [
+                "In ",
+                d
+              ] })
+            ] }),
+            /* @__PURE__ */ r(i, { $justifyContent: "center", $gutter: 24, children: [
+              /* @__PURE__ */ r(t, { $renderAs: "ab1-black", children: [
+                "Teaching ",
+                x,
+                " kids in"
+              ] }),
+              /* @__PURE__ */ e(s, { height: 12 }),
+              /* @__PURE__ */ e(h, { $flexDirection: "row", $flexGap: 16, $flexWrap: !0, children: o && o.length > 0 && o.map((C) => {
+                const y = _.find((S) => S.name === C), { flag_icon: A = "", label: w, name: G } = y || {};
+                return /* @__PURE__ */ r(h, { $flexDirection: "row", $flexGap: 4, children: [
+                  /* @__PURE__ */ e(j, { src: A, width: 30, height: 20, withLoader: !1 }),
+                  /* @__PURE__ */ e(t, { $renderAs: "ab3-black", children: w })
+                ] }, G);
+              }) })
+            ] })
+          ] })
+        ]
+      }
+    )
   ] });
 });
 export {
-  j as default
+  z as default
 };
 //# sourceMappingURL=teacher-intro.js.map

package/dist/features/trial-session/comps/teacher-intro/teacher-intro.js.map

@@ -1 +1 @@
-{"version":3,"file":"teacher-intro.js","sources":["../../../../../src/features/trial-session/comps/teacher-intro/teacher-intro.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport Separator from '../../../ui/separator/separator';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport CommunicationSlide from '../communication-slide';\nimport SlideHeader from '../slide-header';\nimport * as Styled from './teacher-intro-styled';\nimport TeacherProfile from './teacher-profile/teacher-profile';\n\nconst TeacherIntro = memo(() => {\n  const { slideConfig } = useTrialSessionContext();\n  const { renderAVIn, teacher_profile: teacherProfile } = slideConfig || {};\n\n  if (renderAVIn === 'right') return <CommunicationSlide />;\n\n  return (\n    <Styled.Container>\n      <Separator height={60} />\n      <SlideHeader />\n      <Styled.ContentWrapper $width={750}>\n        <TeacherProfile teacherProfile={teacherProfile} />\n      </Styled.ContentWrapper>\n    </Styled.Container>\n  );\n});\n\nexport default TeacherIntro;\n"],"names":["TeacherIntro","memo","slideConfig","useTrialSessionContext","renderAVIn","teacherProfile","jsx","CommunicationSlide","jsxs","Styled.Container","Separator","SlideHeader","Styled.ContentWrapper","TeacherProfile"],"mappings":";;;;;;;;AASM,MAAAA,IAAeC,EAAK,MAAM;AACxB,QAAA,EAAE,aAAAC,MAAgBC,KAClB,EAAE,YAAAC,GAAY,iBAAiBC,EAAe,IAAIH,KAAe,CAAA;AAEvE,SAAIE,MAAe,UAAgB,gBAAAE,EAACC,GAAmB,CAAA,CAAA,IAGrD,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,sBACtBC,GAAY,EAAA;AAAA,IACb,gBAAAL,EAACM,GAAA,EAAsB,QAAQ,KAC7B,UAAA,gBAAAN,EAACO,GAAe,EAAA,gBAAAR,EAAgC,CAAA,GAClD;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"teacher-intro.js","sources":["../../../../../src/features/trial-session/comps/teacher-intro/teacher-intro.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\n\nimport Image from '../../../ui/image/image';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport CommunicationSlide from '../communication-slide';\nimport SlideHeader from '../slide-header';\nimport { COUNTRY_FLAGS } from './teacher-intro-constants';\nimport * as Styled from './teacher-intro-styled';\n\nconst TeacherIntro = memo(() => {\n  const { slideConfig } = useTrialSessionContext();\n  const { renderAVIn, teacher_profile: teacherProfile } = slideConfig || {};\n\n  const {\n    degree,\n    countries,\n    lower_grade: lowerGrade,\n    higher_grade: higherGrade,\n    header_image: headerImage,\n    years_of_experience: yearsOfExperience,\n    number_of_students_taught: numberOfStudentsTaught,\n  } = teacherProfile || {};\n  const { degree_name: degreeName, field_of_study: fieldOfStudy } = degree || {};\n\n  const countryFlagArray = Object.values(COUNTRY_FLAGS);\n  const isHighSchool = higherGrade && parseInt(higherGrade, 10) > 8;\n\n  const displayGrade = useMemo(() => {\n    return isHighSchool\n      ? 'High School'\n      : ` ${lowerGrade === 'K' ? '' : 'G'}${lowerGrade} - G${higherGrade}`;\n  }, [isHighSchool, higherGrade, lowerGrade]);\n\n  if (renderAVIn === 'right') return <CommunicationSlide />;\n\n  return (\n    <Styled.Container>\n      <Separator height={60} />\n      <SlideHeader />\n      <Styled.ContentWrapper\n        $flexDirection=\"row\"\n        $width={750}\n        $borderColor=\"BLACK_T_87\"\n        $background=\"WHITE_3\"\n      >\n        <Styled.ProfilePicture withLoader src={headerImage} width={350} height={350} />\n        <Styled.GridContainer>\n          <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n            <Text $renderAs=\"ah3-black\">{yearsOfExperience}</Text>\n            <Text $renderAs=\"ub3\">Yrs of Teaching Experience</Text>\n          </Styled.GridItem>\n          <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n            <Text $renderAs=\"ah3-black\">{numberOfStudentsTaught}</Text>\n            <Text $renderAs=\"ub3\">Students Taught</Text>\n          </Styled.GridItem>\n          {degreeName && fieldOfStudy && (\n            <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n              <Text $renderAs=\"ab1-black\">{degreeName}</Text>\n              <Text $renderAs=\"ub3\">In {fieldOfStudy}</Text>\n            </Styled.GridItem>\n          )}\n          <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n            <Text $renderAs=\"ab1-black\">Teaching {displayGrade} kids in</Text>\n            <Separator height={12} />\n            <FlexView $flexDirection=\"row\" $flexGap={16} $flexWrap>\n              {countries &&\n                countries.length > 0 &&\n                countries.map(country => {\n                  const countryFlag = countryFlagArray.find(item => item.name === country);\n                  const { flag_icon: flagIcon = '', label, name } = countryFlag || {};\n\n                  return (\n                    <FlexView key={name} $flexDirection=\"row\" $flexGap={4}>\n                      <Image src={flagIcon} width={30} height={20} withLoader={false} />\n                      <Text $renderAs=\"ab3-black\">{label}</Text>\n                    </FlexView>\n                  );\n                })}\n            </FlexView>\n          </Styled.GridItem>\n        </Styled.GridContainer>\n      </Styled.ContentWrapper>\n    </Styled.Container>\n  );\n});\n\nexport default TeacherIntro;\n"],"names":["TeacherIntro","memo","slideConfig","useTrialSessionContext","renderAVIn","teacherProfile","degree","countries","lowerGrade","higherGrade","headerImage","yearsOfExperience","numberOfStudentsTaught","degreeName","fieldOfStudy","countryFlagArray","COUNTRY_FLAGS","isHighSchool","displayGrade","useMemo","jsx","CommunicationSlide","jsxs","Styled.Container","Separator","SlideHeader","Styled.ContentWrapper","Styled.ProfilePicture","Styled.GridContainer","Styled.GridItem","Text","FlexView","country","countryFlag","item","flagIcon","label","name","Image"],"mappings":"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"}

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/image/image.js

@@ -14,7 +14,7 @@ const p = t(i)`
   overflow: hidden;
   position: relative;
 `, u = g(
-  ({ borderRadius: n = 0, borderColor: r, withLoader: a = !1, ...o }) => {
+  ({ borderRadius: n = 0, borderColor: r, withLoader: a, ...o }) => {
     const { width: s, height: d } = o, [m, l] = f(!0);
     return /* @__PURE__ */ h(
       L,

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

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../../../src/features/ui/image/image.tsx"],"sourcesContent":["import type { IImageProps } from './image-types';\n\nimport { useState, memo } from 'react';\nimport styled from 'styled-components';\n\nimport { skeletonLoadingAnimation } from '../constants/style';\nimport FlexView from '../layout/flex-view';\n\nconst LoadingFlexView = styled(FlexView)`\n  animation: ${skeletonLoadingAnimation} 2s linear infinite;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n`;\n\nconst ImageWrapper = styled(FlexView)`\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Image: React.FC<IImageProps> = memo(\n  ({ borderRadius = 0, borderColor, withLoader = false, ...props }) => {\n    const { width, height } = props;\n    const [isLoading, setIsLoading] = useState(true);\n    const handleImgLoaded = () => {\n      setIsLoading(false);\n    };\n    const showLoader = isLoading && withLoader;\n\n    return (\n      <ImageWrapper\n        $width={width}\n        $height={height}\n        $borderColor={borderColor}\n        $borderRadius={borderRadius}\n      >\n        {showLoader && <LoadingFlexView $inherit={true} />}\n        <img onLoad={handleImgLoaded} {...props} />\n      </ImageWrapper>\n    );\n  },\n);\n\nexport default Image;\n"],"names":["LoadingFlexView","styled","FlexView","skeletonLoadingAnimation","ImageWrapper","Image","memo","borderRadius","borderColor","withLoader","props","width","height","isLoading","setIsLoading","useState","jsxs","jsx","Image$1"],"mappings":";;;;;AAQA,MAAMA,IAAkBC,EAAOC,CAAQ;AAAA,eACxBC,CAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjCC,IAAeH,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAK9BG,IAA+BC;AAAA,EACnC,CAAC,EAAE,cAAAC,IAAe,GAAG,aAAAC,GAAa,YAAAC,IAAa,IAAO,GAAGC,QAAY;AAC7D,UAAA,EAAE,OAAAC,GAAO,QAAAC,EAAW,IAAAF,GACpB,CAACG,GAAWC,CAAY,IAAIC,EAAS,EAAI;AAO7C,WAAA,gBAAAC;AAAA,MAACZ;AAAA,MAAA;AAAA,QACC,QAAQO;AAAA,QACR,SAASC;AAAA,QACT,cAAcJ;AAAA,QACd,eAAeD;AAAA,QAEd,UAAA;AAAA,UATcM,KAAaJ,KASb,gBAAAQ,EAACjB,GAAgB,EAAA,UAAU,GAAM,CAAA;AAAA,UAC/C,gBAAAiB,EAAA,OAAA,EAAI,QAbe,MAAM;AAC5B,YAAAH,EAAa,EAAK;AAAA,UAAA,GAYe,GAAGJ,EAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG/C;AACF,GAEAQ,IAAeb;"}
+{"version":3,"file":"image.js","sources":["../../../../src/features/ui/image/image.tsx"],"sourcesContent":["import type { IImageProps } from './image-types';\n\nimport { useState, memo } from 'react';\nimport styled from 'styled-components';\n\nimport { skeletonLoadingAnimation } from '../constants/style';\nimport FlexView from '../layout/flex-view';\n\nconst LoadingFlexView = styled(FlexView)`\n  animation: ${skeletonLoadingAnimation} 2s linear infinite;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n`;\n\nconst ImageWrapper = styled(FlexView)`\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Image: React.FC<IImageProps> = memo(\n  ({ borderRadius = 0, borderColor, withLoader, ...props }) => {\n    const { width, height } = props;\n    const [isLoading, setIsLoading] = useState(true);\n    const handleImgLoaded = () => {\n      setIsLoading(false);\n    };\n    const showLoader = isLoading && withLoader;\n\n    return (\n      <ImageWrapper\n        $width={width}\n        $height={height}\n        $borderColor={borderColor}\n        $borderRadius={borderRadius}\n      >\n        {showLoader && <LoadingFlexView $inherit={true} />}\n        <img onLoad={handleImgLoaded} {...props} />\n      </ImageWrapper>\n    );\n  },\n);\n\nexport default Image;\n"],"names":["LoadingFlexView","styled","FlexView","skeletonLoadingAnimation","ImageWrapper","Image","memo","borderRadius","borderColor","withLoader","props","width","height","isLoading","setIsLoading","useState","jsxs","jsx","Image$1"],"mappings":";;;;;AAQA,MAAMA,IAAkBC,EAAOC,CAAQ;AAAA,eACxBC,CAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjCC,IAAeH,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAK9BG,IAA+BC;AAAA,EACnC,CAAC,EAAE,cAAAC,IAAe,GAAG,aAAAC,GAAa,YAAAC,GAAY,GAAGC,QAAY;AACrD,UAAA,EAAE,OAAAC,GAAO,QAAAC,EAAW,IAAAF,GACpB,CAACG,GAAWC,CAAY,IAAIC,EAAS,EAAI;AAO7C,WAAA,gBAAAC;AAAA,MAACZ;AAAA,MAAA;AAAA,QACC,QAAQO;AAAA,QACR,SAASC;AAAA,QACT,cAAcJ;AAAA,QACd,eAAeD;AAAA,QAEd,UAAA;AAAA,UATcM,KAAaJ,KASb,gBAAAQ,EAACjB,GAAgB,EAAA,UAAU,GAAM,CAAA;AAAA,UAC/C,gBAAAiB,EAAA,OAAA,EAAI,QAbe,MAAM;AAC5B,YAAAH,EAAa,EAAK;AAAA,UAAA,GAYe,GAAGJ,EAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG/C;AACF,GAEAQ,IAAeb;"}