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

package/lib/sd-component-library129.js

@@ -1,46 +1,36 @@
-import { j as o } from "./sd-component-library195.js";
-import { Box as e } from "rebass";
-import { useDependantState as d } from "./sd-component-library3.js";
+import { jsx as t } from "./sd-component-library196.js";
+import "./sd-component-library197.js";
+import { useDependantState as a } from "./sd-component-library3.js";
+import { Box as e } from "./sd-component-library198.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,
-    {
-      width: "35px",
-      height: "14px",
-      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`
-          }
-        }
-      )
-    }
-  );
+  const {
+    initialState: s = !1,
+    onClick: o
+  } = r, [n, p] = a(s);
+  return /* @__PURE__ */ t(e, { width: "35px", height: "14px", sx: {
+    position: "relative",
+    borderRadius: "7px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "cl_headerLine",
+    bg: "cl_white",
+    cursor: "pointer"
+  }, onClick: () => {
+    p((l) => !l), setTimeout(() => o == null ? void 0 : o(), i);
+  }, children: /* @__PURE__ */ t(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`
+  } }) });
 };
 export {
   m as ToggleSwitch

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library129.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-library129.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","Box","position","borderRadius","borderWidth","borderStyle","borderColor","bg","cursor","onBadgeClick","prev","jsx","height","outline","textTransform","overflow","width","top","left","transform","transition"],"mappings":";;;;AAOA,MAAMA,IAAoB,KAEbC,IAAiCC,CAAUA,MAAA;AAChD,QAAA;AAAA,IAAEC,cAAAA,IAAe;AAAA,IAAOC,SAAAA;AAAAA,EAAYF,IAAAA,GACpC,CAACG,GAAWC,CAAY,IAAIC,EAAkBJ,CAAY;AAOhE,2BACGK,GACC,EAAA,OAAM,QACN,QAAO,QACP,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC,aAAa;AAAA,IACbC,aAAa;AAAA,IACbC,IAAI;AAAA,IACJC,QAAQ;AAAA,EAAA,GAEV,SAlBiBC,MAAM;AACXC,IAAAA,EAAAA,CAAAA,MAAS,CAACA,CAAI,GACjB,WAAA,MAAMb,KAAAA,gBAAAA,KAAaJ,CAAiB;AAAA,EAAA,GAkB7C,UAAA,gBAAAkB,EAACV,KACC,IAAI;AAAA,IACFW,QAAQ;AAAA,IACRV,UAAU;AAAA,IACVC,cAAc;AAAA,IACdU,SAAS;AAAA,IACTN,IAAI;AAAA,IACJO,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,KAAK;AAAA,IACLC,MAAM;AAAA,IACNC,WAAY,cAAarB,IAAY,SAAS,CAAE;AAAA,IAChDsB,YAAa,OAAM3B,CAAkB;AAAA,EAAA,EACrC,CAAA,EAEN,CAAA;AAEJ;"}

package/lib/sd-component-library13.js

@@ -1,8 +1,12 @@
-import { j as t } from "./sd-component-library195.js";
-import { Box as n } from "rebass";
+import { jsx as s } from "./sd-component-library196.js";
+import "./sd-component-library197.js";
+import { Box as a } from "./sd-component-library198.js";
 const x = (o) => {
-  const { children: r, ...s } = o;
-  return /* @__PURE__ */ t.jsx(n, { className: "no-translate", ...s, children: r });
+  const {
+    children: r,
+    ...t
+  } = o;
+  return /* @__PURE__ */ s(a, { className: "no-translate", ...t, children: r });
 };
 export {
   x as NoTranslateBox

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library13.js","sources":["../src/components/boxes/no-translate-box/no-translate-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { NoTranslateBoxProps as Props } from \"./interfaces\";\n\nexport const NoTranslateBox: React.FC<Props> = (props) => {\n  const { children, ...boxProps } = props;\n\n  return (\n    <Box className=\"no-translate\" {...boxProps}>\n      {children}\n    </Box>\n  );\n};\n"],"names":["NoTranslateBox","props","children","boxProps","Box"],"mappings":";;AAMa,MAAAA,IAAkC,CAACC,MAAU;AACxD,QAAM,EAAE,UAAAC,GAAU,GAAGC,EAAA,IAAaF;AAElC,+BACGG,GAAI,EAAA,WAAU,gBAAgB,GAAGD,GAC/B,UAAAD,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library13.js","sources":["../src/components/boxes/no-translate-box/no-translate-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { NoTranslateBoxProps as Props } from \"./interfaces\";\n\nexport const NoTranslateBox: React.FC<Props> = (props) => {\n  const { children, ...boxProps } = props;\n\n  return (\n    <Box className=\"no-translate\" {...boxProps}>\n      {children}\n    </Box>\n  );\n};\n"],"names":["NoTranslateBox","props","children","boxProps","Box"],"mappings":";;;AAMO,MAAMA,IAAmCC,CAAUA,MAAA;AAClD,QAAA;AAAA,IAAEC,UAAAA;AAAAA,IAAU,GAAGC;AAAAA,EAAaF,IAAAA;AAElC,2BACGG,GAAI,EAAA,WAAU,gBAAmBD,GAAAA,GAC/BD,UAAAA,EACH,CAAA;AAEJ;"}

