@selfdecode/sd-component-library 4.0.7-3.1 → 4.0.7-3.2

package/lib/sd-component-library265.js

@@ -1,12 +1,79 @@
-import * as e from "react";
-const t = (n) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 18 18", ...n }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, `
-            .info-icon-a {
-            stroke-linecap: round;
-            stroke-linejoin: round;
-            stroke-width: 2px;
-            }
-        `)), /* @__PURE__ */ e.createElement("g", { transform: "translate(1 1)" }, /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M19,11a8,8,0,1,1-8-8A8,8,0,0,1,19,11Z", transform: "translate(-3 -3)" }), /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M18,21.2V18", transform: "translate(-10 -10)" }), /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M18,12h0", transform: "translate(-10 -7.2)" })));
+import { j as r } from "./sd-component-library195.js";
+import { createElement as u } from "react";
+import { Box as i } from "rebass";
+import { TriangularPointerIcon as g } from "./sd-component-library189.js";
+import { HorizontalDivider as f } from "./sd-component-library51.js";
+import { OptionRow as w } from "./sd-component-library641.js";
+const k = 8, e = 5, c = k + 2 * e, l = c / 2, n = "cl_header", s = "cl_lightGrey", C = "46px", S = 4, v = (a) => {
+  const { isVisible: d, options: p, value: t, onChange: b } = a;
+  if (!d)
+    return null;
+  const x = (o) => () => b(o), h = [
+    t,
+    ...p.filter(({ id: o }) => o !== t.id)
+  ], m = `${c}px`;
+  return /* @__PURE__ */ r.jsxs(
+    i,
+    {
+      sx: {
+        minWidth: "100%",
+        position: "absolute",
+        top: "100%",
+        right: 0,
+        zIndex: 1,
+        cursor: "default"
+      },
+      children: [
+        /* @__PURE__ */ r.jsx(g, { direction: "top", mr: "15px", ml: "auto" }),
+        /* @__PURE__ */ r.jsx(f, { color: "cl_purple", height: "2px" }),
+        /* @__PURE__ */ r.jsx(
+          i,
+          {
+            sx: {
+              bg: "cl_white",
+              borderRadius: "0 0 3px 3px",
+              boxShadow: "0px 3px 10px #0000001A",
+              borderWidth: "1px",
+              borderColor: "cl_lightGrey",
+              borderStyle: "solid",
+              borderTopStyle: "none",
+              overflow: "auto",
+              maxHeight: `calc(${C} * ${S})`,
+              scrollbarWidth: "thin",
+              scrollbarColor: `${n} ${s}`,
+              "::-webkit-scrollbar-track": {
+                borderRadius: l,
+                bg: n,
+                border: `${e}px solid transparent`,
+                backgroundClip: "content-box"
+              },
+              "::-webkit-scrollbar": {
+                width: m,
+                bg: "transparent"
+              },
+              "::-webkit-scrollbar-thumb": {
+                borderRadius: l,
+                bg: s,
+                border: `${e}px solid transparent`,
+                backgroundClip: "content-box"
+              }
+            },
+            children: h.map((o) => /* @__PURE__ */ u(
+              w,
+              {
+                onClick: x(o),
+                ...o,
+                key: o.id,
+                currentSelection: t.id === o.id
+              }
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  t as ReactComponent
+  v as CustomScrollableOptionsBox
 };
 //# sourceMappingURL=sd-component-library265.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library265.js","sources":["../src/components/tooltips/base-info-tooltip/assets/info-icon.svg"],"sourcesContent":["export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxOCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGU+CiAgICAgICAgICAgIC5pbmZvLWljb24tYSB7CiAgICAgICAgICAgIHN0cm9rZS1saW5lY2FwOiByb3VuZDsKICAgICAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICAgICAgc3Ryb2tlLXdpZHRoOiAycHg7CiAgICAgICAgICAgIH0KICAgICAgICA8L3N0eWxlPgogICAgPC9kZWZzPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+CiAgICAgICAgPHBhdGggY2xhc3M9ImluZm8taWNvbi1hIiBkPSJNMTksMTFhOCw4LDAsMSwxLTgtOEE4LDgsMCwwLDEsMTksMTFaIgogICAgICAgICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zIC0zKSIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJpbmZvLWljb24tYSIgZD0iTTE4LDIxLjJWMTgiCiAgICAgICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwIC0xMCkiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iaW5mby1pY29uLWEiIGQ9Ik0xOCwxMmgwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAgLTcuMikiLz4KICAgIDwvZz4KPC9zdmc+Cg==\""],"names":["SvgInfoIcon","props","React"],"mappings":";AACK,MAACA,IAAc,CAACC,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,SAAS,aAAa,GAAGD,EAAO,GAAkB,gBAAAC,EAAM,cAAc,QAAQ,MAAsB,gBAAAA,EAAM,cAAc,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAgK,CAAC,GAAmB,gBAAAA,EAAM,cAAc,KAAK,EAAE,WAAW,iBAAgB,GAAoB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,yCAAyC,WAAW,oBAAoB,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,eAAe,WAAW,qBAAoB,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,YAAY,WAAW,sBAAuB,CAAA,CAAC,CAAC;"}
+{"version":3,"file":"sd-component-library265.js","sources":["../src/components/selectors/primary-custom-scrollable-selector/partials/custom-scrollable-options-box/custom-scrollable-options-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { HorizontalDivider } from \"../../../../dividers/horizontal-divider\";\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { SelectorOptionV2 } from \"../../../selector-v2\";\nimport { OptionRow } from \"../option-row\";\nimport { CustomScrollableOptionsBoxProps as Props } from \"./interfaces\";\n\nconst scrollbarWidth = 8;\nconst offset = 5;\nconst totalWidth = scrollbarWidth + 2 * offset;\nconst borderRadius = totalWidth / 2;\n\nconst trackColor = \"cl_header\";\nconst thumbColor = \"cl_lightGrey\";\nconst rowHeight = \"46px\";\nconst maxRows = 4;\n\nexport const CustomScrollableOptionsBox = <T extends string = string>(\n  props: Props<T>\n) => {\n  const { isVisible, options, value, onChange } = props;\n\n  if (!isVisible) return null;\n\n  const onSelect = (option: SelectorOptionV2<T>) => () => onChange(option);\n  const regroupedOptions = [\n    value,\n    ...options.filter(({ id }) => id !== value.id),\n  ];\n\n  const scrollbarWidthStr = `${totalWidth}px`;\n\n  return (\n    <Box\n      sx={{\n        minWidth: \"100%\",\n        position: \"absolute\",\n        top: \"100%\",\n        right: 0,\n        zIndex: 1,\n        cursor: \"default\",\n      }}\n    >\n      <TriangularPointerIcon direction=\"top\" mr=\"15px\" ml=\"auto\" />\n\n      <HorizontalDivider color=\"cl_purple\" height=\"2px\" />\n\n      <Box\n        sx={{\n          bg: \"cl_white\",\n          borderRadius: \"0 0 3px 3px\",\n          boxShadow: \"0px 3px 10px #0000001A\",\n          borderWidth: \"1px\",\n          borderColor: \"cl_lightGrey\",\n          borderStyle: \"solid\",\n          borderTopStyle: \"none\",\n          overflow: \"auto\",\n          maxHeight: `calc(${rowHeight} * ${maxRows})`,\n          scrollbarWidth: \"thin\",\n          scrollbarColor: `${trackColor} ${thumbColor}`,\n          \"::-webkit-scrollbar-track\": {\n            borderRadius,\n            bg: trackColor,\n            border: `${offset}px solid transparent`,\n            backgroundClip: \"content-box\",\n          },\n          \"::-webkit-scrollbar\": {\n            width: scrollbarWidthStr,\n            bg: \"transparent\",\n          },\n          \"::-webkit-scrollbar-thumb\": {\n            borderRadius,\n            bg: thumbColor,\n            border: `${offset}px solid transparent`,\n            backgroundClip: \"content-box\",\n          },\n        }}\n      >\n        {(regroupedOptions as SelectorOptionV2<T>[]).map((option) => (\n          <OptionRow\n            onClick={onSelect(option)}\n            {...option}\n            key={option.id}\n            currentSelection={value.id === option.id}\n          />\n        ))}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["scrollbarWidth","offset","totalWidth","borderRadius","trackColor","thumbColor","rowHeight","maxRows","CustomScrollableOptionsBox","props","isVisible","options","value","onChange","onSelect","option","regroupedOptions","id","scrollbarWidthStr","jsxs","Box","jsx","TriangularPointerIcon","HorizontalDivider","createElement","OptionRow"],"mappings":";;;;;;AAUA,MAAMA,IAAiB,GACjBC,IAAS,GACTC,IAAaF,IAAiB,IAAIC,GAClCE,IAAeD,IAAa,GAE5BE,IAAa,aACbC,IAAa,gBACbC,IAAY,QACZC,IAAU,GAEHC,IAA6B,CACxCC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,SAAAC,GAAS,OAAAC,GAAO,UAAAC,MAAaJ;AAEhD,MAAI,CAACC;AAAkB,WAAA;AAEvB,QAAMI,IAAW,CAACC,MAAgC,MAAMF,EAASE,CAAM,GACjEC,IAAmB;AAAA,IACvBJ;AAAA,IACA,GAAGD,EAAQ,OAAO,CAAC,EAAE,IAAAM,EAAG,MAAMA,MAAOL,EAAM,EAAE;AAAA,EAAA,GAGzCM,IAAoB,GAAGhB,CAAU;AAGrC,SAAAiB,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,MAACC,KAAsB,WAAU,OAAM,IAAG,QAAO,IAAG,QAAO;AAAA,QAE1DD,gBAAAA,EAAA,IAAAE,GAAA,EAAkB,OAAM,aAAY,QAAO,OAAM;AAAA,QAElDF,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,IAAI;AAAA,cACJ,cAAc;AAAA,cACd,WAAW;AAAA,cACX,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,cACb,gBAAgB;AAAA,cAChB,UAAU;AAAA,cACV,WAAW,QAAQd,CAAS,MAAMC,CAAO;AAAA,cACzC,gBAAgB;AAAA,cAChB,gBAAgB,GAAGH,CAAU,IAAIC,CAAU;AAAA,cAC3C,6BAA6B;AAAA,gBAC3B,cAAAF;AAAA,gBACA,IAAIC;AAAA,gBACJ,QAAQ,GAAGH,CAAM;AAAA,gBACjB,gBAAgB;AAAA,cAClB;AAAA,cACA,uBAAuB;AAAA,gBACrB,OAAOiB;AAAA,gBACP,IAAI;AAAA,cACN;AAAA,cACA,6BAA6B;AAAA,gBAC3B,cAAAf;AAAA,gBACA,IAAIE;AAAA,gBACJ,QAAQ,GAAGJ,CAAM;AAAA,gBACjB,gBAAgB;AAAA,cAClB;AAAA,YACF;AAAA,YAEE,UAAAe,EAA2C,IAAI,CAACD,MAChD,gBAAAS;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,SAASX,EAASC,CAAM;AAAA,gBACvB,GAAGA;AAAA,gBACJ,KAAKA,EAAO;AAAA,gBACZ,kBAAkBH,EAAM,OAAOG,EAAO;AAAA,cAAA;AAAA,YAAA,CAEzC;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library266.js

@@ -1,5 +1,12 @@
-var r = {};
+import * as e from "react";
+const t = (n) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 18 18", ...n }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, `
+            .info-icon-a {
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 2px;
+            }
+        `)), /* @__PURE__ */ e.createElement("g", { transform: "translate(1 1)" }, /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M19,11a8,8,0,1,1-8-8A8,8,0,0,1,19,11Z", transform: "translate(-3 -3)" }), /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M18,21.2V18", transform: "translate(-10 -10)" }), /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M18,12h0", transform: "translate(-10 -7.2)" })));
 export {
-  r as __exports
+  t as ReactComponent
 };
 //# sourceMappingURL=sd-component-library266.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library266.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"sd-component-library266.js","sources":["../src/components/tooltips/base-info-tooltip/assets/info-icon.svg"],"sourcesContent":["export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxOCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGU+CiAgICAgICAgICAgIC5pbmZvLWljb24tYSB7CiAgICAgICAgICAgIHN0cm9rZS1saW5lY2FwOiByb3VuZDsKICAgICAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICAgICAgc3Ryb2tlLXdpZHRoOiAycHg7CiAgICAgICAgICAgIH0KICAgICAgICA8L3N0eWxlPgogICAgPC9kZWZzPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+CiAgICAgICAgPHBhdGggY2xhc3M9ImluZm8taWNvbi1hIiBkPSJNMTksMTFhOCw4LDAsMSwxLTgtOEE4LDgsMCwwLDEsMTksMTFaIgogICAgICAgICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zIC0zKSIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJpbmZvLWljb24tYSIgZD0iTTE4LDIxLjJWMTgiCiAgICAgICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwIC0xMCkiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iaW5mby1pY29uLWEiIGQ9Ik0xOCwxMmgwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAgLTcuMikiLz4KICAgIDwvZz4KPC9zdmc+Cg==\""],"names":["SvgInfoIcon","props","React"],"mappings":";AACK,MAACA,IAAc,CAACC,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,SAAS,aAAa,GAAGD,EAAO,GAAkB,gBAAAC,EAAM,cAAc,QAAQ,MAAsB,gBAAAA,EAAM,cAAc,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAgK,CAAC,GAAmB,gBAAAA,EAAM,cAAc,KAAK,EAAE,WAAW,iBAAgB,GAAoB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,yCAAyC,WAAW,oBAAoB,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,eAAe,WAAW,qBAAoB,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,YAAY,WAAW,sBAAuB,CAAA,CAAC,CAAC;"}

package/lib/sd-component-library267.js

@@ -1,5 +1,54 @@
-var e = {};
+import { j as i } from "./sd-component-library195.js";
+import d from "react";
+import { FlexCenter as e } from "./sd-component-library37.js";
+import { ResponsiveTextV2 as r } from "./sd-component-library147.js";
+import { HorizontalDivider as m } from "./sd-component-library51.js";
+const g = d.forwardRef(
+  ({ mobileTitle: t, tooltipWidth: o, tooltipText: x, zIndex: h, pointerColor: n }, p) => /* @__PURE__ */ i.jsx(
+    e,
+    {
+      sx: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        bg: "#262626AA",
+        zIndex: h
+      },
+      ref: p,
+      children: /* @__PURE__ */ i.jsxs(
+        e,
+        {
+          flexDirection: "column",
+          sx: {
+            width: o,
+            maxWidth: "min(500px, calc(100vw - 30px))",
+            bg: "cl_white",
+            p: "20px",
+            borderRadius: "5px"
+          },
+          children: [
+            t && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+              /* @__PURE__ */ i.jsx(r, { maxWidth: "100%", fontSizeWeight: [16, "bold"], children: t }),
+              /* @__PURE__ */ i.jsx(
+                m,
+                {
+                  width: "min(50px, calc(100% - 40px))",
+                  color: n,
+                  height: "2px",
+                  m: "10px 0"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ i.jsx(r, { maxWidth: "100%", fontSizeWeight: [14, "regular"], children: x })
+          ]
+        }
+      )
+    }
+  )
+);
 export {
-  e as __exports
+  g as TooltipWithPointerMobile
 };
 //# sourceMappingURL=sd-component-library267.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library267.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"sd-component-library267.js","sources":["../src/components/tooltips/tooltip-with-pointer/partials/tooltip-with-pointer-mobile/tooltip-with-pointer-mobile.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { FlexCenter } from \"../../../../containers\";\nimport { HorizontalDivider } from \"../../../../dividers\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TooltipWithPointerProps } from \"../../interfaces\";\n\ntype Props = Pick<\n  TooltipWithPointerProps,\n  \"mobileTitle\" | \"tooltipText\" | \"tooltipWidth\" | \"zIndex\" | \"pointerColor\"\n>;\n\nexport const TooltipWithPointerMobile = React.forwardRef<HTMLDivElement, Props>(\n  ({ mobileTitle, tooltipWidth, tooltipText, zIndex, pointerColor }, ref) => {\n    return (\n      <FlexCenter\n        sx={{\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          width: \"100vw\",\n          height: \"100vh\",\n          bg: \"#262626AA\",\n          zIndex,\n        }}\n        ref={ref}\n      >\n        <FlexCenter\n          flexDirection=\"column\"\n          sx={{\n            width: tooltipWidth,\n            maxWidth: \"min(500px, calc(100vw - 30px))\",\n            bg: \"cl_white\",\n            p: \"20px\",\n            borderRadius: \"5px\",\n          }}\n        >\n          {mobileTitle && (\n            <>\n              <ResponsiveTextV2 maxWidth=\"100%\" fontSizeWeight={[16, \"bold\"]}>\n                {mobileTitle}\n              </ResponsiveTextV2>\n\n              <HorizontalDivider\n                width=\"min(50px, calc(100% - 40px))\"\n                color={pointerColor}\n                height=\"2px\"\n                m=\"10px 0\"\n              />\n            </>\n          )}\n\n          <ResponsiveTextV2 maxWidth=\"100%\" fontSizeWeight={[14, \"regular\"]}>\n            {tooltipText}\n          </ResponsiveTextV2>\n        </FlexCenter>\n      </FlexCenter>\n    );\n  }\n);\n"],"names":["TooltipWithPointerMobile","React","mobileTitle","tooltipWidth","tooltipText","zIndex","pointerColor","ref","jsx","FlexCenter","jsxs","Fragment","ResponsiveTextV2","HorizontalDivider"],"mappings":";;;;;AAYO,MAAMA,IAA2BC,EAAM;AAAA,EAC5C,CAAC,EAAE,aAAAC,GAAa,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,cAAAC,KAAgBC,MAE/DC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,QAAAJ;AAAA,MACF;AAAA,MACA,KAAAE;AAAA,MAEA,UAAAG,gBAAAA,EAAA;AAAA,QAACD;AAAA,QAAA;AAAA,UACC,eAAc;AAAA,UACd,IAAI;AAAA,YACF,OAAON;AAAA,YACP,UAAU;AAAA,YACV,IAAI;AAAA,YACJ,GAAG;AAAA,YACH,cAAc;AAAA,UAChB;AAAA,UAEC,UAAA;AAAA,YAAAD,KAEGQ,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,cAACH,gBAAAA,EAAAA,IAAAI,GAAA,EAAiB,UAAS,QAAO,gBAAgB,CAAC,IAAI,MAAM,GAC1D,UACHV,EAAA,CAAA;AAAA,cAEAM,gBAAAA,EAAA;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,OAAOP;AAAA,kBACP,QAAO;AAAA,kBACP,GAAE;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA,GACF;AAAA,YAGFE,gBAAAA,EAAAA,IAACI,KAAiB,UAAS,QAAO,gBAAgB,CAAC,IAAI,SAAS,GAC7D,UACHR,EAAA,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/lib/sd-component-library268.js

@@ -1,54 +1,93 @@
-import { j as i } from "./sd-component-library195.js";
-import d from "react";
-import { FlexCenter as e } from "./sd-component-library37.js";
-import { ResponsiveTextV2 as r } from "./sd-component-library147.js";
-import { HorizontalDivider as m } from "./sd-component-library51.js";
-const g = d.forwardRef(
-  ({ mobileTitle: t, tooltipWidth: o, tooltipText: x, zIndex: h, pointerColor: n }, p) => /* @__PURE__ */ i.jsx(
-    e,
-    {
+import { j as r } from "./sd-component-library195.js";
+import u from "react";
+import { Flex as j, Box as s } from "rebass";
+import { TriangularPointerIcon as x } from "./sd-component-library189.js";
+import { ResponsiveTextV2 as R } from "./sd-component-library147.js";
+const $ = u.forwardRef(
+  ({
+    pointerSx: n,
+    tooltipSx: d,
+    tooltipText: p,
+    tooltipWidth: l,
+    tooltipPy: a,
+    tooltipPx: h,
+    pointerSize: c,
+    tooltipOffset: i,
+    placement: t,
+    containerSx: y,
+    animationDuration: g,
+    state: m,
+    pointerColor: o
+  }, f) => {
+    const b = t === "right" ? {
+      left: "100%"
+    } : {
+      right: "100%"
+    }, e = {
+      size: `${c}px`,
+      color: o,
       sx: {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100vw",
-        height: "100vh",
-        bg: "#262626AA",
-        zIndex: h
-      },
-      ref: p,
-      children: /* @__PURE__ */ i.jsxs(
-        e,
-        {
-          flexDirection: "column",
-          sx: {
-            width: o,
-            maxWidth: "min(500px, calc(100vw - 30px))",
-            bg: "cl_white",
-            p: "20px",
-            borderRadius: "5px"
-          },
-          children: [
-            t && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-              /* @__PURE__ */ i.jsx(r, { maxWidth: "100%", fontSizeWeight: [16, "bold"], children: t }),
-              /* @__PURE__ */ i.jsx(
-                m,
-                {
-                  width: "min(50px, calc(100% - 40px))",
-                  color: n,
-                  height: "2px",
-                  m: "10px 0"
+        my: "auto",
+        ...n
+      }
+    };
+    return /* @__PURE__ */ r.jsxs(
+      j,
+      {
+        sx: {
+          position: "absolute",
+          top: "calc(50% - 14px)",
+          cursor: "default",
+          alignItems: "center",
+          opacity: m === "entered" ? 1 : 0,
+          transition: `opacity ${g}ms`,
+          zIndex: 1,
+          ...b,
+          ...d
+        },
+        ref: f,
+        "data-test": "tooltip-content",
+        children: [
+          t === "right" && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+            /* @__PURE__ */ r.jsx(s, { width: `${i}px` }),
+            /* @__PURE__ */ r.jsx(x, { direction: "left", ...e })
+          ] }),
+          /* @__PURE__ */ r.jsx(
+            R,
+            {
+              fontSizeWeight: [14, "regular"],
+              sx: {
+                width: l,
+                lineHeight: "16px",
+                bg: "cl_white",
+                px: h,
+                py: a,
+                borderColor: "cl_lightGrey",
+                borderWidth: "1px",
+                borderStyle: "solid",
+                ...t === "left" ? {
+                  borderRightWidth: "2px",
+                  borderRightColor: o,
+                  borderRadius: "3px 0 0 3px"
+                } : {
+                  borderLeftWidth: "2px",
+                  borderLeftColor: o,
+                  borderRadius: "0 3px 3px 0"
                 }
-              )
-            ] }),
-            /* @__PURE__ */ i.jsx(r, { maxWidth: "100%", fontSizeWeight: [14, "regular"], children: x })
-          ]
-        }
-      )
-    }
-  )
+              },
+              children: p
+            }
+          ),
+          t === "left" && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+            /* @__PURE__ */ r.jsx(x, { direction: "right", ...e }),
+            /* @__PURE__ */ r.jsx(s, { width: `${i}px` })
+          ] })
+        ]
+      }
+    );
+  }
 );
 export {
-  g as TooltipWithPointerMobile
+  $ as TooltipWithPointerHorizontal
 };
 //# sourceMappingURL=sd-component-library268.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library268.js","sources":["../src/components/tooltips/tooltip-with-pointer/partials/tooltip-with-pointer-mobile/tooltip-with-pointer-mobile.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { FlexCenter } from \"../../../../containers\";\nimport { HorizontalDivider } from \"../../../../dividers\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TooltipWithPointerProps } from \"../../interfaces\";\n\ntype Props = Pick<\n  TooltipWithPointerProps,\n  \"mobileTitle\" | \"tooltipText\" | \"tooltipWidth\" | \"zIndex\" | \"pointerColor\"\n>;\n\nexport const TooltipWithPointerMobile = React.forwardRef<HTMLDivElement, Props>(\n  ({ mobileTitle, tooltipWidth, tooltipText, zIndex, pointerColor }, ref) => {\n    return (\n      <FlexCenter\n        sx={{\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          width: \"100vw\",\n          height: \"100vh\",\n          bg: \"#262626AA\",\n          zIndex,\n        }}\n        ref={ref}\n      >\n        <FlexCenter\n          flexDirection=\"column\"\n          sx={{\n            width: tooltipWidth,\n            maxWidth: \"min(500px, calc(100vw - 30px))\",\n            bg: \"cl_white\",\n            p: \"20px\",\n            borderRadius: \"5px\",\n          }}\n        >\n          {mobileTitle && (\n            <>\n              <ResponsiveTextV2 maxWidth=\"100%\" fontSizeWeight={[16, \"bold\"]}>\n                {mobileTitle}\n              </ResponsiveTextV2>\n\n              <HorizontalDivider\n                width=\"min(50px, calc(100% - 40px))\"\n                color={pointerColor}\n                height=\"2px\"\n                m=\"10px 0\"\n              />\n            </>\n          )}\n\n          <ResponsiveTextV2 maxWidth=\"100%\" fontSizeWeight={[14, \"regular\"]}>\n            {tooltipText}\n          </ResponsiveTextV2>\n        </FlexCenter>\n      </FlexCenter>\n    );\n  }\n);\n"],"names":["TooltipWithPointerMobile","React","mobileTitle","tooltipWidth","tooltipText","zIndex","pointerColor","ref","jsx","FlexCenter","jsxs","Fragment","ResponsiveTextV2","HorizontalDivider"],"mappings":";;;;;AAYO,MAAMA,IAA2BC,EAAM;AAAA,EAC5C,CAAC,EAAE,aAAAC,GAAa,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,cAAAC,KAAgBC,MAE/DC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,QAAAJ;AAAA,MACF;AAAA,MACA,KAAAE;AAAA,MAEA,UAAAG,gBAAAA,EAAA;AAAA,QAACD;AAAA,QAAA;AAAA,UACC,eAAc;AAAA,UACd,IAAI;AAAA,YACF,OAAON;AAAA,YACP,UAAU;AAAA,YACV,IAAI;AAAA,YACJ,GAAG;AAAA,YACH,cAAc;AAAA,UAChB;AAAA,UAEC,UAAA;AAAA,YAAAD,KAEGQ,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,cAACH,gBAAAA,EAAAA,IAAAI,GAAA,EAAiB,UAAS,QAAO,gBAAgB,CAAC,IAAI,MAAM,GAC1D,UACHV,EAAA,CAAA;AAAA,cAEAM,gBAAAA,EAAA;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,OAAOP;AAAA,kBACP,QAAO;AAAA,kBACP,GAAE;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA,GACF;AAAA,YAGFE,gBAAAA,EAAAA,IAACI,KAAiB,UAAS,QAAO,gBAAgB,CAAC,IAAI,SAAS,GAC7D,UACHR,EAAA,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"sd-component-library268.js","sources":["../src/components/tooltips/tooltip-with-pointer/partials/tooltip-with-pointer-horizontal/tooltip-with-pointer-horizontal.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TooltipWithPointerPartialProps as Props } from \"../interfaces\";\n\nexport const TooltipWithPointerHorizontal = React.forwardRef<\n  HTMLDivElement,\n  Props\n>(\n  (\n    {\n      pointerSx,\n      tooltipSx,\n      tooltipText,\n      tooltipWidth,\n      tooltipPy,\n      tooltipPx,\n      pointerSize,\n      tooltipOffset,\n      placement,\n      containerSx,\n      animationDuration,\n      state,\n      pointerColor,\n    },\n    ref\n  ) => {\n    const tooltipContainerProps =\n      placement === \"right\"\n        ? {\n            left: \"100%\",\n          }\n        : {\n            right: \"100%\",\n          };\n\n    const pointerCommonProps = {\n      size: `${pointerSize}px`,\n      color: pointerColor,\n      sx: {\n        my: \"auto\",\n        ...pointerSx,\n      },\n    };\n\n    return (\n      <Flex\n        sx={{\n          position: \"absolute\",\n          top: \"calc(50% - 14px)\",\n          cursor: \"default\",\n          alignItems: \"center\",\n          opacity: state === \"entered\" ? 1 : 0,\n          transition: `opacity ${animationDuration}ms`,\n          zIndex: 1,\n          ...tooltipContainerProps,\n          ...tooltipSx,\n        }}\n        ref={ref}\n        data-test=\"tooltip-content\"\n      >\n        {placement === \"right\" && (\n          <>\n            <Box width={`${tooltipOffset}px`} />\n            <TriangularPointerIcon direction=\"left\" {...pointerCommonProps} />\n          </>\n        )}\n\n        <ResponsiveTextV2\n          fontSizeWeight={[14, \"regular\"]}\n          sx={{\n            width: tooltipWidth,\n            lineHeight: \"16px\",\n            bg: \"cl_white\",\n            px: tooltipPx,\n            py: tooltipPy,\n            borderColor: \"cl_lightGrey\",\n            borderWidth: \"1px\",\n            borderStyle: \"solid\",\n            ...(placement === \"left\"\n              ? {\n                  borderRightWidth: \"2px\",\n                  borderRightColor: pointerColor,\n                  borderRadius: \"3px 0 0 3px\",\n                }\n              : {\n                  borderLeftWidth: \"2px\",\n                  borderLeftColor: pointerColor,\n                  borderRadius: \"0 3px 3px 0\",\n                }),\n          }}\n        >\n          {tooltipText}\n        </ResponsiveTextV2>\n\n        {placement === \"left\" && (\n          <>\n            <TriangularPointerIcon direction=\"right\" {...pointerCommonProps} />\n            <Box width={`${tooltipOffset}px`} />\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n"],"names":["TooltipWithPointerHorizontal","React","pointerSx","tooltipSx","tooltipText","tooltipWidth","tooltipPy","tooltipPx","pointerSize","tooltipOffset","placement","containerSx","animationDuration","state","pointerColor","ref","tooltipContainerProps","pointerCommonProps","jsxs","Flex","Fragment","jsx","Box","TriangularPointerIcon","ResponsiveTextV2"],"mappings":";;;;;AAQO,MAAMA,IAA+BC,EAAM;AAAA,EAIhD,CACE;AAAA,IACE,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,KAEFC,MACG;AACG,UAAAC,IACJN,MAAc,UACV;AAAA,MACE,MAAM;AAAA,IAAA,IAER;AAAA,MACE,OAAO;AAAA,IAAA,GAGTO,IAAqB;AAAA,MACzB,MAAM,GAAGT,CAAW;AAAA,MACpB,OAAOM;AAAA,MACP,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,GAAGZ;AAAA,MACL;AAAA,IAAA;AAIA,WAAAgB,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,UAAU;AAAA,UACV,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,SAASN,MAAU,YAAY,IAAI;AAAA,UACnC,YAAY,WAAWD,CAAiB;AAAA,UACxC,QAAQ;AAAA,UACR,GAAGI;AAAA,UACH,GAAGb;AAAA,QACL;AAAA,QACA,KAAAY;AAAA,QACA,aAAU;AAAA,QAET,UAAA;AAAA,UAAAL,MAAc,WAEXQ,gBAAAA,EAAAA,KAAAE,EAAA,UAAA,EAAA,UAAA;AAAA,YAAAC,gBAAAA,EAAA,IAACC,GAAI,EAAA,OAAO,GAAGb,CAAa,MAAM;AAAA,YACjCY,gBAAAA,EAAA,IAAAE,GAAA,EAAsB,WAAU,QAAQ,GAAGN,EAAoB,CAAA;AAAA,UAAA,GAClE;AAAA,UAGFI,gBAAAA,EAAA;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,cAC9B,IAAI;AAAA,gBACF,OAAOnB;AAAA,gBACP,YAAY;AAAA,gBACZ,IAAI;AAAA,gBACJ,IAAIE;AAAA,gBACJ,IAAID;AAAA,gBACJ,aAAa;AAAA,gBACb,aAAa;AAAA,gBACb,aAAa;AAAA,gBACb,GAAII,MAAc,SACd;AAAA,kBACE,kBAAkB;AAAA,kBAClB,kBAAkBI;AAAA,kBAClB,cAAc;AAAA,gBAAA,IAEhB;AAAA,kBACE,iBAAiB;AAAA,kBACjB,iBAAiBA;AAAA,kBACjB,cAAc;AAAA,gBAChB;AAAA,cACN;AAAA,cAEC,UAAAV;AAAA,YAAA;AAAA,UACH;AAAA,UAECM,MAAc,UAEXQ,gBAAAA,EAAAA,KAAAE,EAAA,UAAA,EAAA,UAAA;AAAA,YAAAC,gBAAAA,EAAA,IAACE,GAAsB,EAAA,WAAU,SAAS,GAAGN,EAAoB,CAAA;AAAA,YAChEI,gBAAAA,EAAA,IAAAC,GAAA,EAAI,OAAO,GAAGb,CAAa,MAAM;AAAA,UAAA,GACpC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/lib/sd-component-library269.js

@@ -1,86 +1,88 @@
-import { j as r } from "./sd-component-library195.js";
-import u from "react";
+import { j as o } from "./sd-component-library195.js";
+import g from "react";
 import { Flex as j, Box as s } from "rebass";
-import { TriangularPointerIcon as x } from "./sd-component-library189.js";
-import { ResponsiveTextV2 as R } from "./sd-component-library147.js";
-const $ = u.forwardRef(
+import { TriangularPointerIcon as n } from "./sd-component-library189.js";
+import { ResponsiveTextV2 as y } from "./sd-component-library147.js";
+const w = g.forwardRef(
   ({
-    pointerSx: n,
-    tooltipSx: d,
-    tooltipText: p,
-    tooltipWidth: l,
-    tooltipPy: a,
-    tooltipPx: h,
-    pointerSize: c,
-    tooltipOffset: i,
+    pointerSx: x,
+    tooltipPx: p,
+    tooltipText: d,
+    tooltipSx: a,
+    tooltipPy: l,
+    tooltipOffset: e,
+    pointerSize: m,
+    tooltipWidth: c,
     placement: t,
-    containerSx: y,
-    animationDuration: g,
-    state: m,
-    pointerColor: o
-  }, f) => {
-    const b = t === "right" ? {
-      left: "100%"
+    state: h,
+    containerSx: R,
+    animationDuration: b,
+    pointerColor: r
+  }, u) => {
+    const f = t === "bottom" ? {
+      top: "100%"
     } : {
-      right: "100%"
-    }, e = {
-      size: `${c}px`,
-      color: o,
+      bottom: "100%"
+    }, i = {
+      size: `${m}px`,
+      color: r,
       sx: {
         my: "auto",
-        ...n
+        ...x
       }
     };
-    return /* @__PURE__ */ r.jsxs(
+    return /* @__PURE__ */ o.jsxs(
       j,
       {
+        flexDirection: "column",
         sx: {
           position: "absolute",
-          top: "calc(50% - 14px)",
+          left: "50%",
+          transform: "translateX(-50%)",
           cursor: "default",
           alignItems: "center",
-          opacity: m === "entered" ? 1 : 0,
-          transition: `opacity ${g}ms`,
+          opacity: h === "entered" ? 1 : 0,
+          transition: `opacity ${b}ms`,
           zIndex: 1,
-          ...b,
-          ...d
+          ...f,
+          ...a
         },
-        ref: f,
+        ref: u,
         "data-test": "tooltip-content",
         children: [
-          t === "right" && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-            /* @__PURE__ */ r.jsx(s, { width: `${i}px` }),
-            /* @__PURE__ */ r.jsx(x, { direction: "left", ...e })
+          t === "bottom" && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+            /* @__PURE__ */ o.jsx(s, { height: `${e}px` }),
+            /* @__PURE__ */ o.jsx(n, { direction: "top", ...i })
           ] }),
-          /* @__PURE__ */ r.jsx(
-            R,
+          /* @__PURE__ */ o.jsx(
+            y,
             {
               fontSizeWeight: [14, "regular"],
               sx: {
-                width: l,
+                width: c,
                 lineHeight: "16px",
                 bg: "cl_white",
-                px: h,
-                py: a,
+                px: p,
+                py: l,
                 borderColor: "cl_lightGrey",
                 borderWidth: "1px",
                 borderStyle: "solid",
-                ...t === "left" ? {
-                  borderRightWidth: "2px",
-                  borderRightColor: o,
-                  borderRadius: "3px 0 0 3px"
+                ...t === "top" ? {
+                  borderBottomWidth: "2px",
+                  borderBottomColor: r,
+                  borderRadius: "3px 3px 0 0"
                 } : {
-                  borderLeftWidth: "2px",
-                  borderLeftColor: o,
-                  borderRadius: "0 3px 3px 0"
+                  borderTopWidth: "2px",
+                  borderTopColor: r,
+                  borderRadius: "0 0 3px 3px"
                 }
               },
-              children: p
+              children: d
             }
           ),
-          t === "left" && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-            /* @__PURE__ */ r.jsx(x, { direction: "right", ...e }),
-            /* @__PURE__ */ r.jsx(s, { width: `${i}px` })
+          t === "top" && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+            /* @__PURE__ */ o.jsx(n, { direction: "bottom", ...i }),
+            /* @__PURE__ */ o.jsx(s, { height: `${e}px` })
           ] })
         ]
       }
@@ -88,6 +90,6 @@ const $ = u.forwardRef(
   }
 );
 export {
-  $ as TooltipWithPointerHorizontal
+  w as TooltipWithPointerVertical
 };
 //# sourceMappingURL=sd-component-library269.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library269.js","sources":["../src/components/tooltips/tooltip-with-pointer/partials/tooltip-with-pointer-horizontal/tooltip-with-pointer-horizontal.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TooltipWithPointerPartialProps as Props } from \"../interfaces\";\n\nexport const TooltipWithPointerHorizontal = React.forwardRef<\n  HTMLDivElement,\n  Props\n>(\n  (\n    {\n      pointerSx,\n      tooltipSx,\n      tooltipText,\n      tooltipWidth,\n      tooltipPy,\n      tooltipPx,\n      pointerSize,\n      tooltipOffset,\n      placement,\n      containerSx,\n      animationDuration,\n      state,\n      pointerColor,\n    },\n    ref\n  ) => {\n    const tooltipContainerProps =\n      placement === \"right\"\n        ? {\n            left: \"100%\",\n          }\n        : {\n            right: \"100%\",\n          };\n\n    const pointerCommonProps = {\n      size: `${pointerSize}px`,\n      color: pointerColor,\n      sx: {\n        my: \"auto\",\n        ...pointerSx,\n      },\n    };\n\n    return (\n      <Flex\n        sx={{\n          position: \"absolute\",\n          top: \"calc(50% - 14px)\",\n          cursor: \"default\",\n          alignItems: \"center\",\n          opacity: state === \"entered\" ? 1 : 0,\n          transition: `opacity ${animationDuration}ms`,\n          zIndex: 1,\n          ...tooltipContainerProps,\n          ...tooltipSx,\n        }}\n        ref={ref}\n        data-test=\"tooltip-content\"\n      >\n        {placement === \"right\" && (\n          <>\n            <Box width={`${tooltipOffset}px`} />\n            <TriangularPointerIcon direction=\"left\" {...pointerCommonProps} />\n          </>\n        )}\n\n        <ResponsiveTextV2\n          fontSizeWeight={[14, \"regular\"]}\n          sx={{\n            width: tooltipWidth,\n            lineHeight: \"16px\",\n            bg: \"cl_white\",\n            px: tooltipPx,\n            py: tooltipPy,\n            borderColor: \"cl_lightGrey\",\n            borderWidth: \"1px\",\n            borderStyle: \"solid\",\n            ...(placement === \"left\"\n              ? {\n                  borderRightWidth: \"2px\",\n                  borderRightColor: pointerColor,\n                  borderRadius: \"3px 0 0 3px\",\n                }\n              : {\n                  borderLeftWidth: \"2px\",\n                  borderLeftColor: pointerColor,\n                  borderRadius: \"0 3px 3px 0\",\n                }),\n          }}\n        >\n          {tooltipText}\n        </ResponsiveTextV2>\n\n        {placement === \"left\" && (\n          <>\n            <TriangularPointerIcon direction=\"right\" {...pointerCommonProps} />\n            <Box width={`${tooltipOffset}px`} />\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n"],"names":["TooltipWithPointerHorizontal","React","pointerSx","tooltipSx","tooltipText","tooltipWidth","tooltipPy","tooltipPx","pointerSize","tooltipOffset","placement","containerSx","animationDuration","state","pointerColor","ref","tooltipContainerProps","pointerCommonProps","jsxs","Flex","Fragment","jsx","Box","TriangularPointerIcon","ResponsiveTextV2"],"mappings":";;;;;AAQO,MAAMA,IAA+BC,EAAM;AAAA,EAIhD,CACE;AAAA,IACE,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,KAEFC,MACG;AACG,UAAAC,IACJN,MAAc,UACV;AAAA,MACE,MAAM;AAAA,IAAA,IAER;AAAA,MACE,OAAO;AAAA,IAAA,GAGTO,IAAqB;AAAA,MACzB,MAAM,GAAGT,CAAW;AAAA,MACpB,OAAOM;AAAA,MACP,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,GAAGZ;AAAA,MACL;AAAA,IAAA;AAIA,WAAAgB,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,UAAU;AAAA,UACV,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,SAASN,MAAU,YAAY,IAAI;AAAA,UACnC,YAAY,WAAWD,CAAiB;AAAA,UACxC,QAAQ;AAAA,UACR,GAAGI;AAAA,UACH,GAAGb;AAAA,QACL;AAAA,QACA,KAAAY;AAAA,QACA,aAAU;AAAA,QAET,UAAA;AAAA,UAAAL,MAAc,WAEXQ,gBAAAA,EAAAA,KAAAE,EAAA,UAAA,EAAA,UAAA;AAAA,YAAAC,gBAAAA,EAAA,IAACC,GAAI,EAAA,OAAO,GAAGb,CAAa,MAAM;AAAA,YACjCY,gBAAAA,EAAA,IAAAE,GAAA,EAAsB,WAAU,QAAQ,GAAGN,EAAoB,CAAA;AAAA,UAAA,GAClE;AAAA,UAGFI,gBAAAA,EAAA;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,cAC9B,IAAI;AAAA,gBACF,OAAOnB;AAAA,gBACP,YAAY;AAAA,gBACZ,IAAI;AAAA,gBACJ,IAAIE;AAAA,gBACJ,IAAID;AAAA,gBACJ,aAAa;AAAA,gBACb,aAAa;AAAA,gBACb,aAAa;AAAA,gBACb,GAAII,MAAc,SACd;AAAA,kBACE,kBAAkB;AAAA,kBAClB,kBAAkBI;AAAA,kBAClB,cAAc;AAAA,gBAAA,IAEhB;AAAA,kBACE,iBAAiB;AAAA,kBACjB,iBAAiBA;AAAA,kBACjB,cAAc;AAAA,gBAChB;AAAA,cACN;AAAA,cAEC,UAAAV;AAAA,YAAA;AAAA,UACH;AAAA,UAECM,MAAc,UAEXQ,gBAAAA,EAAAA,KAAAE,EAAA,UAAA,EAAA,UAAA;AAAA,YAAAC,gBAAAA,EAAA,IAACE,GAAsB,EAAA,WAAU,SAAS,GAAGN,EAAoB,CAAA;AAAA,YAChEI,gBAAAA,EAAA,IAAAC,GAAA,EAAI,OAAO,GAAGb,CAAa,MAAM;AAAA,UAAA,GACpC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"version":3,"file":"sd-component-library269.js","sources":["../src/components/tooltips/tooltip-with-pointer/partials/tooltip-with-pointer-vertical/tooltip-with-pointer-vertical.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TooltipWithPointerPartialProps as Props } from \"../interfaces\";\n\nexport const TooltipWithPointerVertical = React.forwardRef<\n  HTMLDivElement,\n  Props\n>(\n  (\n    {\n      pointerSx,\n      tooltipPx,\n      tooltipText,\n      tooltipSx,\n      tooltipPy,\n      tooltipOffset,\n      pointerSize,\n      tooltipWidth,\n      placement,\n      state,\n      containerSx,\n      animationDuration,\n      pointerColor,\n    },\n    ref\n  ) => {\n    const tooltipContainerProps =\n      placement === \"bottom\"\n        ? {\n            top: \"100%\",\n          }\n        : {\n            bottom: \"100%\",\n          };\n\n    const pointerCommonProps = {\n      size: `${pointerSize}px`,\n      color: pointerColor,\n      sx: {\n        my: \"auto\",\n        ...pointerSx,\n      },\n    };\n\n    return (\n      <Flex\n        flexDirection=\"column\"\n        sx={{\n          position: \"absolute\",\n          left: \"50%\",\n          transform: \"translateX(-50%)\",\n          cursor: \"default\",\n          alignItems: \"center\",\n          opacity: state === \"entered\" ? 1 : 0,\n          transition: `opacity ${animationDuration}ms`,\n          zIndex: 1,\n          ...tooltipContainerProps,\n          ...tooltipSx,\n        }}\n        ref={ref}\n        data-test=\"tooltip-content\"\n      >\n        {placement === \"bottom\" && (\n          <>\n            <Box height={`${tooltipOffset}px`} />\n            <TriangularPointerIcon direction=\"top\" {...pointerCommonProps} />\n          </>\n        )}\n\n        <ResponsiveTextV2\n          fontSizeWeight={[14, \"regular\"]}\n          sx={{\n            width: tooltipWidth,\n            lineHeight: \"16px\",\n            bg: \"cl_white\",\n            px: tooltipPx,\n            py: tooltipPy,\n            borderColor: \"cl_lightGrey\",\n            borderWidth: \"1px\",\n            borderStyle: \"solid\",\n            ...(placement === \"top\"\n              ? {\n                  borderBottomWidth: \"2px\",\n                  borderBottomColor: pointerColor,\n                  borderRadius: \"3px 3px 0 0\",\n                }\n              : {\n                  borderTopWidth: \"2px\",\n                  borderTopColor: pointerColor,\n                  borderRadius: \"0 0 3px 3px\",\n                }),\n          }}\n        >\n          {tooltipText}\n        </ResponsiveTextV2>\n\n        {placement === \"top\" && (\n          <>\n            <TriangularPointerIcon direction=\"bottom\" {...pointerCommonProps} />\n            <Box height={`${tooltipOffset}px`} />\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n"],"names":["TooltipWithPointerVertical","React","pointerSx","tooltipPx","tooltipText","tooltipSx","tooltipPy","tooltipOffset","pointerSize","tooltipWidth","placement","state","containerSx","animationDuration","pointerColor","ref","tooltipContainerProps","pointerCommonProps","jsxs","Flex","Fragment","jsx","Box","TriangularPointerIcon","ResponsiveTextV2"],"mappings":";;;;;AAQO,MAAMA,IAA6BC,EAAM;AAAA,EAI9C,CACE;AAAA,IACE,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,cAAAC;AAAA,KAEFC,MACG;AACG,UAAAC,IACJN,MAAc,WACV;AAAA,MACE,KAAK;AAAA,IAAA,IAEP;AAAA,MACE,QAAQ;AAAA,IAAA,GAGVO,IAAqB;AAAA,MACzB,MAAM,GAAGT,CAAW;AAAA,MACpB,OAAOM;AAAA,MACP,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,GAAGZ;AAAA,MACL;AAAA,IAAA;AAIA,WAAAgB,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,eAAc;AAAA,QACd,IAAI;AAAA,UACF,UAAU;AAAA,UACV,MAAM;AAAA,UACN,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,SAASR,MAAU,YAAY,IAAI;AAAA,UACnC,YAAY,WAAWE,CAAiB;AAAA,UACxC,QAAQ;AAAA,UACR,GAAGG;AAAA,UACH,GAAGX;AAAA,QACL;AAAA,QACA,KAAAU;AAAA,QACA,aAAU;AAAA,QAET,UAAA;AAAA,UAAAL,MAAc,YAEXQ,gBAAAA,EAAAA,KAAAE,EAAA,UAAA,EAAA,UAAA;AAAA,YAAAC,gBAAAA,EAAA,IAACC,GAAI,EAAA,QAAQ,GAAGf,CAAa,MAAM;AAAA,YAClCc,gBAAAA,EAAA,IAAAE,GAAA,EAAsB,WAAU,OAAO,GAAGN,EAAoB,CAAA;AAAA,UAAA,GACjE;AAAA,UAGFI,gBAAAA,EAAA;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,cAC9B,IAAI;AAAA,gBACF,OAAOf;AAAA,gBACP,YAAY;AAAA,gBACZ,IAAI;AAAA,gBACJ,IAAIN;AAAA,gBACJ,IAAIG;AAAA,gBACJ,aAAa;AAAA,gBACb,aAAa;AAAA,gBACb,aAAa;AAAA,gBACb,GAAII,MAAc,QACd;AAAA,kBACE,mBAAmB;AAAA,kBACnB,mBAAmBI;AAAA,kBACnB,cAAc;AAAA,gBAAA,IAEhB;AAAA,kBACE,gBAAgB;AAAA,kBAChB,gBAAgBA;AAAA,kBAChB,cAAc;AAAA,gBAChB;AAAA,cACN;AAAA,cAEC,UAAAV;AAAA,YAAA;AAAA,UACH;AAAA,UAECM,MAAc,SAEXQ,gBAAAA,EAAAA,KAAAE,EAAA,UAAA,EAAA,UAAA;AAAA,YAAAC,gBAAAA,EAAA,IAACE,GAAsB,EAAA,WAAU,UAAU,GAAGN,EAAoB,CAAA;AAAA,YACjEI,gBAAAA,EAAA,IAAAC,GAAA,EAAI,QAAQ,GAAGf,CAAa,MAAM;AAAA,UAAA,GACrC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/lib/sd-component-library27.js

@@ -1,6 +1,6 @@
 import { j as o } from "./sd-component-library195.js";
-import { LogoButton as e } from "./sd-component-library204.js";
-import { ReactComponent as r } from "./sd-component-library206.js";
+import { LogoButton as e } from "./sd-component-library206.js";
+import { ReactComponent as r } from "./sd-component-library208.js";
 const p = (t) => /* @__PURE__ */ o.jsx(
   e,
   {