@selfdecode/sd-component-library 4.0.95 → 4.0.97

package/lib/sd-component-library132.js

@@ -1,48 +1,92 @@
-import { j as o } from "./sd-component-library196.js";
-import { Box as e } from "rebass";
-import { useDependantState as d } from "./sd-component-library3.js";
-const i = 200, m = (r) => {
-  const { initialState: s = !1, onClick: t } = r, [n, p] = d(s), l = () => {
-    p((a) => !a), setTimeout(() => t == null ? void 0 : t(), i);
-  };
-  return /* @__PURE__ */ o.jsx(
-    e,
+import { j as r } from "./sd-component-library197.js";
+import { useState as g, useEffect as v } from "react";
+import { Flex as b, Box as a } from "rebass";
+const R = (t) => {
+  const { value: e } = t, [o, n] = g(e || "left");
+  v(() => {
+    e && n(e);
+  }, [e]);
+  const l = () => {
+    n("left"), t.leftActive();
+  }, x = () => {
+    n("right"), t.rightActive();
+  }, u = {
+    color: t.activeTextColor || "#fff",
+    border: "none",
+    backgroundColor: "transparent"
+  }, h = {
+    color: t.unactiveTextColor,
+    border: "1px solid",
+    borderColor: t.unactiveTextColor,
+    backgroundColor: t.unactiveBGColor || "transparent"
+  }, d = (f) => f === o ? u : h, i = t.borderRadius || "3px", s = `${i} 0 0 ${i}`, c = `0 ${i} ${i} 0`;
+  return /* @__PURE__ */ r.jsxs(
+    b,
     {
-      width: "35px",
-      height: "14px",
+      ...t,
+      width: t.width || "280px",
       sx: {
         position: "relative",
-        borderRadius: "7px",
-        borderWidth: "1px",
-        borderStyle: "solid",
-        borderColor: "cl_headerLine",
-        bg: "cl_white",
         cursor: "pointer"
       },
-      onClick: l,
-      children: /* @__PURE__ */ o.jsx(
-        e,
-        {
-          sx: {
-            height: "14px",
-            position: "absolute",
-            borderRadius: "7px",
-            outline: "1px solid white",
-            bg: "cl_purple",
-            textTransform: "uppercase",
-            overflow: "hidden",
-            width: "20px",
-            top: "-1px",
-            left: "-1px",
-            transform: `translateX(${n ? "15px" : 0})`,
-            transition: `all ${i}ms`
+      "data-testid": "text-switch",
+      children: [
+        /* @__PURE__ */ r.jsx(
+          a,
+          {
+            sx: {
+              backgroundColor: t.activeBGColor,
+              height: "100%",
+              width: "50%",
+              position: "absolute",
+              transform: o === "left" ? "translateX(0)" : "translateX(100%)",
+              transitionProperty: "transform",
+              transitionTimingFunction: "ease-out",
+              transitionDuration: "0.1s",
+              borderRadius: o === "left" ? s : c
+            },
+            "data-testid": "toggle"
           }
-        }
-      )
+        ),
+        /* @__PURE__ */ r.jsx(
+          a,
+          {
+            onClick: l,
+            width: "50%",
+            variant: "_switches.textSwitch.side",
+            py: t.sidePy,
+            px: t.sidePx,
+            sx: {
+              borderRadius: s,
+              ...d("left"),
+              borderRight: "none !important"
+            },
+            "data-testid": "left",
+            children: t.leftText
+          }
+        ),
+        /* @__PURE__ */ r.jsx(
+          a,
+          {
+            onClick: x,
+            width: "50%",
+            variant: "_switches.textSwitch.side",
+            py: t.sidePy,
+            px: t.sidePx,
+            sx: {
+              borderRadius: c,
+              ...d("right"),
+              borderLeft: "none !important"
+            },
+            "data-testid": "right",
+            children: t.rightText
+          }
+        )
+      ]
     }
   );
 };
 export {
-  m as ToggleSwitch
+  R as TextSwitch
 };
 //# sourceMappingURL=sd-component-library132.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library132.js","sources":["../src/components/switches/toggle-switch/toggle-switch.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { useDependantState } from \"../../../core/custom-hooks\";\nimport { ToggleSwitchProps as Props } from \"./interfaces\";\n\nconst animationDuration = 200;\n\nexport const ToggleSwitch: React.FC<Props> = (props) => {\n  const { initialState = false, onClick } = props;\n  const [isToggled, setIsToggled] = useDependantState(initialState);\n\n  const onBadgeClick = () => {\n    setIsToggled((prev) => !prev);\n    setTimeout(() => onClick?.(), animationDuration);\n  };\n\n  return (\n    <Box\n      width=\"35px\"\n      height=\"14px\"\n      sx={{\n        position: \"relative\",\n        borderRadius: \"7px\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderColor: \"cl_headerLine\",\n        bg: \"cl_white\",\n        cursor: \"pointer\",\n      }}\n      onClick={onBadgeClick}\n    >\n      <Box\n        sx={{\n          height: \"14px\",\n          position: \"absolute\",\n          borderRadius: \"7px\",\n          outline: \"1px solid white\",\n          bg: \"cl_purple\",\n          textTransform: \"uppercase\",\n          overflow: \"hidden\",\n          width: \"20px\",\n          top: \"-1px\",\n          left: \"-1px\",\n          transform: `translateX(${isToggled ? \"15px\" : 0})`,\n          transition: `all ${animationDuration}ms`,\n        }}\n      />\n    </Box>\n  );\n};\n"],"names":["animationDuration","ToggleSwitch","props","initialState","onClick","isToggled","setIsToggled","useDependantState","onBadgeClick","prev","jsx","Box"],"mappings":";;;AAOA,MAAMA,IAAoB,KAEbC,IAAgC,CAACC,MAAU;AACtD,QAAM,EAAE,cAAAC,IAAe,IAAO,SAAAC,EAAA,IAAYF,GACpC,CAACG,GAAWC,CAAY,IAAIC,EAAkBJ,CAAY,GAE1DK,IAAe,MAAM;AACZ,IAAAF,EAAA,CAACG,MAAS,CAACA,CAAI,GACjB,WAAA,MAAML,KAAA,gBAAAA,KAAaJ,CAAiB;AAAA,EAAA;AAI/C,SAAAU,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,IAAI;AAAA,QACF,UAAU;AAAA,QACV,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,IAAI;AAAA,QACJ,QAAQ;AAAA,MACV;AAAA,MACA,SAASH;AAAA,MAET,UAAAE,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,cAAc;AAAA,YACd,SAAS;AAAA,YACT,IAAI;AAAA,YACJ,eAAe;AAAA,YACf,UAAU;AAAA,YACV,OAAO;AAAA,YACP,KAAK;AAAA,YACL,MAAM;AAAA,YACN,WAAW,cAAcN,IAAY,SAAS,CAAC;AAAA,YAC/C,YAAY,OAAOL,CAAiB;AAAA,UACtC;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library132.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.FC<TextSwitchProps> = (props) => {\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    side === activeSide ? activeStyle : unactiveStyle;\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-testid=\"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        data-testid=\"toggle\"\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        data-testid=\"left\"\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        data-testid=\"right\"\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,IAAwC,CAACC,MAAU;AACxD,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,MACpBA,MAAST,IAAaM,IAAcC,GAEhCG,IAAeZ,EAAM,gBAAgB,OACrCa,IAAmB,GAAGD,CAAY,QAAQA,CAAY,IACtDE,IAAoB,KAAKF,CAAY,IAAIA,CAAY;AAGzD,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGhB;AAAA,MACJ,OAAOA,EAAM,SAAS;AAAA,MACtB,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MACA,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAAiB,gBAAAA,EAAA;AAAA,UAACC;AAAA,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,YACA,eAAY;AAAA,UAAA;AAAA,QACd;AAAA,QACAG,gBAAAA,EAAA;AAAA,UAACC;AAAA,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,YACA,eAAY;AAAA,YAEX,UAAMV,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,QACAiB,gBAAAA,EAAA;AAAA,UAACC;AAAA,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,YACA,eAAY;AAAA,YAEX,UAAMV,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library133.js

@@ -1,123 +1,48 @@
-import { j as t } from "./sd-component-library196.js";
-import { useState as y } from "react";
-import { Flex as m } from "rebass";
-import { useBoundingClientRect as x } from "./sd-component-library3.js";
-import { ArrowButton as l } from "./sd-component-library268.js";
-import { Mask as p } from "./sd-component-library269.js";
-import { Tab as A } from "./sd-component-library270.js";
-import { HorizontalDivider as E } from "./sd-component-library49.js";
-const s = 30, e = `${s}px`, w = "30px";
-function Q({
-  tabs: u,
-  selectedTabId: j,
-  onTabSelect: c,
-  activeColor: g = "cl_purple",
-  color: R = "cl_darkGrey",
-  displayBorder: k = !0,
-  tabPadding: v = ["16px 24px"],
-  tabWidth: C,
-  tabHeight: B,
-  tabMaxWidth: F,
-  labelSx: W,
-  secondaryTextSx: z,
-  scrollable: n = !0,
-  containerSx: M,
-  dontTranslate: S,
-  tabSx: X,
-  innerContainerSx: $
-}) {
-  const [d, a] = y(0), { ref: D, rect: r } = x({
-    listenForResize: !0
-  }), { ref: L, rect: o } = x({
-    listenForResize: !0
-  }), f = !n && o && r && !!d, h = !n && o && r && d + r.width < o.width, O = () => {
-    o && r && a(
-      (i) => Math.max(0, i - r.width + 2 * s)
-    );
-  }, _ = () => {
-    o && r && a(
-      (i) => Math.min(
-        o.width - r.width + s,
-        i + r.width - 2 * s
-      )
-    );
+import { j as o } from "./sd-component-library197.js";
+import { Box as e } from "rebass";
+import { useDependantState as d } from "./sd-component-library3.js";
+const i = 200, m = (r) => {
+  const { initialState: s = !1, onClick: t } = r, [n, p] = d(s), l = () => {
+    p((a) => !a), setTimeout(() => t == null ? void 0 : t(), i);
   };
-  return /* @__PURE__ */ t.jsxs(
-    m,
+  return /* @__PURE__ */ o.jsx(
+    e,
     {
+      width: "35px",
+      height: "14px",
       sx: {
-        flexDirection: "column",
         position: "relative",
-        overflow: "hidden",
-        width: "100%",
-        ...M
+        borderRadius: "7px",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "cl_headerLine",
+        bg: "cl_white",
+        cursor: "pointer"
       },
-      className: S ? "no-translate" : void 0,
-      ref: D,
-      "data-testid": "tabs-bar",
-      children: [
-        f && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(
-            l,
-            {
-              width: e,
-              onClick: O,
-              direction: "left"
-            }
-          ),
-          /* @__PURE__ */ t.jsx(p, { width: w, offset: e, direction: "left" })
-        ] }),
-        h && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(
-            l,
-            {
-              width: e,
-              onClick: _,
-              direction: "right"
-            }
-          ),
-          /* @__PURE__ */ t.jsx(p, { width: w, offset: e, direction: "right" })
-        ] }),
-        /* @__PURE__ */ t.jsx(
-          m,
-          {
-            sx: {
-              width: n ? "auto" : "max-content",
-              ml: f ? e : 0,
-              mr: h ? e : 0,
-              transform: `translateX(${-d}px)`,
-              transition: "transform 0.2s",
-              overflowX: n ? "auto" : void 0,
-              ...$
-            },
-            ref: L,
-            children: u.map((i) => /* @__PURE__ */ t.jsx(
-              A,
-              {
-                activeColor: g,
-                color: R,
-                ...i,
-                selected: j === i.id,
-                onClick: () => c == null ? void 0 : c(i.id),
-                tabPadding: v,
-                width: C,
-                height: B,
-                maxWidth: F,
-                labelSx: W,
-                secondaryTextSx: z,
-                containerSx: X,
-                "data-test": `tab-${i.id}`
-              },
-              String(i.id)
-            ))
+      onClick: l,
+      children: /* @__PURE__ */ o.jsx(
+        e,
+        {
+          sx: {
+            height: "14px",
+            position: "absolute",
+            borderRadius: "7px",
+            outline: "1px solid white",
+            bg: "cl_purple",
+            textTransform: "uppercase",
+            overflow: "hidden",
+            width: "20px",
+            top: "-1px",
+            left: "-1px",
+            transform: `translateX(${n ? "15px" : 0})`,
+            transition: `all ${i}ms`
           }
-        ),
-        k && /* @__PURE__ */ t.jsx(E, { height: "2px" })
-      ]
+        }
+      )
     }
   );
-}
+};
 export {
-  Q as TabBar
+  m as ToggleSwitch
 };
 //# 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/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-testid=\"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-library133.js","sources":["../src/components/switches/toggle-switch/toggle-switch.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { useDependantState } from \"../../../core/custom-hooks\";\nimport { ToggleSwitchProps as Props } from \"./interfaces\";\n\nconst animationDuration = 200;\n\nexport const ToggleSwitch: React.FC<Props> = (props) => {\n  const { initialState = false, onClick } = props;\n  const [isToggled, setIsToggled] = useDependantState(initialState);\n\n  const onBadgeClick = () => {\n    setIsToggled((prev) => !prev);\n    setTimeout(() => onClick?.(), animationDuration);\n  };\n\n  return (\n    <Box\n      width=\"35px\"\n      height=\"14px\"\n      sx={{\n        position: \"relative\",\n        borderRadius: \"7px\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderColor: \"cl_headerLine\",\n        bg: \"cl_white\",\n        cursor: \"pointer\",\n      }}\n      onClick={onBadgeClick}\n    >\n      <Box\n        sx={{\n          height: \"14px\",\n          position: \"absolute\",\n          borderRadius: \"7px\",\n          outline: \"1px solid white\",\n          bg: \"cl_purple\",\n          textTransform: \"uppercase\",\n          overflow: \"hidden\",\n          width: \"20px\",\n          top: \"-1px\",\n          left: \"-1px\",\n          transform: `translateX(${isToggled ? \"15px\" : 0})`,\n          transition: `all ${animationDuration}ms`,\n        }}\n      />\n    </Box>\n  );\n};\n"],"names":["animationDuration","ToggleSwitch","props","initialState","onClick","isToggled","setIsToggled","useDependantState","onBadgeClick","prev","jsx","Box"],"mappings":";;;AAOA,MAAMA,IAAoB,KAEbC,IAAgC,CAACC,MAAU;AACtD,QAAM,EAAE,cAAAC,IAAe,IAAO,SAAAC,EAAA,IAAYF,GACpC,CAACG,GAAWC,CAAY,IAAIC,EAAkBJ,CAAY,GAE1DK,IAAe,MAAM;AACZ,IAAAF,EAAA,CAACG,MAAS,CAACA,CAAI,GACjB,WAAA,MAAML,KAAA,gBAAAA,KAAaJ,CAAiB;AAAA,EAAA;AAI/C,SAAAU,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,IAAI;AAAA,QACF,UAAU;AAAA,QACV,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,IAAI;AAAA,QACJ,QAAQ;AAAA,MACV;AAAA,MACA,SAASH;AAAA,MAET,UAAAE,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,cAAc;AAAA,YACd,SAAS;AAAA,YACT,IAAI;AAAA,YACJ,eAAe;AAAA,YACf,UAAU;AAAA,YACV,OAAO;AAAA,YACP,KAAK;AAAA,YACL,MAAM;AAAA,YACN,WAAW,cAAcN,IAAY,SAAS,CAAC;AAAA,YAC/C,YAAY,OAAOL,CAAiB;AAAA,UACtC;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library134.js