package/lib/sd-component-library130.js

@@ -1,123 +1,75 @@
-import { j as t } from "./sd-component-library195.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-library275.js";
-import { Mask as p } from "./sd-component-library276.js";
-import { Tab as A } from "./sd-component-library277.js";
-import { HorizontalDivider as E } from "./sd-component-library51.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,
+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 { 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";
+const c = 30, e = `${c}px`, g = "30px";
+function Y({
+  tabs: R,
+  selectedTabId: k,
+  onTabSelect: s,
+  activeColor: v = "cl_purple",
+  color: C = "cl_darkGrey",
+  displayBorder: B = !0,
+  tabPadding: F = ["16px 24px"],
+  tabWidth: W,
+  tabHeight: z,
+  tabMaxWidth: M,
+  labelSx: S,
+  secondaryTextSx: X,
   scrollable: n = !0,
-  containerSx: M,
-  dontTranslate: S,
-  tabSx: X,
-  innerContainerSx: $
+  containerSx: _,
+  dontTranslate: $,
+  tabSx: j,
+  innerContainerSx: D
 }) {
-  const [d, a] = y(0), { ref: D, rect: r } = x({
+  const [d, f] = E.useState(0), {
+    ref: L,
+    rect: i
+  } = p({
     listenForResize: !0
-  }), { ref: L, rect: o } = x({
+  }), {
+    ref: O,
+    rect: o
+  } = p({
     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
-      )
-    );
+  }), h = !n && o && i && !!d, m = !n && o && i && d + 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));
   };
