@selfdecode/sd-component-library 4.0.73-vite4 → 4.0.73-vite5

package/lib/sd-component-library144.js

@@ -1,5 +1,5 @@
-import { j as t } from "./sd-component-library196.js";
-import { Text as s } from "./sd-component-library199.js";
+import { j as t } from "./sd-component-library195.js";
+import { Text as s } from "./sd-component-library196.js";
 const n = (r) => /* @__PURE__ */ t.jsx(s, { as: "span", className: "no-translate", ...r, children: r.children });
 export {
   n as NoTranslate

package/lib/sd-component-library145.js

@@ -1,4 +1,4 @@
-import { j as p } from "./sd-component-library196.js";
+import { j as p } from "./sd-component-library195.js";
 import { SD_WEIGHT_TO_WEIGHT_MAP as x } from "./sd-component-library146.js";
 import { BaseText as c } from "./sd-component-library134.js";
 const T = (e) => {

package/lib/sd-component-library147.js

@@ -1,12 +1,12 @@
-import { j as m } from "./sd-component-library196.js";
-import f from "./sd-component-library193.js";
+import { j as f } from "./sd-component-library195.js";
+import m from "react";
 import { BaseTextV2 as x } from "./sd-component-library135.js";
 import { SD_WEIGHT_TO_WEIGHT_MAP as c } from "./sd-component-library146.js";
-const R = f.forwardRef((e, s) => {
+const R = m.forwardRef((e, s) => {
   const { fontSizeWeight: r, ...i } = e, o = ((t) => Array.isArray(t[0]))(r) ? r : [r], a = o.map(([t]) => `${t}px`), n = o.map(
     ([t, p]) => c[p]
   );
-  return /* @__PURE__ */ m.jsx(
+  return /* @__PURE__ */ f.jsx(
     x,
     {
       ...i,

package/lib/sd-component-library148.js

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

package/lib/sd-component-library149.js

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

package/lib/sd-component-library15.js

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

package/lib/sd-component-library150.js

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

package/lib/sd-component-library151.js

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

package/lib/sd-component-library152.js

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

package/lib/sd-component-library153.js

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

package/lib/sd-component-library154.js

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

package/lib/sd-component-library155.js

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

package/lib/sd-component-library156.js

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

package/lib/sd-component-library157.js

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

package/lib/sd-component-library158.js

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

package/lib/sd-component-library159.js

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

package/lib/sd-component-library16.js

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

package/lib/sd-component-library160.js

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

package/lib/sd-component-library161.js

@@ -1,5 +1,5 @@
-import { j as t } from "./sd-component-library196.js";
-import o from "./sd-component-library193.js";
+import { j as t } from "./sd-component-library195.js";
+import o from "react";
 import { ResponsiveTextV2 as a } from "./sd-component-library147.js";
 const s = o.forwardRef(
   (e, r) => /* @__PURE__ */ t.jsx(a, { ...e, ref: r })

package/lib/sd-component-library162.js

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

package/lib/sd-component-library163.js

@@ -1,8 +1,8 @@
-import { j as t } from "./sd-component-library196.js";
-import r from "./sd-component-library193.js";
+import { j as t } from "./sd-component-library195.js";
+import r from "react";
 import { getResponsiveNumericArray as s, getResponsivePxArray as f } from "./sd-component-library4.js";
 import { RegularText as n, BoldText as i, SemiBoldText as x } from "./sd-component-library160.js";
-const l = r.forwardRef(
+const m = r.forwardRef(
   (e, o) => /* @__PURE__ */ t.jsx(
     n,
     {
@@ -60,7 +60,7 @@ export {
   T as MediumBoldResponsiveText,
   p as MediumRegularResponsiveText,
   c as MediumSemiBoldResponsiveText,
-  l as RegularResponsiveText,
+  m as RegularResponsiveText,
   u as SmallBoldResponsiveText
 };
 //# sourceMappingURL=sd-component-library163.js.map

package/lib/sd-component-library164.js

@@ -1,20 +1,20 @@
-import { j as o } from "./sd-component-library196.js";
-import h from "./sd-component-library193.js";
-import "./sd-component-library199.js";
+import { j as o } from "./sd-component-library195.js";
+import h from "react";
+import "./sd-component-library196.js";
 import { useHover as m } from "./sd-component-library3.js";
-import { Flex as s, Box as e } from "./sd-component-library200.js";
+import { Flex as s, Box as i } from "./sd-component-library197.js";
 import { ReactComponent as b } from "./sd-component-library186.js";
 import { HorizontalDivider as n } from "./sd-component-library51.js";
-import { TriangularPointerIcon as g } from "./sd-component-library189.js";
-import { ActionBox as u } from "./sd-component-library266.js";
+import { TriangularPointerIcon as u } from "./sd-component-library189.js";
+import { ActionBox as g } from "./sd-component-library234.js";
 const C = (x) => {
   const {
-    actions: i,
-    actionsBoxWidth: p = "max-content",
-    actionBoxPx: l,
+    actions: e,
+    actionsBoxWidth: l = "max-content",
+    actionBoxPx: p,
     actionBoxPy: a
   } = x, { isHover: t, hoverCallbacks: d } = m();
-  return i.length ? /* @__PURE__ */ o.jsxs(
+  return e.length ? /* @__PURE__ */ o.jsxs(
     s,
     {
       sx: {
@@ -48,25 +48,25 @@ const C = (x) => {
           }
         ),
         t && /* @__PURE__ */ o.jsxs(
-          e,
+          i,
           {
             sx: {
               position: "absolute",
               top: "calc(100% + 12px)",
               right: "-20px",
-              width: p
+              width: l
             },
             children: [
               /* @__PURE__ */ o.jsx(n, { color: "cl_purple", height: "2px" }),
               /* @__PURE__ */ o.jsx(
-                g,
+                u,
                 {
                   direction: "top",
                   sx: { position: "absolute", top: "-10px", right: "24px" }
                 }
               ),
               /* @__PURE__ */ o.jsx(
-                e,
+                i,
                 {
                   sx: {
                     position: "absolute",
@@ -78,7 +78,7 @@ const C = (x) => {
                 }
               ),
               /* @__PURE__ */ o.jsx(
-                e,
+                i,
                 {
                   sx: {
                     borderWidth: "1px",
@@ -89,9 +89,9 @@ const C = (x) => {
                     borderRadius: "0 0 3px 3px",
                     bg: "cl_white"
                   },
-                  children: i.map((r, c) => /* @__PURE__ */ o.jsxs(h.Fragment, { children: [
-                    /* @__PURE__ */ o.jsx(u, { ...r, px: l, py: a }),
-                    c !== i.length - 1 && /* @__PURE__ */ o.jsx(n, { color: "cl_headerLine" })
+                  children: e.map((r, c) => /* @__PURE__ */ o.jsxs(h.Fragment, { children: [
+                    /* @__PURE__ */ o.jsx(g, { ...r, px: p, py: a }),
+                    c !== e.length - 1 && /* @__PURE__ */ o.jsx(n, { color: "cl_headerLine" })
                   ] }, r.text))
                 }
               )

package/lib/sd-component-library165.js

@@ -1,8 +1,8 @@
-import { j as o } from "./sd-component-library196.js";
-import "./sd-component-library199.js";
+import { j as o } from "./sd-component-library195.js";
+import "./sd-component-library196.js";
 import { BaseTooltip as m } from "./sd-component-library166.js";
-import { Box as x } from "./sd-component-library200.js";
-import { ReactComponent as c } from "./sd-component-library286.js";
+import { Box as x } from "./sd-component-library197.js";
+import { ReactComponent as c } from "./sd-component-library278.js";
 const T = (r) => {
   const {
     tooltipText: s,

package/lib/sd-component-library166.js

@@ -1,29 +1,29 @@
-import { j as t } from "./sd-component-library196.js";
-import { r } from "./sd-component-library193.js";
-import "./sd-component-library199.js";
-import { Box as l } from "./sd-component-library200.js";
-import { TwelveRegular as u } from "./sd-component-library156.js";
-const B = (x) => {
+import { j as t } from "./sd-component-library195.js";
+import { useRef as x, useEffect as u } from "react";
+import "./sd-component-library196.js";
+import { Box as r } from "./sd-component-library197.js";
+import { TwelveRegular as f } from "./sd-component-library156.js";
+const w = (l) => {
   const {
     tooltipText: p,
     placement: o = "right",
-    children: a,
-    dontTranslate: c = !1,
+    children: c,
+    dontTranslate: a = !1,
     ...d
-  } = x, e = r.useRef(null), i = r.useRef(null);
-  return r.useEffect(() => {
+  } = l, e = x(null), i = x(null);
+  return u(() => {
     if (e.current && i.current) {
-      const m = e.current, s = i.current;
+      const m = e.current, n = i.current;
       if (o === "right") {
-        const n = window.getComputedStyle(m).width;
-        s.style.left = `${parseInt(n) + 10}px`;
+        const s = window.getComputedStyle(m).width;
+        n.style.left = `${parseInt(s) + 10}px`;
       } else {
-        const n = window.getComputedStyle(s).width;
-        s.style.left = `-${parseInt(n) + 10}px`;
+        const s = window.getComputedStyle(n).width;
+        n.style.left = `-${parseInt(s) + 10}px`;
       }
     }
   }, [o]), /* @__PURE__ */ t.jsxs(
-    l,
+    r,
     {
       "data-test": "base-tooltip",
       sx: {
@@ -37,18 +37,18 @@ const B = (x) => {
       },
       children: [
         /* @__PURE__ */ t.jsx(
-          l,
+          r,
           {
             className: "content-box",
             sx: {
               maxWidth: "max-content"
             },
             ref: e,
-            children: a
+            children: c
           }
         ),
         /* @__PURE__ */ t.jsx(
-          l,
+          r,
           {
             ref: i,
             className: "tooltip-box",
@@ -63,7 +63,7 @@ const B = (x) => {
               visibility: "hidden",
               zIndex: 1
             },
-            children: /* @__PURE__ */ t.jsx(u, { color: x.color, dontTranslate: c, children: p })
+            children: /* @__PURE__ */ t.jsx(f, { color: l.color, dontTranslate: a, children: p })
           }
         )
       ]
@@ -71,6 +71,6 @@ const B = (x) => {
   );
 };
 export {
-  B as BaseTooltip
+  w 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","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,SAAuB,IAAI,GAC1CC,IAAeD,SAAuB,IAAI;AAEhDE,SAAAA,EAAAA,UAAU,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;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,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;AAAAA,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;AAAAA,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-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","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;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,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;AAAAA,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;AAAAA,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-library167.js

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

package/lib/sd-component-library168.js

@@ -1,28 +1,28 @@
-import { j as t } from "./sd-component-library196.js";
-import w, { r as l } from "./sd-component-library193.js";
-import "./sd-component-library199.js";
-import { Box as o } from "./sd-component-library200.js";
-import { ReactComponent as y } from "./sd-component-library286.js";
-const E = w.forwardRef((x, a) => {
+import { j as t } from "./sd-component-library195.js";
+import w, { useRef as c, useEffect as y } from "react";
+import "./sd-component-library196.js";
+import { Box as o } from "./sd-component-library197.js";
+import { ReactComponent as g } from "./sd-component-library278.js";
+const I = w.forwardRef((x, a) => {
   const {
     placement: e,
-    bg: p = "cl_purple",
-    color: c = "cl_white",
+    bg: r = "cl_purple",
+    color: p = "cl_white",
     width: d = ["max-content"],
     iconColor: m = "#4568F9",
     iconWidth: h = "16px",
     children: f,
     ...u
-  } = x, i = l.useRef(null), n = l.useRef(null);
-  return l.useEffect(() => {
+  } = x, i = c(null), n = c(null);
+  return y(() => {
     if (i.current && n.current) {
       const b = i.current, s = n.current;
       if (e === "right") {
-        const r = window.getComputedStyle(b).width;
-        s.style.left = `${parseInt(r) + 10}px`;
+        const l = window.getComputedStyle(b).width;
+        s.style.left = `${parseInt(l) + 10}px`;
       } else {
-        const r = window.getComputedStyle(s).width;
-        s.style.left = `-${parseInt(r) + 10}px`;
+        const l = window.getComputedStyle(s).width;
+        s.style.left = `-${parseInt(l) + 10}px`;
       }
     }
   }, [e]), /* @__PURE__ */ t.jsxs(
@@ -53,13 +53,13 @@ const E = w.forwardRef((x, a) => {
                   path: { transition: "all 0.5s" },
                   ":hover": {
                     path: {
-                      fill: p,
-                      stroke: c
+                      fill: r,
+                      stroke: p
                     }
                   }
                 },
                 children: /* @__PURE__ */ t.jsx(
-                  y,
+                  g,
                   {
                     style: {
                       width: h,
@@ -79,7 +79,7 @@ const E = w.forwardRef((x, a) => {
             className: "tooltip-box",
             sx: {
               ...u,
-              bg: p,
+              bg: r,
               width: d,
               transition: "all 0.5s",
               position: "absolute",
@@ -89,7 +89,7 @@ const E = w.forwardRef((x, a) => {
               opacity: 0,
               visibility: "hidden",
               zIndex: 1,
-              color: c
+              color: p
             },
             children: f
           }
@@ -99,6 +99,6 @@ const E = w.forwardRef((x, a) => {
   );
 });
 export {
-  E as ReactElementTooltip
+  I 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","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,SAAuB,IAAI,GAC1CC,IAAeD,SAAuB,IAAI;AAEhDE,SAAAA,EAAAA,UAAU,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;AAAAA,IAAA;AAAA,MACC,KAAAlB;AAAA,MACA,aAAU;AAAA,MACV,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;AAAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,EAAE,UAAU,cAAc;AAAA,YAC9B,KAAKT;AAAA,YAEL,UAAAU,gBAAAA,EAAA;AAAA,cAACD;AAAAA,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;AAAAA,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-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","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;AAAAA,IAAA;AAAA,MACC,KAAAlB;AAAA,MACA,aAAU;AAAA,MACV,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;AAAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,EAAE,UAAU,cAAc;AAAA,YAC9B,KAAKT;AAAA,YAEL,UAAAU,gBAAAA,EAAA;AAAA,cAACD;AAAAA,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;AAAAA,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;"}