@selfdecode/sd-component-library 4.0.73-vite12 → 4.0.73-vite13

package/lib/sd-component-library148.js

@@ -1,4 +1,4 @@
-import { jsx as r } from "./sd-component-library196.js";
+import { jsx as r } from "./sd-component-library195.js";
 import { BaseText as t } from "./sd-component-library134.js";
 const n = (e) => /* @__PURE__ */ r(t, { ...e, variant: "_16Regular", "data-test": "16-reg", children: e.children });
 export {

package/lib/sd-component-library149.js

@@ -1,4 +1,4 @@
-import { jsx as e } from "./sd-component-library196.js";
+import { jsx as e } from "./sd-component-library195.js";
 import { BaseText as r } from "./sd-component-library134.js";
 const o = (t) => /* @__PURE__ */ e(r, { ...t, variant: "_16Semibold", "data-test": "16-sb", children: t.children });
 export {

package/lib/sd-component-library15.js

@@ -1,6 +1,6 @@
-import { jsx as x } from "./sd-component-library196.js";
-import "./sd-component-library197.js";
-import { Box as a } from "./sd-component-library198.js";
+import { jsx as x } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
+import { Box as a } from "./sd-component-library199.js";
 const s = ({
   url: r,
   backgroundPosition: e = "center",

package/lib/sd-component-library150.js

@@ -1,4 +1,4 @@
-import { jsx as e } from "./sd-component-library196.js";
+import { jsx as e } from "./sd-component-library195.js";
 import { BaseText as r } from "./sd-component-library134.js";
 const o = (t) => /* @__PURE__ */ e(r, { ...t, variant: "_10SemiBold", "data-test": "10-sb", children: t.children });
 export {

package/lib/sd-component-library151.js

@@ -1,4 +1,4 @@
-import { jsx as r } from "./sd-component-library196.js";
+import { jsx as r } from "./sd-component-library195.js";
 import { BaseText as e } from "./sd-component-library134.js";
 const i = (t) => /* @__PURE__ */ r(e, { ...t, variant: "_13Bold", "data-test": "13-bold", children: t.children });
 export {

package/lib/sd-component-library152.js

@@ -1,4 +1,4 @@
-import { jsx as e } from "./sd-component-library196.js";
+import { jsx as e } from "./sd-component-library195.js";
 import { BaseText as t } from "./sd-component-library134.js";
 const n = (r) => /* @__PURE__ */ e(t, { ...r, variant: "_13Regular", "data-test": "13-regular", children: r.children });
 export {

package/lib/sd-component-library153.js

@@ -1,4 +1,4 @@
-import { jsx as e } from "./sd-component-library196.js";
+import { jsx as e } from "./sd-component-library195.js";
 import { BaseText as r } from "./sd-component-library134.js";
 const o = (t) => /* @__PURE__ */ e(r, { ...t, variant: "_13Semibold", "data-test": "13-sb", children: t.children });
 export {

package/lib/sd-component-library154.js

@@ -1,4 +1,4 @@
-import { jsx as r } from "./sd-component-library196.js";
+import { jsx as r } from "./sd-component-library195.js";
 import { BaseText as o } from "./sd-component-library134.js";
 const i = (t) => /* @__PURE__ */ r(o, { ...t, variant: "_32Bold", "data-test": "32-bold", children: t.children });
 export {

package/lib/sd-component-library155.js

@@ -1,4 +1,4 @@
-import { jsx as t } from "./sd-component-library196.js";
+import { jsx as t } from "./sd-component-library195.js";
 import { BaseText as e } from "./sd-component-library134.js";
 const o = (r) => /* @__PURE__ */ t(e, { ...r, variant: "_32Regular", "data-test": "32-reg", children: r.children });
 export {

package/lib/sd-component-library156.js

@@ -1,4 +1,4 @@
-import { jsx as r } from "./sd-component-library196.js";
+import { jsx as r } from "./sd-component-library195.js";
 import { BaseText as t } from "./sd-component-library134.js";
 const l = (e) => /* @__PURE__ */ r(t, { ...e, variant: "_12Regular", "data-test": "12-reg", children: e.children });
 export {

package/lib/sd-component-library157.js

@@ -1,4 +1,4 @@
-import { jsx as t } from "./sd-component-library196.js";
+import { jsx as t } from "./sd-component-library195.js";
 import { BaseText as r } from "./sd-component-library134.js";
 const a = (e) => /* @__PURE__ */ t(r, { ...e, variant: "_12Semibold", "data-test": "12-sb", children: e.children });
 export {

package/lib/sd-component-library158.js

@@ -1,4 +1,4 @@
-import { jsx as r } from "./sd-component-library196.js";
+import { jsx as r } from "./sd-component-library195.js";
 import { BaseText as o } from "./sd-component-library134.js";
 const n = (t) => /* @__PURE__ */ r(o, { ...t, variant: "_24Bold", "data-test": "24-bold", children: t.children });
 export {

package/lib/sd-component-library159.js

@@ -1,4 +1,4 @@
-import { jsx as e } from "./sd-component-library196.js";
+import { jsx as e } from "./sd-component-library195.js";
 import { BaseText as t } from "./sd-component-library134.js";
 const o = (r) => /* @__PURE__ */ e(t, { ...r, variant: "_24Regular", "data-test": "24-reg", children: r.children });
 export {

package/lib/sd-component-library16.js

@@ -1,4 +1,4 @@
-import { jsx as a } from "./sd-component-library196.js";
+import { jsx as a } from "./sd-component-library195.js";
 import { Breadcrumb as m } from "./sd-component-library18.js";
 const i = (r) => /* @__PURE__ */ a(m, { ...r, variant: "primary", "data-test": "primary-breadcrumb" });
 export {

package/lib/sd-component-library160.js

@@ -1,10 +1,10 @@
-import { jsx as t } from "./sd-component-library196.js";
-import r from "./sd-component-library193.js";
+import { jsx as t } from "./sd-component-library195.js";
+import r from "react";
 import { BaseTextV2 as d } from "./sd-component-library135.js";
-const f = r.forwardRef((o, e) => /* @__PURE__ */ t(d, { ref: e, ...o })), n = r.forwardRef((o, e) => /* @__PURE__ */ t(f, { fontWeight: "bold", ...o, ref: e })), s = r.forwardRef((o, e) => /* @__PURE__ */ t(f, { fontWeight: "semi-bold", ...o, ref: e })), x = r.forwardRef((o, e) => /* @__PURE__ */ t(f, { fontWeight: "regular", ...o, ref: e }));
+const f = r.forwardRef((e, o) => /* @__PURE__ */ t(d, { ref: o, ...e })), l = r.forwardRef((e, o) => /* @__PURE__ */ t(f, { fontWeight: "bold", ...e, ref: o })), n = r.forwardRef((e, o) => /* @__PURE__ */ t(f, { fontWeight: "semi-bold", ...e, ref: o })), s = r.forwardRef((e, o) => /* @__PURE__ */ t(f, { fontWeight: "regular", ...e, ref: o }));
 export {
-  n as BoldText,
-  x as RegularText,
-  s as SemiBoldText
+  l as BoldText,
+  s as RegularText,
+  n as SemiBoldText
 };
 //# sourceMappingURL=sd-component-library160.js.map

package/lib/sd-component-library161.js

@@ -1,7 +1,7 @@
-import { jsx as o } from "./sd-component-library196.js";
-import t from "./sd-component-library193.js";
+import { jsx as t } from "./sd-component-library195.js";
+import o from "react";
 import { ResponsiveTextV2 as f } from "./sd-component-library147.js";
-const a = t.forwardRef((e, r) => /* @__PURE__ */ o(f, { ...e, ref: r })), m = t.forwardRef((e, r) => /* @__PURE__ */ o(a, { textTransform: "uppercase", ...e, ref: r })), x = t.forwardRef((e, r) => /* @__PURE__ */ o(a, { textTransform: "lowercase", ...e, ref: r })), n = t.forwardRef((e, r) => /* @__PURE__ */ o(a, { textTransform: "capitalize", ...e, ref: r }));
+const a = o.forwardRef((e, r) => /* @__PURE__ */ t(f, { ...e, ref: r })), m = o.forwardRef((e, r) => /* @__PURE__ */ t(a, { textTransform: "uppercase", ...e, ref: r })), x = o.forwardRef((e, r) => /* @__PURE__ */ t(a, { textTransform: "lowercase", ...e, ref: r })), n = o.forwardRef((e, r) => /* @__PURE__ */ t(a, { textTransform: "capitalize", ...e, ref: r }));
 export {
   n as CapitalizedText,
   x as LowercaseText,

package/lib/sd-component-library162.js

@@ -1,9 +1,9 @@
-import { jsx as r } from "./sd-component-library196.js";
-import t from "./sd-component-library193.js";
-import { SemiBoldText as a, BoldText as m } from "./sd-component-library160.js";
-const x = t.forwardRef((e, o) => /* @__PURE__ */ r(a, { textTransform: "uppercase", ...e, ref: o })), d = t.forwardRef((e, o) => /* @__PURE__ */ r(m, { textTransform: "capitalize", ...e, ref: o }));
+import { jsx as o } from "./sd-component-library195.js";
+import r from "react";
+import { SemiBoldText as a, BoldText as f } from "./sd-component-library160.js";
+const d = r.forwardRef((e, t) => /* @__PURE__ */ o(a, { textTransform: "uppercase", ...e, ref: t })), x = r.forwardRef((e, t) => /* @__PURE__ */ o(f, { textTransform: "capitalize", ...e, ref: t }));
 export {
-  d as CapitalizedBoldText,
-  x as UppercaseSemiBoldText
+  x as CapitalizedBoldText,
+  d as UppercaseSemiBoldText
 };
 //# sourceMappingURL=sd-component-library162.js.map

package/lib/sd-component-library163.js

@@ -1,14 +1,14 @@
-import { jsx as t } from "./sd-component-library196.js";
-import r from "./sd-component-library193.js";
-import { getResponsiveNumericArray as i, getResponsivePxArray as f } from "./sd-component-library4.js";
-import { RegularText as n, BoldText as s, SemiBoldText as R } from "./sd-component-library160.js";
-const p = r.forwardRef((e, o) => /* @__PURE__ */ t(n, { fontSize: i(16, 18, !1), ...e, ref: o })), x = r.forwardRef((e, o) => /* @__PURE__ */ t(n, { fontSize: i(18, 24, !0, 20), lineHeight: f(21, 27, !0, 23), ...e, ref: o })), u = r.forwardRef((e, o) => /* @__PURE__ */ t(s, { fontSize: i(16, 18, !1), ...e, ref: o })), S = r.forwardRef((e, o) => /* @__PURE__ */ t(s, { fontSize: i(18, 24, !0, 20), lineHeight: f(21, 27, !0, 23), ...e, ref: o })), T = r.forwardRef((e, o) => /* @__PURE__ */ t(s, { fontSize: i(24, 32), ...e, ref: o })), c = r.forwardRef((e, o) => /* @__PURE__ */ t(R, { fontSize: i(24, 32), ...e, ref: o }));
+import { jsx as t } from "./sd-component-library195.js";
+import r from "react";
+import { getResponsiveNumericArray as i, getResponsivePxArray as s } from "./sd-component-library4.js";
+import { RegularText as n, BoldText as f, SemiBoldText as R } from "./sd-component-library160.js";
+const p = r.forwardRef((e, o) => /* @__PURE__ */ t(n, { fontSize: i(16, 18, !1), ...e, ref: o })), u = r.forwardRef((e, o) => /* @__PURE__ */ t(n, { fontSize: i(18, 24, !0, 20), lineHeight: s(21, 27, !0, 23), ...e, ref: o })), x = r.forwardRef((e, o) => /* @__PURE__ */ t(f, { fontSize: i(16, 18, !1), ...e, ref: o })), S = r.forwardRef((e, o) => /* @__PURE__ */ t(f, { fontSize: i(18, 24, !0, 20), lineHeight: s(21, 27, !0, 23), ...e, ref: o })), T = r.forwardRef((e, o) => /* @__PURE__ */ t(f, { fontSize: i(24, 32), ...e, ref: o })), c = r.forwardRef((e, o) => /* @__PURE__ */ t(R, { fontSize: i(24, 32), ...e, ref: o }));
 export {
   S as BoldResponsiveText,
   T as MediumBoldResponsiveText,
-  x as MediumRegularResponsiveText,
+  u as MediumRegularResponsiveText,
   c as MediumSemiBoldResponsiveText,
   p as RegularResponsiveText,
-  u as SmallBoldResponsiveText
+  x as SmallBoldResponsiveText
 };
 //# sourceMappingURL=sd-component-library163.js.map

package/lib/sd-component-library164.js

@@ -1,15 +1,15 @@
-import { jsxs as e, jsx as o } from "./sd-component-library196.js";
-import m from "./sd-component-library193.js";
-import "./sd-component-library197.js";
+import { jsxs as i, jsx as o } from "./sd-component-library195.js";
+import m from "react";
+import "./sd-component-library198.js";
 import { useHover as b } from "./sd-component-library3.js";
-import { Box as n, Flex as l } from "./sd-component-library198.js";
-import { ActionBox as g } from "./sd-component-library240.js";
+import { Box as n, Flex as l } from "./sd-component-library199.js";
+import { ActionBox as g } from "./sd-component-library234.js";
 import { HorizontalDivider as p } from "./sd-component-library51.js";
 import { ReactComponent as u } from "./sd-component-library186.js";
 import { TriangularPointerIcon as f } from "./sd-component-library189.js";
 const A = (s) => {
   const {
-    actions: i,
+    actions: e,
     actionsBoxWidth: x = "max-content",
     actionBoxPx: a,
     actionBoxPy: d
@@ -17,7 +17,7 @@ const A = (s) => {
     isHover: t,
     hoverCallbacks: c
   } = b();
-  return i.length ? /* @__PURE__ */ e(l, { sx: {
+  return e.length ? /* @__PURE__ */ i(l, { sx: {
     width: "fit-content",
     position: "relative",
     borderRadius: [!0, !0, !t, !t].map((r) => r ? "50%" : "0").join(" ")
@@ -38,7 +38,7 @@ const A = (s) => {
         fill: "cl_blue"
       }
     }, children: /* @__PURE__ */ o(u, {}) }),
-    t && /* @__PURE__ */ e(n, { sx: {
+    t && /* @__PURE__ */ i(n, { sx: {
       position: "absolute",
       top: "calc(100% + 12px)",
       right: "-20px",
@@ -65,9 +65,9 @@ const A = (s) => {
         boxShadow: "2px 3px 10px rgba(211,223,255,0.25)",
         borderRadius: "0 0 3px 3px",
         bg: "cl_white"
-      }, children: i.map((r, h) => /* @__PURE__ */ e(m.Fragment, { children: [
+      }, children: e.map((r, h) => /* @__PURE__ */ i(m.Fragment, { children: [
         /* @__PURE__ */ o(g, { ...r, px: a, py: d }),
-        h !== i.length - 1 && /* @__PURE__ */ o(p, { color: "cl_headerLine" })
+        h !== e.length - 1 && /* @__PURE__ */ o(p, { color: "cl_headerLine" })
       ] }, r.text)) })
     ] })
   ] }) : null;

package/lib/sd-component-library165.js

@@ -1,7 +1,7 @@
-import { jsx as o } from "./sd-component-library196.js";
-import "./sd-component-library197.js";
-import { Box as m } from "./sd-component-library198.js";
-import { ReactComponent as c } from "./sd-component-library286.js";
+import { jsx as o } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
+import { Box as m } from "./sd-component-library199.js";
+import { ReactComponent as c } from "./sd-component-library275.js";
 import { BaseTooltip as f } from "./sd-component-library166.js";
 const I = (r) => {
   const {

package/lib/sd-component-library166.js

@@ -1,17 +1,17 @@
-import { jsxs as f, jsx as r } from "./sd-component-library196.js";
-import { r as s } from "./sd-component-library193.js";
-import "./sd-component-library197.js";
+import { jsxs as f, jsx as l } from "./sd-component-library195.js";
+import { useRef as p, useEffect as h } from "react";
+import "./sd-component-library198.js";
 import { TwelveRegular as u } from "./sd-component-library156.js";
-import { Box as l } from "./sd-component-library198.js";
-const w = (p) => {
+import { Box as r } from "./sd-component-library199.js";
+const v = (s) => {
   const {
     tooltipText: x,
     placement: t = "right",
     children: c,
     dontTranslate: a = !1,
     ...d
-  } = p, o = s.useRef(null), e = s.useRef(null);
-  return s.useEffect(() => {
+  } = s, o = p(null), e = p(null);
+  return h(() => {
     if (o.current && e.current) {
       const m = o.current, i = e.current;
       if (t === "right") {
@@ -22,7 +22,7 @@ const w = (p) => {
         i.style.left = `-${parseInt(n) + 10}px`;
       }
     }
-  }, [t]), /* @__PURE__ */ f(l, { "data-test": "base-tooltip", sx: {
+  }, [t]), /* @__PURE__ */ f(r, { "data-test": "base-tooltip", sx: {
     position: "relative",
     ".content-box:hover": {
       "+ .tooltip-box": {
@@ -31,10 +31,10 @@ const w = (p) => {
       }
     }
   }, children: [
-    /* @__PURE__ */ r(l, { className: "content-box", sx: {
+    /* @__PURE__ */ l(r, { className: "content-box", sx: {
       maxWidth: "max-content"
     }, ref: o, children: c }),
-    /* @__PURE__ */ r(l, { ref: e, className: "tooltip-box", sx: {
+    /* @__PURE__ */ l(r, { ref: e, className: "tooltip-box", sx: {
       ...d,
       transition: "all 0.5s",
       position: "absolute",
@@ -44,10 +44,10 @@ const w = (p) => {
       opacity: 0,
       visibility: "hidden",
       zIndex: 1
-    }, children: /* @__PURE__ */ r(u, { color: p.color, dontTranslate: a, children: x }) })
+    }, children: /* @__PURE__ */ l(u, { color: s.color, dontTranslate: a, children: x }) })
   ] });
 };
 export {
-  w as BaseTooltip
+  v as BaseTooltip
 };
 //# sourceMappingURL=sd-component-library166.js.map

package/lib/sd-component-library166.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library166.js","sources":["../src/components/tooltips/base-tooltip/base-tooltip.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { TwelveRegular } from \"../../texts/twelve-regular\";\nimport { BaseTooltipProps } from \"./interfaces\";\n\n/**\n * BaseTooltip component.\n * @deprecated\n */\nexport const BaseTooltip: React.FC<BaseTooltipProps> = (props) => {\n  const {\n    tooltipText,\n    placement = \"right\",\n    children,\n    dontTranslate = false,\n    ...remainingProps\n  } = props;\n\n  const contentBoxEl = useRef<HTMLDivElement>(null);\n  const tooltipBoxEl = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (contentBoxEl.current && tooltipBoxEl.current) {\n      const contentBox = contentBoxEl.current;\n      const tooltipBox = tooltipBoxEl.current;\n\n      if (placement === \"right\") {\n        const boxWidth = window.getComputedStyle(contentBox).width;\n        tooltipBox.style.left = `${parseInt(boxWidth) + 10}px`;\n      } else {\n        const tooltipBoxWidth = window.getComputedStyle(tooltipBox).width;\n        tooltipBox.style.left = `-${parseInt(tooltipBoxWidth) + 10}px`;\n      }\n    }\n  }, [placement]);\n\n  return (\n    <Box\n      data-test=\"base-tooltip\"\n      sx={{\n        position: \"relative\",\n        \".content-box:hover\": {\n          \"+ .tooltip-box\": {\n            opacity: 1,\n            visibility: \"visible\",\n          },\n        },\n      }}\n    >\n      <Box\n        className=\"content-box\"\n        sx={{\n          maxWidth: \"max-content\",\n        }}\n        ref={contentBoxEl}\n      >\n        {children}\n      </Box>\n      <Box\n        ref={tooltipBoxEl}\n        className=\"tooltip-box\"\n        sx={{\n          ...remainingProps,\n          transition: \"all 0.5s\",\n          position: \"absolute\",\n          padding: \"20px\",\n          borderRadius:\n            placement === \"right\" ? \"0 5px 5px 5px\" : \"5px 0 5px 5px\",\n          top: 0,\n          opacity: 0,\n          visibility: \"hidden\",\n          zIndex: 1,\n        }}\n      >\n        <TwelveRegular color={props.color} dontTranslate={dontTranslate}>\n          {tooltipText}\n        </TwelveRegular>\n      </Box>\n    </Box>\n  );\n};\n"],"names":["BaseTooltip","props","tooltipText","placement","children","dontTranslate","remainingProps","contentBoxEl","useRef","tooltipBoxEl","useEffect","current","contentBox","tooltipBox","boxWidth","window","getComputedStyle","width","style","left","parseInt","tooltipBoxWidth","jsxs","Box","position","opacity","visibility","jsx","maxWidth","transition","padding","borderRadius","top","zIndex","TwelveRegular","color"],"mappings":";;;;;AAWO,MAAMA,IAA2CC,CAAUA,MAAA;AAC1D,QAAA;AAAA,IACJC,aAAAA;AAAAA,IACAC,WAAAA,IAAY;AAAA,IACZC,UAAAA;AAAAA,IACAC,eAAAA,IAAgB;AAAA,IAChB,GAAGC;AAAAA,EACDL,IAAAA,GAEEM,IAAeC,SAAuB,IAAI,GAC1CC,IAAeD,SAAuB,IAAI;AAEhDE,SAAAA,EAAAA,UAAU,MAAM;AACVH,QAAAA,EAAaI,WAAWF,EAAaE,SAAS;AAChD,YAAMC,IAAaL,EAAaI,SAC1BE,IAAaJ,EAAaE;AAEhC,UAAIR,MAAc,SAAS;AACzB,cAAMW,IAAWC,OAAOC,iBAAiBJ,CAAU,EAAEK;AACrDJ,QAAAA,EAAWK,MAAMC,OAAQ,GAAEC,SAASN,CAAQ,IAAI,EAAG;AAAA,MAAA,OAC9C;AACL,cAAMO,IAAkBN,OAAOC,iBAAiBH,CAAU,EAAEI;AAC5DJ,QAAAA,EAAWK,MAAMC,OAAQ,IAAGC,SAASC,CAAe,IAAI,EAAG;AAAA,MAC7D;AAAA,IACF;AAAA,EAAA,GACC,CAAClB,CAAS,CAAC,GAGX,gBAAAmB,EAAAC,GAAA,EACC,aAAU,gBACV,IAAI;AAAA,IACFC,UAAU;AAAA,IACV,sBAAsB;AAAA,MACpB,kBAAkB;AAAA,QAChBC,SAAS;AAAA,QACTC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EAGF,GAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAJ,GAAA,EACC,WAAU,eACV,IAAI;AAAA,MACFK,UAAU;AAAA,IAAA,GAEZ,KAAKrB,GAEJH,UAAAA,GACH;AAAA,sBACCmB,GACC,EAAA,KAAKd,GACL,WAAU,eACV,IAAI;AAAA,MACF,GAAGH;AAAAA,MACHuB,YAAY;AAAA,MACZL,UAAU;AAAA,MACVM,SAAS;AAAA,MACTC,cACE5B,MAAc,UAAU,kBAAkB;AAAA,MAC5C6B,KAAK;AAAA,MACLP,SAAS;AAAA,MACTC,YAAY;AAAA,MACZO,QAAQ;AAAA,IACV,GAEA,4BAACC,GAAc,EAAA,OAAOjC,EAAMkC,OAAO,eAAA9B,GAChCH,aACH,EACF,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library166.js","sources":["../src/components/tooltips/base-tooltip/base-tooltip.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { TwelveRegular } from \"../../texts/twelve-regular\";\nimport { BaseTooltipProps } from \"./interfaces\";\n\n/**\n * BaseTooltip component.\n * @deprecated\n */\nexport const BaseTooltip: React.FC<BaseTooltipProps> = (props) => {\n  const {\n    tooltipText,\n    placement = \"right\",\n    children,\n    dontTranslate = false,\n    ...remainingProps\n  } = props;\n\n  const contentBoxEl = useRef<HTMLDivElement>(null);\n  const tooltipBoxEl = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (contentBoxEl.current && tooltipBoxEl.current) {\n      const contentBox = contentBoxEl.current;\n      const tooltipBox = tooltipBoxEl.current;\n\n      if (placement === \"right\") {\n        const boxWidth = window.getComputedStyle(contentBox).width;\n        tooltipBox.style.left = `${parseInt(boxWidth) + 10}px`;\n      } else {\n        const tooltipBoxWidth = window.getComputedStyle(tooltipBox).width;\n        tooltipBox.style.left = `-${parseInt(tooltipBoxWidth) + 10}px`;\n      }\n    }\n  }, [placement]);\n\n  return (\n    <Box\n      data-test=\"base-tooltip\"\n      sx={{\n        position: \"relative\",\n        \".content-box:hover\": {\n          \"+ .tooltip-box\": {\n            opacity: 1,\n            visibility: \"visible\",\n          },\n        },\n      }}\n    >\n      <Box\n        className=\"content-box\"\n        sx={{\n          maxWidth: \"max-content\",\n        }}\n        ref={contentBoxEl}\n      >\n        {children}\n      </Box>\n      <Box\n        ref={tooltipBoxEl}\n        className=\"tooltip-box\"\n        sx={{\n          ...remainingProps,\n          transition: \"all 0.5s\",\n          position: \"absolute\",\n          padding: \"20px\",\n          borderRadius:\n            placement === \"right\" ? \"0 5px 5px 5px\" : \"5px 0 5px 5px\",\n          top: 0,\n          opacity: 0,\n          visibility: \"hidden\",\n          zIndex: 1,\n        }}\n      >\n        <TwelveRegular color={props.color} dontTranslate={dontTranslate}>\n          {tooltipText}\n        </TwelveRegular>\n      </Box>\n    </Box>\n  );\n};\n"],"names":["BaseTooltip","props","tooltipText","placement","children","dontTranslate","remainingProps","contentBoxEl","useRef","tooltipBoxEl","useEffect","current","contentBox","tooltipBox","boxWidth","window","getComputedStyle","width","style","left","parseInt","tooltipBoxWidth","jsxs","Box","position","opacity","visibility","jsx","maxWidth","transition","padding","borderRadius","top","zIndex","TwelveRegular","color"],"mappings":";;;;;AAWO,MAAMA,IAA2CC,CAAUA,MAAA;AAC1D,QAAA;AAAA,IACJC,aAAAA;AAAAA,IACAC,WAAAA,IAAY;AAAA,IACZC,UAAAA;AAAAA,IACAC,eAAAA,IAAgB;AAAA,IAChB,GAAGC;AAAAA,EACDL,IAAAA,GAEEM,IAAeC,EAAuB,IAAI,GAC1CC,IAAeD,EAAuB,IAAI;AAEhDE,SAAAA,EAAU,MAAM;AACVH,QAAAA,EAAaI,WAAWF,EAAaE,SAAS;AAChD,YAAMC,IAAaL,EAAaI,SAC1BE,IAAaJ,EAAaE;AAEhC,UAAIR,MAAc,SAAS;AACzB,cAAMW,IAAWC,OAAOC,iBAAiBJ,CAAU,EAAEK;AACrDJ,QAAAA,EAAWK,MAAMC,OAAQ,GAAEC,SAASN,CAAQ,IAAI,EAAG;AAAA,MAAA,OAC9C;AACL,cAAMO,IAAkBN,OAAOC,iBAAiBH,CAAU,EAAEI;AAC5DJ,QAAAA,EAAWK,MAAMC,OAAQ,IAAGC,SAASC,CAAe,IAAI,EAAG;AAAA,MAC7D;AAAA,IACF;AAAA,EAAA,GACC,CAAClB,CAAS,CAAC,GAGX,gBAAAmB,EAAAC,GAAA,EACC,aAAU,gBACV,IAAI;AAAA,IACFC,UAAU;AAAA,IACV,sBAAsB;AAAA,MACpB,kBAAkB;AAAA,QAChBC,SAAS;AAAA,QACTC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EAGF,GAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAJ,GAAA,EACC,WAAU,eACV,IAAI;AAAA,MACFK,UAAU;AAAA,IAAA,GAEZ,KAAKrB,GAEJH,UAAAA,GACH;AAAA,sBACCmB,GACC,EAAA,KAAKd,GACL,WAAU,eACV,IAAI;AAAA,MACF,GAAGH;AAAAA,MACHuB,YAAY;AAAA,MACZL,UAAU;AAAA,MACVM,SAAS;AAAA,MACTC,cACE5B,MAAc,UAAU,kBAAkB;AAAA,MAC5C6B,KAAK;AAAA,MACLP,SAAS;AAAA,MACTC,YAAY;AAAA,MACZO,QAAQ;AAAA,IACV,GAEA,4BAACC,GAAc,EAAA,OAAOjC,EAAMkC,OAAO,eAAA9B,GAChCH,aACH,EACF,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/lib/sd-component-library167.js

@@ -1,4 +1,4 @@
-import { jsx as n } from "./sd-component-library196.js";
+import { jsx as n } from "./sd-component-library195.js";
 import { BaseInfoTooltip as c } from "./sd-component-library165.js";
 const f = (o) => {
   const {

package/lib/sd-component-library168.js

@@ -1,28 +1,28 @@
-import { jsxs as w, jsx as t } from "./sd-component-library196.js";
-import y, { r as s } from "./sd-component-library193.js";
-import "./sd-component-library197.js";
-import { Box as o } from "./sd-component-library198.js";
-import { ReactComponent as g } from "./sd-component-library286.js";
-const C = y.forwardRef((a, x) => {
+import { jsxs as w, jsx as t } from "./sd-component-library195.js";
+import y, { useRef as c, useEffect as g } from "react";
+import "./sd-component-library198.js";
+import { Box as o } from "./sd-component-library199.js";
+import { ReactComponent as v } from "./sd-component-library275.js";
+const E = y.forwardRef((a, x) => {
   const {
     placement: e,
-    bg: p = "cl_purple",
-    color: c = "cl_white",
+    bg: s = "cl_purple",
+    color: p = "cl_white",
     width: d = ["max-content"],
     iconColor: m = "#4568F9",
     iconWidth: h = "16px",
     children: f,
     ...u
-  } = a, i = s.useRef(null), n = s.useRef(null);
-  return s.useEffect(() => {
+  } = a, i = c(null), n = c(null);
+  return g(() => {
     if (i.current && n.current) {
-      const b = i.current, r = n.current;
+      const b = i.current, l = n.current;
       if (e === "right") {
-        const l = window.getComputedStyle(b).width;
-        r.style.left = `${parseInt(l) + 10}px`;
+        const r = window.getComputedStyle(b).width;
+        l.style.left = `${parseInt(r) + 10}px`;
       } else {
-        const l = window.getComputedStyle(r).width;
-        r.style.left = `-${parseInt(l) + 10}px`;
+        const r = window.getComputedStyle(l).width;
+        l.style.left = `-${parseInt(r) + 10}px`;
       }
     }
   }, [e]), /* @__PURE__ */ w(o, { ref: x, "data-test": "react-element-tooltip", sx: {
@@ -42,18 +42,18 @@ const C = y.forwardRef((a, x) => {
       },
       ":hover": {
         path: {
-          fill: p,
-          stroke: c
+          fill: s,
+          stroke: p
         }
       }
-    }, children: /* @__PURE__ */ t(g, { style: {
+    }, children: /* @__PURE__ */ t(v, { style: {
       width: h,
       fill: "none",
       stroke: m
     } }) }) }),
     /* @__PURE__ */ t(o, { ref: n, className: "tooltip-box", sx: {
       ...u,
-      bg: p,
+      bg: s,
       width: d,
       transition: "all 0.5s",
       position: "absolute",
@@ -63,11 +63,11 @@ const C = y.forwardRef((a, x) => {
       opacity: 0,
       visibility: "hidden",
       zIndex: 1,
-      color: c
+      color: p
     }, children: f })
   ] });
 });
 export {
-  C as ReactElementTooltip
+  E as ReactElementTooltip
 };
 //# sourceMappingURL=sd-component-library168.js.map

package/lib/sd-component-library168.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library168.js","sources":["../src/components/tooltips/react-element-tooltip/react-element-tooltip.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box, BoxProps } from \"rebass\";\n\nimport { InfoIcon } from \"../base-info-tooltip/assets\";\nimport { ReactElementTooltipProps } from \"./interfaces\";\n\n/**\n * PrimaryInfoTooltip component.\n */\nexport const ReactElementTooltip = React.forwardRef<\n  React.FC<BoxProps>,\n  ReactElementTooltipProps\n>((props, ref) => {\n  const {\n    placement,\n    bg = \"cl_purple\",\n    color = \"cl_white\",\n    width = [\"max-content\"],\n    iconColor = \"#4568F9\",\n    iconWidth = \"16px\",\n    children,\n    ...remainingProps\n  } = props;\n\n  const contentBoxEl = useRef<HTMLDivElement>(null);\n  const tooltipBoxEl = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (contentBoxEl.current && tooltipBoxEl.current) {\n      const contentBox = contentBoxEl.current;\n      const tooltipBox = tooltipBoxEl.current;\n\n      if (placement === \"right\") {\n        const boxWidth = window.getComputedStyle(contentBox).width;\n        tooltipBox.style.left = `${parseInt(boxWidth) + 10}px`;\n      } else {\n        const tooltipBoxWidth = window.getComputedStyle(tooltipBox).width;\n        tooltipBox.style.left = `-${parseInt(tooltipBoxWidth) + 10}px`;\n      }\n    }\n  }, [placement]);\n\n  return (\n    <Box\n      ref={ref}\n      data-test=\"react-element-tooltip\"\n      sx={{\n        position: \"relative\",\n        \".content-box:hover\": {\n          \"+ .tooltip-box\": {\n            opacity: 1,\n            visibility: \"visible\",\n          },\n        },\n      }}\n    >\n      <Box\n        className=\"content-box\"\n        sx={{ maxWidth: \"max-content\" }}\n        ref={contentBoxEl}\n      >\n        <Box\n          sx={{\n            path: { transition: \"all 0.5s\" },\n            \":hover\": {\n              path: {\n                fill: bg,\n                stroke: color,\n              },\n            },\n          }}\n        >\n          <InfoIcon\n            style={{\n              width: iconWidth,\n              fill: \"none\",\n              stroke: iconColor,\n            }}\n          />\n        </Box>\n      </Box>\n      <Box\n        ref={tooltipBoxEl}\n        className=\"tooltip-box\"\n        sx={{\n          ...remainingProps,\n          bg: bg,\n          width: width,\n          transition: \"all 0.5s\",\n          position: \"absolute\",\n          padding: \"20px\",\n          borderRadius:\n            placement === \"right\" ? \"0 5px 5px 5px\" : \"5px 0 5px 5px\",\n          top: 0,\n          opacity: 0,\n          visibility: \"hidden\",\n          zIndex: 1,\n          color: color,\n        }}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n});\n"],"names":["ReactElementTooltip","React","forwardRef","props","ref","placement","bg","color","width","iconColor","iconWidth","children","remainingProps","contentBoxEl","useRef","tooltipBoxEl","useEffect","current","contentBox","tooltipBox","boxWidth","window","getComputedStyle","style","left","parseInt","tooltipBoxWidth","jsxs","Box","position","opacity","visibility","jsx","maxWidth","path","transition","fill","stroke","InfoIcon","padding","borderRadius","top","zIndex"],"mappings":";;;;;AAUO,MAAMA,IAAsBC,EAAMC,WAGvC,CAACC,GAAOC,MAAQ;AACV,QAAA;AAAA,IACJC,WAAAA;AAAAA,IACAC,IAAAA,IAAK;AAAA,IACLC,OAAAA,IAAQ;AAAA,IACRC,OAAAA,IAAQ,CAAC,aAAa;AAAA,IACtBC,WAAAA,IAAY;AAAA,IACZC,WAAAA,IAAY;AAAA,IACZC,UAAAA;AAAAA,IACA,GAAGC;AAAAA,EACDT,IAAAA,GAEEU,IAAeC,SAAuB,IAAI,GAC1CC,IAAeD,SAAuB,IAAI;AAEhDE,SAAAA,EAAAA,UAAU,MAAM;AACVH,QAAAA,EAAaI,WAAWF,EAAaE,SAAS;AAChD,YAAMC,IAAaL,EAAaI,SAC1BE,IAAaJ,EAAaE;AAEhC,UAAIZ,MAAc,SAAS;AACzB,cAAMe,IAAWC,OAAOC,iBAAiBJ,CAAU,EAAEV;AACrDW,QAAAA,EAAWI,MAAMC,OAAQ,GAAEC,SAASL,CAAQ,IAAI,EAAG;AAAA,MAAA,OAC9C;AACL,cAAMM,IAAkBL,OAAOC,iBAAiBH,CAAU,EAAEX;AAC5DW,QAAAA,EAAWI,MAAMC,OAAQ,IAAGC,SAASC,CAAe,IAAI,EAAG;AAAA,MAC7D;AAAA,IACF;AAAA,EAAA,GACC,CAACrB,CAAS,CAAC,GAGX,gBAAAsB,EAAAC,GAAA,EACC,KAAAxB,GACA,aAAU,yBACV,IAAI;AAAA,IACFyB,UAAU;AAAA,IACV,sBAAsB;AAAA,MACpB,kBAAkB;AAAA,QAChBC,SAAS;AAAA,QACTC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EAGF,GAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAJ,GAAA,EACC,WAAU,eACV,IAAI;AAAA,MAAEK,UAAU;AAAA,IAAA,GAChB,KAAKpB,GAEL,UAAA,gBAAAmB,EAACJ,KACC,IAAI;AAAA,MACFM,MAAM;AAAA,QAAEC,YAAY;AAAA,MAAW;AAAA,MAC/B,UAAU;AAAA,QACRD,MAAM;AAAA,UACJE,MAAM9B;AAAAA,UACN+B,QAAQ9B;AAAAA,QACV;AAAA,MACF;AAAA,IACF,GAEA,UAAC,gBAAAyB,EAAAM,GAAA,EACC,OAAO;AAAA,MACL9B,OAAOE;AAAAA,MACP0B,MAAM;AAAA,MACNC,QAAQ5B;AAAAA,IAAAA,EACR,CAAA,EAEN,CAAA,GACF;AAAA,sBACCmB,GACC,EAAA,KAAKb,GACL,WAAU,eACV,IAAI;AAAA,MACF,GAAGH;AAAAA,MACHN,IAAAA;AAAAA,MACAE,OAAAA;AAAAA,MACA2B,YAAY;AAAA,MACZN,UAAU;AAAA,MACVU,SAAS;AAAA,MACTC,cACEnC,MAAc,UAAU,kBAAkB;AAAA,MAC5CoC,KAAK;AAAA,MACLX,SAAS;AAAA,MACTC,YAAY;AAAA,MACZW,QAAQ;AAAA,MACRnC,OAAAA;AAAAA,OAGDI,UAAAA,EACH,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"sd-component-library168.js","sources":["../src/components/tooltips/react-element-tooltip/react-element-tooltip.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box, BoxProps } from \"rebass\";\n\nimport { InfoIcon } from \"../base-info-tooltip/assets\";\nimport { ReactElementTooltipProps } from \"./interfaces\";\n\n/**\n * PrimaryInfoTooltip component.\n */\nexport const ReactElementTooltip = React.forwardRef<\n  React.FC<BoxProps>,\n  ReactElementTooltipProps\n>((props, ref) => {\n  const {\n    placement,\n    bg = \"cl_purple\",\n    color = \"cl_white\",\n    width = [\"max-content\"],\n    iconColor = \"#4568F9\",\n    iconWidth = \"16px\",\n    children,\n    ...remainingProps\n  } = props;\n\n  const contentBoxEl = useRef<HTMLDivElement>(null);\n  const tooltipBoxEl = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (contentBoxEl.current && tooltipBoxEl.current) {\n      const contentBox = contentBoxEl.current;\n      const tooltipBox = tooltipBoxEl.current;\n\n      if (placement === \"right\") {\n        const boxWidth = window.getComputedStyle(contentBox).width;\n        tooltipBox.style.left = `${parseInt(boxWidth) + 10}px`;\n      } else {\n        const tooltipBoxWidth = window.getComputedStyle(tooltipBox).width;\n        tooltipBox.style.left = `-${parseInt(tooltipBoxWidth) + 10}px`;\n      }\n    }\n  }, [placement]);\n\n  return (\n    <Box\n      ref={ref}\n      data-test=\"react-element-tooltip\"\n      sx={{\n        position: \"relative\",\n        \".content-box:hover\": {\n          \"+ .tooltip-box\": {\n            opacity: 1,\n            visibility: \"visible\",\n          },\n        },\n      }}\n    >\n      <Box\n        className=\"content-box\"\n        sx={{ maxWidth: \"max-content\" }}\n        ref={contentBoxEl}\n      >\n        <Box\n          sx={{\n            path: { transition: \"all 0.5s\" },\n            \":hover\": {\n              path: {\n                fill: bg,\n                stroke: color,\n              },\n            },\n          }}\n        >\n          <InfoIcon\n            style={{\n              width: iconWidth,\n              fill: \"none\",\n              stroke: iconColor,\n            }}\n          />\n        </Box>\n      </Box>\n      <Box\n        ref={tooltipBoxEl}\n        className=\"tooltip-box\"\n        sx={{\n          ...remainingProps,\n          bg: bg,\n          width: width,\n          transition: \"all 0.5s\",\n          position: \"absolute\",\n          padding: \"20px\",\n          borderRadius:\n            placement === \"right\" ? \"0 5px 5px 5px\" : \"5px 0 5px 5px\",\n          top: 0,\n          opacity: 0,\n          visibility: \"hidden\",\n          zIndex: 1,\n          color: color,\n        }}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n});\n"],"names":["ReactElementTooltip","React","forwardRef","props","ref","placement","bg","color","width","iconColor","iconWidth","children","remainingProps","contentBoxEl","useRef","tooltipBoxEl","useEffect","current","contentBox","tooltipBox","boxWidth","window","getComputedStyle","style","left","parseInt","tooltipBoxWidth","jsxs","Box","position","opacity","visibility","jsx","maxWidth","path","transition","fill","stroke","InfoIcon","padding","borderRadius","top","zIndex"],"mappings":";;;;;AAUO,MAAMA,IAAsBC,EAAMC,WAGvC,CAACC,GAAOC,MAAQ;AACV,QAAA;AAAA,IACJC,WAAAA;AAAAA,IACAC,IAAAA,IAAK;AAAA,IACLC,OAAAA,IAAQ;AAAA,IACRC,OAAAA,IAAQ,CAAC,aAAa;AAAA,IACtBC,WAAAA,IAAY;AAAA,IACZC,WAAAA,IAAY;AAAA,IACZC,UAAAA;AAAAA,IACA,GAAGC;AAAAA,EACDT,IAAAA,GAEEU,IAAeC,EAAuB,IAAI,GAC1CC,IAAeD,EAAuB,IAAI;AAEhDE,SAAAA,EAAU,MAAM;AACVH,QAAAA,EAAaI,WAAWF,EAAaE,SAAS;AAChD,YAAMC,IAAaL,EAAaI,SAC1BE,IAAaJ,EAAaE;AAEhC,UAAIZ,MAAc,SAAS;AACzB,cAAMe,IAAWC,OAAOC,iBAAiBJ,CAAU,EAAEV;AACrDW,QAAAA,EAAWI,MAAMC,OAAQ,GAAEC,SAASL,CAAQ,IAAI,EAAG;AAAA,MAAA,OAC9C;AACL,cAAMM,IAAkBL,OAAOC,iBAAiBH,CAAU,EAAEX;AAC5DW,QAAAA,EAAWI,MAAMC,OAAQ,IAAGC,SAASC,CAAe,IAAI,EAAG;AAAA,MAC7D;AAAA,IACF;AAAA,EAAA,GACC,CAACrB,CAAS,CAAC,GAGX,gBAAAsB,EAAAC,GAAA,EACC,KAAAxB,GACA,aAAU,yBACV,IAAI;AAAA,IACFyB,UAAU;AAAA,IACV,sBAAsB;AAAA,MACpB,kBAAkB;AAAA,QAChBC,SAAS;AAAA,QACTC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EAGF,GAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAJ,GAAA,EACC,WAAU,eACV,IAAI;AAAA,MAAEK,UAAU;AAAA,IAAA,GAChB,KAAKpB,GAEL,UAAA,gBAAAmB,EAACJ,KACC,IAAI;AAAA,MACFM,MAAM;AAAA,QAAEC,YAAY;AAAA,MAAW;AAAA,MAC/B,UAAU;AAAA,QACRD,MAAM;AAAA,UACJE,MAAM9B;AAAAA,UACN+B,QAAQ9B;AAAAA,QACV;AAAA,MACF;AAAA,IACF,GAEA,UAAC,gBAAAyB,EAAAM,GAAA,EACC,OAAO;AAAA,MACL9B,OAAOE;AAAAA,MACP0B,MAAM;AAAA,MACNC,QAAQ5B;AAAAA,IAAAA,EACR,CAAA,EAEN,CAAA,GACF;AAAA,sBACCmB,GACC,EAAA,KAAKb,GACL,WAAU,eACV,IAAI;AAAA,MACF,GAAGH;AAAAA,MACHN,IAAAA;AAAAA,MACAE,OAAAA;AAAAA,MACA2B,YAAY;AAAA,MACZN,UAAU;AAAA,MACVU,SAAS;AAAA,MACTC,cACEnC,MAAc,UAAU,kBAAkB;AAAA,MAC5CoC,KAAK;AAAA,MACLX,SAAS;AAAA,MACTC,YAAY;AAAA,MACZW,QAAQ;AAAA,MACRnC,OAAAA;AAAAA,OAGDI,UAAAA,EACH,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}

package/lib/sd-component-library169.js

@@ -1,16 +1,16 @@
-import { jsxs as y, jsx as e } from "./sd-component-library196.js";
-import { r as l } from "./sd-component-library193.js";
-import "./sd-component-library197.js";
-import { useBreakPoints as z, useBodyScrollLock as C } from "./sd-component-library3.js";
-import { Box as E } from "./sd-component-library198.js";
-import { TooltipWithPointerMobile as M } from "./sd-component-library287.js";
-import { TooltipWithPointerHorizontal as V } from "./sd-component-library288.js";
-import { TooltipWithPointerVertical as j } from "./sd-component-library289.js";
-import D from "./sd-component-library268.js";
-const f = 200, K = (u) => {
+import { jsxs as y, jsx as e } from "./sd-component-library195.js";
+import { useState as z, useRef as a } from "react";
+import "./sd-component-library198.js";
+import { useBreakPoints as C, useBodyScrollLock as M } from "./sd-component-library3.js";
+import { Box as V } from "./sd-component-library199.js";
+import { TooltipWithPointerMobile as j } from "./sd-component-library276.js";
+import { TooltipWithPointerHorizontal as D } from "./sd-component-library277.js";
+import { TooltipWithPointerVertical as E } from "./sd-component-library278.js";
+import _ from "./sd-component-library262.js";
+const f = 200, N = (u) => {
   const {
     children: x,
-    placement: p = "right",
+    placement: l = "right",
     tooltipOffset: h = 5,
     pointerSize: d = 5,
     tooltipPx: P = "10px",
@@ -19,29 +19,29 @@ const f = 200, K = (u) => {
     tooltipVisible: b,
     containerSx: k,
     pointerSx: w,
-    showMobileVersion: s,
-    mobileTitle: R,
-    stopPropagation: W,
-    zIndex: g = 10,
-    pointerColor: c = "cl_purple",
+    showMobileVersion: p,
+    mobileTitle: W,
+    stopPropagation: g,
+    zIndex: B = 10,
+    pointerColor: s = "cl_purple",
     ...r
   } = u, {
-    isDesktop: B
-  } = z(), o = s !== void 0 ? s : !B, [m, O] = l.useState(!1), v = (n) => {
-    W && n.stopPropagation(), O((i) => !i);
-  }, t = l.useRef(null), a = l.useRef(null);
-  return C(a.current, o && m), /* @__PURE__ */ y(E, { sx: {
+    isDesktop: O
+  } = C(), o = p !== void 0 ? p : !O, [c, R] = z(!1), v = (n) => {
+    g && n.stopPropagation(), R((i) => !i);
+  }, t = a(null), m = a(null);
+  return M(m.current, o && c), /* @__PURE__ */ y(V, { sx: {
     width: "max-content",
     position: "relative",
     ...k
-  }, ref: a, onClick: o ? v : void 0, "data-test": "tooltip-with-pointer", children: [
+  }, ref: m, onClick: o ? v : void 0, "data-test": "tooltip-with-pointer", children: [
     x,
-    /* @__PURE__ */ e(D, { in: o ? m : b, timeout: {
+    /* @__PURE__ */ e(_, { in: o ? c : b, timeout: {
       enter: 0,
       exit: f
     }, mountOnEnter: !0, unmountOnExit: !0, nodeRef: t, children: (n) => {
       const i = {
-        placement: p,
+        placement: l,
         animationDuration: f,
         state: n,
         pointerSize: d,
@@ -50,13 +50,13 @@ const f = 200, K = (u) => {
         tooltipWidth: S,
         tooltipOffset: h,
         pointerSx: w,
-        pointerColor: c
+        pointerColor: s
       };
-      return o ? /* @__PURE__ */ e(M, { ...r, zIndex: g, mobileTitle: R, pointerColor: c, ref: t }) : ["left", "right"].includes(p) ? /* @__PURE__ */ e(V, { ...r, ...i, ref: t }) : /* @__PURE__ */ e(j, { ...r, ...i, ref: t });
+      return o ? /* @__PURE__ */ e(j, { ...r, zIndex: B, mobileTitle: W, pointerColor: s, ref: t }) : ["left", "right"].includes(l) ? /* @__PURE__ */ e(D, { ...r, ...i, ref: t }) : /* @__PURE__ */ e(E, { ...r, ...i, ref: t });
     } })
   ] });
 };
 export {
-  K as TooltipWithPointer
+  N as TooltipWithPointer
 };
 //# sourceMappingURL=sd-component-library169.js.map

package/lib/sd-component-library169.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library169.js","sources":["../src/components/tooltips/tooltip-with-pointer/tooltip-with-pointer.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport { Box } from \"rebass\";\n\nimport { useBodyScrollLock, useBreakPoints } from \"../../../core/custom-hooks\";\nimport { TooltipWithPointerProps as Props } from \"./interfaces\";\nimport {\n  TooltipWithPointerHorizontal,\n  TooltipWithPointerMobile,\n  TooltipWithPointerVertical,\n} from \"./partials\";\n\nconst animationDuration = 200;\n\nexport const TooltipWithPointer: React.FC<Props> = (props) => {\n  const {\n    children,\n    placement = \"right\",\n    tooltipOffset = 5,\n    pointerSize = 5,\n    tooltipPx = \"10px\",\n    tooltipPy = \"5px\",\n    tooltipWidth = \"max-content\",\n    tooltipVisible,\n    containerSx,\n    pointerSx,\n    showMobileVersion,\n    mobileTitle,\n    stopPropagation,\n    zIndex = 10,\n    pointerColor = \"cl_purple\",\n    ...restOfProps\n  } = props;\n\n  const { isDesktop } = useBreakPoints();\n  const useMobileStyle =\n    showMobileVersion !== undefined ? showMobileVersion : !isDesktop;\n\n  const [showTooltip, setShowTooltip] = useState(false);\n  const onTooltipClick: React.MouseEventHandler = (event) => {\n    stopPropagation && event.stopPropagation();\n    setShowTooltip((prev) => !prev);\n  };\n\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  useBodyScrollLock(containerRef.current, useMobileStyle && showTooltip);\n\n  return (\n    <Box\n      sx={{\n        width: \"max-content\",\n        position: \"relative\",\n        ...containerSx,\n      }}\n      ref={containerRef}\n      onClick={useMobileStyle ? onTooltipClick : undefined}\n      data-test=\"tooltip-with-pointer\"\n    >\n      {children}\n\n      <Transition\n        in={useMobileStyle ? showTooltip : tooltipVisible}\n        timeout={{ enter: 0, exit: animationDuration }}\n        mountOnEnter\n        unmountOnExit\n        nodeRef={tooltipRef}\n      >\n        {(state) => {\n          const commonProps = {\n            placement,\n            animationDuration,\n            state,\n            pointerSize,\n            tooltipPx,\n            tooltipPy,\n            tooltipWidth,\n            tooltipOffset,\n            pointerSx,\n            pointerColor,\n          };\n\n          return useMobileStyle ? (\n            <TooltipWithPointerMobile\n              {...restOfProps}\n              zIndex={zIndex}\n              mobileTitle={mobileTitle}\n              pointerColor={pointerColor}\n              ref={tooltipRef}\n            />\n          ) : [\"left\", \"right\"].includes(placement) ? (\n            <TooltipWithPointerHorizontal\n              {...restOfProps}\n              {...commonProps}\n              ref={tooltipRef}\n            />\n          ) : (\n            <TooltipWithPointerVertical\n              {...restOfProps}\n              {...commonProps}\n              ref={tooltipRef}\n            />\n          );\n        }}\n      </Transition>\n    </Box>\n  );\n};\n"],"names":["animationDuration","TooltipWithPointer","props","children","placement","tooltipOffset","pointerSize","tooltipPx","tooltipPy","tooltipWidth","tooltipVisible","containerSx","pointerSx","showMobileVersion","mobileTitle","stopPropagation","zIndex","pointerColor","restOfProps","isDesktop","useBreakPoints","useMobileStyle","undefined","showTooltip","setShowTooltip","useState","onTooltipClick","event","prev","tooltipRef","useRef","containerRef","current","jsxs","Box","width","position","Transition","enter","exit","state","commonProps","jsx","TooltipWithPointerMobile","includes","TooltipWithPointerHorizontal","TooltipWithPointerVertical"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAoB,KAEbC,IAAuCC,CAAUA,MAAA;AACtD,QAAA;AAAA,IACJC,UAAAA;AAAAA,IACAC,WAAAA,IAAY;AAAA,IACZC,eAAAA,IAAgB;AAAA,IAChBC,aAAAA,IAAc;AAAA,IACdC,WAAAA,IAAY;AAAA,IACZC,WAAAA,IAAY;AAAA,IACZC,cAAAA,IAAe;AAAA,IACfC,gBAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,mBAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,QAAAA,IAAS;AAAA,IACTC,cAAAA,IAAe;AAAA,IACf,GAAGC;AAAAA,EACDhB,IAAAA,GAEE;AAAA,IAAEiB,WAAAA;AAAAA,MAAcC,EAAe,GAC/BC,IACJR,MAAsBS,SAAYT,IAAoB,CAACM,GAEnD,CAACI,GAAaC,CAAc,IAAIC,WAAS,EAAK,GAC9CC,IAA2CC,CAAUA,MAAA;AACzDZ,IAAAA,KAAmBY,EAAMZ,mBACTa,EAAAA,CAAAA,MAAS,CAACA,CAAI;AAAA,EAAA,GAG1BC,IAAaC,SAAuB,IAAI,GACxCC,IAAeD,SAAuB,IAAI;AAC9BC,SAAAA,EAAAA,EAAaC,SAASX,KAAkBE,CAAW,GAGnE,gBAAAU,EAACC,KACC,IAAI;AAAA,IACFC,OAAO;AAAA,IACPC,UAAU;AAAA,IACV,GAAGzB;AAAAA,EAAAA,GAEL,KAAKoB,GACL,SAASV,IAAiBK,IAAiBJ,QAC3C,aAAU,wBAETnB,UAAAA;AAAAA,IAAAA;AAAAA,sBAEAkC,GACC,EAAA,IAAIhB,IAAiBE,IAAcb,GACnC,SAAS;AAAA,MAAE4B,OAAO;AAAA,MAAGC,MAAMvC;AAAAA,IAAAA,GAC3B,cAAY,IACZ,eAAa,IACb,SAAS6B,GAEPW,UAAU,CAAAA,MAAA;AACV,YAAMC,IAAc;AAAA,QAClBrC,WAAAA;AAAAA,QACAJ,mBAAAA;AAAAA,QACAwC,OAAAA;AAAAA,QACAlC,aAAAA;AAAAA,QACAC,WAAAA;AAAAA,QACAC,WAAAA;AAAAA,QACAC,cAAAA;AAAAA,QACAJ,eAAAA;AAAAA,QACAO,WAAAA;AAAAA,QACAK,cAAAA;AAAAA,MAAAA;AAGF,aAAOI,IACL,gBAAAqB,EAACC,QACKzB,GACJ,QAAAF,GACA,aAAAF,GACA,cAAAG,GACA,KAAKY,GAAW,IAEhB,CAAC,QAAQ,OAAO,EAAEe,SAASxC,CAAS,IACtC,gBAAAsC,EAACG,GACC,EAAA,GAAI3B,GACAuB,GAAAA,GACJ,KAAKZ,GAAW,IAGlB,gBAAAa,EAACI,KACC,GAAI5B,GACAuB,GAAAA,GACJ,KAAKZ,EAER,CAAA;AAAA,IAAA,GAEL;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library169.js","sources":["../src/components/tooltips/tooltip-with-pointer/tooltip-with-pointer.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport { Box } from \"rebass\";\n\nimport { useBodyScrollLock, useBreakPoints } from \"../../../core/custom-hooks\";\nimport { TooltipWithPointerProps as Props } from \"./interfaces\";\nimport {\n  TooltipWithPointerHorizontal,\n  TooltipWithPointerMobile,\n  TooltipWithPointerVertical,\n} from \"./partials\";\n\nconst animationDuration = 200;\n\nexport const TooltipWithPointer: React.FC<Props> = (props) => {\n  const {\n    children,\n    placement = \"right\",\n    tooltipOffset = 5,\n    pointerSize = 5,\n    tooltipPx = \"10px\",\n    tooltipPy = \"5px\",\n    tooltipWidth = \"max-content\",\n    tooltipVisible,\n    containerSx,\n    pointerSx,\n    showMobileVersion,\n    mobileTitle,\n    stopPropagation,\n    zIndex = 10,\n    pointerColor = \"cl_purple\",\n    ...restOfProps\n  } = props;\n\n  const { isDesktop } = useBreakPoints();\n  const useMobileStyle =\n    showMobileVersion !== undefined ? showMobileVersion : !isDesktop;\n\n  const [showTooltip, setShowTooltip] = useState(false);\n  const onTooltipClick: React.MouseEventHandler = (event) => {\n    stopPropagation && event.stopPropagation();\n    setShowTooltip((prev) => !prev);\n  };\n\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  useBodyScrollLock(containerRef.current, useMobileStyle && showTooltip);\n\n  return (\n    <Box\n      sx={{\n        width: \"max-content\",\n        position: \"relative\",\n        ...containerSx,\n      }}\n      ref={containerRef}\n      onClick={useMobileStyle ? onTooltipClick : undefined}\n      data-test=\"tooltip-with-pointer\"\n    >\n      {children}\n\n      <Transition\n        in={useMobileStyle ? showTooltip : tooltipVisible}\n        timeout={{ enter: 0, exit: animationDuration }}\n        mountOnEnter\n        unmountOnExit\n        nodeRef={tooltipRef}\n      >\n        {(state) => {\n          const commonProps = {\n            placement,\n            animationDuration,\n            state,\n            pointerSize,\n            tooltipPx,\n            tooltipPy,\n            tooltipWidth,\n            tooltipOffset,\n            pointerSx,\n            pointerColor,\n          };\n\n          return useMobileStyle ? (\n            <TooltipWithPointerMobile\n              {...restOfProps}\n              zIndex={zIndex}\n              mobileTitle={mobileTitle}\n              pointerColor={pointerColor}\n              ref={tooltipRef}\n            />\n          ) : [\"left\", \"right\"].includes(placement) ? (\n            <TooltipWithPointerHorizontal\n              {...restOfProps}\n              {...commonProps}\n              ref={tooltipRef}\n            />\n          ) : (\n            <TooltipWithPointerVertical\n              {...restOfProps}\n              {...commonProps}\n              ref={tooltipRef}\n            />\n          );\n        }}\n      </Transition>\n    </Box>\n  );\n};\n"],"names":["animationDuration","TooltipWithPointer","props","children","placement","tooltipOffset","pointerSize","tooltipPx","tooltipPy","tooltipWidth","tooltipVisible","containerSx","pointerSx","showMobileVersion","mobileTitle","stopPropagation","zIndex","pointerColor","restOfProps","isDesktop","useBreakPoints","useMobileStyle","undefined","showTooltip","setShowTooltip","useState","onTooltipClick","event","prev","tooltipRef","useRef","containerRef","current","jsxs","Box","width","position","Transition","enter","exit","state","commonProps","jsx","TooltipWithPointerMobile","includes","TooltipWithPointerHorizontal","TooltipWithPointerVertical"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAoB,KAEbC,IAAuCC,CAAUA,MAAA;AACtD,QAAA;AAAA,IACJC,UAAAA;AAAAA,IACAC,WAAAA,IAAY;AAAA,IACZC,eAAAA,IAAgB;AAAA,IAChBC,aAAAA,IAAc;AAAA,IACdC,WAAAA,IAAY;AAAA,IACZC,WAAAA,IAAY;AAAA,IACZC,cAAAA,IAAe;AAAA,IACfC,gBAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,mBAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,QAAAA,IAAS;AAAA,IACTC,cAAAA,IAAe;AAAA,IACf,GAAGC;AAAAA,EACDhB,IAAAA,GAEE;AAAA,IAAEiB,WAAAA;AAAAA,MAAcC,EAAe,GAC/BC,IACJR,MAAsBS,SAAYT,IAAoB,CAACM,GAEnD,CAACI,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9CC,IAA2CC,CAAUA,MAAA;AACzDZ,IAAAA,KAAmBY,EAAMZ,mBACTa,EAAAA,CAAAA,MAAS,CAACA,CAAI;AAAA,EAAA,GAG1BC,IAAaC,EAAuB,IAAI,GACxCC,IAAeD,EAAuB,IAAI;AAC9BC,SAAAA,EAAAA,EAAaC,SAASX,KAAkBE,CAAW,GAGnE,gBAAAU,EAACC,KACC,IAAI;AAAA,IACFC,OAAO;AAAA,IACPC,UAAU;AAAA,IACV,GAAGzB;AAAAA,EAAAA,GAEL,KAAKoB,GACL,SAASV,IAAiBK,IAAiBJ,QAC3C,aAAU,wBAETnB,UAAAA;AAAAA,IAAAA;AAAAA,sBAEAkC,GACC,EAAA,IAAIhB,IAAiBE,IAAcb,GACnC,SAAS;AAAA,MAAE4B,OAAO;AAAA,MAAGC,MAAMvC;AAAAA,IAAAA,GAC3B,cAAY,IACZ,eAAa,IACb,SAAS6B,GAEPW,UAAU,CAAAA,MAAA;AACV,YAAMC,IAAc;AAAA,QAClBrC,WAAAA;AAAAA,QACAJ,mBAAAA;AAAAA,QACAwC,OAAAA;AAAAA,QACAlC,aAAAA;AAAAA,QACAC,WAAAA;AAAAA,QACAC,WAAAA;AAAAA,QACAC,cAAAA;AAAAA,QACAJ,eAAAA;AAAAA,QACAO,WAAAA;AAAAA,QACAK,cAAAA;AAAAA,MAAAA;AAGF,aAAOI,IACL,gBAAAqB,EAACC,QACKzB,GACJ,QAAAF,GACA,aAAAF,GACA,cAAAG,GACA,KAAKY,GAAW,IAEhB,CAAC,QAAQ,OAAO,EAAEe,SAASxC,CAAS,IACtC,gBAAAsC,EAACG,GACC,EAAA,GAAI3B,GACAuB,GAAAA,GACJ,KAAKZ,GAAW,IAGlB,gBAAAa,EAACI,KACC,GAAI5B,GACAuB,GAAAA,GACJ,KAAKZ,EAER,CAAA;AAAA,IAAA,GAEL;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/lib/sd-component-library17.js

@@ -1,4 +1,4 @@
-import { jsx as a } from "./sd-component-library196.js";
+import { jsx as a } from "./sd-component-library195.js";
 import { Breadcrumb as e } from "./sd-component-library18.js";
 const c = (r) => /* @__PURE__ */ a(e, { variant: "secondary", ...r, "data-test": "secondary-breadcrumb" });
 export {

package/lib/sd-component-library170.js

@@ -1,10 +1,10 @@
-import { jsx as n } from "./sd-component-library196.js";
-import "./sd-component-library197.js";
+import { jsx as n } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
 import { ReactComponent as p } from "./sd-component-library186.js";
 import { ReactComponent as a } from "./sd-component-library185.js";
 import { ReactComponent as C } from "./sd-component-library175.js";
 import { ReactComponent as g } from "./sd-component-library177.js";
-import { Box as I } from "./sd-component-library198.js";
+import { Box as I } from "./sd-component-library199.js";
 const t = (o) => {
   const {
     sx: r,