-  return /* @__PURE__ */ t.jsxs(
-    m,
-    {
-      sx: {
-        flexDirection: "column",
-        position: "relative",
-        overflow: "hidden",
-        width: "100%",
-        ...M
-      },
-      className: S ? "no-translate" : void 0,
-      ref: D,
-      "data-test": "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)
-            ))
-          }
-        ),
-        k && /* @__PURE__ */ t.jsx(E, { height: "2px" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ a(x, { sx: {
+    flexDirection: "column",
+    position: "relative",
+    overflow: "hidden",
+    width: "100%",
+    ..._
+  }, className: $ ? "no-translate" : void 0, ref: L, "data-test": "tabs-bar", children: [
+    h && /* @__PURE__ */ a(l, { children: [
+      /* @__PURE__ */ r(w, { width: e, onClick: y, direction: "left" }),
+      /* @__PURE__ */ r(u, { width: g, offset: e, direction: "left" })
+    ] }),
+    m && /* @__PURE__ */ a(l, { children: [
+      /* @__PURE__ */ r(w, { width: e, onClick: A, direction: "right" }),
+      /* @__PURE__ */ r(u, { width: g, offset: e, direction: "right" })
+    ] }),
+    /* @__PURE__ */ r(x, { sx: {
+      width: n ? "auto" : "max-content",
+      ml: h ? e : 0,
+      mr: m ? e : 0,
+      transform: `translateX(${-d}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" })
+  ] });
 }
 export {
-  Q as TabBar
+  Y as TabBar
 };
 //# sourceMappingURL=sd-component-library130.js.map

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","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,8 +1,9 @@
-import { j as t } from "./sd-component-library195.js";
-import { Box as w, Flex as s } from "rebass";
-import { TabV2 as T } from "./sd-component-library278.js";
-import { GridContainerV2 as G } from "./sd-component-library41.js";
-const h = 25, b = ({
+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 { GridContainerV2 as F } from "./sd-component-library41.js";
+const h = 25, j = ({
   tabs: e,
   selectedTabId: c,
   onSelect: m,
@@ -10,110 +11,63 @@ const h = 25, b = ({
   color: f = "cl_blue",
   activeColor: a = "cl_purple",
   borderColor: i = "cl_lightGrey",
-  borderRadius: n = 12,
+  borderRadius: t = 12,
   tabPx: g = "30px",
   fontSize: S = 13,
-  tabTopAdditionalOffset: u = 8,
+  tabTopAdditionalOffset: y = 8,
   tabBottomAdditionalOffset: r = 4,
-  maxWidth: y = "1170px",
-  scrollOnChange: j = !0
+  maxWidth: u = "1170px",
+  scrollOnChange: $ = !0
 }) => {
-  const x = e.findIndex(({ id: o }) => o === c);
+  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,
-    {
-      sx: {
-        width: "100%",
-        overflowX: "auto",
-        scrollbarWidth: "none",
-        "::-webkit-scrollbar": {
-          height: 0
-        }
-      },
-      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,
-              {
-                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`
-                }
-              }
-            )
-          ]
-        }
-      )
+  const p = x === 0, s = x === e.length - 1;
+  return /* @__PURE__ */ n(_, { sx: {
+    width: "100%",
+    overflowX: "auto",
+    scrollbarWidth: "none",
+    "::-webkit-scrollbar": {
+      height: 0
     }
-  );
+  }, children: /* @__PURE__ */ T(d, { sx: {
+    width: "fit-content",
+    minWidth: "100%",
+    overflow: "hidden"
+  }, children: [
+    /* @__PURE__ */ n(d, { sx: {
+      width: `calc((100% - ${u}) / 2)`,
+      minWidth: `${h}px`,
+      height: `${t + r}px`,
+      mt: "auto",
+      borderWidth: l,
+      borderColor: i,
+      borderRadius: `0 0 ${p ? t : 0}px 0`,
+      borderBottomStyle: "solid",
+      borderTopStyle: "none",
+      borderLeftStyle: "none",
+      borderRightStyle: p ? "solid" : "none"
+    } }),
+    /* @__PURE__ */ n(F, { gridTemplateColumns: `repeat(${e.length}, max-content)`, minWidth: "fit-content", children: e.map((o, w) => /* @__PURE__ */ n(B, { ...o, idx: w, selectedIndex: x, borderWidth: l, borderColor: i, color: f, activeColor: a, borderRadius: t, onSelect: m, px: g, fontSize: S, totalTabs: e.length, topAdditionalOffset: y, bottomAdditionalOffset: r, scrollOnChange: $ }, o.id)) }),
+    /* @__PURE__ */ n(d, { sx: {
+      flexGrow: 1,
+      minWidth: `${h}px`,
+      transform: "translateX(-2px)",
+      height: `${t + r}px`,
+      mt: "auto",
+      borderWidth: l,
+      borderColor: i,
+      borderBottomStyle: "solid",
+      borderTopStyle: "none",
+      borderRightStyle: "none",
+      borderLeftStyle: s ? "solid" : "none",
+      borderRadius: `0 0 0 ${s ? t : 0}px`
+    } })
+  ] }) });
 };
 export {
-  b as TabBarV2
+  j as TabBarV2
 };
 //# sourceMappingURL=sd-component-library131.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library131.js","sources":["../src/components/tabs/tab-bar-v2/tab-bar-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { Grid } from \"../../containers\";\nimport { TabBarV2Props as Props } from \"./interfaces\";\nimport { TabV2 } from \"./partials\";\n\nconst sideOffset = 25; // px\n\nexport const TabBarV2: React.FC<Props> = ({\n  tabs,\n  selectedTabId,\n  onSelect,\n  borderWidth = \"1px\",\n  color = \"cl_blue\",\n  activeColor = \"cl_purple\",\n  borderColor = \"cl_lightGrey\",\n  borderRadius = 12,\n  tabPx = \"30px\",\n  fontSize = 13,\n  tabTopAdditionalOffset = 8,\n  tabBottomAdditionalOffset = 4,\n  maxWidth = \"1170px\",\n  scrollOnChange = true,\n}) => {\n  const selectedIndex = tabs.findIndex(({ id }) => id === selectedTabId);\n\n  if (!tabs.length) return null;\n\n  const isFirstSelected = selectedIndex === 0;\n  const isLastSelected = selectedIndex === tabs.length - 1;\n\n  return (\n    <Box\n      sx={{\n        width: \"100%\",\n        overflowX: \"auto\",\n        scrollbarWidth: \"none\",\n        \"::-webkit-scrollbar\": {\n          height: 0,\n        },\n      }}\n    >\n      <Flex\n        sx={{\n          width: \"fit-content\",\n          minWidth: \"100%\",\n          overflow: \"hidden\",\n        }}\n      >\n        <Flex\n          sx={{\n            width: `calc((100% - ${maxWidth}) / 2)`,\n            minWidth: `${sideOffset}px`,\n            height: `${borderRadius + tabBottomAdditionalOffset}px`,\n            mt: \"auto\",\n            borderWidth,\n            borderColor,\n            borderRadius: `0 0 ${isFirstSelected ? borderRadius : 0}px 0`,\n            borderBottomStyle: \"solid\",\n            borderTopStyle: \"none\",\n            borderLeftStyle: \"none\",\n            borderRightStyle: isFirstSelected ? \"solid\" : \"none\",\n          }}\n        />\n\n        <Grid\n          gridTemplateColumns={`repeat(${tabs.length}, max-content)`}\n          minWidth=\"fit-content\"\n        >\n          {tabs.map((tab, idx) => (\n            <TabV2\n              key={tab.id}\n              {...tab}\n              idx={idx}\n              selectedIndex={selectedIndex}\n              borderWidth={borderWidth}\n              borderColor={borderColor}\n              color={color}\n              activeColor={activeColor}\n              borderRadius={borderRadius}\n              onSelect={onSelect}\n              px={tabPx}\n              fontSize={fontSize}\n              totalTabs={tabs.length}\n              topAdditionalOffset={tabTopAdditionalOffset}\n              bottomAdditionalOffset={tabBottomAdditionalOffset}\n              scrollOnChange={scrollOnChange}\n            />\n          ))}\n        </Grid>\n\n        <Flex\n          sx={{\n            flexGrow: 1,\n            minWidth: `${sideOffset}px`,\n            transform: \"translateX(-2px)\",\n            height: `${borderRadius + tabBottomAdditionalOffset}px`,\n            mt: \"auto\",\n            borderWidth,\n            borderColor,\n            borderBottomStyle: \"solid\",\n            borderTopStyle: \"none\",\n            borderRightStyle: \"none\",\n            borderLeftStyle: isLastSelected ? \"solid\" : \"none\",\n            borderRadius: `0 0 0 ${isLastSelected ? borderRadius : 0}px`,\n          }}\n        />\n      </Flex>\n    </Box>\n  );\n};\n"],"names":["sideOffset","TabBarV2","tabs","selectedTabId","onSelect","borderWidth","color","activeColor","borderColor","borderRadius","tabPx","fontSize","tabTopAdditionalOffset","tabBottomAdditionalOffset","maxWidth","scrollOnChange","selectedIndex","id","isFirstSelected","isLastSelected","jsx","Box","jsxs","Flex","Grid","tab","idx","TabV2"],"mappings":"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"}