@@ -1,119 +1,123 @@
-import { j as t } from "./sd-component-library196.js";
-import { Box as w, Flex as s } from "rebass";
-import { TabV2 as T } from "./sd-component-library271.js";
-import { GridContainerV2 as G } from "./sd-component-library39.js";
-const h = 25, b = ({
-  tabs: e,
-  selectedTabId: c,
-  onSelect: m,
-  borderWidth: l = "1px",
-  color: f = "cl_blue",
-  activeColor: a = "cl_purple",
-  borderColor: i = "cl_lightGrey",
-  borderRadius: n = 12,
-  tabPx: g = "30px",
-  fontSize: S = 13,
-  tabTopAdditionalOffset: u = 8,
-  tabBottomAdditionalOffset: r = 4,
-  maxWidth: y = "1170px",
-  scrollOnChange: j = !0
-}) => {
-  const x = e.findIndex(({ id: o }) => o === c);
-  if (!e.length)
-    return null;
-  const d = x === 0, p = x === e.length - 1;
-  return /* @__PURE__ */ t.jsx(
-    w,
+import { j as t } from "./sd-component-library197.js";
+import { useState as y } from "react";
+import { Flex as m } from "rebass";
+import { useBoundingClientRect as x } from "./sd-component-library3.js";
+import { ArrowButton as l } from "./sd-component-library271.js";
+import { Mask as p } from "./sd-component-library272.js";
+import { Tab as A } from "./sd-component-library273.js";
+import { HorizontalDivider as E } from "./sd-component-library49.js";
+const s = 30, e = `${s}px`, w = "30px";
+function Q({
+  tabs: u,
+  selectedTabId: j,
+  onTabSelect: c,
+  activeColor: g = "cl_purple",
+  color: R = "cl_darkGrey",
+  displayBorder: k = !0,
+  tabPadding: v = ["16px 24px"],
+  tabWidth: C,
+  tabHeight: B,
+  tabMaxWidth: F,
+  labelSx: W,
+  secondaryTextSx: z,
+  scrollable: n = !0,
+  containerSx: M,
+  dontTranslate: S,
+  tabSx: X,
+  innerContainerSx: $
+}) {
+  const [d, a] = y(0), { ref: D, rect: r } = x({
+    listenForResize: !0
+  }), { ref: L, rect: o } = x({
+    listenForResize: !0
+  }), f = !n && o && r && !!d, h = !n && o && r && d + r.width < o.width, O = () => {
+    o && r && a(
+      (i) => Math.max(0, i - r.width + 2 * s)
+    );
+  }, _ = () => {
+    o && r && a(
+      (i) => Math.min(
+        o.width - r.width + s,
+        i + r.width - 2 * s
+      )
+    );
+  };
+  return /* @__PURE__ */ t.jsxs(
+    m,
     {
       sx: {
+        flexDirection: "column",
+        position: "relative",
+        overflow: "hidden",
         width: "100%",
-        overflowX: "auto",
-        scrollbarWidth: "none",
-        "::-webkit-scrollbar": {
-          height: 0
-        }
+        ...M
       },
-      children: /* @__PURE__ */ t.jsxs(
-        s,
-        {
-          sx: {
-            width: "fit-content",
-            minWidth: "100%",
-            overflow: "hidden"
-          },
-          children: [
-            /* @__PURE__ */ t.jsx(
-              s,
-              {
-                sx: {
-                  width: `calc((100% - ${y}) / 2)`,
-                  minWidth: `${h}px`,
-                  height: `${n + r}px`,
-                  mt: "auto",
-                  borderWidth: l,
-                  borderColor: i,
-                  borderRadius: `0 0 ${d ? n : 0}px 0`,
-                  borderBottomStyle: "solid",
-                  borderTopStyle: "none",
-                  borderLeftStyle: "none",
-                  borderRightStyle: d ? "solid" : "none"
-                }
-              }
-            ),
-            /* @__PURE__ */ t.jsx(
-              G,
-              {
-                gridTemplateColumns: `repeat(${e.length}, max-content)`,
-                minWidth: "fit-content",
-                children: e.map((o, $) => /* @__PURE__ */ t.jsx(
-                  T,
-                  {
-                    ...o,
-                    idx: $,
-                    selectedIndex: x,
-                    borderWidth: l,
-                    borderColor: i,
-                    color: f,
-                    activeColor: a,
-                    borderRadius: n,
-                    onSelect: m,
-                    px: g,
-                    fontSize: S,
-                    totalTabs: e.length,
-                    topAdditionalOffset: u,
-                    bottomAdditionalOffset: r,
-                    scrollOnChange: j
-                  },
-                  o.id
-                ))
-              }
-            ),
-            /* @__PURE__ */ t.jsx(
-              s,
+      className: S ? "no-translate" : void 0,
+      ref: D,
+      "data-testid": "tabs-bar",
+      children: [
+        f && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx(
+            l,
+            {
+              width: e,
+              onClick: O,
+              direction: "left"
+            }
+          ),
+          /* @__PURE__ */ t.jsx(p, { width: w, offset: e, direction: "left" })
+        ] }),
+        h && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx(
+            l,
+            {
+              width: e,
+              onClick: _,
+              direction: "right"
+            }
+          ),
+          /* @__PURE__ */ t.jsx(p, { width: w, offset: e, direction: "right" })
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          m,
+          {
+            sx: {
+              width: n ? "auto" : "max-content",
+              ml: f ? e : 0,
+              mr: h ? e : 0,
+              transform: `translateX(${-d}px)`,
+              transition: "transform 0.2s",
+              overflowX: n ? "auto" : void 0,
+              ...$
+            },
+            ref: L,
+            children: u.map((i) => /* @__PURE__ */ t.jsx(
+              A,
               {
-                sx: {
-                  flexGrow: 1,
-                  minWidth: `${h}px`,
-                  transform: "translateX(-2px)",
-                  height: `${n + r}px`,
-                  mt: "auto",
-                  borderWidth: l,
-                  borderColor: i,
-                  borderBottomStyle: "solid",
-                  borderTopStyle: "none",
-                  borderRightStyle: "none",
-                  borderLeftStyle: p ? "solid" : "none",
-                  borderRadius: `0 0 0 ${p ? n : 0}px`
-                }
-              }
-            )
-          ]
-        }
-      )
+                activeColor: g,
+                color: R,
+                ...i,
+                selected: j === i.id,
+                onClick: () => c == null ? void 0 : c(i.id),
+                tabPadding: v,
+                width: C,
+                height: B,
+                maxWidth: F,
+                labelSx: W,
+                secondaryTextSx: z,
+                containerSx: X,
+                "data-test": `tab-${i.id}`
+              },
+              String(i.id)
+            ))
+          }
+        ),
+        k && /* @__PURE__ */ t.jsx(E, { height: "2px" })
+      ]
     }
   );
-};
+}
 export {
-  b as TabBarV2
+  Q as TabBar
 };
 //# sourceMappingURL=sd-component-library134.js.map