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

package/lib/sd-component-library126.js

@@ -1,4 +1,4 @@
-import { jsx as e } from "./sd-component-library196.js";
+import { jsx as e } from "./sd-component-library195.js";
 import { SelectorV2 as r } from "./sd-component-library119.js";
 const d = (t) => /* @__PURE__ */ e(r, { variant: "updatedSecondary", gap: ["0"], defaultOptionColor: t.defaultOptionColor || "cl_grey", ...t, "data-test": "tertiary-selector-v2" });
 export {

package/lib/sd-component-library127.js

@@ -1,6 +1,6 @@
-import { jsxs as x, jsx as t } from "./sd-component-library196.js";
+import { jsxs as x, jsx as t } from "./sd-component-library195.js";
 import { EighteenBold as g } from "./sd-component-library138.js";
-import { ReactComponent as c } from "./sd-component-library203.js";
+import { ReactComponent as c } from "./sd-component-library210.js";
 import { IconButton as l } from "./sd-component-library25.js";
 import { GridCenter as f } from "./sd-component-library44.js";
 const D = ({

package/lib/sd-component-library128.js

@@ -1,29 +1,29 @@
-import { jsxs as b, jsx as n } from "./sd-component-library196.js";
-import { r as l } from "./sd-component-library193.js";
-import "./sd-component-library197.js";
-import { Box as a, Flex as C } from "./sd-component-library198.js";
-const y = (t) => {
+import { jsxs as v, jsx as n } from "./sd-component-library195.js";
+import { useState as b, useEffect as C } from "react";
+import "./sd-component-library198.js";
+import { Box as a, Flex as g } from "./sd-component-library199.js";
+const R = (t) => {
   const {
     value: e
-  } = t, [r, o] = l.useState(e || "left");
-  l.useEffect(() => {
+  } = t, [r, o] = b(e || "left");
+  C(() => {
     e && o(e);
   }, [e]);
-  const x = () => {
+  const l = () => {
     o("left"), t.leftActive();
-  }, u = () => {
+  }, x = () => {
     o("right"), t.rightActive();
-  }, h = {
+  }, u = {
     color: t.activeTextColor || "#fff",
     border: "none",
     backgroundColor: "transparent"
-  }, f = {
+  }, h = {
     color: t.unactiveTextColor,
     border: "1px solid",
     borderColor: t.unactiveTextColor,
     backgroundColor: t.unactiveBGColor || "transparent"
-  }, c = (v) => v === r ? h : f, i = t.borderRadius || "3px", s = `${i} 0 0 ${i}`, d = `0 ${i} ${i} 0`;
-  return /* @__PURE__ */ b(C, { ...t, width: t.width || "280px", sx: {
+  }, c = (f) => f === r ? u : h, i = t.borderRadius || "3px", d = `${i} 0 0 ${i}`, s = `0 ${i} ${i} 0`;
+  return /* @__PURE__ */ v(g, { ...t, width: t.width || "280px", sx: {
     position: "relative",
     cursor: "pointer"
   }, "data-test": "text-switch", children: [
@@ -36,21 +36,21 @@ const y = (t) => {
       transitionProperty: "transform",
       transitionTimingFunction: "ease-out",
       transitionDuration: "0.1s",
-      borderRadius: r === "left" ? s : d
+      borderRadius: r === "left" ? d : s
     } }),
-    /* @__PURE__ */ n(a, { onClick: x, width: "50%", variant: "_switches.textSwitch.side", py: t.sidePy, px: t.sidePx, sx: {
-      borderRadius: s,
+    /* @__PURE__ */ n(a, { onClick: l, width: "50%", variant: "_switches.textSwitch.side", py: t.sidePy, px: t.sidePx, sx: {
+      borderRadius: d,
       ...c("left"),
       borderRight: "none !important"
     }, children: t.leftText }),
-    /* @__PURE__ */ n(a, { onClick: u, width: "50%", variant: "_switches.textSwitch.side", py: t.sidePy, px: t.sidePx, sx: {
-      borderRadius: d,
+    /* @__PURE__ */ n(a, { onClick: x, width: "50%", variant: "_switches.textSwitch.side", py: t.sidePy, px: t.sidePx, sx: {
+      borderRadius: s,
       ...c("right"),
       borderLeft: "none !important"
     }, children: t.rightText })
   ] });
 };
 export {
-  y as TextSwitch
+  R as TextSwitch
 };
 //# sourceMappingURL=sd-component-library128.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library128.js","sources":["../src/components/switches/text-switch/text-switch.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { Sides, TextSwitchProps } from \"./interfaces\";\n\nexport const TextSwitch: React.FunctionComponent<TextSwitchProps> = (\n  props: TextSwitchProps\n): React.ReactElement<TextSwitchProps> => {\n  const { value } = props;\n  const [activeSide, setActiveSide] = useState<Sides>(value || \"left\");\n\n  useEffect(() => {\n    value && setActiveSide(value);\n  }, [value]);\n\n  const leftClicked = () => {\n    setActiveSide(\"left\");\n    props.leftActive();\n  };\n\n  const rightClicked = () => {\n    setActiveSide(\"right\");\n    props.rightActive();\n  };\n\n  const activeStyle = {\n    color: props.activeTextColor || \"#fff\",\n    border: \"none\",\n    backgroundColor: \"transparent\",\n  };\n\n  const unactiveStyle = {\n    color: props.unactiveTextColor,\n    border: \"1px solid\",\n    borderColor: props.unactiveTextColor,\n    backgroundColor: props.unactiveBGColor || \"transparent\",\n  };\n\n  const currentStyle = (side: Sides) => {\n    return side === activeSide ? activeStyle : unactiveStyle;\n  };\n\n  const borderRadius = props.borderRadius || \"3px\";\n  const leftBorderRadius = `${borderRadius} 0 0 ${borderRadius}`;\n  const rightBorderRadius = `0 ${borderRadius} ${borderRadius} 0`;\n\n  return (\n    <Flex\n      {...props}\n      width={props.width || \"280px\"}\n      sx={{\n        position: \"relative\",\n        cursor: \"pointer\",\n      }}\n      data-test=\"text-switch\"\n    >\n      <Box\n        sx={{\n          backgroundColor: props.activeBGColor,\n          height: \"100%\",\n          width: \"50%\",\n          position: \"absolute\",\n          transform:\n            activeSide === \"left\" ? \"translateX(0)\" : \"translateX(100%)\",\n          transitionProperty: \"transform\",\n          transitionTimingFunction: \"ease-out\",\n          transitionDuration: \"0.1s\",\n          borderRadius:\n            activeSide === \"left\" ? leftBorderRadius : rightBorderRadius,\n        }}\n      />\n      <Box\n        onClick={leftClicked}\n        width=\"50%\"\n        variant=\"_switches.textSwitch.side\"\n        py={props.sidePy}\n        px={props.sidePx}\n        sx={{\n          borderRadius: leftBorderRadius,\n          ...currentStyle(\"left\"),\n          borderRight: \"none !important\",\n        }}\n      >\n        {props.leftText}\n      </Box>\n      <Box\n        onClick={rightClicked}\n        width=\"50%\"\n        variant=\"_switches.textSwitch.side\"\n        py={props.sidePy}\n        px={props.sidePx}\n        sx={{\n          borderRadius: rightBorderRadius,\n          ...currentStyle(\"right\"),\n          borderLeft: \"none !important\",\n        }}\n      >\n        {props.rightText}\n      </Box>\n    </Flex>\n  );\n};\n"],"names":["TextSwitch","props","value","activeSide","setActiveSide","useState","useEffect","leftClicked","leftActive","rightClicked","rightActive","activeStyle","color","activeTextColor","border","backgroundColor","unactiveStyle","unactiveTextColor","borderColor","unactiveBGColor","currentStyle","side","borderRadius","leftBorderRadius","rightBorderRadius","jsxs","Flex","width","position","cursor","jsx","Box","activeBGColor","height","transform","transitionProperty","transitionTimingFunction","transitionDuration","sidePy","sidePx","borderRight","leftText","borderLeft","rightText"],"mappings":";;;;AAMaA,MAAAA,IAAuDA,CAClEC,MACwC;AAClC,QAAA;AAAA,IAAEC,OAAAA;AAAAA,EAAUD,IAAAA,GACZ,CAACE,GAAYC,CAAa,IAAIC,EAAAA,SAAgBH,KAAS,MAAM;AAEnEI,EAAAA,EAAAA,UAAU,MAAM;AACdJ,IAAAA,KAASE,EAAcF,CAAK;AAAA,EAAA,GAC3B,CAACA,CAAK,CAAC;AAEV,QAAMK,IAAcA,MAAM;AACxBH,IAAAA,EAAc,MAAM,GACpBH,EAAMO,WAAW;AAAA,EAAA,GAGbC,IAAeA,MAAM;AACzBL,IAAAA,EAAc,OAAO,GACrBH,EAAMS,YAAY;AAAA,EAAA,GAGdC,IAAc;AAAA,IAClBC,OAAOX,EAAMY,mBAAmB;AAAA,IAChCC,QAAQ;AAAA,IACRC,iBAAiB;AAAA,EAAA,GAGbC,IAAgB;AAAA,IACpBJ,OAAOX,EAAMgB;AAAAA,IACbH,QAAQ;AAAA,IACRI,aAAajB,EAAMgB;AAAAA,IACnBF,iBAAiBd,EAAMkB,mBAAmB;AAAA,EAAA,GAGtCC,IAAeA,CAACC,MACbA,MAASlB,IAAaQ,IAAcK,GAGvCM,IAAerB,EAAMqB,gBAAgB,OACrCC,IAAoB,GAAED,CAAa,QAAOA,CAAa,IACvDE,IAAqB,KAAIF,CAAa,IAAGA,CAAa;AAG1D,SAAA,gBAAAG,EAACC,QACKzB,GACJ,OAAOA,EAAM0B,SAAS,SACtB,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,QAAQ;AAAA,EAAA,GAEV,aAAU,eAEV,UAAA;AAAA,IAAA,gBAAAC,EAACC,KACC,IAAI;AAAA,MACFhB,iBAAiBd,EAAM+B;AAAAA,MACvBC,QAAQ;AAAA,MACRN,OAAO;AAAA,MACPC,UAAU;AAAA,MACVM,WACE/B,MAAe,SAAS,kBAAkB;AAAA,MAC5CgC,oBAAoB;AAAA,MACpBC,0BAA0B;AAAA,MAC1BC,oBAAoB;AAAA,MACpBf,cACEnB,MAAe,SAASoB,IAAmBC;AAAAA,IAAAA,GAC7C;AAAA,IAEH,gBAAAM,EAAAC,GAAA,EACC,SAASxB,GACT,OAAM,OACN,SAAQ,6BACR,IAAIN,EAAMqC,QACV,IAAIrC,EAAMsC,QACV,IAAI;AAAA,MACFjB,cAAcC;AAAAA,MACd,GAAGH,EAAa,MAAM;AAAA,MACtBoB,aAAa;AAAA,IAAA,GAGdvC,YAAMwC,UACT;AAAA,IACC,gBAAAX,EAAAC,GAAA,EACC,SAAStB,GACT,OAAM,OACN,SAAQ,6BACR,IAAIR,EAAMqC,QACV,IAAIrC,EAAMsC,QACV,IAAI;AAAA,MACFjB,cAAcE;AAAAA,MACd,GAAGJ,EAAa,OAAO;AAAA,MACvBsB,YAAY;AAAA,IAAA,GAGbzC,YAAM0C,WACT;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library128.js","sources":["../src/components/switches/text-switch/text-switch.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { Sides, TextSwitchProps } from \"./interfaces\";\n\nexport const TextSwitch: React.FunctionComponent<TextSwitchProps> = (\n  props: TextSwitchProps\n): React.ReactElement<TextSwitchProps> => {\n  const { value } = props;\n  const [activeSide, setActiveSide] = useState<Sides>(value || \"left\");\n\n  useEffect(() => {\n    value && setActiveSide(value);\n  }, [value]);\n\n  const leftClicked = () => {\n    setActiveSide(\"left\");\n    props.leftActive();\n  };\n\n  const rightClicked = () => {\n    setActiveSide(\"right\");\n    props.rightActive();\n  };\n\n  const activeStyle = {\n    color: props.activeTextColor || \"#fff\",\n    border: \"none\",\n    backgroundColor: \"transparent\",\n  };\n\n  const unactiveStyle = {\n    color: props.unactiveTextColor,\n    border: \"1px solid\",\n    borderColor: props.unactiveTextColor,\n    backgroundColor: props.unactiveBGColor || \"transparent\",\n  };\n\n  const currentStyle = (side: Sides) => {\n    return side === activeSide ? activeStyle : unactiveStyle;\n  };\n\n  const borderRadius = props.borderRadius || \"3px\";\n  const leftBorderRadius = `${borderRadius} 0 0 ${borderRadius}`;\n  const rightBorderRadius = `0 ${borderRadius} ${borderRadius} 0`;\n\n  return (\n    <Flex\n      {...props}\n      width={props.width || \"280px\"}\n      sx={{\n        position: \"relative\",\n        cursor: \"pointer\",\n      }}\n      data-test=\"text-switch\"\n    >\n      <Box\n        sx={{\n          backgroundColor: props.activeBGColor,\n          height: \"100%\",\n          width: \"50%\",\n          position: \"absolute\",\n          transform:\n            activeSide === \"left\" ? \"translateX(0)\" : \"translateX(100%)\",\n          transitionProperty: \"transform\",\n          transitionTimingFunction: \"ease-out\",\n          transitionDuration: \"0.1s\",\n          borderRadius:\n            activeSide === \"left\" ? leftBorderRadius : rightBorderRadius,\n        }}\n      />\n      <Box\n        onClick={leftClicked}\n        width=\"50%\"\n        variant=\"_switches.textSwitch.side\"\n        py={props.sidePy}\n        px={props.sidePx}\n        sx={{\n          borderRadius: leftBorderRadius,\n          ...currentStyle(\"left\"),\n          borderRight: \"none !important\",\n        }}\n      >\n        {props.leftText}\n      </Box>\n      <Box\n        onClick={rightClicked}\n        width=\"50%\"\n        variant=\"_switches.textSwitch.side\"\n        py={props.sidePy}\n        px={props.sidePx}\n        sx={{\n          borderRadius: rightBorderRadius,\n          ...currentStyle(\"right\"),\n          borderLeft: \"none !important\",\n        }}\n      >\n        {props.rightText}\n      </Box>\n    </Flex>\n  );\n};\n"],"names":["TextSwitch","props","value","activeSide","setActiveSide","useState","useEffect","leftClicked","leftActive","rightClicked","rightActive","activeStyle","color","activeTextColor","border","backgroundColor","unactiveStyle","unactiveTextColor","borderColor","unactiveBGColor","currentStyle","side","borderRadius","leftBorderRadius","rightBorderRadius","jsxs","Flex","width","position","cursor","jsx","Box","activeBGColor","height","transform","transitionProperty","transitionTimingFunction","transitionDuration","sidePy","sidePx","borderRight","leftText","borderLeft","rightText"],"mappings":";;;;AAMaA,MAAAA,IAAuDA,CAClEC,MACwC;AAClC,QAAA;AAAA,IAAEC,OAAAA;AAAAA,EAAUD,IAAAA,GACZ,CAACE,GAAYC,CAAa,IAAIC,EAAgBH,KAAS,MAAM;AAEnEI,EAAAA,EAAU,MAAM;AACdJ,IAAAA,KAASE,EAAcF,CAAK;AAAA,EAAA,GAC3B,CAACA,CAAK,CAAC;AAEV,QAAMK,IAAcA,MAAM;AACxBH,IAAAA,EAAc,MAAM,GACpBH,EAAMO,WAAW;AAAA,EAAA,GAGbC,IAAeA,MAAM;AACzBL,IAAAA,EAAc,OAAO,GACrBH,EAAMS,YAAY;AAAA,EAAA,GAGdC,IAAc;AAAA,IAClBC,OAAOX,EAAMY,mBAAmB;AAAA,IAChCC,QAAQ;AAAA,IACRC,iBAAiB;AAAA,EAAA,GAGbC,IAAgB;AAAA,IACpBJ,OAAOX,EAAMgB;AAAAA,IACbH,QAAQ;AAAA,IACRI,aAAajB,EAAMgB;AAAAA,IACnBF,iBAAiBd,EAAMkB,mBAAmB;AAAA,EAAA,GAGtCC,IAAeA,CAACC,MACbA,MAASlB,IAAaQ,IAAcK,GAGvCM,IAAerB,EAAMqB,gBAAgB,OACrCC,IAAoB,GAAED,CAAa,QAAOA,CAAa,IACvDE,IAAqB,KAAIF,CAAa,IAAGA,CAAa;AAG1D,SAAA,gBAAAG,EAACC,QACKzB,GACJ,OAAOA,EAAM0B,SAAS,SACtB,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,QAAQ;AAAA,EAAA,GAEV,aAAU,eAEV,UAAA;AAAA,IAAA,gBAAAC,EAACC,KACC,IAAI;AAAA,MACFhB,iBAAiBd,EAAM+B;AAAAA,MACvBC,QAAQ;AAAA,MACRN,OAAO;AAAA,MACPC,UAAU;AAAA,MACVM,WACE/B,MAAe,SAAS,kBAAkB;AAAA,MAC5CgC,oBAAoB;AAAA,MACpBC,0BAA0B;AAAA,MAC1BC,oBAAoB;AAAA,MACpBf,cACEnB,MAAe,SAASoB,IAAmBC;AAAAA,IAAAA,GAC7C;AAAA,IAEH,gBAAAM,EAAAC,GAAA,EACC,SAASxB,GACT,OAAM,OACN,SAAQ,6BACR,IAAIN,EAAMqC,QACV,IAAIrC,EAAMsC,QACV,IAAI;AAAA,MACFjB,cAAcC;AAAAA,MACd,GAAGH,EAAa,MAAM;AAAA,MACtBoB,aAAa;AAAA,IAAA,GAGdvC,YAAMwC,UACT;AAAA,IACC,gBAAAX,EAAAC,GAAA,EACC,SAAStB,GACT,OAAM,OACN,SAAQ,6BACR,IAAIR,EAAMqC,QACV,IAAIrC,EAAMsC,QACV,IAAI;AAAA,MACFjB,cAAcE;AAAAA,MACd,GAAGJ,EAAa,OAAO;AAAA,MACvBsB,YAAY;AAAA,IAAA,GAGbzC,YAAM0C,WACT;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/lib/sd-component-library129.js

@@ -1,7 +1,7 @@
-import { jsx as t } from "./sd-component-library196.js";
-import "./sd-component-library197.js";
+import { jsx as t } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
 import { useDependantState as a } from "./sd-component-library3.js";
-import { Box as e } from "./sd-component-library198.js";
+import { Box as e } from "./sd-component-library199.js";
 const i = 200, m = (r) => {
   const {
     initialState: s = !1,

package/lib/sd-component-library13.js

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

package/lib/sd-component-library130.js

@@ -1,17 +1,17 @@
-import { jsxs as a, Fragment as l, jsx as r } from "./sd-component-library196.js";
-import { r as E } from "./sd-component-library193.js";
-import "./sd-component-library197.js";
+import { jsxs as a, Fragment as l, jsx as r } from "./sd-component-library195.js";
+import { useState as G } from "react";
+import "./sd-component-library198.js";
 import { useBoundingClientRect as p } from "./sd-component-library3.js";
-import { Tab as G } from "./sd-component-library275.js";
-import { Flex as x } from "./sd-component-library198.js";
-import { ArrowButton as w } from "./sd-component-library276.js";
-import { Mask as u } from "./sd-component-library277.js";
-import { HorizontalDivider as H } from "./sd-component-library51.js";
+import { Tab as H } from "./sd-component-library269.js";
+import { Flex as x } from "./sd-component-library199.js";
+import { ArrowButton as w } from "./sd-component-library270.js";
+import { Mask as u } from "./sd-component-library271.js";
+import { HorizontalDivider as N } from "./sd-component-library51.js";
 const c = 30, e = `${c}px`, g = "30px";
 function Y({
   tabs: R,
   selectedTabId: k,
-  onTabSelect: s,
+  onTabSelect: d,
   activeColor: v = "cl_purple",
   color: C = "cl_darkGrey",
   displayBorder: B = !0,
@@ -27,7 +27,7 @@ function Y({
   tabSx: j,
   innerContainerSx: D
 }) {
-  const [d, f] = E.useState(0), {
+  const [s, f] = G(0), {
     ref: L,
     rect: i
   } = p({
@@ -37,7 +37,7 @@ function Y({
     rect: o
   } = p({
     listenForResize: !0
-  }), h = !n && o && i && !!d, m = !n && o && i && d + i.width < o.width, y = () => {
+  }), h = !n && o && i && !!s, m = !n && o && i && s + i.width < o.width, y = () => {
     o && i && f((t) => Math.max(0, t - i.width + 2 * c));
   }, A = () => {
     o && i && f((t) => Math.min(o.width - i.width + c, t + i.width - 2 * c));
@@ -61,12 +61,12 @@ function Y({
       width: n ? "auto" : "max-content",
       ml: h ? e : 0,
       mr: m ? e : 0,
-      transform: `translateX(${-d}px)`,
+      transform: `translateX(${-s}px)`,
       transition: "transform 0.2s",
       overflowX: n ? "auto" : void 0,
       ...D
-    }, ref: O, children: R.map((t) => /* @__PURE__ */ r(G, { activeColor: v, color: C, ...t, selected: k === t.id, onClick: () => s == null ? void 0 : s(t.id), tabPadding: F, width: W, height: z, maxWidth: M, labelSx: S, secondaryTextSx: X, containerSx: j, "data-test": `tab-${t.id}` }, String(t.id))) }),
-    B && /* @__PURE__ */ r(H, { height: "2px" })
+    }, ref: O, children: R.map((t) => /* @__PURE__ */ r(H, { activeColor: v, color: C, ...t, selected: k === t.id, onClick: () => d == null ? void 0 : d(t.id), tabPadding: F, width: W, height: z, maxWidth: M, labelSx: S, secondaryTextSx: X, containerSx: j, "data-test": `tab-${t.id}` }, String(t.id))) }),
+    B && /* @__PURE__ */ r(N, { height: "2px" })
   ] });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library130.js","sources":["../src/components/tabs/tab-bar/tab-bar.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { Flex } from \"rebass\";\n\nimport { useBoundingClientRect } from \"../../../core/custom-hooks\";\nimport { HorizontalDivider } from \"../../dividers\";\nimport { TabBarProps } from \"./interfaces\";\nimport { ArrowButton, Mask, Tab } from \"./partials\";\n\nconst arrowButtonWidthPx = 30;\nconst arrowButtonWidth = `${arrowButtonWidthPx}px`;\nconst maskWidth = \"30px\";\n\nexport function TabBar<T>({\n  tabs,\n  selectedTabId,\n  onTabSelect,\n  activeColor = \"cl_purple\",\n  color = \"cl_darkGrey\",\n  displayBorder = true,\n  tabPadding = [\"16px 24px\"],\n  tabWidth,\n  tabHeight,\n  tabMaxWidth,\n  labelSx,\n  secondaryTextSx,\n  scrollable = true,\n  containerSx,\n  dontTranslate,\n  tabSx,\n  innerContainerSx,\n}: TabBarProps<T>) {\n  const [xOffset, setXOffset] = useState(0);\n\n  const { ref: containerRef, rect: containerRect } = useBoundingClientRect({\n    listenForResize: true,\n  });\n  const { ref: contentRef, rect: contentRect } = useBoundingClientRect({\n    listenForResize: true,\n  });\n\n  const canScrollLeft =\n    !scrollable && contentRect && containerRect && !!xOffset;\n  const canScrollRight =\n    !scrollable &&\n    contentRect &&\n    containerRect &&\n    xOffset + containerRect.width < contentRect.width;\n\n  const onScrollLeftClick = () => {\n    contentRect &&\n      containerRect &&\n      setXOffset((prev) =>\n        Math.max(0, prev - containerRect.width + 2 * arrowButtonWidthPx)\n      );\n  };\n\n  const onScrollRightClick = () => {\n    contentRect &&\n      containerRect &&\n      setXOffset((prev) =>\n        Math.min(\n          contentRect.width - containerRect.width + arrowButtonWidthPx,\n          prev + containerRect.width - 2 * arrowButtonWidthPx\n        )\n      );\n  };\n\n  return (\n    <Flex\n      sx={{\n        flexDirection: \"column\",\n        position: \"relative\",\n        overflow: \"hidden\",\n        width: \"100%\",\n        ...containerSx,\n      }}\n      className={dontTranslate ? \"no-translate\" : undefined}\n      ref={containerRef}\n      data-test=\"tabs-bar\"\n    >\n      {canScrollLeft && (\n        <>\n          <ArrowButton\n            width={arrowButtonWidth}\n            onClick={onScrollLeftClick}\n            direction=\"left\"\n          />\n\n          <Mask width={maskWidth} offset={arrowButtonWidth} direction=\"left\" />\n        </>\n      )}\n\n      {canScrollRight && (\n        <>\n          <ArrowButton\n            width={arrowButtonWidth}\n            onClick={onScrollRightClick}\n            direction=\"right\"\n          />\n\n          <Mask width={maskWidth} offset={arrowButtonWidth} direction=\"right\" />\n        </>\n      )}\n\n      <Flex\n        sx={{\n          width: scrollable ? \"auto\" : \"max-content\",\n          ml: canScrollLeft ? arrowButtonWidth : 0,\n          mr: canScrollRight ? arrowButtonWidth : 0,\n          transform: `translateX(${-xOffset}px)`,\n          transition: \"transform 0.2s\",\n          overflowX: scrollable ? \"auto\" : undefined,\n          ...innerContainerSx,\n        }}\n        ref={contentRef}\n      >\n        {tabs.map((t) => (\n          <Tab\n            key={String(t.id)}\n            activeColor={activeColor}\n            color={color}\n            {...t}\n            selected={selectedTabId === t.id}\n            onClick={() => onTabSelect?.(t.id)}\n            tabPadding={tabPadding}\n            width={tabWidth}\n            height={tabHeight}\n            maxWidth={tabMaxWidth}\n            labelSx={labelSx}\n            secondaryTextSx={secondaryTextSx}\n            containerSx={tabSx}\n            data-test={`tab-${t.id}`}\n          />\n        ))}\n      </Flex>\n\n      {displayBorder && <HorizontalDivider height=\"2px\" />}\n    </Flex>\n  );\n}\n"],"names":["arrowButtonWidthPx","arrowButtonWidth","maskWidth","TabBar","tabs","selectedTabId","onTabSelect","activeColor","color","displayBorder","tabPadding","tabWidth","tabHeight","tabMaxWidth","labelSx","secondaryTextSx","scrollable","containerSx","dontTranslate","tabSx","innerContainerSx","xOffset","setXOffset","useState","ref","containerRef","rect","containerRect","useBoundingClientRect","listenForResize","contentRef","contentRect","canScrollLeft","canScrollRight","width","onScrollLeftClick","prev","Math","max","onScrollRightClick","min","jsxs","Flex","flexDirection","position","overflow","undefined","Fragment","jsx","ArrowButton","Mask","ml","mr","transform","transition","overflowX","map","t","Tab","id","String","HorizontalDivider"],"mappings":"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"}
+{"version":3,"file":"sd-component-library130.js","sources":["../src/components/tabs/tab-bar/tab-bar.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { Flex } from \"rebass\";\n\nimport { useBoundingClientRect } from \"../../../core/custom-hooks\";\nimport { HorizontalDivider } from \"../../dividers\";\nimport { TabBarProps } from \"./interfaces\";\nimport { ArrowButton, Mask, Tab } from \"./partials\";\n\nconst arrowButtonWidthPx = 30;\nconst arrowButtonWidth = `${arrowButtonWidthPx}px`;\nconst maskWidth = \"30px\";\n\nexport function TabBar<T>({\n  tabs,\n  selectedTabId,\n  onTabSelect,\n  activeColor = \"cl_purple\",\n  color = \"cl_darkGrey\",\n  displayBorder = true,\n  tabPadding = [\"16px 24px\"],\n  tabWidth,\n  tabHeight,\n  tabMaxWidth,\n  labelSx,\n  secondaryTextSx,\n  scrollable = true,\n  containerSx,\n  dontTranslate,\n  tabSx,\n  innerContainerSx,\n}: TabBarProps<T>) {\n  const [xOffset, setXOffset] = useState(0);\n\n  const { ref: containerRef, rect: containerRect } = useBoundingClientRect({\n    listenForResize: true,\n  });\n  const { ref: contentRef, rect: contentRect } = useBoundingClientRect({\n    listenForResize: true,\n  });\n\n  const canScrollLeft =\n    !scrollable && contentRect && containerRect && !!xOffset;\n  const canScrollRight =\n    !scrollable &&\n    contentRect &&\n    containerRect &&\n    xOffset + containerRect.width < contentRect.width;\n\n  const onScrollLeftClick = () => {\n    contentRect &&\n      containerRect &&\n      setXOffset((prev) =>\n        Math.max(0, prev - containerRect.width + 2 * arrowButtonWidthPx)\n      );\n  };\n\n  const onScrollRightClick = () => {\n    contentRect &&\n      containerRect &&\n      setXOffset((prev) =>\n        Math.min(\n          contentRect.width - containerRect.width + arrowButtonWidthPx,\n          prev + containerRect.width - 2 * arrowButtonWidthPx\n        )\n      );\n  };\n\n  return (\n    <Flex\n      sx={{\n        flexDirection: \"column\",\n        position: \"relative\",\n        overflow: \"hidden\",\n        width: \"100%\",\n        ...containerSx,\n      }}\n      className={dontTranslate ? \"no-translate\" : undefined}\n      ref={containerRef}\n      data-test=\"tabs-bar\"\n    >\n      {canScrollLeft && (\n        <>\n          <ArrowButton\n            width={arrowButtonWidth}\n            onClick={onScrollLeftClick}\n            direction=\"left\"\n          />\n\n          <Mask width={maskWidth} offset={arrowButtonWidth} direction=\"left\" />\n        </>\n      )}\n\n      {canScrollRight && (\n        <>\n          <ArrowButton\n            width={arrowButtonWidth}\n            onClick={onScrollRightClick}\n            direction=\"right\"\n          />\n\n          <Mask width={maskWidth} offset={arrowButtonWidth} direction=\"right\" />\n        </>\n      )}\n\n      <Flex\n        sx={{\n          width: scrollable ? \"auto\" : \"max-content\",\n          ml: canScrollLeft ? arrowButtonWidth : 0,\n          mr: canScrollRight ? arrowButtonWidth : 0,\n          transform: `translateX(${-xOffset}px)`,\n          transition: \"transform 0.2s\",\n          overflowX: scrollable ? \"auto\" : undefined,\n          ...innerContainerSx,\n        }}\n        ref={contentRef}\n      >\n        {tabs.map((t) => (\n          <Tab\n            key={String(t.id)}\n            activeColor={activeColor}\n            color={color}\n            {...t}\n            selected={selectedTabId === t.id}\n            onClick={() => onTabSelect?.(t.id)}\n            tabPadding={tabPadding}\n            width={tabWidth}\n            height={tabHeight}\n            maxWidth={tabMaxWidth}\n            labelSx={labelSx}\n            secondaryTextSx={secondaryTextSx}\n            containerSx={tabSx}\n            data-test={`tab-${t.id}`}\n          />\n        ))}\n      </Flex>\n\n      {displayBorder && <HorizontalDivider height=\"2px\" />}\n    </Flex>\n  );\n}\n"],"names":["arrowButtonWidthPx","arrowButtonWidth","maskWidth","TabBar","tabs","selectedTabId","onTabSelect","activeColor","color","displayBorder","tabPadding","tabWidth","tabHeight","tabMaxWidth","labelSx","secondaryTextSx","scrollable","containerSx","dontTranslate","tabSx","innerContainerSx","xOffset","setXOffset","useState","ref","containerRef","rect","containerRect","useBoundingClientRect","listenForResize","contentRef","contentRect","canScrollLeft","canScrollRight","width","onScrollLeftClick","prev","Math","max","onScrollRightClick","min","jsxs","Flex","flexDirection","position","overflow","undefined","Fragment","jsx","ArrowButton","Mask","ml","mr","transform","transition","overflowX","map","t","Tab","id","String","HorizontalDivider"],"mappings":"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"}

package/lib/sd-component-library131.js

@@ -1,7 +1,7 @@
-import { jsx as n, jsxs as T } from "./sd-component-library196.js";
-import "./sd-component-library197.js";
-import { Flex as d, Box as _ } from "./sd-component-library198.js";
-import { TabV2 as B } from "./sd-component-library278.js";
+import { jsx as n, jsxs as T } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
+import { Flex as d, Box as _ } from "./sd-component-library199.js";
+import { TabV2 as B } from "./sd-component-library272.js";
 import { GridContainerV2 as F } from "./sd-component-library41.js";
 const h = 25, j = ({
   tabs: e,

package/lib/sd-component-library132.js

@@ -1,7 +1,7 @@
-import { jsxs as c, jsx as d } from "./sd-component-library196.js";
-import "./sd-component-library197.js";
+import { jsxs as c, jsx as d } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
 import { TabBarV2 as b } from "./sd-component-library131.js";
-import { Box as i } from "./sd-component-library198.js";
+import { Box as i } from "./sd-component-library199.js";
 const f = (r) => {
   const {
     tabs: e,

package/lib/sd-component-library133.js

@@ -1,60 +1,60 @@
-import { jsx as n, jsxs as v } from "./sd-component-library196.js";
-import { r as a } from "./sd-component-library193.js";
-import "./sd-component-library197.js";
-import { BaseGridContainer as w } from "./sd-component-library38.js";
-import { ScrollableTabWrapper as S } from "./sd-component-library279.js";
-import { Tab as C } from "./sd-component-library280.js";
+import { jsx as n, jsxs as v } from "./sd-component-library195.js";
+import { useRef as w, useState as S, useEffect as m } from "react";
+import "./sd-component-library198.js";
+import { BaseGridContainer as C } from "./sd-component-library38.js";
+import { ScrollableTabWrapper as y } from "./sd-component-library273.js";
+import { Tab as B } from "./sd-component-library274.js";
 import { VerticalDivider as E } from "./sd-component-library52.js";
-import { MaxMaxContainer as y } from "./sd-component-library43.js";
-import { Box as B } from "./sd-component-library198.js";
-const L = (o) => {
+import { MaxMaxContainer as L } from "./sd-component-library43.js";
+import { Box as k } from "./sd-component-library199.js";
+const M = (o) => {
   const t = o.find((s) => window.location.hash === `#${s.hash}`);
   return (t == null ? void 0 : t.hash) || o.length && o[0].hash || "";
 };
-function _(o) {
+function D(o) {
   const {
     tabs: t,
     onTabSelect: s,
     selectedTab: r,
-    activeColor: m = "#9E1CB5",
+    activeColor: f = "#9E1CB5",
     enableScroll: u = !0,
-    gap: d = ["15px"],
-    allowChangingTabs: i = !0,
+    gap: h = ["15px"],
+    allowChangingTabs: a = !0,
     autoScrollTabs: p = !1,
     history: T
-  } = o, c = a.useRef(null), [f, l] = a.useState(t.length && t[0].hash || ""), g = o.sticky ? {
+  } = o, i = w(null), [d, c] = S(t.length && t[0].hash || ""), g = o.sticky ? {
     position: "sticky",
     top: o.top || ["0px"]
   } : {};
-  a.useEffect(() => {
-    r && l(r);
+  m(() => {
+    r && c(r);
   }, [r]);
   const x = (e) => {
-    s && s(e), i && l(e);
+    s && s(e), a && c(e);
   };
-  a.useEffect(() => {
-    const e = () => i && l(L(t));
+  m(() => {
+    const e = () => a && c(M(t));
     return !r && e(), window.addEventListener("hashchange", e), () => window.removeEventListener("hashchange", e);
-  }, [t, r, i]);
+  }, [t, r, a]);
   const b = (e) => {
-    if (e.current && c.current) {
-      const h = e.current.offsetLeft;
-      c.current.scroll({
-        left: h,
+    if (e.current && i.current) {
+      const l = e.current.offsetLeft;
+      i.current.scroll({
+        left: l,
         behavior: "smooth"
       });
     }
   };
-  return /* @__PURE__ */ n(B, { ref: c, sx: {
+  return /* @__PURE__ */ n(k, { ref: i, sx: {
     ...g,
     backgroundColor: "cl_white",
     overflowX: ["scroll", "unset"]
-  }, children: /* @__PURE__ */ n(w, { gridTemplateColumns: [`repeat(${2 * t.length - 1}, max-content)`], width: ["100%"], gap: d, "data-test": "tabs-menu", children: t.map((e, h) => /* @__PURE__ */ n(S, { hash: e.hash, autoScrollTabs: p, selectedTab: f, scrollTabOnSelect: b, children: /* @__PURE__ */ v(y, { gap: e.divider ? d : ["0px"], children: [
-    /* @__PURE__ */ n(C, { Icon: e.Icon, iconHeight: e.iconHeight, title: e.title, hash: e.hash, activeColor: m, isActive: f === e.hash, onTabSelect: x, enableScroll: u, history: T, "data-test": `tabs-menu-${e.hash}` }),
+  }, children: /* @__PURE__ */ n(C, { gridTemplateColumns: [`repeat(${2 * t.length - 1}, max-content)`], width: ["100%"], gap: h, "data-test": "tabs-menu", children: t.map((e, l) => /* @__PURE__ */ n(y, { hash: e.hash, autoScrollTabs: p, selectedTab: d, scrollTabOnSelect: b, children: /* @__PURE__ */ v(L, { gap: e.divider ? h : ["0px"], children: [
+    /* @__PURE__ */ n(B, { Icon: e.Icon, iconHeight: e.iconHeight, title: e.title, hash: e.hash, activeColor: f, isActive: d === e.hash, onTabSelect: x, enableScroll: u, history: T, "data-test": `tabs-menu-${e.hash}` }),
     e.divider && /* @__PURE__ */ n(E, {})
-  ] }, h) }, e.hash)) }) });
+  ] }, l) }, e.hash)) }) });
 }
 export {
-  _ as TabsMenu
+  D as TabsMenu
 };
 //# sourceMappingURL=sd-component-library133.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library133.js","sources":["../src/components/tabs/tabs-menu/tabs-menu.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { BaseGridContainer } from \"../../containers/grid-containers/base-grid-container\";\nimport { MaxMaxContainer } from \"../../containers/grid-containers/max-max-container\";\nimport { VerticalDivider } from \"../../dividers/vertical-divider\";\nimport { TabObject, TabsMenuProps } from \"./interfaces\";\nimport { ScrollableTabWrapper } from \"./partials/scrollable-tab-wrapper\";\nimport { Tab } from \"./partials/tab\";\n\n/**\n * Return the hash of currently active tab or empty string if none.\n *\n * @param tabs Array of all tabs.\n */\nconst getCurrentTab = (tabs: Array<TabObject>) => {\n  const currentTab = tabs.find(\n    (tab) => window.location.hash === `#${tab.hash}`\n  );\n  return currentTab?.hash || (tabs.length && tabs[0].hash) || \"\";\n};\n\n/**\n * TabsMenu component.\n */\nexport function TabsMenu(props: TabsMenuProps) {\n  const {\n    tabs,\n    onTabSelect,\n    selectedTab: overrideSelectedTab,\n    activeColor = \"#9E1CB5\",\n    enableScroll = true,\n    gap = [\"15px\"],\n    allowChangingTabs = true,\n    autoScrollTabs = false,\n    history,\n  } = props;\n\n  const tabsGroupRef = useRef<HTMLDivElement>(null);\n  const [selectedTab, setSelectedTab] = useState<string>(\n    (tabs.length && tabs[0].hash) || \"\"\n  );\n\n  const styles = props.sticky\n    ? {\n        position: \"sticky\",\n        top: props.top || [\"0px\"],\n      }\n    : {};\n\n  /**\n   * Set currently selected tab if it's set by the parent.\n   */\n  useEffect(() => {\n    overrideSelectedTab && setSelectedTab(overrideSelectedTab);\n  }, [overrideSelectedTab]);\n\n  /**\n   * Call the callback if present, when any tab is selected. Then\n   * update the current tab if allowed.\n   *\n   * @param hash : Hash of the selected tab.\n   */\n  const onTabSelectWrapper = (hash: string) => {\n    onTabSelect && onTabSelect(hash);\n    allowChangingTabs && setSelectedTab(hash);\n  };\n\n  /**\n   * Once the component is mounted, we add a listener for `hashChange` event\n   * so that whenever window hash changes, we check if updated hash is one\n   * of the currently present tabs and then mark it as active tab.\n   *\n   * Upon un-mount, we remove the listener.\n   */\n  useEffect(() => {\n    const updateCurrentTab = () =>\n      allowChangingTabs && setSelectedTab(getCurrentTab(tabs));\n\n    /**\n     * Update current tab according to window hash upon page load.\n     */\n    !overrideSelectedTab && updateCurrentTab();\n\n    window.addEventListener(\"hashchange\", updateCurrentTab);\n    return () => window.removeEventListener(\"hashchange\", updateCurrentTab);\n  }, [tabs, overrideSelectedTab, allowChangingTabs]);\n\n  /**\n   * When selected tab is updated, and tabs menu is scrollable (in mobiles screen)\n   * the selected tab should be scrolled to the left.\n   */\n  const scrollTabOnSelect = (tabRef: RefObject<HTMLDivElement>) => {\n    if (tabRef.current && tabsGroupRef.current) {\n      const tabLeftOffset = tabRef.current.offsetLeft;\n      tabsGroupRef.current.scroll({\n        left: tabLeftOffset,\n        behavior: \"smooth\",\n      });\n    }\n  };\n\n  return (\n    <Box\n      ref={tabsGroupRef}\n      sx={{\n        ...(styles as CSSProperties),\n        backgroundColor: \"cl_white\",\n        overflowX: [\"scroll\", \"unset\"],\n      }}\n    >\n      <BaseGridContainer\n        gridTemplateColumns={[`repeat(${2 * tabs.length - 1}, max-content)`]}\n        width={[\"100%\"]}\n        gap={gap}\n        data-test=\"tabs-menu\"\n      >\n        {tabs.map((tab, index) => (\n          <ScrollableTabWrapper\n            key={tab.hash}\n            hash={tab.hash}\n            autoScrollTabs={autoScrollTabs}\n            selectedTab={selectedTab}\n            scrollTabOnSelect={scrollTabOnSelect}\n          >\n            <MaxMaxContainer gap={tab.divider ? gap : [\"0px\"]} key={index}>\n              <Tab\n                Icon={tab.Icon}\n                iconHeight={tab.iconHeight}\n                title={tab.title}\n                hash={tab.hash}\n                activeColor={activeColor}\n                isActive={selectedTab === tab.hash}\n                onTabSelect={onTabSelectWrapper}\n                enableScroll={enableScroll}\n                history={history}\n                data-test={`tabs-menu-${tab.hash}`}\n              />\n              {tab.divider && <VerticalDivider />}\n            </MaxMaxContainer>\n          </ScrollableTabWrapper>\n        ))}\n      </BaseGridContainer>\n    </Box>\n  );\n}\n"],"names":["getCurrentTab","tabs","currentTab","find","tab","window","location","hash","length","TabsMenu","props","onTabSelect","selectedTab","overrideSelectedTab","activeColor","enableScroll","gap","allowChangingTabs","autoScrollTabs","history","tabsGroupRef","useRef","setSelectedTab","useState","styles","sticky","position","top","useEffect","onTabSelectWrapper","updateCurrentTab","addEventListener","removeEventListener","scrollTabOnSelect","tabRef","current","tabLeftOffset","offsetLeft","scroll","left","behavior","jsx","Box","backgroundColor","overflowX","BaseGridContainer","map","index","ScrollableTabWrapper","jsxs","MaxMaxContainer","divider","Tab","Icon","iconHeight","title","VerticalDivider"],"mappings":"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"}
+{"version":3,"file":"sd-component-library133.js","sources":["../src/components/tabs/tabs-menu/tabs-menu.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { BaseGridContainer } from \"../../containers/grid-containers/base-grid-container\";\nimport { MaxMaxContainer } from \"../../containers/grid-containers/max-max-container\";\nimport { VerticalDivider } from \"../../dividers/vertical-divider\";\nimport { TabObject, TabsMenuProps } from \"./interfaces\";\nimport { ScrollableTabWrapper } from \"./partials/scrollable-tab-wrapper\";\nimport { Tab } from \"./partials/tab\";\n\n/**\n * Return the hash of currently active tab or empty string if none.\n *\n * @param tabs Array of all tabs.\n */\nconst getCurrentTab = (tabs: Array<TabObject>) => {\n  const currentTab = tabs.find(\n    (tab) => window.location.hash === `#${tab.hash}`\n  );\n  return currentTab?.hash || (tabs.length && tabs[0].hash) || \"\";\n};\n\n/**\n * TabsMenu component.\n */\nexport function TabsMenu(props: TabsMenuProps) {\n  const {\n    tabs,\n    onTabSelect,\n    selectedTab: overrideSelectedTab,\n    activeColor = \"#9E1CB5\",\n    enableScroll = true,\n    gap = [\"15px\"],\n    allowChangingTabs = true,\n    autoScrollTabs = false,\n    history,\n  } = props;\n\n  const tabsGroupRef = useRef<HTMLDivElement>(null);\n  const [selectedTab, setSelectedTab] = useState<string>(\n    (tabs.length && tabs[0].hash) || \"\"\n  );\n\n  const styles = props.sticky\n    ? {\n        position: \"sticky\",\n        top: props.top || [\"0px\"],\n      }\n    : {};\n\n  /**\n   * Set currently selected tab if it's set by the parent.\n   */\n  useEffect(() => {\n    overrideSelectedTab && setSelectedTab(overrideSelectedTab);\n  }, [overrideSelectedTab]);\n\n  /**\n   * Call the callback if present, when any tab is selected. Then\n   * update the current tab if allowed.\n   *\n   * @param hash : Hash of the selected tab.\n   */\n  const onTabSelectWrapper = (hash: string) => {\n    onTabSelect && onTabSelect(hash);\n    allowChangingTabs && setSelectedTab(hash);\n  };\n\n  /**\n   * Once the component is mounted, we add a listener for `hashChange` event\n   * so that whenever window hash changes, we check if updated hash is one\n   * of the currently present tabs and then mark it as active tab.\n   *\n   * Upon un-mount, we remove the listener.\n   */\n  useEffect(() => {\n    const updateCurrentTab = () =>\n      allowChangingTabs && setSelectedTab(getCurrentTab(tabs));\n\n    /**\n     * Update current tab according to window hash upon page load.\n     */\n    !overrideSelectedTab && updateCurrentTab();\n\n    window.addEventListener(\"hashchange\", updateCurrentTab);\n    return () => window.removeEventListener(\"hashchange\", updateCurrentTab);\n  }, [tabs, overrideSelectedTab, allowChangingTabs]);\n\n  /**\n   * When selected tab is updated, and tabs menu is scrollable (in mobiles screen)\n   * the selected tab should be scrolled to the left.\n   */\n  const scrollTabOnSelect = (tabRef: RefObject<HTMLDivElement>) => {\n    if (tabRef.current && tabsGroupRef.current) {\n      const tabLeftOffset = tabRef.current.offsetLeft;\n      tabsGroupRef.current.scroll({\n        left: tabLeftOffset,\n        behavior: \"smooth\",\n      });\n    }\n  };\n\n  return (\n    <Box\n      ref={tabsGroupRef}\n      sx={{\n        ...(styles as CSSProperties),\n        backgroundColor: \"cl_white\",\n        overflowX: [\"scroll\", \"unset\"],\n      }}\n    >\n      <BaseGridContainer\n        gridTemplateColumns={[`repeat(${2 * tabs.length - 1}, max-content)`]}\n        width={[\"100%\"]}\n        gap={gap}\n        data-test=\"tabs-menu\"\n      >\n        {tabs.map((tab, index) => (\n          <ScrollableTabWrapper\n            key={tab.hash}\n            hash={tab.hash}\n            autoScrollTabs={autoScrollTabs}\n            selectedTab={selectedTab}\n            scrollTabOnSelect={scrollTabOnSelect}\n          >\n            <MaxMaxContainer gap={tab.divider ? gap : [\"0px\"]} key={index}>\n              <Tab\n                Icon={tab.Icon}\n                iconHeight={tab.iconHeight}\n                title={tab.title}\n                hash={tab.hash}\n                activeColor={activeColor}\n                isActive={selectedTab === tab.hash}\n                onTabSelect={onTabSelectWrapper}\n                enableScroll={enableScroll}\n                history={history}\n                data-test={`tabs-menu-${tab.hash}`}\n              />\n              {tab.divider && <VerticalDivider />}\n            </MaxMaxContainer>\n          </ScrollableTabWrapper>\n        ))}\n      </BaseGridContainer>\n    </Box>\n  );\n}\n"],"names":["getCurrentTab","tabs","currentTab","find","tab","window","location","hash","length","TabsMenu","props","onTabSelect","selectedTab","overrideSelectedTab","activeColor","enableScroll","gap","allowChangingTabs","autoScrollTabs","history","tabsGroupRef","useRef","setSelectedTab","useState","styles","sticky","position","top","useEffect","onTabSelectWrapper","updateCurrentTab","addEventListener","removeEventListener","scrollTabOnSelect","tabRef","current","tabLeftOffset","offsetLeft","scroll","left","behavior","jsx","Box","backgroundColor","overflowX","BaseGridContainer","map","index","ScrollableTabWrapper","jsxs","MaxMaxContainer","divider","Tab","Icon","iconHeight","title","VerticalDivider"],"mappings":";;;;;;;;;AAsBA,MAAMA,IAAgBA,CAACC,MAA2B;AAC1CC,QAAAA,IAAaD,EAAKE,KACrBC,CAAQC,MAAAA,OAAOC,SAASC,SAAU,IAAGH,EAAIG,IAAK,EACjD;AACA,UAAOL,KAAAA,gBAAAA,EAAYK,SAASN,EAAKO,UAAUP,EAAK,CAAC,EAAEM,QAAS;AAC9D;AAKO,SAASE,EAASC,GAAsB;AACvC,QAAA;AAAA,IACJT,MAAAA;AAAAA,IACAU,aAAAA;AAAAA,IACAC,aAAaC;AAAAA,IACbC,aAAAA,IAAc;AAAA,IACdC,cAAAA,IAAe;AAAA,IACfC,KAAAA,IAAM,CAAC,MAAM;AAAA,IACbC,mBAAAA,IAAoB;AAAA,IACpBC,gBAAAA,IAAiB;AAAA,IACjBC,SAAAA;AAAAA,EACET,IAAAA,GAEEU,IAAeC,EAAuB,IAAI,GAC1C,CAACT,GAAaU,CAAc,IAAIC,EACnCtB,EAAKO,UAAUP,EAAK,CAAC,EAAEM,QAAS,EACnC,GAEMiB,IAASd,EAAMe,SACjB;AAAA,IACEC,UAAU;AAAA,IACVC,KAAKjB,EAAMiB,OAAO,CAAC,KAAK;AAAA,MAE1B;AAKJC,EAAAA,EAAU,MAAM;AACdf,IAAAA,KAAuBS,EAAeT,CAAmB;AAAA,EAAA,GACxD,CAACA,CAAmB,CAAC;AAQlBgB,QAAAA,IAAqBA,CAACtB,MAAiB;AAC3CI,IAAAA,KAAeA,EAAYJ,CAAI,GAC/BU,KAAqBK,EAAef,CAAI;AAAA,EAAA;AAU1CqB,EAAAA,EAAU,MAAM;AACd,UAAME,IAAmBA,MACvBb,KAAqBK,EAAetB,EAAcC,CAAI,CAAC;AAKzD,YAACY,KAAuBiB,KAEjBC,OAAAA,iBAAiB,cAAcD,CAAgB,GAC/C,MAAMzB,OAAO2B,oBAAoB,cAAcF,CAAgB;AAAA,EACrE,GAAA,CAAC7B,GAAMY,GAAqBI,CAAiB,CAAC;AAM3CgB,QAAAA,IAAoBA,CAACC,MAAsC;AAC3DA,QAAAA,EAAOC,WAAWf,EAAae,SAAS;AACpCC,YAAAA,IAAgBF,EAAOC,QAAQE;AACrCjB,MAAAA,EAAae,QAAQG,OAAO;AAAA,QAC1BC,MAAMH;AAAAA,QACNI,UAAU;AAAA,MAAA,CACX;AAAA,IACH;AAAA,EAAA;AAGF,SACG,gBAAAC,EAAAC,GAAA,EACC,KAAKtB,GACL,IAAI;AAAA,IACF,GAAII;AAAAA,IACJmB,iBAAiB;AAAA,IACjBC,WAAW,CAAC,UAAU,OAAO;AAAA,EAAA,GAG/B,UAAC,gBAAAH,EAAAI,GAAA,EACC,qBAAqB,CAAE,UAAS,IAAI5C,EAAKO,SAAS,CAAE,gBAAe,GACnE,OAAO,CAAC,MAAM,GACd,KAAAQ,GACA,aAAU,aAETf,UAAAA,EAAK6C,IAAI,CAAC1C,GAAK2C,MACd,gBAAAN,EAACO,KAEC,MAAM5C,EAAIG,MACV,gBAAAW,GACA,aAAAN,GACA,mBAAAqB,GAEA,UAAA,gBAAAgB,EAACC,KAAgB,KAAK9C,EAAI+C,UAAUnC,IAAM,CAAC,KAAK,GAC9C,UAAA;AAAA,IAAC,gBAAAyB,EAAAW,GAAA,EACC,MAAMhD,EAAIiD,MACV,YAAYjD,EAAIkD,YAChB,OAAOlD,EAAImD,OACX,MAAMnD,EAAIG,MACV,aAAAO,GACA,UAAUF,MAAgBR,EAAIG,MAC9B,aAAasB,GACb,cAAAd,GACA,SAAAI,GACA,aAAY,aAAYf,EAAIG,IAAK,GAAE,CAAA;AAAA,IAEpCH,EAAI+C,WAAW,gBAAAV,EAACe,GAAkB,CAAA,CAAA;AAAA,EAAA,EAAA,GAbmBT,CAcxD,KApBK3C,EAAIG,IAqBX,CACD,GACH,EACF,CAAA;AAEJ;"}

package/lib/sd-component-library134.js

@@ -1,5 +1,5 @@
-import { jsx as W } from "./sd-component-library196.js";
-import { Text as D } from "./sd-component-library197.js";
+import { jsx as W } from "./sd-component-library195.js";
+import { Text as D } from "./sd-component-library198.js";
 const z = (t) => {
   const {
     children: e,

package/lib/sd-component-library135.js

@@ -1,21 +1,21 @@
-import { jsx as x } from "./sd-component-library196.js";
-import c from "./sd-component-library193.js";
-import { Text as l } from "./sd-component-library197.js";
-import { SD_WEIGHT_TO_WEIGHT_MAP as p } from "./sd-component-library146.js";
-const W = c.forwardRef((o, r) => {
+import { jsx as x } from "./sd-component-library195.js";
+import l from "react";
+import { Text as c } from "./sd-component-library198.js";
+import { SD_WEIGHT_TO_WEIGHT_MAP as d } from "./sd-component-library146.js";
+const W = l.forwardRef((o, r) => {
   const {
     children: e,
     color: a = "cl_darkGrey",
     textTransform: s,
     sx: n,
-    dontTranslate: m = !1,
+    dontTranslate: f = !1,
     fontWeight: t,
-    ...f
-  } = o, i = p[t] ?? t;
-  return /* @__PURE__ */ x(l, { color: a, fontFamily: "proxima-nova", fontWeight: i, ...f, sx: {
+    ...m
+  } = o, i = d[t] ?? t;
+  return /* @__PURE__ */ x(c, { color: a, fontFamily: "proxima-nova", fontWeight: i, ...m, sx: {
     textTransform: s,
     ...n
-  }, className: m ? "no-translate" : void 0, ref: r, "data-test": "base-text-v2", children: e });
+  }, className: f ? "no-translate" : void 0, ref: r, "data-test": "base-text-v2", children: e });
 });
 export {
   W as BaseTextV2

package/lib/sd-component-library136.js

@@ -1,10 +1,10 @@
-import { jsx as t } from "./sd-component-library196.js";
-import a from "./sd-component-library193.js";
-import { BaseTextV2 as m } from "./sd-component-library135.js";
+import { jsx as o } from "./sd-component-library195.js";
+import a from "react";
+import { BaseTextV2 as f } from "./sd-component-library135.js";
 const p = a.forwardRef(({
   children: r,
   ...e
-}, o) => /* @__PURE__ */ t(m, { as: "span", ref: o, ...e, children: r }));
+}, t) => /* @__PURE__ */ o(f, { as: "span", ref: t, ...e, children: r }));
 export {
   p as BaseInlineText
 };

package/lib/sd-component-library137.js

@@ -1,11 +1,11 @@
-import { jsx as e } from "./sd-component-library196.js";
-import i from "./sd-component-library193.js";
-import { BaseTextV2 as m } from "./sd-component-library135.js";
-const x = i.forwardRef(({
+import { jsx as e } from "./sd-component-library195.js";
+import f from "react";
+import { BaseTextV2 as i } from "./sd-component-library135.js";
+const p = f.forwardRef(({
   children: r,
   ...o
-}, t) => /* @__PURE__ */ e(m, { color: "inherit", ref: t, ...o, children: r }));
+}, t) => /* @__PURE__ */ e(i, { color: "inherit", ref: t, ...o, children: r }));
 export {
-  x as InheritColorText
+  p as InheritColorText
 };
 //# sourceMappingURL=sd-component-library137.js.map

package/lib/sd-component-library138.js

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

package/lib/sd-component-library139.js

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

package/lib/sd-component-library14.js

@@ -1,15 +1,15 @@
-import { jsx as u } from "./sd-component-library196.js";
-import { r as n } from "./sd-component-library193.js";
-import "./sd-component-library197.js";
-import { Box as d } from "./sd-component-library198.js";
-const x = (c) => {
+import { jsx as u } from "./sd-component-library195.js";
+import { useRef as a, useEffect as d } from "react";
+import "./sd-component-library198.js";
+import { Box as f } from "./sd-component-library199.js";
+const h = (n) => {
   const {
     onClickOutside: r,
-    children: i,
+    children: c,
     events: o = ["mousedown", "touchstart"],
-    ...a
-  } = c, e = n.useRef(null);
-  return n.useEffect(() => {
+    ...i
+  } = n, e = a(null);
+  return d(() => {
     const s = (t) => {
       e.current && !e.current.contains(t.target) && r(t);
     };
@@ -18,9 +18,9 @@ const x = (c) => {
     })), () => {
       o.forEach((t) => document.removeEventListener(t, s));
     };
-  }, [r, e, o]), /* @__PURE__ */ u(d, { ...a, ref: e, "data-test": "outside-click-box", children: i });
+  }, [r, e, o]), /* @__PURE__ */ u(f, { ...i, ref: e, "data-test": "outside-click-box", children: c });
 };
 export {
-  x as OutsideClickBox
+  h as OutsideClickBox
 };
 //# sourceMappingURL=sd-component-library14.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library14.js","sources":["../src/components/boxes/outside-click-box/outside-click-box.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { OutsideClickBoxProps as Props } from \"./interfaces\";\n\nexport const OutsideClickBox: React.FC<Props> = (props) => {\n  const {\n    onClickOutside,\n    children,\n    events = [\"mousedown\", \"touchstart\"],\n    ...boxProps\n  } = props;\n  const ref = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const handler = (event: any) => {\n      if (ref.current && !ref.current.contains(event.target)) {\n        onClickOutside(event);\n      }\n    };\n\n    events.forEach((event) =>\n      document.addEventListener(event, handler, { passive: false })\n    );\n    return () => {\n      events.forEach((event) => document.removeEventListener(event, handler));\n    };\n  }, [onClickOutside, ref, events]);\n\n  return (\n    <Box {...boxProps} ref={ref} data-test=\"outside-click-box\">\n      {children}\n    </Box>\n  );\n};\n"],"names":["OutsideClickBox","props","onClickOutside","children","events","boxProps","ref","useRef","useEffect","handler","event","current","contains","target","forEach","document","addEventListener","passive","removeEventListener","Box"],"mappings":";;;;AAMO,MAAMA,IAAoCC,CAAUA,MAAA;AACnD,QAAA;AAAA,IACJC,gBAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,QAAAA,IAAS,CAAC,aAAa,YAAY;AAAA,IACnC,GAAGC;AAAAA,EACDJ,IAAAA,GACEK,IAAMC,SAAoB,IAAI;AAEpCC,SAAAA,EAAAA,UAAU,MAAM;AACRC,UAAAA,IAAUA,CAACC,MAAe;AAC1BJ,MAAAA,EAAIK,WAAW,CAACL,EAAIK,QAAQC,SAASF,EAAMG,MAAM,KACnDX,EAAeQ,CAAK;AAAA,IACtB;AAGFN,WAAAA,EAAOU,QAASJ,CAAAA,MACdK,SAASC,iBAAiBN,GAAOD,GAAS;AAAA,MAAEQ,SAAS;AAAA,IAAO,CAAA,CAC9D,GACO,MAAM;AACXb,MAAAA,EAAOU,QAASJ,CAAUK,MAAAA,SAASG,oBAAoBR,GAAOD,CAAO,CAAC;AAAA,IAAA;AAAA,EAEvE,GAAA,CAACP,GAAgBI,GAAKF,CAAM,CAAC,qBAG7Be,GAAI,EAAA,GAAId,GAAU,KAAAC,GAAU,aAAU,qBACpCH,UAAAA,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library14.js","sources":["../src/components/boxes/outside-click-box/outside-click-box.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { OutsideClickBoxProps as Props } from \"./interfaces\";\n\nexport const OutsideClickBox: React.FC<Props> = (props) => {\n  const {\n    onClickOutside,\n    children,\n    events = [\"mousedown\", \"touchstart\"],\n    ...boxProps\n  } = props;\n  const ref = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const handler = (event: any) => {\n      if (ref.current && !ref.current.contains(event.target)) {\n        onClickOutside(event);\n      }\n    };\n\n    events.forEach((event) =>\n      document.addEventListener(event, handler, { passive: false })\n    );\n    return () => {\n      events.forEach((event) => document.removeEventListener(event, handler));\n    };\n  }, [onClickOutside, ref, events]);\n\n  return (\n    <Box {...boxProps} ref={ref} data-test=\"outside-click-box\">\n      {children}\n    </Box>\n  );\n};\n"],"names":["OutsideClickBox","props","onClickOutside","children","events","boxProps","ref","useRef","useEffect","handler","event","current","contains","target","forEach","document","addEventListener","passive","removeEventListener","Box"],"mappings":";;;;AAMO,MAAMA,IAAoCC,CAAUA,MAAA;AACnD,QAAA;AAAA,IACJC,gBAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,QAAAA,IAAS,CAAC,aAAa,YAAY;AAAA,IACnC,GAAGC;AAAAA,EACDJ,IAAAA,GACEK,IAAMC,EAAoB,IAAI;AAEpCC,SAAAA,EAAU,MAAM;AACRC,UAAAA,IAAUA,CAACC,MAAe;AAC1BJ,MAAAA,EAAIK,WAAW,CAACL,EAAIK,QAAQC,SAASF,EAAMG,MAAM,KACnDX,EAAeQ,CAAK;AAAA,IACtB;AAGFN,WAAAA,EAAOU,QAASJ,CAAAA,MACdK,SAASC,iBAAiBN,GAAOD,GAAS;AAAA,MAAEQ,SAAS;AAAA,IAAO,CAAA,CAC9D,GACO,MAAM;AACXb,MAAAA,EAAOU,QAASJ,CAAUK,MAAAA,SAASG,oBAAoBR,GAAOD,CAAO,CAAC;AAAA,IAAA;AAAA,EAEvE,GAAA,CAACP,GAAgBI,GAAKF,CAAM,CAAC,qBAG7Be,GAAI,EAAA,GAAId,GAAU,KAAAC,GAAU,aAAU,qBACpCH,UAAAA,EACH,CAAA;AAEJ;"}

package/lib/sd-component-library140.js

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

package/lib/sd-component-library141.js

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

package/lib/sd-component-library142.js

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

package/lib/sd-component-library143.js

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

package/lib/sd-component-library144.js

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

package/lib/sd-component-library145.js

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

package/lib/sd-component-library147.js

@@ -1,13 +1,13 @@
-import { jsx as f } from "./sd-component-library196.js";
-import m from "./sd-component-library193.js";
+import { jsx as p } from "./sd-component-library195.js";
+import m from "react";
 import { BaseTextV2 as c } from "./sd-component-library135.js";
 import { SD_WEIGHT_TO_WEIGHT_MAP as x } from "./sd-component-library146.js";
 const S = 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]) => x[p]);
-  return /* @__PURE__ */ f(c, { ...i, fontSize: a, fontWeight: n, ref: s, "data-test": "responsive-text-v2" });
+  } = e, o = ((t) => Array.isArray(t[0]))(r) ? r : [r], a = o.map(([t]) => `${t}px`), n = o.map(([t, f]) => x[f]);
+  return /* @__PURE__ */ p(c, { ...i, fontSize: a, fontWeight: n, ref: s, "data-test": "responsive-text-v2" });
 });
 export {
   S as ResponsiveTextV2