+{"version":3,"file":"sd-component-library131.js","sources":["../src/components/tabs/tab-bar-v2/tab-bar-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { Grid } from \"../../containers\";\nimport { TabBarV2Props as Props } from \"./interfaces\";\nimport { TabV2 } from \"./partials\";\n\nconst sideOffset = 25; // px\n\nexport const TabBarV2: React.FC<Props> = ({\n  tabs,\n  selectedTabId,\n  onSelect,\n  borderWidth = \"1px\",\n  color = \"cl_blue\",\n  activeColor = \"cl_purple\",\n  borderColor = \"cl_lightGrey\",\n  borderRadius = 12,\n  tabPx = \"30px\",\n  fontSize = 13,\n  tabTopAdditionalOffset = 8,\n  tabBottomAdditionalOffset = 4,\n  maxWidth = \"1170px\",\n  scrollOnChange = true,\n}) => {\n  const selectedIndex = tabs.findIndex(({ id }) => id === selectedTabId);\n\n  if (!tabs.length) return null;\n\n  const isFirstSelected = selectedIndex === 0;\n  const isLastSelected = selectedIndex === tabs.length - 1;\n\n  return (\n    <Box\n      sx={{\n        width: \"100%\",\n        overflowX: \"auto\",\n        scrollbarWidth: \"none\",\n        \"::-webkit-scrollbar\": {\n          height: 0,\n        },\n      }}\n    >\n      <Flex\n        sx={{\n          width: \"fit-content\",\n          minWidth: \"100%\",\n          overflow: \"hidden\",\n        }}\n      >\n        <Flex\n          sx={{\n            width: `calc((100% - ${maxWidth}) / 2)`,\n            minWidth: `${sideOffset}px`,\n            height: `${borderRadius + tabBottomAdditionalOffset}px`,\n            mt: \"auto\",\n            borderWidth,\n            borderColor,\n            borderRadius: `0 0 ${isFirstSelected ? borderRadius : 0}px 0`,\n            borderBottomStyle: \"solid\",\n            borderTopStyle: \"none\",\n            borderLeftStyle: \"none\",\n            borderRightStyle: isFirstSelected ? \"solid\" : \"none\",\n          }}\n        />\n\n        <Grid\n          gridTemplateColumns={`repeat(${tabs.length}, max-content)`}\n          minWidth=\"fit-content\"\n        >\n          {tabs.map((tab, idx) => (\n            <TabV2\n              key={tab.id}\n              {...tab}\n              idx={idx}\n              selectedIndex={selectedIndex}\n              borderWidth={borderWidth}\n              borderColor={borderColor}\n              color={color}\n              activeColor={activeColor}\n              borderRadius={borderRadius}\n              onSelect={onSelect}\n              px={tabPx}\n              fontSize={fontSize}\n              totalTabs={tabs.length}\n              topAdditionalOffset={tabTopAdditionalOffset}\n              bottomAdditionalOffset={tabBottomAdditionalOffset}\n              scrollOnChange={scrollOnChange}\n            />\n          ))}\n        </Grid>\n\n        <Flex\n          sx={{\n            flexGrow: 1,\n            minWidth: `${sideOffset}px`,\n            transform: \"translateX(-2px)\",\n            height: `${borderRadius + tabBottomAdditionalOffset}px`,\n            mt: \"auto\",\n            borderWidth,\n            borderColor,\n            borderBottomStyle: \"solid\",\n            borderTopStyle: \"none\",\n            borderRightStyle: \"none\",\n            borderLeftStyle: isLastSelected ? \"solid\" : \"none\",\n            borderRadius: `0 0 0 ${isLastSelected ? borderRadius : 0}px`,\n          }}\n        />\n      </Flex>\n    </Box>\n  );\n};\n"],"names":["sideOffset","TabBarV2","tabs","selectedTabId","onSelect","borderWidth","color","activeColor","borderColor","borderRadius","tabPx","fontSize","tabTopAdditionalOffset","tabBottomAdditionalOffset","maxWidth","scrollOnChange","selectedIndex","findIndex","id","length","isFirstSelected","isLastSelected","jsx","Box","width","overflowX","scrollbarWidth","height","jsxs","Flex","minWidth","overflow","mt","borderBottomStyle","borderTopStyle","borderLeftStyle","borderRightStyle","Grid","map","tab","idx","TabV2","flexGrow","transform"],"mappings":";;;;;AAQA,MAAMA,IAAa,IAENC,IAA4BA,CAAC;AAAA,EACxCC,MAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA,IAAc;AAAA,EACdC,OAAAA,IAAQ;AAAA,EACRC,aAAAA,IAAc;AAAA,EACdC,aAAAA,IAAc;AAAA,EACdC,cAAAA,IAAe;AAAA,EACfC,OAAAA,IAAQ;AAAA,EACRC,UAAAA,IAAW;AAAA,EACXC,wBAAAA,IAAyB;AAAA,EACzBC,2BAAAA,IAA4B;AAAA,EAC5BC,UAAAA,IAAW;AAAA,EACXC,gBAAAA,IAAiB;AACnB,MAAM;AACEC,QAAAA,IAAgBd,EAAKe,UAAU,CAAC;AAAA,IAAEC,IAAAA;AAAAA,EAAAA,MAASA,MAAOf,CAAa;AAErE,MAAI,CAACD,EAAKiB;AAAe,WAAA;AAEzB,QAAMC,IAAkBJ,MAAkB,GACpCK,IAAiBL,MAAkBd,EAAKiB,SAAS;AAGrD,SAAA,gBAAAG,EAACC,KACC,IAAI;AAAA,IACFC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,gBAAgB;AAAA,IAChB,uBAAuB;AAAA,MACrBC,QAAQ;AAAA,IACV;AAAA,EACF,GAEA,UAAC,gBAAAC,EAAAC,GAAA,EACC,IAAI;AAAA,IACFL,OAAO;AAAA,IACPM,UAAU;AAAA,IACVC,UAAU;AAAA,EAGZ,GAAA,UAAA;AAAA,IAAA,gBAAAT,EAACO,KACC,IAAI;AAAA,MACFL,OAAQ,gBAAeV,CAAS;AAAA,MAChCgB,UAAW,GAAE9B,CAAW;AAAA,MACxB2B,QAAS,GAAElB,IAAeI,CAA0B;AAAA,MACpDmB,IAAI;AAAA,MACJ3B,aAAAA;AAAAA,MACAG,aAAAA;AAAAA,MACAC,cAAe,OAAMW,IAAkBX,IAAe,CAAE;AAAA,MACxDwB,mBAAmB;AAAA,MACnBC,gBAAgB;AAAA,MAChBC,iBAAiB;AAAA,MACjBC,kBAAkBhB,IAAkB,UAAU;AAAA,IAAA,GAC9C;AAAA,sBAGHiB,GACC,EAAA,qBAAsB,UAASnC,EAAKiB,MAAO,kBAC3C,UAAS,eAERjB,UAAKoC,EAAAA,IAAI,CAACC,GAAKC,wBACbC,GAEC,EAAA,GAAIF,GACJ,KAAAC,GACA,eAAAxB,GACA,aAAAX,GACA,aAAAG,GACA,OAAAF,GACA,aAAAC,GACA,cAAAE,GACA,UAAAL,GACA,IAAIM,GACJ,UAAAC,GACA,WAAWT,EAAKiB,QAChB,qBAAqBP,GACrB,wBAAwBC,GACxB,gBAAAE,KAfKwB,EAAIrB,EAesB,CAElC,GACH;AAAA,IAEA,gBAAAI,EAACO,KACC,IAAI;AAAA,MACFa,UAAU;AAAA,MACVZ,UAAW,GAAE9B,CAAW;AAAA,MACxB2C,WAAW;AAAA,MACXhB,QAAS,GAAElB,IAAeI,CAA0B;AAAA,MACpDmB,IAAI;AAAA,MACJ3B,aAAAA;AAAAA,MACAG,aAAAA;AAAAA,MACAyB,mBAAmB;AAAA,MACnBC,gBAAgB;AAAA,MAChBE,kBAAkB;AAAA,MAClBD,iBAAiBd,IAAiB,UAAU;AAAA,MAC5CZ,cAAe,SAAQY,IAAiBZ,IAAe,CAAE;AAAA,IAAA,GACzD;AAAA,EAAA,EAEN,CAAA,EACF,CAAA;AAEJ;"}

