@selfdecode/sd-component-library 4.0.140 → 4.0.141

package/lib/sd-component-library265.js

@@ -1,93 +1,125 @@
-import { j as r } from "./sd-component-library197.js";
-import u from "react";
-import { Flex as j, Box as s } from "rebass";
-import { TriangularPointerIcon as x } from "./sd-component-library191.js";
-import { ResponsiveTextV2 as R } from "./sd-component-library150.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,
+import { j as i } from "./sd-component-library197.js";
+import { useRef as B, useEffect as L } from "react";
+import { Box as s } from "rebass";
+import { ResponsiveTextV2 as V } from "./sd-component-library150.js";
+const R = ({
+  id: b,
+  label: g,
+  color: a,
+  activeColor: x,
+  borderColor: r,
+  borderWidth: p,
+  borderRadius: o,
+  selectedIndex: e,
+  idx: n,
+  onSelect: S,
+  dashWidth: $ = 20,
+  dashHeight: j = 3,
+  px: u,
+  fontSize: v,
+  totalTabs: y,
+  topAdditionalOffset: w = 8,
+  bottomAdditionalOffset: T = 4,
+  scrollOnChange: l = !0
+}) => {
+  const c = B(null), t = e === n;
+  L(() => {
+    var h;
+    t && l && ((h = c.current) == null || h.scrollIntoView({
+      behavior: "smooth",
+      inline: "center",
+      block: "end"
+    }));
+  }, [t, l]);
+  const f = e === n + 1, m = e !== -1 && e === n - 1, z = n === y - 1;
+  return /* @__PURE__ */ i.jsxs(
+    s,
+    {
+      onClick: () => S(b),
       sx: {
-        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"
-                }
-              },
-              children: p
+        cursor: "pointer",
+        position: "relative",
+        left: `-${n > e ? 2 : n == e ? 1 : 0}px`,
+        zIndex: t ? 1 : 0
+      },
+      ref: c,
+      children: [
+        /* @__PURE__ */ i.jsx(
+          s,
+          {
+            sx: {
+              height: `${o + w}px`,
+              borderWidth: p,
+              borderColor: r,
+              borderStyle: t ? "solid" : "none",
+              borderBottomStyle: "none",
+              borderRadius: t ? `${o}px ${o}px 0 0` : z ? `0 ${o}px 0 0` : void 0,
+              bg: "cl_white"
             }
-          ),
-          t === "left" && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-            /* @__PURE__ */ r.jsx(x, { direction: "right", ...e }),
-            /* @__PURE__ */ r.jsx(s, { width: `${i}px` })
-          ] })
-        ]
-      }
-    );
-  }
-);
+          }
+        ),
+        /* @__PURE__ */ i.jsx(
+          s,
+          {
+            sx: {
+              borderWidth: p,
+              borderColor: r,
+              borderStyle: t ? "none solid" : "none",
+              boxSizing: "content-box"
+            },
+            children: /* @__PURE__ */ i.jsx(
+              V,
+              {
+                fontSizeWeight: [v, "bold"],
+                textTransform: "uppercase",
+                color: t ? x : a,
+                sx: {
+                  bg: "cl_white",
+                  letterSpacing: "1px",
+                  px: u
+                },
+                children: g
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ i.jsx(
+          s,
+          {
+            sx: {
+              height: `${o + T}px`,
+              borderWidth: p,
+              borderColor: r,
+              borderBottomStyle: t ? "none" : "solid",
+              borderLeftStyle: m ? "solid" : "none",
+              borderRightStyle: f ? "solid" : "none",
+              borderTopStyle: "none",
+              borderRadius: `0 0 ${f ? o : 0}px ${m ? o : 0}px`,
+              bg: "cl_white",
+              mx: t ? "1px" : void 0
+            }
+          }
+        ),
+        t && /* @__PURE__ */ i.jsx(
+          s,
+          {
+            sx: {
+              bg: x,
+              height: `${j}px`,
+              width: `${$}px`,
+              position: "absolute",
+              left: "50%",
+              bottom: 0,
+              transform: "translateX(-50%)",
+              borderRadius: "1px"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  $ as TooltipWithPointerHorizontal
+  R as TabV2
 };
 //# 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/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-library265.js","sources":["../src/components/tabs/tab-bar-v2/partials/tab-v2/tab-v2.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TabV2Props as Props } from \"./interfaces\";\n\nexport const TabV2: React.FC<Props> = ({\n  id,\n  label,\n  color,\n  activeColor,\n  borderColor,\n  borderWidth,\n  borderRadius,\n  selectedIndex,\n  idx,\n  onSelect,\n  dashWidth = 20,\n  dashHeight = 3,\n  px,\n  fontSize,\n  totalTabs,\n  topAdditionalOffset = 8,\n  bottomAdditionalOffset = 4,\n  scrollOnChange = true,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const active = selectedIndex === idx;\n\n  useEffect(() => {\n    if (active && scrollOnChange)\n      ref.current?.scrollIntoView({\n        behavior: \"smooth\",\n        inline: \"center\",\n        block: \"end\",\n      });\n  }, [active, scrollOnChange]);\n\n  const atLeftOfActive = selectedIndex === idx + 1;\n  const atRightOfActive = selectedIndex !== -1 && selectedIndex === idx - 1;\n  const isLast = idx === totalTabs - 1;\n\n  return (\n    <Box\n      onClick={() => onSelect(id)}\n      sx={{\n        cursor: \"pointer\",\n        position: \"relative\",\n        left: `-${idx > selectedIndex ? 2 : idx == selectedIndex ? 1 : 0}px`,\n        zIndex: active ? 1 : 0,\n      }}\n      ref={ref}\n    >\n      <Box\n        sx={{\n          height: `${borderRadius + topAdditionalOffset}px`,\n          borderWidth,\n          borderColor,\n          borderStyle: active ? \"solid\" : \"none\",\n          borderBottomStyle: \"none\",\n          borderRadius: active\n            ? `${borderRadius}px ${borderRadius}px 0 0`\n            : isLast\n            ? `0 ${borderRadius}px 0 0`\n            : undefined,\n          bg: \"cl_white\",\n        }}\n      />\n\n      <Box\n        sx={{\n          borderWidth,\n          borderColor,\n          borderStyle: active ? \"none solid\" : \"none\",\n          boxSizing: \"content-box\",\n        }}\n      >\n        <ResponsiveTextV2\n          fontSizeWeight={[fontSize, \"bold\"]}\n          textTransform=\"uppercase\"\n          color={active ? activeColor : color}\n          sx={{\n            bg: \"cl_white\",\n            letterSpacing: \"1px\",\n            px,\n          }}\n        >\n          {label}\n        </ResponsiveTextV2>\n      </Box>\n\n      <Box\n        sx={{\n          height: `${borderRadius + bottomAdditionalOffset}px`,\n          borderWidth,\n          borderColor,\n          borderBottomStyle: active ? \"none\" : \"solid\",\n          borderLeftStyle: atRightOfActive ? \"solid\" : \"none\",\n          borderRightStyle: atLeftOfActive ? \"solid\" : \"none\",\n          borderTopStyle: \"none\",\n          borderRadius: `0 0 ${atLeftOfActive ? borderRadius : 0}px ${\n            atRightOfActive ? borderRadius : 0\n          }px`,\n          bg: \"cl_white\",\n          mx: active ? \"1px\" : undefined,\n        }}\n      />\n\n      {active && (\n        <Box\n          sx={{\n            bg: activeColor,\n            height: `${dashHeight}px`,\n            width: `${dashWidth}px`,\n            position: \"absolute\",\n            left: \"50%\",\n            bottom: 0,\n            transform: \"translateX(-50%)\",\n            borderRadius: \"1px\",\n          }}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":["TabV2","id","label","color","activeColor","borderColor","borderWidth","borderRadius","selectedIndex","idx","onSelect","dashWidth","dashHeight","px","fontSize","totalTabs","topAdditionalOffset","bottomAdditionalOffset","scrollOnChange","ref","useRef","active","useEffect","_a","atLeftOfActive","atRightOfActive","isLast","jsxs","Box","jsx","ResponsiveTextV2"],"mappings":"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"}

package/lib/sd-component-library266.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library266.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;"}
+{"version":3,"file":"sd-component-library266.js","sources":["../src/components/tabs/tabs-menu/partials/scrollable-tab-wrapper/scrollable-tab-wrapper.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ScrollableTabWrapperProps as Props } from \"./interfaces\";\n\nexport const ScrollableTabWrapper: React.FC<Props> = (props) => {\n  const { hash, selectedTab, autoScrollTabs, scrollTabOnSelect, children } =\n    props;\n\n  const tabRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!autoScrollTabs) return;\n\n    /**\n     * If current tab is the selected one, call the callback to scroll the tab.\n     */\n    if (selectedTab === hash && tabRef.current) {\n      scrollTabOnSelect(tabRef);\n    }\n  }, [selectedTab, hash, autoScrollTabs, tabRef, scrollTabOnSelect]);\n\n  return (\n    <Box data-test=\"scrollable-tab-wrapper\" ref={tabRef}>\n      {children}\n    </Box>\n  );\n};\n"],"names":["ScrollableTabWrapper","props","hash","selectedTab","autoScrollTabs","scrollTabOnSelect","children","tabRef","useRef","useEffect","Box"],"mappings":";;;AAMa,MAAAA,IAAwC,CAACC,MAAU;AAC9D,QAAM,EAAE,MAAAC,GAAM,aAAAC,GAAa,gBAAAC,GAAgB,mBAAAC,GAAmB,UAAAC,EAC5D,IAAAL,GAEIM,IAASC,EAAuB,IAAI;AAE1C,SAAAC,EAAU,MAAM;AACd,IAAKL,KAKDD,MAAgBD,KAAQK,EAAO,WACjCF,EAAkBE,CAAM;AAAA,EAC1B,GACC,CAACJ,GAAaD,GAAME,GAAgBG,GAAQF,CAAiB,CAAC,yBAG9DK,GAAI,EAAA,aAAU,0BAAyB,KAAKH,GAC1C,UAAAD,EACH,CAAA;AAEJ;"}

package/lib/sd-component-library267.js

@@ -1,33 +1,53 @@
-import { j as r } from "./sd-component-library197.js";
-import { ReactComponent as s } from "./sd-component-library193.js";
-import { FlexItemsCenter as i } from "./sd-component-library34.js";
-const l = ({ width: e, direction: t, onClick: o }) => /* @__PURE__ */ r.jsx(
-  i,
-  {
-    justifyContent: t === "right" ? "flex-end" : "flex-start",
-    sx: {
-      position: "absolute",
-      ...t === "right" ? { right: 0 } : 0,
-      top: 0,
-      width: e,
-      height: "100%",
-      stroke: "cl_blue",
-      cursor: "pointer",
-      bg: "cl_white",
-      ":hover": { stroke: "cl_purple" },
-      zIndex: 1
-    },
-    onClick: o,
-    children: /* @__PURE__ */ r.jsx(
-      s,
-      {
-        width: "18px",
-        transform: `rotate(${t === "right" ? 180 : 0})`
-      }
-    )
-  }
-);
+import { j as o } from "./sd-component-library197.js";
+import { ThirteenBold as h } from "./sd-component-library154.js";
+import { Button as m } from "./sd-component-library24.js";
+import { MaxMaxContainer as d } from "./sd-component-library40.js";
+const T = (s) => {
+  const {
+    Icon: i,
+    iconHeight: n,
+    title: l,
+    isActive: r,
+    hash: t,
+    onTabSelect: c,
+    enableScroll: a,
+    activeColor: e,
+    history: p
+  } = s, x = a ? {
+    scrollTo: t
+  } : {};
+  return /* @__PURE__ */ o.jsx(
+    m,
+    {
+      bg: "transparent",
+      onClick: () => c(t),
+      history: p,
+      "data-testid": `tab-${t}`,
+      ...x,
+      children: /* @__PURE__ */ o.jsxs(d, { gap: ["15px", "20px"], children: [
+        /* @__PURE__ */ o.jsx(
+          i,
+          {
+            style: {
+              height: n,
+              fill: r ? e : "#434A54"
+            }
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          h,
+          {
+            textTransform: "uppercase",
+            color: r ? e : "#434A54",
+            cursor: "pointer",
+            children: l
+          }
+        )
+      ] })
+    }
+  );
+};
 export {
-  l as ArrowButton
+  T as Tab
 };
 //# sourceMappingURL=sd-component-library267.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library267.js","sources":["../src/components/tabs/tab-bar/partials/arrow-button/arrow-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { FlexItemsCenter } from \"../../../../containers\";\nimport { ThinArrowLeftIcon } from \"../../../../icons\";\nimport { ArrowButtonProps as Props } from \"./interfaces\";\n\nexport const ArrowButton: React.FC<Props> = ({ width, direction, onClick }) => {\n  return (\n    <FlexItemsCenter\n      justifyContent={direction === \"right\" ? \"flex-end\" : \"flex-start\"}\n      sx={{\n        position: \"absolute\",\n        ...(direction === \"right\" ? { right: 0 } : { left: 0 } ? 0 : undefined),\n        top: 0,\n        width,\n        height: \"100%\",\n        stroke: \"cl_blue\",\n        cursor: \"pointer\",\n        bg: \"cl_white\",\n        \":hover\": { stroke: \"cl_purple\" },\n        zIndex: 1,\n      }}\n      onClick={onClick}\n    >\n      <ThinArrowLeftIcon\n        width=\"18px\"\n        transform={`rotate(${direction === \"right\" ? 180 : 0})`}\n      />\n    </FlexItemsCenter>\n  );\n};\n"],"names":["ArrowButton","width","direction","onClick","jsx","FlexItemsCenter","ThinArrowLeftIcon"],"mappings":";;;AAMO,MAAMA,IAA+B,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,SAAAC,QAE7DC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAgBH,MAAc,UAAU,aAAa;AAAA,IACrD,IAAI;AAAA,MACF,UAAU;AAAA,MACV,GAAIA,MAAc,UAAU,EAAE,OAAO,EAAE,IAAkB;AAAA,MACzD,KAAK;AAAA,MACL,OAAAD;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,UAAU,EAAE,QAAQ,YAAY;AAAA,MAChC,QAAQ;AAAA,IACV;AAAA,IACA,SAAAE;AAAA,IAEA,UAAAC,gBAAAA,EAAA;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,WAAW,UAAUJ,MAAc,UAAU,MAAM,CAAC;AAAA,MAAA;AAAA,IACtD;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"sd-component-library267.js","sources":["../src/components/tabs/tabs-menu/partials/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Button, MaxMaxContainer, ThirteenBold } from \"../../../../..\";\nimport { TabProps } from \"./interfaces\";\n\n/**\n * Tab component to render a single tab button.\n */\nexport const Tab: React.FC<TabProps> = (props) => {\n  const {\n    Icon,\n    iconHeight,\n    title,\n    isActive,\n    hash,\n    onTabSelect,\n    enableScroll,\n    activeColor,\n    history,\n  } = props;\n\n  const scrollProps = enableScroll\n    ? {\n        scrollTo: hash,\n      }\n    : {};\n\n  return (\n    <Button\n      bg=\"transparent\"\n      onClick={() => onTabSelect(hash)}\n      history={history}\n      data-testid={`tab-${hash}`}\n      {...scrollProps}\n    >\n      <MaxMaxContainer gap={[\"15px\", \"20px\"]}>\n        <Icon\n          style={{\n            height: iconHeight,\n            fill: isActive ? activeColor : \"#434A54\",\n          }}\n        />\n        <ThirteenBold\n          textTransform=\"uppercase\"\n          color={isActive ? activeColor : \"#434A54\"}\n          cursor=\"pointer\"\n        >\n          {title}\n        </ThirteenBold>\n      </MaxMaxContainer>\n    </Button>\n  );\n};\n"],"names":["Tab","props","Icon","iconHeight","title","isActive","hash","onTabSelect","enableScroll","activeColor","history","scrollProps","jsx","Button","MaxMaxContainer","ThirteenBold"],"mappings":";;;;AAQa,MAAAA,IAA0B,CAACC,MAAU;AAC1C,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAAT,GAEEU,IAAcH,IAChB;AAAA,IACE,UAAUF;AAAA,MAEZ;AAGF,SAAAM,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,SAAS,MAAMN,EAAYD,CAAI;AAAA,MAC/B,SAAAI;AAAA,MACA,eAAa,OAAOJ,CAAI;AAAA,MACvB,GAAGK;AAAA,MAEJ,iCAACG,GAAgB,EAAA,KAAK,CAAC,QAAQ,MAAM,GACnC,UAAA;AAAA,QAAAF,gBAAAA,EAAA;AAAA,UAACV;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQC;AAAA,cACR,MAAME,IAAWI,IAAc;AAAA,YACjC;AAAA,UAAA;AAAA,QACF;AAAA,QACAG,gBAAAA,EAAA;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAOV,IAAWI,IAAc;AAAA,YAChC,QAAO;AAAA,YAEN,UAAAL;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library268.js

@@ -1,24 +1,33 @@
-import { j as e } from "./sd-component-library197.js";
-import { Box as n } from "rebass";
-const g = ({ width: s, direction: t, offset: o }) => {
-  const r = "#000000AA", a = "#00000000";
-  return /* @__PURE__ */ e.jsx(
-    n,
-    {
-      sx: {
-        position: "absolute",
-        top: 0,
-        left: t === "left" ? o : void 0,
-        right: t === "right" ? o : void 0,
-        height: "100%",
-        width: s,
-        background: `transparent linear-gradient(-90deg, ${t === "left" ? a : r} 0%, ${t === "right" ? a : r} 100%) 0% 0% no-repeat padding-box`,
-        opacity: 0.05
+import { j as r } from "./sd-component-library197.js";
+import { ReactComponent as s } from "./sd-component-library193.js";
+import { FlexItemsCenter as i } from "./sd-component-library34.js";
+const l = ({ width: e, direction: t, onClick: o }) => /* @__PURE__ */ r.jsx(
+  i,
+  {
+    justifyContent: t === "right" ? "flex-end" : "flex-start",
+    sx: {
+      position: "absolute",
+      ...t === "right" ? { right: 0 } : 0,
+      top: 0,
+      width: e,
+      height: "100%",
+      stroke: "cl_blue",
+      cursor: "pointer",
+      bg: "cl_white",
+      ":hover": { stroke: "cl_purple" },
+      zIndex: 1
+    },
+    onClick: o,
+    children: /* @__PURE__ */ r.jsx(
+      s,
+      {
+        width: "18px",
+        transform: `rotate(${t === "right" ? 180 : 0})`
       }
-    }
-  );
-};
+    )
+  }
+);
 export {
-  g as Mask
+  l as ArrowButton
 };
 //# 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/tabs/tab-bar/partials/mask/mask.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { MaskProps as Props } from \"./interfaces\";\n\nexport const Mask: React.FC<Props> = ({ width, direction, offset }) => {\n  const startColor = \"#000000AA\";\n  const endColor = \"#00000000\";\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        top: 0,\n        left: direction === \"left\" ? offset : undefined,\n        right: direction === \"right\" ? offset : undefined,\n        height: \"100%\",\n        width,\n        background: `transparent linear-gradient(-90deg, ${\n          direction === \"left\" ? endColor : startColor\n        } 0%, ${\n          direction === \"right\" ? endColor : startColor\n        } 100%) 0% 0% no-repeat padding-box`,\n        opacity: 0.05,\n      }}\n    />\n  );\n};\n"],"names":["Mask","width","direction","offset","startColor","endColor","jsx","Box"],"mappings":";;AAMO,MAAMA,IAAwB,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,QAAAC,QAAa;AACrE,QAAMC,IAAa,aACbC,IAAW;AAGf,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAML,MAAc,SAASC,IAAS;AAAA,QACtC,OAAOD,MAAc,UAAUC,IAAS;AAAA,QACxC,QAAQ;AAAA,QACR,OAAAF;AAAA,QACA,YAAY,uCACVC,MAAc,SAASG,IAAWD,CACpC,QACEF,MAAc,UAAUG,IAAWD,CACrC;AAAA,QACA,SAAS;AAAA,MACX;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library268.js","sources":["../src/components/tabs/tab-bar/partials/arrow-button/arrow-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { FlexItemsCenter } from \"../../../../containers\";\nimport { ThinArrowLeftIcon } from \"../../../../icons\";\nimport { ArrowButtonProps as Props } from \"./interfaces\";\n\nexport const ArrowButton: React.FC<Props> = ({ width, direction, onClick }) => {\n  return (\n    <FlexItemsCenter\n      justifyContent={direction === \"right\" ? \"flex-end\" : \"flex-start\"}\n      sx={{\n        position: \"absolute\",\n        ...(direction === \"right\" ? { right: 0 } : { left: 0 } ? 0 : undefined),\n        top: 0,\n        width,\n        height: \"100%\",\n        stroke: \"cl_blue\",\n        cursor: \"pointer\",\n        bg: \"cl_white\",\n        \":hover\": { stroke: \"cl_purple\" },\n        zIndex: 1,\n      }}\n      onClick={onClick}\n    >\n      <ThinArrowLeftIcon\n        width=\"18px\"\n        transform={`rotate(${direction === \"right\" ? 180 : 0})`}\n      />\n    </FlexItemsCenter>\n  );\n};\n"],"names":["ArrowButton","width","direction","onClick","jsx","FlexItemsCenter","ThinArrowLeftIcon"],"mappings":";;;AAMO,MAAMA,IAA+B,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,SAAAC,QAE7DC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAgBH,MAAc,UAAU,aAAa;AAAA,IACrD,IAAI;AAAA,MACF,UAAU;AAAA,MACV,GAAIA,MAAc,UAAU,EAAE,OAAO,EAAE,IAAkB;AAAA,MACzD,KAAK;AAAA,MACL,OAAAD;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,UAAU,EAAE,QAAQ,YAAY;AAAA,MAChC,QAAQ;AAAA,IACV;AAAA,IACA,SAAAE;AAAA,IAEA,UAAAC,gBAAAA,EAAA;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,WAAW,UAAUJ,MAAc,UAAU,MAAM,CAAC;AAAA,MAAA;AAAA,IACtD;AAAA,EAAA;AAAA;"}