@selfdecode/sd-component-library 4.0.95 → 4.0.96

package/lib/sd-component-library169.js

@@ -1,75 +1,58 @@
-import { j as t } from "./sd-component-library196.js";
-import { useRef as x, useEffect as u } from "react";
-import { Box as l } from "rebass";
-import { TwelveRegular as f } from "./sd-component-library159.js";
-const w = (r) => {
+import { j as o } from "./sd-component-library197.js";
+import { Box as m } from "rebass";
+import { BaseTooltip as c } from "./sd-component-library170.js";
+import { ReactComponent as f } from "./sd-component-library275.js";
+const T = (i) => {
   const {
-    tooltipText: p,
-    placement: o = "right",
-    children: c,
-    dontTranslate: a = !1,
-    ...d
-  } = r, e = x(null), i = x(null);
-  return u(() => {
-    if (e.current && i.current) {
-      const m = e.current, n = i.current;
-      if (o === "right") {
-        const s = window.getComputedStyle(m).width;
-        n.style.left = `${parseInt(s) + 10}px`;
-      } else {
-        const s = window.getComputedStyle(n).width;
-        n.style.left = `-${parseInt(s) + 10}px`;
-      }
-    }
-  }, [o]), /* @__PURE__ */ t.jsxs(
-    l,
+    tooltipText: n,
+    width: r,
+    iconColor: s,
+    placement: l,
+    iconWidth: a = "16px",
+    color: t,
+    bg: e,
+    dontTranslate: p = !1
+  } = i;
+  return /* @__PURE__ */ o.jsx(
+    c,
     {
-      "data-testid": "base-tooltip",
-      sx: {
-        position: "relative",
-        ".content-box:hover": {
-          "+ .tooltip-box": {
-            opacity: 1,
-            visibility: "visible"
-          }
-        }
-      },
-      children: [
-        /* @__PURE__ */ t.jsx(
-          l,
-          {
-            className: "content-box",
-            sx: {
-              maxWidth: "max-content"
+      color: t,
+      bg: e,
+      width: r,
+      placement: l,
+      "data-test": "base-info-tooltip",
+      tooltipText: n,
+      dontTranslate: p,
+      children: /* @__PURE__ */ o.jsx(
+        m,
+        {
+          sx: {
+            path: {
+              transition: "all 0.5s"
             },
-            ref: e,
-            children: c
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          l,
-          {
-            ref: i,
-            className: "tooltip-box",
-            sx: {
-              ...d,
-              transition: "all 0.5s",
-              position: "absolute",
-              padding: "20px",
-              borderRadius: o === "right" ? "0 5px 5px 5px" : "5px 0 5px 5px",
-              top: 0,
-              opacity: 0,
-              visibility: "hidden",
-              zIndex: 1
-            },
-            children: /* @__PURE__ */ t.jsx(f, { color: r.color, dontTranslate: a, children: p })
-          }
-        )
-      ]
+            ":hover": {
+              path: {
+                fill: e,
+                stroke: t
+              }
+            }
+          },
+          children: /* @__PURE__ */ o.jsx(
+            f,
+            {
+              style: {
+                width: a,
+                fill: "none",
+                stroke: s
+              }
+            }
+          )
+        }
+      )
     }
   );
 };
 export {
-  w as BaseTooltip
+  T as BaseInfoTooltip
 };
 //# 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/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-testid=\"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","contentBox","tooltipBox","boxWidth","tooltipBoxWidth","jsxs","Box","jsx","TwelveRegular"],"mappings":";;;;AAWa,MAAAA,IAA0C,CAACC,MAAU;AAC1D,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,GAAGC;AAAA,EACD,IAAAL,GAEEM,IAAeC,EAAuB,IAAI,GAC1CC,IAAeD,EAAuB,IAAI;AAEhD,SAAAE,EAAU,MAAM;AACV,QAAAH,EAAa,WAAWE,EAAa,SAAS;AAChD,YAAME,IAAaJ,EAAa,SAC1BK,IAAaH,EAAa;AAEhC,UAAIN,MAAc,SAAS;AACzB,cAAMU,IAAW,OAAO,iBAAiBF,CAAU,EAAE;AACrD,QAAAC,EAAW,MAAM,OAAO,GAAG,SAASC,CAAQ,IAAI,EAAE;AAAA,MAAA,OAC7C;AACL,cAAMC,IAAkB,OAAO,iBAAiBF,CAAU,EAAE;AAC5D,QAAAA,EAAW,MAAM,OAAO,IAAI,SAASE,CAAe,IAAI,EAAE;AAAA,MAC5D;AAAA,IACF;AAAA,EAAA,GACC,CAACX,CAAS,CAAC,GAGZY,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,UAAU;AAAA,QACV,sBAAsB;AAAA,UACpB,kBAAkB;AAAA,YAChB,SAAS;AAAA,YACT,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,UAAU;AAAA,YACZ;AAAA,YACA,KAAKT;AAAA,YAEJ,UAAAH;AAAA,UAAA;AAAA,QACH;AAAA,QACAa,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,KAAKP;AAAA,YACL,WAAU;AAAA,YACV,IAAI;AAAA,cACF,GAAGH;AAAA,cACH,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,SAAS;AAAA,cACT,cACEH,MAAc,UAAU,kBAAkB;AAAA,cAC5C,KAAK;AAAA,cACL,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,QAAQ;AAAA,YACV;AAAA,YAEA,gCAACe,GAAc,EAAA,OAAOjB,EAAM,OAAO,eAAAI,GAChC,UACHH,GAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library169.js","sources":["../src/components/tooltips/base-info-tooltip/base-info-tooltip.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { BaseTooltip } from \"../base-tooltip\";\nimport { InfoIcon } from \"./assets\";\nimport { BaseInfoTooltipProps } from \"./interfaces\";\n\n/**\n * BaseInfoTooltip component.\n * @deprecated\n */\nexport const BaseInfoTooltip: React.FC<BaseInfoTooltipProps> = (props) => {\n  const {\n    tooltipText,\n    width,\n    iconColor,\n    placement,\n    iconWidth = \"16px\",\n    color,\n    bg,\n    dontTranslate = false,\n  } = props;\n\n  return (\n    <BaseTooltip\n      color={color}\n      bg={bg}\n      width={width}\n      placement={placement}\n      data-test=\"base-info-tooltip\"\n      tooltipText={tooltipText}\n      dontTranslate={dontTranslate}\n    >\n      <Box\n        sx={{\n          path: {\n            transition: \"all 0.5s\",\n          },\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    </BaseTooltip>\n  );\n};\n"],"names":["BaseInfoTooltip","props","tooltipText","width","iconColor","placement","iconWidth","color","bg","dontTranslate","jsx","BaseTooltip","Box","InfoIcon"],"mappings":";;;;AAYa,MAAAA,IAAkD,CAACC,MAAU;AAClE,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,IAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,EACd,IAAAR;AAGF,SAAAS,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAJ;AAAA,MACA,IAAAC;AAAA,MACA,OAAAL;AAAA,MACA,WAAAE;AAAA,MACA,aAAU;AAAA,MACV,aAAAH;AAAA,MACA,eAAAO;AAAA,MAEA,UAAAC,gBAAAA,EAAA;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,MAAM;AAAA,cACJ,YAAY;AAAA,YACd;AAAA,YACA,UAAU;AAAA,cACR,MAAM;AAAA,gBACJ,MAAMJ;AAAA,gBACN,QAAQD;AAAA,cACV;AAAA,YACF;AAAA,UACF;AAAA,UAEA,UAAAG,gBAAAA,EAAA;AAAA,YAACG;AAAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,OAAOP;AAAA,gBACP,MAAM;AAAA,gBACN,QAAQF;AAAA,cACV;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library17.js

@@ -1,4 +1,4 @@
-import { j as e } from "./sd-component-library196.js";
+import { j as e } from "./sd-component-library197.js";
 import { CtaButton as l } from "./sd-component-library26.js";
 const i = (o) => {
   const { width: r = ["280px", "236px"], children: t } = o;

package/lib/sd-component-library170.js

@@ -1,29 +1,75 @@
-import { j as n } from "./sd-component-library196.js";
-import { BaseInfoTooltip as m } from "./sd-component-library168.js";
-const s = (o) => {
+import { j as t } from "./sd-component-library197.js";
+import { useRef as x, useEffect as u } from "react";
+import { Box as l } from "rebass";
+import { TwelveRegular as f } from "./sd-component-library160.js";
+const w = (r) => {
   const {
-    tooltipText: t,
-    placement: r,
-    bg: i = "cl_purple",
-    color: p = "cl_white",
-    width: e = ["204px"],
-    iconColor: l = "#4568F9"
-  } = o;
-  return /* @__PURE__ */ n.jsx(
-    m,
+    tooltipText: p,
+    placement: o = "right",
+    children: c,
+    dontTranslate: a = !1,
+    ...d
+  } = r, e = x(null), i = x(null);
+  return u(() => {
+    if (e.current && i.current) {
+      const m = e.current, n = i.current;
+      if (o === "right") {
+        const s = window.getComputedStyle(m).width;
+        n.style.left = `${parseInt(s) + 10}px`;
+      } else {
+        const s = window.getComputedStyle(n).width;
+        n.style.left = `-${parseInt(s) + 10}px`;
+      }
+    }
+  }, [o]), /* @__PURE__ */ t.jsxs(
+    l,
     {
-      "data-test": "primary-info-tooltip",
-      ...o,
-      color: p,
-      bg: i,
-      width: e,
-      placement: r,
-      tooltipText: t,
-      iconColor: l
+      "data-testid": "base-tooltip",
+      sx: {
+        position: "relative",
+        ".content-box:hover": {
+          "+ .tooltip-box": {
+            opacity: 1,
+            visibility: "visible"
+          }
+        }
+      },
+      children: [
+        /* @__PURE__ */ t.jsx(
+          l,
+          {
+            className: "content-box",
+            sx: {
+              maxWidth: "max-content"
+            },
+            ref: e,
+            children: c
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          l,
+          {
+            ref: i,
+            className: "tooltip-box",
+            sx: {
+              ...d,
+              transition: "all 0.5s",
+              position: "absolute",
+              padding: "20px",
+              borderRadius: o === "right" ? "0 5px 5px 5px" : "5px 0 5px 5px",
+              top: 0,
+              opacity: 0,
+              visibility: "hidden",
+              zIndex: 1
+            },
+            children: /* @__PURE__ */ t.jsx(f, { color: r.color, dontTranslate: a, children: p })
+          }
+        )
+      ]
     }
   );
 };
 export {
-  s as PrimaryInfoTooltip
+  w as BaseTooltip
 };
 //# sourceMappingURL=sd-component-library170.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library170.js","sources":["../src/components/tooltips/primary-info-tooltip/primary-info-tooltip.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { BaseInfoTooltip } from \"../base-info-tooltip\";\nimport { PrimaryInfoTooltipProps } from \"./interfaces\";\n\n/**\n * PrimaryInfoTooltip component.\n * @deprecated\n */\nexport const PrimaryInfoTooltip: React.FC<PrimaryInfoTooltipProps> = (\n  props\n) => {\n  const {\n    tooltipText,\n    placement,\n    bg = \"cl_purple\",\n    color = \"cl_white\",\n    width = [\"204px\"],\n    iconColor = \"#4568F9\",\n  } = props;\n  return (\n    <BaseInfoTooltip\n      data-test=\"primary-info-tooltip\"\n      {...props}\n      color={color}\n      bg={bg}\n      width={width}\n      placement={placement}\n      tooltipText={tooltipText}\n      iconColor={iconColor}\n    />\n  );\n};\n"],"names":["PrimaryInfoTooltip","props","tooltipText","placement","bg","color","width","iconColor","jsx","BaseInfoTooltip"],"mappings":";;AASa,MAAAA,IAAwD,CACnEC,MACG;AACG,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAAC,IAAK;AAAA,IACL,OAAAC,IAAQ;AAAA,IACR,OAAAC,IAAQ,CAAC,OAAO;AAAA,IAChB,WAAAC,IAAY;AAAA,EACV,IAAAN;AAEF,SAAAO,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACT,GAAGR;AAAA,MACJ,OAAAI;AAAA,MACA,IAAAD;AAAA,MACA,OAAAE;AAAA,MACA,WAAAH;AAAA,MACA,aAAAD;AAAA,MACA,WAAAK;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library170.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-testid=\"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","contentBox","tooltipBox","boxWidth","tooltipBoxWidth","jsxs","Box","jsx","TwelveRegular"],"mappings":";;;;AAWa,MAAAA,IAA0C,CAACC,MAAU;AAC1D,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,GAAGC;AAAA,EACD,IAAAL,GAEEM,IAAeC,EAAuB,IAAI,GAC1CC,IAAeD,EAAuB,IAAI;AAEhD,SAAAE,EAAU,MAAM;AACV,QAAAH,EAAa,WAAWE,EAAa,SAAS;AAChD,YAAME,IAAaJ,EAAa,SAC1BK,IAAaH,EAAa;AAEhC,UAAIN,MAAc,SAAS;AACzB,cAAMU,IAAW,OAAO,iBAAiBF,CAAU,EAAE;AACrD,QAAAC,EAAW,MAAM,OAAO,GAAG,SAASC,CAAQ,IAAI,EAAE;AAAA,MAAA,OAC7C;AACL,cAAMC,IAAkB,OAAO,iBAAiBF,CAAU,EAAE;AAC5D,QAAAA,EAAW,MAAM,OAAO,IAAI,SAASE,CAAe,IAAI,EAAE;AAAA,MAC5D;AAAA,IACF;AAAA,EAAA,GACC,CAACX,CAAS,CAAC,GAGZY,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,UAAU;AAAA,QACV,sBAAsB;AAAA,UACpB,kBAAkB;AAAA,YAChB,SAAS;AAAA,YACT,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,UAAU;AAAA,YACZ;AAAA,YACA,KAAKT;AAAA,YAEJ,UAAAH;AAAA,UAAA;AAAA,QACH;AAAA,QACAa,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,KAAKP;AAAA,YACL,WAAU;AAAA,YACV,IAAI;AAAA,cACF,GAAGH;AAAA,cACH,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,SAAS;AAAA,cACT,cACEH,MAAc,UAAU,kBAAkB;AAAA,cAC5C,KAAK;AAAA,cACL,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,QAAQ;AAAA,YACV;AAAA,YAEA,gCAACe,GAAc,EAAA,OAAOjB,EAAM,OAAO,eAAAI,GAChC,UACHH,GAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library171.js

@@ -1,103 +1,29 @@
-import { j as t } from "./sd-component-library196.js";
-import w, { useRef as c, useEffect as y } from "react";
-import { Box as o } from "rebass";
-import { ReactComponent as g } from "./sd-component-library274.js";
-const E = w.forwardRef((x, a) => {
+import { j as n } from "./sd-component-library197.js";
+import { BaseInfoTooltip as m } from "./sd-component-library169.js";
+const s = (o) => {
   const {
-    placement: e,
-    bg: r = "cl_purple",
+    tooltipText: t,
+    placement: r,
+    bg: i = "cl_purple",
     color: p = "cl_white",
-    width: d = ["max-content"],
-    iconColor: m = "#4568F9",
-    iconWidth: h = "16px",
-    children: f,
-    ...u
-  } = x, i = c(null), n = c(null);
-  return y(() => {
-    if (i.current && n.current) {
-      const b = i.current, l = n.current;
-      if (e === "right") {
-        const s = window.getComputedStyle(b).width;
-        l.style.left = `${parseInt(s) + 10}px`;
-      } else {
-        const s = window.getComputedStyle(l).width;
-        l.style.left = `-${parseInt(s) + 10}px`;
-      }
-    }
-  }, [e]), /* @__PURE__ */ t.jsxs(
-    o,
+    width: e = ["204px"],
+    iconColor: l = "#4568F9"
+  } = o;
+  return /* @__PURE__ */ n.jsx(
+    m,
     {
-      ref: a,
-      "data-testid": "react-element-tooltip",
-      sx: {
-        position: "relative",
-        ".content-box:hover": {
-          "+ .tooltip-box": {
-            opacity: 1,
-            visibility: "visible"
-          }
-        }
-      },
-      children: [
-        /* @__PURE__ */ t.jsx(
-          o,
-          {
-            className: "content-box",
-            sx: { maxWidth: "max-content" },
-            ref: i,
-            children: /* @__PURE__ */ t.jsx(
-              o,
-              {
-                sx: {
-                  path: { transition: "all 0.5s" },
-                  ":hover": {
-                    path: {
-                      fill: r,
-                      stroke: p
-                    }
-                  }
-                },
-                children: /* @__PURE__ */ t.jsx(
-                  g,
-                  {
-                    style: {
-                      width: h,
-                      fill: "none",
-                      stroke: m
-                    }
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          o,
-          {
-            ref: n,
-            className: "tooltip-box",
-            sx: {
-              ...u,
-              bg: r,
-              width: d,
-              transition: "all 0.5s",
-              position: "absolute",
-              padding: "20px",
-              borderRadius: e === "right" ? "0 5px 5px 5px" : "5px 0 5px 5px",
-              top: 0,
-              opacity: 0,
-              visibility: "hidden",
-              zIndex: 1,
-              color: p
-            },
-            children: f
-          }
-        )
-      ]
+      "data-test": "primary-info-tooltip",
+      ...o,
+      color: p,
+      bg: i,
+      width: e,
+      placement: r,
+      tooltipText: t,
+      iconColor: l
     }
   );
-});
+};
 export {
-  E as ReactElementTooltip
+  s as PrimaryInfoTooltip
 };
 //# sourceMappingURL=sd-component-library171.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library171.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-testid=\"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","props","ref","placement","bg","color","width","iconColor","iconWidth","children","remainingProps","contentBoxEl","useRef","tooltipBoxEl","useEffect","contentBox","tooltipBox","boxWidth","tooltipBoxWidth","jsxs","Box","jsx","InfoIcon"],"mappings":";;;;AAUO,MAAMA,IAAsBC,EAAM,WAGvC,CAACC,GAAOC,MAAQ;AACV,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,IAAAC,IAAK;AAAA,IACL,OAAAC,IAAQ;AAAA,IACR,OAAAC,IAAQ,CAAC,aAAa;AAAA,IACtB,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAT,GAEEU,IAAeC,EAAuB,IAAI,GAC1CC,IAAeD,EAAuB,IAAI;AAEhD,SAAAE,EAAU,MAAM;AACV,QAAAH,EAAa,WAAWE,EAAa,SAAS;AAChD,YAAME,IAAaJ,EAAa,SAC1BK,IAAaH,EAAa;AAEhC,UAAIV,MAAc,SAAS;AACzB,cAAMc,IAAW,OAAO,iBAAiBF,CAAU,EAAE;AACrD,QAAAC,EAAW,MAAM,OAAO,GAAG,SAASC,CAAQ,IAAI,EAAE;AAAA,MAAA,OAC7C;AACL,cAAMC,IAAkB,OAAO,iBAAiBF,CAAU,EAAE;AAC5D,QAAAA,EAAW,MAAM,OAAO,IAAI,SAASE,CAAe,IAAI,EAAE;AAAA,MAC5D;AAAA,IACF;AAAA,EAAA,GACC,CAACf,CAAS,CAAC,GAGZgB,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAlB;AAAA,MACA,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,UAAU;AAAA,QACV,sBAAsB;AAAA,UACpB,kBAAkB;AAAA,YAChB,SAAS;AAAA,YACT,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAAmB,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,EAAE,UAAU,cAAc;AAAA,YAC9B,KAAKT;AAAA,YAEL,UAAAU,gBAAAA,EAAA;AAAA,cAACD;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,MAAM,EAAE,YAAY,WAAW;AAAA,kBAC/B,UAAU;AAAA,oBACR,MAAM;AAAA,sBACJ,MAAMhB;AAAA,sBACN,QAAQC;AAAA,oBACV;AAAA,kBACF;AAAA,gBACF;AAAA,gBAEA,UAAAgB,gBAAAA,EAAA;AAAA,kBAACC;AAAAA,kBAAA;AAAA,oBACC,OAAO;AAAA,sBACL,OAAOd;AAAA,sBACP,MAAM;AAAA,sBACN,QAAQD;AAAA,oBACV;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,QACAc,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,KAAKP;AAAA,YACL,WAAU;AAAA,YACV,IAAI;AAAA,cACF,GAAGH;AAAA,cACH,IAAAN;AAAA,cACA,OAAAE;AAAA,cACA,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,SAAS;AAAA,cACT,cACEH,MAAc,UAAU,kBAAkB;AAAA,cAC5C,KAAK;AAAA,cACL,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,OAAAE;AAAA,YACF;AAAA,YAEC,UAAAI;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"sd-component-library171.js","sources":["../src/components/tooltips/primary-info-tooltip/primary-info-tooltip.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { BaseInfoTooltip } from \"../base-info-tooltip\";\nimport { PrimaryInfoTooltipProps } from \"./interfaces\";\n\n/**\n * PrimaryInfoTooltip component.\n * @deprecated\n */\nexport const PrimaryInfoTooltip: React.FC<PrimaryInfoTooltipProps> = (\n  props\n) => {\n  const {\n    tooltipText,\n    placement,\n    bg = \"cl_purple\",\n    color = \"cl_white\",\n    width = [\"204px\"],\n    iconColor = \"#4568F9\",\n  } = props;\n  return (\n    <BaseInfoTooltip\n      data-test=\"primary-info-tooltip\"\n      {...props}\n      color={color}\n      bg={bg}\n      width={width}\n      placement={placement}\n      tooltipText={tooltipText}\n      iconColor={iconColor}\n    />\n  );\n};\n"],"names":["PrimaryInfoTooltip","props","tooltipText","placement","bg","color","width","iconColor","jsx","BaseInfoTooltip"],"mappings":";;AASa,MAAAA,IAAwD,CACnEC,MACG;AACG,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAAC,IAAK;AAAA,IACL,OAAAC,IAAQ;AAAA,IACR,OAAAC,IAAQ,CAAC,OAAO;AAAA,IAChB,WAAAC,IAAY;AAAA,EACV,IAAAN;AAEF,SAAAO,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACT,GAAGR;AAAA,MACJ,OAAAI;AAAA,MACA,IAAAD;AAAA,MACA,OAAAE;AAAA,MACA,WAAAH;AAAA,MACA,aAAAD;AAAA,MACA,WAAAK;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library172.js

@@ -1,98 +1,103 @@
-import { j as o } from "./sd-component-library196.js";
-import { useState as y, useRef as a } from "react";
-import { Box as z } from "rebass";
-import { useBreakPoints as B, useBodyScrollLock as C } from "./sd-component-library3.js";
-import E from "./sd-component-library252.js";
-import { TooltipWithPointerMobile as M } from "./sd-component-library275.js";
-import { TooltipWithPointerHorizontal as V } from "./sd-component-library276.js";
-import { TooltipWithPointerVertical as D } from "./sd-component-library277.js";
-const f = 200, J = (u) => {
+import { j as t } from "./sd-component-library197.js";
+import w, { useRef as c, useEffect as y } from "react";
+import { Box as o } from "rebass";
+import { ReactComponent as g } from "./sd-component-library275.js";
+const E = w.forwardRef((x, a) => {
   const {
-    children: x,
-    placement: s = "right",
-    tooltipOffset: h = 5,
-    pointerSize: d = 5,
-    tooltipPx: P = "10px",
-    tooltipPy: T = "5px",
-    tooltipWidth: j = "max-content",
-    tooltipVisible: S,
-    containerSx: b,
-    pointerSx: k,
-    showMobileVersion: l,
-    mobileTitle: w,
-    stopPropagation: R,
-    zIndex: W = 10,
-    pointerColor: p = "cl_purple",
-    ...r
-  } = u, { isDesktop: g } = B(), t = l !== void 0 ? l : !g, [c, O] = y(!1), v = (n) => {
-    R && n.stopPropagation(), O((e) => !e);
-  }, i = a(null), m = a(null);
-  return C(m.current, t && c), /* @__PURE__ */ o.jsxs(
-    z,
+    placement: e,
+    bg: r = "cl_purple",
+    color: p = "cl_white",
+    width: d = ["max-content"],
+    iconColor: m = "#4568F9",
+    iconWidth: h = "16px",
+    children: f,
+    ...u
+  } = x, i = c(null), n = c(null);
+  return y(() => {
+    if (i.current && n.current) {
+      const b = i.current, l = n.current;
+      if (e === "right") {
+        const s = window.getComputedStyle(b).width;
+        l.style.left = `${parseInt(s) + 10}px`;
+      } else {
+        const s = window.getComputedStyle(l).width;
+        l.style.left = `-${parseInt(s) + 10}px`;
+      }
+    }
+  }, [e]), /* @__PURE__ */ t.jsxs(
+    o,
     {
+      ref: a,
+      "data-testid": "react-element-tooltip",
       sx: {
-        width: "max-content",
         position: "relative",
-        ...b
+        ".content-box:hover": {
+          "+ .tooltip-box": {
+            opacity: 1,
+            visibility: "visible"
+          }
+        }
       },
-      ref: m,
-      onClick: t ? v : void 0,
-      "data-test": "tooltip-with-pointer",
       children: [
-        x,
-        /* @__PURE__ */ o.jsx(
-          E,
+        /* @__PURE__ */ t.jsx(
+          o,
           {
-            in: t ? c : S,
-            timeout: { enter: 0, exit: f },
-            mountOnEnter: !0,
-            unmountOnExit: !0,
-            nodeRef: i,
-            children: (n) => {
-              const e = {
-                placement: s,
-                animationDuration: f,
-                state: n,
-                pointerSize: d,
-                tooltipPx: P,
-                tooltipPy: T,
-                tooltipWidth: j,
-                tooltipOffset: h,
-                pointerSx: k,
-                pointerColor: p
-              };
-              return t ? /* @__PURE__ */ o.jsx(
-                M,
-                {
-                  ...r,
-                  zIndex: W,
-                  mobileTitle: w,
-                  pointerColor: p,
-                  ref: i
-                }
-              ) : ["left", "right"].includes(s) ? /* @__PURE__ */ o.jsx(
-                V,
-                {
-                  ...r,
-                  ...e,
-                  ref: i
-                }
-              ) : /* @__PURE__ */ o.jsx(
-                D,
-                {
-                  ...r,
-                  ...e,
-                  ref: i
-                }
-              );
-            }
+            className: "content-box",
+            sx: { maxWidth: "max-content" },
+            ref: i,
+            children: /* @__PURE__ */ t.jsx(
+              o,
+              {
+                sx: {
+                  path: { transition: "all 0.5s" },
+                  ":hover": {
+                    path: {
+                      fill: r,
+                      stroke: p
+                    }
+                  }
+                },
+                children: /* @__PURE__ */ t.jsx(
+                  g,
+                  {
+                    style: {
+                      width: h,
+                      fill: "none",
+                      stroke: m
+                    }
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          o,
+          {
+            ref: n,
+            className: "tooltip-box",
+            sx: {
+              ...u,
+              bg: r,
+              width: d,
+              transition: "all 0.5s",
+              position: "absolute",
+              padding: "20px",
+              borderRadius: e === "right" ? "0 5px 5px 5px" : "5px 0 5px 5px",
+              top: 0,
+              opacity: 0,
+              visibility: "hidden",
+              zIndex: 1,
+              color: p
+            },
+            children: f
           }
         )
       ]
     }
   );
-};
+});
 export {
-  J as TooltipWithPointer
+  E as ReactElementTooltip
 };
 //# sourceMappingURL=sd-component-library172.js.map