package/lib/sd-component-library132.js

@@ -1,14 +1,21 @@
-import { j as s } from "./sd-component-library195.js";
-import { Box as d } from "rebass";
+import { jsxs as c, jsx as d } from "./sd-component-library196.js";
+import "./sd-component-library197.js";
 import { TabBarV2 as b } from "./sd-component-library131.js";
-const p = (r) => {
-  const { tabs: e, selectedTabId: t, ...n } = r, a = e.findIndex(({ id: c }) => c === t), o = e[a];
-  return o ? /* @__PURE__ */ s.jsxs(d, { children: [
-    /* @__PURE__ */ s.jsx(b, { tabs: e, selectedTabId: t, ...n }),
-    o.component
+import { Box as i } from "./sd-component-library198.js";
+const f = (r) => {
+  const {
+    tabs: e,
+    selectedTabId: o,
+    ...s
+  } = r, n = e.findIndex(({
+    id: a
+  }) => a === o), t = e[n];
+  return t ? /* @__PURE__ */ c(i, { children: [
+    /* @__PURE__ */ d(b, { tabs: e, selectedTabId: o, ...s }),
+    t.component
   ] }) : null;
 };
 export {
-  p as TabbedViewV2
+  f as TabbedViewV2
 };
 //# 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/tabs/tabbed-view-v2/tabbed-view-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { TabBarV2 } from \"../tab-bar-v2\";\nimport { TabbedViewV2Props as Props } from \"./interfaces\";\n\nexport const TabbedViewV2: React.FC<Props> = (props) => {\n  const { tabs, selectedTabId, ...tabsProps } = props;\n\n  const selectedTabIndex = tabs.findIndex(({ id }) => id === selectedTabId);\n  const selectedTab = tabs[selectedTabIndex];\n\n  if (!selectedTab) return null;\n\n  return (\n    <Box>\n      <TabBarV2 tabs={tabs} selectedTabId={selectedTabId} {...tabsProps} />\n      {selectedTab.component}\n    </Box>\n  );\n};\n"],"names":["TabbedViewV2","props","tabs","selectedTabId","tabsProps","selectedTabIndex","id","selectedTab","Box","jsx","TabBarV2"],"mappings":";;;AAOa,MAAAA,IAAgC,CAACC,MAAU;AACtD,QAAM,EAAE,MAAAC,GAAM,eAAAC,GAAe,GAAGC,MAAcH,GAExCI,IAAmBH,EAAK,UAAU,CAAC,EAAE,IAAAI,QAASA,MAAOH,CAAa,GAClEI,IAAcL,EAAKG,CAAgB;AAEzC,SAAKE,2BAGFC,GACC,EAAA,UAAA;AAAA,IAAAC,gBAAAA,EAAA,IAACC,GAAS,EAAA,MAAAR,GAAY,eAAAC,GAA+B,GAAGC,EAAW,CAAA;AAAA,IAClEG,EAAY;AAAA,EACf,EAAA,CAAA,IANuB;AAQ3B;"}
+{"version":3,"file":"sd-component-library132.js","sources":["../src/components/tabs/tabbed-view-v2/tabbed-view-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { TabBarV2 } from \"../tab-bar-v2\";\nimport { TabbedViewV2Props as Props } from \"./interfaces\";\n\nexport const TabbedViewV2: React.FC<Props> = (props) => {\n  const { tabs, selectedTabId, ...tabsProps } = props;\n\n  const selectedTabIndex = tabs.findIndex(({ id }) => id === selectedTabId);\n  const selectedTab = tabs[selectedTabIndex];\n\n  if (!selectedTab) return null;\n\n  return (\n    <Box>\n      <TabBarV2 tabs={tabs} selectedTabId={selectedTabId} {...tabsProps} />\n      {selectedTab.component}\n    </Box>\n  );\n};\n"],"names":["TabbedViewV2","props","tabs","selectedTabId","tabsProps","selectedTabIndex","findIndex","id","selectedTab","Box","jsx","TabBarV2","component"],"mappings":";;;;AAOO,MAAMA,IAAiCC,CAAUA,MAAA;AAChD,QAAA;AAAA,IAAEC,MAAAA;AAAAA,IAAMC,eAAAA;AAAAA,IAAe,GAAGC;AAAAA,EAAcH,IAAAA,GAExCI,IAAmBH,EAAKI,UAAU,CAAC;AAAA,IAAEC,IAAAA;AAAAA,EAAAA,MAASA,MAAOJ,CAAa,GAClEK,IAAcN,EAAKG,CAAgB;AAEzC,SAAKG,sBAGFC,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAS,EAAA,MAAAT,GAAY,eAAAC,GAA8B,GAAIC,EAAU,CAAA;AAAA,IACjEI,EAAYI;AAAAA,EACf,EAAA,CAAA,IANuB;AAQ3B;"}