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

package/lib/sd-component-library128.js

@@ -1,28 +1,28 @@
-import { j as r } from "./sd-component-library196.js";
-import { r as l } from "./sd-component-library193.js";
-import "./sd-component-library199.js";
-import { Flex as b, Box as a } from "./sd-component-library200.js";
-const R = (t) => {
-  const { value: e } = t, [o, n] = l.useState(e || "left");
-  l.useEffect(() => {
+import { j as r } from "./sd-component-library195.js";
+import { useState as v, useEffect as b } from "react";
+import "./sd-component-library198.js";
+import { Flex as m, Box as a } from "./sd-component-library199.js";
+const S = (t) => {
+  const { value: e } = t, [o, n] = v(e || "left");
+  b(() => {
     e && n(e);
   }, [e]);
-  const x = () => {
+  const l = () => {
     n("left"), t.leftActive();
-  }, u = () => {
+  }, x = () => {
     n("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"
-  }, s = (v) => v === o ? h : f, i = t.borderRadius || "3px", c = `${i} 0 0 ${i}`, d = `0 ${i} ${i} 0`;
+  }, s = (f) => f === o ? u : h, i = t.borderRadius || "3px", c = `${i} 0 0 ${i}`, d = `0 ${i} ${i} 0`;
   return /* @__PURE__ */ r.jsxs(
-    b,
+    m,
     {
       ...t,
       width: t.width || "280px",
@@ -51,7 +51,7 @@ const R = (t) => {
         /* @__PURE__ */ r.jsx(
           a,
           {
-            onClick: x,
+            onClick: l,
             width: "50%",
             variant: "_switches.textSwitch.side",
             py: t.sidePy,
@@ -67,7 +67,7 @@ const R = (t) => {
         /* @__PURE__ */ r.jsx(
           a,
           {
-            onClick: u,
+            onClick: x,
             width: "50%",
             variant: "_switches.textSwitch.side",
             py: t.sidePy,
@@ -85,6 +85,6 @@ const R = (t) => {
   );
 };
 export {
-  R as TextSwitch
+  S 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","rightClicked","activeStyle","unactiveStyle","currentStyle","side","borderRadius","leftBorderRadius","rightBorderRadius","jsxs","Flex","jsx","Box"],"mappings":";;;;AAMa,MAAAA,IAAuD,CAClEC,MACwC;AAClC,QAAA,EAAE,OAAAC,EAAU,IAAAD,GACZ,CAACE,GAAYC,CAAa,IAAIC,EAAAA,SAAgBH,KAAS,MAAM;AAEnEI,EAAAA,EAAAA,UAAU,MAAM;AACd,IAAAJ,KAASE,EAAcF,CAAK;AAAA,EAAA,GAC3B,CAACA,CAAK,CAAC;AAEV,QAAMK,IAAc,MAAM;AACxB,IAAAH,EAAc,MAAM,GACpBH,EAAM,WAAW;AAAA,EAAA,GAGbO,IAAe,MAAM;AACzB,IAAAJ,EAAc,OAAO,GACrBH,EAAM,YAAY;AAAA,EAAA,GAGdQ,IAAc;AAAA,IAClB,OAAOR,EAAM,mBAAmB;AAAA,IAChC,QAAQ;AAAA,IACR,iBAAiB;AAAA,EAAA,GAGbS,IAAgB;AAAA,IACpB,OAAOT,EAAM;AAAA,IACb,QAAQ;AAAA,IACR,aAAaA,EAAM;AAAA,IACnB,iBAAiBA,EAAM,mBAAmB;AAAA,EAAA,GAGtCU,IAAe,CAACC,MACbA,MAAST,IAAaM,IAAcC,GAGvCG,IAAeZ,EAAM,gBAAgB,OACrCa,IAAmB,GAAGD,CAAY,QAAQA,CAAY,IACtDE,IAAoB,KAAKF,CAAY,IAAIA,CAAY;AAGzD,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGhB;AAAA,MACJ,OAAOA,EAAM,SAAS;AAAA,MACtB,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MACA,aAAU;AAAA,MAEV,UAAA;AAAA,QAAAiB,gBAAAA,EAAA;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,iBAAiBlB,EAAM;AAAA,cACvB,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,cACV,WACEE,MAAe,SAAS,kBAAkB;AAAA,cAC5C,oBAAoB;AAAA,cACpB,0BAA0B;AAAA,cAC1B,oBAAoB;AAAA,cACpB,cACEA,MAAe,SAASW,IAAmBC;AAAA,YAC/C;AAAA,UAAA;AAAA,QACF;AAAA,QACAG,gBAAAA,EAAA;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,SAASZ;AAAA,YACT,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,IAAIN,EAAM;AAAA,YACV,IAAIA,EAAM;AAAA,YACV,IAAI;AAAA,cACF,cAAca;AAAA,cACd,GAAGH,EAAa,MAAM;AAAA,cACtB,aAAa;AAAA,YACf;AAAA,YAEC,UAAMV,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,QACAiB,gBAAAA,EAAA;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,SAASX;AAAA,YACT,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,IAAIP,EAAM;AAAA,YACV,IAAIA,EAAM;AAAA,YACV,IAAI;AAAA,cACF,cAAcc;AAAA,cACd,GAAGJ,EAAa,OAAO;AAAA,cACvB,YAAY;AAAA,YACd;AAAA,YAEC,UAAMV,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"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","rightClicked","activeStyle","unactiveStyle","currentStyle","side","borderRadius","leftBorderRadius","rightBorderRadius","jsxs","Flex","jsx","Box"],"mappings":";;;;AAMa,MAAAA,IAAuD,CAClEC,MACwC;AAClC,QAAA,EAAE,OAAAC,EAAU,IAAAD,GACZ,CAACE,GAAYC,CAAa,IAAIC,EAAgBH,KAAS,MAAM;AAEnE,EAAAI,EAAU,MAAM;AACd,IAAAJ,KAASE,EAAcF,CAAK;AAAA,EAAA,GAC3B,CAACA,CAAK,CAAC;AAEV,QAAMK,IAAc,MAAM;AACxB,IAAAH,EAAc,MAAM,GACpBH,EAAM,WAAW;AAAA,EAAA,GAGbO,IAAe,MAAM;AACzB,IAAAJ,EAAc,OAAO,GACrBH,EAAM,YAAY;AAAA,EAAA,GAGdQ,IAAc;AAAA,IAClB,OAAOR,EAAM,mBAAmB;AAAA,IAChC,QAAQ;AAAA,IACR,iBAAiB;AAAA,EAAA,GAGbS,IAAgB;AAAA,IACpB,OAAOT,EAAM;AAAA,IACb,QAAQ;AAAA,IACR,aAAaA,EAAM;AAAA,IACnB,iBAAiBA,EAAM,mBAAmB;AAAA,EAAA,GAGtCU,IAAe,CAACC,MACbA,MAAST,IAAaM,IAAcC,GAGvCG,IAAeZ,EAAM,gBAAgB,OACrCa,IAAmB,GAAGD,CAAY,QAAQA,CAAY,IACtDE,IAAoB,KAAKF,CAAY,IAAIA,CAAY;AAGzD,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGhB;AAAA,MACJ,OAAOA,EAAM,SAAS;AAAA,MACtB,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MACA,aAAU;AAAA,MAEV,UAAA;AAAA,QAAAiB,gBAAAA,EAAA;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,iBAAiBlB,EAAM;AAAA,cACvB,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,cACV,WACEE,MAAe,SAAS,kBAAkB;AAAA,cAC5C,oBAAoB;AAAA,cACpB,0BAA0B;AAAA,cAC1B,oBAAoB;AAAA,cACpB,cACEA,MAAe,SAASW,IAAmBC;AAAA,YAC/C;AAAA,UAAA;AAAA,QACF;AAAA,QACAG,gBAAAA,EAAA;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,SAASZ;AAAA,YACT,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,IAAIN,EAAM;AAAA,YACV,IAAIA,EAAM;AAAA,YACV,IAAI;AAAA,cACF,cAAca;AAAA,cACd,GAAGH,EAAa,MAAM;AAAA,cACtB,aAAa;AAAA,YACf;AAAA,YAEC,UAAMV,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,QACAiB,gBAAAA,EAAA;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,SAASX;AAAA,YACT,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,IAAIP,EAAM;AAAA,YACV,IAAIA,EAAM;AAAA,YACV,IAAI;AAAA,cACF,cAAcc;AAAA,cACd,GAAGJ,EAAa,OAAO;AAAA,cACvB,YAAY;AAAA,YACd;AAAA,YAEC,UAAMV,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library129.js

@@ -1,7 +1,7 @@
-import { j as o } from "./sd-component-library196.js";
-import "./sd-component-library199.js";
+import { j as o } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
 import { useDependantState as x } from "./sd-component-library3.js";
-import { Box as e } from "./sd-component-library200.js";
+import { Box as e } from "./sd-component-library199.js";
 const i = 200, u = (r) => {
   const { initialState: s = !1, onClick: t } = r, [n, p] = x(s), a = () => {
     p((l) => !l), setTimeout(() => t == null ? void 0 : t(), i);

package/lib/sd-component-library13.js

@@ -1,6 +1,6 @@
-import { j as t } from "./sd-component-library196.js";
-import "./sd-component-library199.js";
-import { Box as a } from "./sd-component-library200.js";
+import { j as t } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
+import { Box as a } from "./sd-component-library199.js";
 const m = (o) => {
   const { children: r, ...s } = o;
   return /* @__PURE__ */ t.jsx(a, { className: "no-translate", ...s, children: r });

package/lib/sd-component-library130.js

@@ -1,12 +1,12 @@
-import { j as t } from "./sd-component-library196.js";
-import { r as O } from "./sd-component-library193.js";
-import "./sd-component-library199.js";
+import { j as t } from "./sd-component-library195.js";
+import { useState as y } from "react";
+import "./sd-component-library198.js";
 import { useBoundingClientRect as m } from "./sd-component-library3.js";
-import { Flex as x } from "./sd-component-library200.js";
-import { ArrowButton as l } from "./sd-component-library275.js";
-import { Mask as p } from "./sd-component-library276.js";
-import { Tab as y } from "./sd-component-library277.js";
-import { HorizontalDivider as A } from "./sd-component-library51.js";
+import { Flex as x } from "./sd-component-library199.js";
+import { ArrowButton as l } from "./sd-component-library246.js";
+import { Mask as p } from "./sd-component-library247.js";
+import { Tab as A } from "./sd-component-library248.js";
+import { HorizontalDivider as E } from "./sd-component-library51.js";
 const s = 30, e = `${s}px`, w = "30px";
 function U({
   tabs: u,
@@ -27,16 +27,16 @@ function U({
   tabSx: X,
   innerContainerSx: _
 }) {
-  const [a, d] = O.useState(0), { ref: $, rect: r } = m({
+  const [d, a] = y(0), { ref: $, rect: r } = m({
     listenForResize: !0
   }), { ref: D, rect: o } = m({
     listenForResize: !0
-  }), f = !n && o && r && !!a, h = !n && o && r && a + r.width < o.width, E = () => {
-    o && r && d(
+  }), f = !n && o && r && !!d, h = !n && o && r && d + r.width < o.width, L = () => {
+    o && r && a(
       (i) => Math.max(0, i - r.width + 2 * s)
     );
-  }, L = () => {
-    o && r && d(
+  }, O = () => {
+    o && r && a(
       (i) => Math.min(
         o.width - r.width + s,
         i + r.width - 2 * s
@@ -62,7 +62,7 @@ function U({
             l,
             {
               width: e,
-              onClick: E,
+              onClick: L,
               direction: "left"
             }
           ),
@@ -73,7 +73,7 @@ function U({
             l,
             {
               width: e,
-              onClick: L,
+              onClick: O,
               direction: "right"
             }
           ),
@@ -86,14 +86,14 @@ function U({
               width: n ? "auto" : "max-content",
               ml: f ? e : 0,
               mr: h ? e : 0,
-              transform: `translateX(${-a}px)`,
+              transform: `translateX(${-d}px)`,
               transition: "transform 0.2s",
               overflowX: n ? "auto" : void 0,
               ..._
             },
             ref: D,
             children: u.map((i) => /* @__PURE__ */ t.jsx(
-              y,
+              A,
               {
                 activeColor: g,
                 color: R,
@@ -113,7 +113,7 @@ function U({
             ))
           }
         ),
-        k && /* @__PURE__ */ t.jsx(A, { height: "2px" })
+        k && /* @__PURE__ */ t.jsx(E, { height: "2px" })
       ]
     }
   );

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","containerRef","containerRect","useBoundingClientRect","contentRef","contentRect","canScrollLeft","canScrollRight","onScrollLeftClick","prev","onScrollRightClick","jsxs","Flex","Fragment","jsx","ArrowButton","Mask","t","Tab","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","containerRef","containerRect","useBoundingClientRect","contentRef","contentRect","canScrollLeft","canScrollRight","onScrollLeftClick","prev","onScrollRightClick","jsxs","Flex","Fragment","jsx","ArrowButton","Mask","t","Tab","HorizontalDivider"],"mappings":"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"}

package/lib/sd-component-library131.js

@@ -1,7 +1,7 @@
-import { j as t } from "./sd-component-library196.js";
-import "./sd-component-library199.js";
-import { Box as w, Flex as s } from "./sd-component-library200.js";
-import { TabV2 as T } from "./sd-component-library278.js";
+import { j as t } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
+import { Box as w, Flex as s } from "./sd-component-library199.js";
+import { TabV2 as T } from "./sd-component-library249.js";
 import { GridContainerV2 as _ } from "./sd-component-library41.js";
 const h = 25, W = ({
   tabs: e,

package/lib/sd-component-library132.js

@@ -1,6 +1,6 @@
-import { j as s } from "./sd-component-library196.js";
-import "./sd-component-library199.js";
-import { Box as d } from "./sd-component-library200.js";
+import { j as s } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
+import { Box as d } from "./sd-component-library199.js";
 import { TabBarV2 as i } from "./sd-component-library131.js";
 const l = (r) => {
   const { tabs: e, selectedTabId: t, ...n } = r, a = e.findIndex(({ id: c }) => c === t), o = e[a];

package/lib/sd-component-library133.js

@@ -1,95 +1,95 @@
-import { j as r } from "./sd-component-library196.js";
-import { r as a } from "./sd-component-library193.js";
-import "./sd-component-library199.js";
-import { Box as v } from "./sd-component-library200.js";
-import { BaseGridContainer as w } from "./sd-component-library38.js";
-import { ScrollableTabWrapper as S } from "./sd-component-library279.js";
-import { MaxMaxContainer as C } from "./sd-component-library43.js";
-import { Tab as j } from "./sd-component-library280.js";
-import { VerticalDivider as E } from "./sd-component-library52.js";
-const y = (o) => {
+import { j as r } from "./sd-component-library195.js";
+import { useRef as v, useState as w, useEffect as m } from "react";
+import "./sd-component-library198.js";
+import { Box as S } from "./sd-component-library199.js";
+import { BaseGridContainer as C } from "./sd-component-library38.js";
+import { ScrollableTabWrapper as j } from "./sd-component-library251.js";
+import { MaxMaxContainer as E } from "./sd-component-library43.js";
+import { Tab as y } from "./sd-component-library252.js";
+import { VerticalDivider as B } from "./sd-component-library52.js";
+const L = (o) => {
   const t = o.find(
     (n) => window.location.hash === `#${n.hash}`
   );
   return (t == null ? void 0 : t.hash) || o.length && o[0].hash || "";
 };
-function R(o) {
+function _(o) {
   const {
     tabs: t,
     onTabSelect: n,
     selectedTab: s,
-    activeColor: m = "#9E1CB5",
-    enableScroll: u = !0,
-    gap: d = ["15px"],
-    allowChangingTabs: i = !0,
+    activeColor: u = "#9E1CB5",
+    enableScroll: f = !0,
+    gap: h = ["15px"],
+    allowChangingTabs: a = !0,
     autoScrollTabs: p = !1,
     history: x
-  } = o, c = a.useRef(null), [f, l] = a.useState(
+  } = o, i = v(null), [d, c] = w(
     t.length && t[0].hash || ""
   ), T = o.sticky ? {
     position: "sticky",
     top: o.top || ["0px"]
   } : {};
-  a.useEffect(() => {
-    s && l(s);
+  m(() => {
+    s && c(s);
   }, [s]);
   const g = (e) => {
-    n && n(e), i && l(e);
+    n && n(e), a && c(e);
   };
-  a.useEffect(() => {
-    const e = () => i && l(y(t));
+  m(() => {
+    const e = () => a && c(L(t));
     return !s && e(), window.addEventListener("hashchange", e), () => window.removeEventListener("hashchange", e);
-  }, [t, s, i]);
+  }, [t, s, 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__ */ r.jsx(
-    v,
+    S,
     {
-      ref: c,
+      ref: i,
       sx: {
         ...T,
         backgroundColor: "cl_white",
         overflowX: ["scroll", "unset"]
       },
       children: /* @__PURE__ */ r.jsx(
-        w,
+        C,
         {
           gridTemplateColumns: [`repeat(${2 * t.length - 1}, max-content)`],
           width: ["100%"],
-          gap: d,
+          gap: h,
           "data-test": "tabs-menu",
-          children: t.map((e, h) => /* @__PURE__ */ r.jsx(
-            S,
+          children: t.map((e, l) => /* @__PURE__ */ r.jsx(
+            j,
             {
               hash: e.hash,
               autoScrollTabs: p,
-              selectedTab: f,
+              selectedTab: d,
               scrollTabOnSelect: b,
-              children: /* @__PURE__ */ r.jsxs(C, { gap: e.divider ? d : ["0px"], children: [
+              children: /* @__PURE__ */ r.jsxs(E, { gap: e.divider ? h : ["0px"], children: [
                 /* @__PURE__ */ r.jsx(
-                  j,
+                  y,
                   {
                     Icon: e.Icon,
                     iconHeight: e.iconHeight,
                     title: e.title,
                     hash: e.hash,
-                    activeColor: m,
-                    isActive: f === e.hash,
+                    activeColor: u,
+                    isActive: d === e.hash,
                     onTabSelect: g,
-                    enableScroll: u,
+                    enableScroll: f,
                     history: x,
                     "data-test": `tabs-menu-${e.hash}`
                   }
                 ),
-                e.divider && /* @__PURE__ */ r.jsx(E, {})
-              ] }, h)
+                e.divider && /* @__PURE__ */ r.jsx(B, {})
+              ] }, l)
             },
             e.hash
           ))
@@ -99,6 +99,6 @@ function R(o) {
   );
 }
 export {
-  R as TabsMenu
+  _ 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","tab","TabsMenu","props","onTabSelect","overrideSelectedTab","activeColor","enableScroll","gap","allowChangingTabs","autoScrollTabs","history","tabsGroupRef","useRef","selectedTab","setSelectedTab","useState","styles","useEffect","onTabSelectWrapper","hash","updateCurrentTab","scrollTabOnSelect","tabRef","tabLeftOffset","jsx","Box","BaseGridContainer","index","ScrollableTabWrapper","jsxs","MaxMaxContainer","Tab","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","tab","TabsMenu","props","onTabSelect","overrideSelectedTab","activeColor","enableScroll","gap","allowChangingTabs","autoScrollTabs","history","tabsGroupRef","useRef","selectedTab","setSelectedTab","useState","styles","useEffect","onTabSelectWrapper","hash","updateCurrentTab","scrollTabOnSelect","tabRef","tabLeftOffset","jsx","Box","BaseGridContainer","index","ScrollableTabWrapper","jsxs","MaxMaxContainer","Tab","VerticalDivider"],"mappings":"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"}

package/lib/sd-component-library134.js

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

package/lib/sd-component-library135.js

@@ -1,8 +1,8 @@
-import { j as f } from "./sd-component-library196.js";
-import c from "./sd-component-library193.js";
-import { Text as l } from "./sd-component-library199.js";
+import { j 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 p } from "./sd-component-library146.js";
-const W = c.forwardRef((o, r) => {
+const W = l.forwardRef((o, r) => {
   const {
     children: e,
     color: a = "cl_darkGrey",
@@ -10,15 +10,15 @@ const W = c.forwardRef((o, r) => {
     sx: n,
     dontTranslate: m = !1,
     fontWeight: t,
-    ...i
-  } = o, x = p[t] ?? t;
-  return /* @__PURE__ */ f.jsx(
-    l,
+    ...f
+  } = o, i = p[t] ?? t;
+  return /* @__PURE__ */ x.jsx(
+    c,
     {
       color: a,
       fontFamily: "proxima-nova",
-      fontWeight: x,
-      ...i,
+      fontWeight: i,
+      ...f,
       sx: {
         textTransform: s,
         ...n

package/lib/sd-component-library136.js

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

package/lib/sd-component-library137.js

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

package/lib/sd-component-library138.js

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

package/lib/sd-component-library139.js

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

package/lib/sd-component-library14.js

@@ -1,15 +1,15 @@
-import { j as u } from "./sd-component-library196.js";
-import { r as n } from "./sd-component-library193.js";
-import "./sd-component-library199.js";
-import { Box as m } from "./sd-component-library200.js";
-const l = (c) => {
+import { j as u } from "./sd-component-library195.js";
+import { useRef as a, useEffect as m } from "react";
+import "./sd-component-library198.js";
+import { Box as d } from "./sd-component-library199.js";
+const E = (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 m(() => {
     const s = (t) => {
       e.current && !e.current.contains(t.target) && r(t);
     };
@@ -18,9 +18,9 @@ const l = (c) => {
     ), () => {
       o.forEach((t) => document.removeEventListener(t, s));
     };
-  }, [r, e, o]), /* @__PURE__ */ u.jsx(m, { ...a, ref: e, "data-test": "outside-click-box", children: i });
+  }, [r, e, o]), /* @__PURE__ */ u.jsx(d, { ...i, ref: e, "data-test": "outside-click-box", children: c });
 };
 export {
-  l as OutsideClickBox
+  E 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","Box"],"mappings":";;;;AAMa,MAAAA,IAAmC,CAACC,MAAU;AACnD,QAAA;AAAA,IACJ,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC,IAAS,CAAC,aAAa,YAAY;AAAA,IACnC,GAAGC;AAAA,EACD,IAAAJ,GACEK,IAAMC,SAAoB,IAAI;AAEpCC,SAAAA,EAAAA,UAAU,MAAM;AACR,UAAAC,IAAU,CAACC,MAAe;AAC1B,MAAAJ,EAAI,WAAW,CAACA,EAAI,QAAQ,SAASI,EAAM,MAAM,KACnDR,EAAeQ,CAAK;AAAA,IACtB;AAGK,WAAAN,EAAA;AAAA,MAAQ,CAACM,MACd,SAAS,iBAAiBA,GAAOD,GAAS,EAAE,SAAS,IAAO;AAAA,IAAA,GAEvD,MAAM;AACX,MAAAL,EAAO,QAAQ,CAACM,MAAU,SAAS,oBAAoBA,GAAOD,CAAO,CAAC;AAAA,IAAA;AAAA,EAEvE,GAAA,CAACP,GAAgBI,GAAKF,CAAM,CAAC,yBAG7BO,GAAK,EAAA,GAAGN,GAAU,KAAAC,GAAU,aAAU,qBACpC,UAAAH,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","Box"],"mappings":";;;;AAMa,MAAAA,IAAmC,CAACC,MAAU;AACnD,QAAA;AAAA,IACJ,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC,IAAS,CAAC,aAAa,YAAY;AAAA,IACnC,GAAGC;AAAA,EACD,IAAAJ,GACEK,IAAMC,EAAoB,IAAI;AAEpC,SAAAC,EAAU,MAAM;AACR,UAAAC,IAAU,CAACC,MAAe;AAC1B,MAAAJ,EAAI,WAAW,CAACA,EAAI,QAAQ,SAASI,EAAM,MAAM,KACnDR,EAAeQ,CAAK;AAAA,IACtB;AAGK,WAAAN,EAAA;AAAA,MAAQ,CAACM,MACd,SAAS,iBAAiBA,GAAOD,GAAS,EAAE,SAAS,IAAO;AAAA,IAAA,GAEvD,MAAM;AACX,MAAAL,EAAO,QAAQ,CAACM,MAAU,SAAS,oBAAoBA,GAAOD,CAAO,CAAC;AAAA,IAAA;AAAA,EAEvE,GAAA,CAACP,GAAgBI,GAAKF,CAAM,CAAC,yBAG7BO,GAAK,EAAA,GAAGN,GAAU,KAAAC,GAAU,aAAU,qBACpC,UAAAH,EACH,CAAA;AAEJ;"}

package/lib/sd-component-library140.js

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

package/lib/sd-component-library141.js

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

package/lib/sd-component-library142.js

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

package/lib/sd-component-library143.js

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