@selfdecode/sd-component-library 4.0.94 → 4.0.96

package/lib/sd-component-library271.js

@@ -1,53 +1,128 @@
-import { j as o } from "./sd-component-library196.js";
-import { ThirteenBold as h } from "./sd-component-library154.js";
-import { Button as m } from "./sd-component-library25.js";
-import { MaxMaxContainer as d } from "./sd-component-library41.js";
-const T = (s) => {
-  const {
-    Icon: i,
-    iconHeight: n,
-    title: l,
-    isActive: r,
-    hash: t,
-    onTabSelect: c,
-    enableScroll: a,
-    activeColor: e,
-    history: p
-  } = s, x = a ? {
-    scrollTo: t
-  } : {};
-  return /* @__PURE__ */ o.jsx(
-    m,
+import { j as t } from "./sd-component-library197.js";
+import { Flex as f, Box as W } from "rebass";
+import { Button as y } from "./sd-component-library25.js";
+import { ResponsiveTextV2 as m } from "./sd-component-library151.js";
+const z = ({
+  active: n = !1,
+  activeColor: s = "cl_purple",
+  color: r = "transparent"
+}) => /* @__PURE__ */ t.jsx(
+  W,
+  {
+    height: 4,
+    width: "100%",
+    bg: n ? s : r,
+    sx: {
+      mt: "auto",
+      transition: "all 175ms ease"
+    },
+    "data-testid": "tab-ribbon"
+  }
+);
+function E({
+  width: n,
+  height: s,
+  label: r,
+  secondaryText: x,
+  icon: p,
+  id: d,
+  onClick: h,
+  selected: i = !1,
+  activeColor: e = "cl_purple",
+  color: l = "cl_darkGrey",
+  tabPadding: u,
+  bg: o = "cl_transparent",
+  activeBg: c = "cl_transparent",
+  activeRibbonColor: b,
+  borderRadius: j = "4px",
+  tabHeaderComponent: a,
+  elementId: g,
+  maxWidth: _,
+  labelSx: R,
+  secondaryTextSx: S,
+  containerSx: w
+}) {
+  const T = a ? i ? c : o : b || e;
+  return /* @__PURE__ */ t.jsxs(
+    f,
     {
-      bg: "transparent",
-      onClick: () => c(t),
-      history: p,
-      "data-testid": `tab-${t}`,
-      ...x,
-      children: /* @__PURE__ */ o.jsxs(d, { gap: ["15px", "20px"], children: [
-        /* @__PURE__ */ o.jsx(
-          i,
+      flexDirection: "column",
+      sx: {
+        width: "fit-content",
+        maxWidth: _,
+        minWidth: "fit-content",
+        ...w
+      },
+      children: [
+        /* @__PURE__ */ t.jsxs(
+          y,
           {
-            style: {
-              height: n,
-              fill: r ? e : "#434A54"
-            }
+            id: g,
+            width: n,
+            height: s,
+            bg: i ? c : o,
+            onClick: h,
+            borderRadius: j,
+            "data-testid": `tab-${d}`,
+            padding: u,
+            disabled: i,
+            display: "flex",
+            children: [
+              r && /* @__PURE__ */ t.jsx(
+                m,
+                {
+                  fontSizeWeight: [[13, "bold"]],
+                  sx: {
+                    letterSpacing: "1.3px",
+                    textTransform: "uppercase",
+                    ...R
+                  },
+                  "data-testid": "tab-text",
+                  color: i ? e : l,
+                  children: r
+                }
+              ),
+              x && /* @__PURE__ */ t.jsx(
+                m,
+                {
+                  fontSizeWeight: [[10, "semi-bold"]],
+                  sx: {
+                    letterSpacing: "1px",
+                    textTransform: "uppercase",
+                    ...S
+                  },
+                  color: i ? e : l,
+                  children: x
+                }
+              ),
+              p && /* @__PURE__ */ t.jsx(
+                f,
+                {
+                  height: "16px",
+                  flexDirection: "column",
+                  justifyContent: "space-between",
+                  ml: "10px",
+                  children: p
+                }
+              ),
+              a
+            ]
           }
         ),
-        /* @__PURE__ */ o.jsx(
-          h,
+        /* @__PURE__ */ t.jsx(
+          z,
           {
-            textTransform: "uppercase",
-            color: r ? e : "#434A54",
-            cursor: "pointer",
-            children: l
+            active: i || !!a,
+            activeColor: T,
+            color: o
           }
         )
-      ] })
+      ]
     }
   );
-};
+}
 export {
-  T as Tab
+  z as Ribbon,
+  E as Tab
 };
 //# sourceMappingURL=sd-component-library271.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library271.js","sources":["../src/components/tabs/tabs-menu/partials/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Button, MaxMaxContainer, ThirteenBold } from \"../../../../..\";\nimport { TabProps } from \"./interfaces\";\n\n/**\n * Tab component to render a single tab button.\n */\nexport const Tab: React.FC<TabProps> = (props) => {\n  const {\n    Icon,\n    iconHeight,\n    title,\n    isActive,\n    hash,\n    onTabSelect,\n    enableScroll,\n    activeColor,\n    history,\n  } = props;\n\n  const scrollProps = enableScroll\n    ? {\n        scrollTo: hash,\n      }\n    : {};\n\n  return (\n    <Button\n      bg=\"transparent\"\n      onClick={() => onTabSelect(hash)}\n      history={history}\n      data-testid={`tab-${hash}`}\n      {...scrollProps}\n    >\n      <MaxMaxContainer gap={[\"15px\", \"20px\"]}>\n        <Icon\n          style={{\n            height: iconHeight,\n            fill: isActive ? activeColor : \"#434A54\",\n          }}\n        />\n        <ThirteenBold\n          textTransform=\"uppercase\"\n          color={isActive ? activeColor : \"#434A54\"}\n          cursor=\"pointer\"\n        >\n          {title}\n        </ThirteenBold>\n      </MaxMaxContainer>\n    </Button>\n  );\n};\n"],"names":["Tab","props","Icon","iconHeight","title","isActive","hash","onTabSelect","enableScroll","activeColor","history","scrollProps","jsx","Button","MaxMaxContainer","ThirteenBold"],"mappings":";;;;AAQa,MAAAA,IAA0B,CAACC,MAAU;AAC1C,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAAT,GAEEU,IAAcH,IAChB;AAAA,IACE,UAAUF;AAAA,MAEZ;AAGF,SAAAM,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,SAAS,MAAMN,EAAYD,CAAI;AAAA,MAC/B,SAAAI;AAAA,MACA,eAAa,OAAOJ,CAAI;AAAA,MACvB,GAAGK;AAAA,MAEJ,iCAACG,GAAgB,EAAA,KAAK,CAAC,QAAQ,MAAM,GACnC,UAAA;AAAA,QAAAF,gBAAAA,EAAA;AAAA,UAACV;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQC;AAAA,cACR,MAAME,IAAWI,IAAc;AAAA,YACjC;AAAA,UAAA;AAAA,QACF;AAAA,QACAG,gBAAAA,EAAA;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAOV,IAAWI,IAAc;AAAA,YAChC,QAAO;AAAA,YAEN,UAAAL;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library271.js","sources":["../src/components/tabs/tab-bar/partials/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { Button } from \"../../../../buttons\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TabProps } from \"./interfaces\";\n\nexport const Ribbon = ({\n  active = false,\n  activeColor = \"cl_purple\",\n  color = \"transparent\",\n}) => (\n  <Box\n    height={4}\n    width=\"100%\"\n    bg={active ? activeColor : color}\n    sx={{\n      mt: \"auto\",\n      transition: \"all 175ms ease\",\n    }}\n    data-testid=\"tab-ribbon\"\n  />\n);\n\nexport function Tab<T>({\n  width,\n  height,\n  label,\n  secondaryText,\n  icon,\n  id,\n  onClick,\n  selected = false,\n  activeColor = \"cl_purple\",\n  color = \"cl_darkGrey\",\n  tabPadding,\n  bg = \"cl_transparent\",\n  activeBg = \"cl_transparent\",\n  activeRibbonColor,\n  borderRadius = \"4px\",\n  tabHeaderComponent,\n  elementId,\n  maxWidth,\n  labelSx,\n  secondaryTextSx,\n  containerSx,\n}: TabProps<T>) {\n  const activeColorOfRibbon = tabHeaderComponent\n    ? selected\n      ? activeBg\n      : bg\n    : activeRibbonColor || activeColor;\n\n  return (\n    <Flex\n      flexDirection=\"column\"\n      sx={{\n        width: \"fit-content\",\n        maxWidth,\n        minWidth: \"fit-content\",\n        ...containerSx,\n      }}\n    >\n      <Button\n        id={elementId}\n        width={width}\n        height={height}\n        bg={selected ? activeBg : bg}\n        onClick={onClick}\n        borderRadius={borderRadius}\n        data-testid={`tab-${id}`}\n        padding={tabPadding}\n        disabled={selected}\n        display=\"flex\"\n      >\n        {label && (\n          <ResponsiveTextV2\n            fontSizeWeight={[[13, \"bold\"]]}\n            sx={{\n              letterSpacing: \"1.3px\",\n              textTransform: \"uppercase\",\n              ...labelSx,\n            }}\n            data-testid=\"tab-text\"\n            color={selected ? activeColor : color}\n          >\n            {label}\n          </ResponsiveTextV2>\n        )}\n\n        {secondaryText && (\n          <ResponsiveTextV2\n            fontSizeWeight={[[10, \"semi-bold\"]]}\n            sx={{\n              letterSpacing: \"1px\",\n              textTransform: \"uppercase\",\n              ...secondaryTextSx,\n            }}\n            color={selected ? activeColor : color}\n          >\n            {secondaryText}\n          </ResponsiveTextV2>\n        )}\n\n        {icon && (\n          <Flex\n            height=\"16px\"\n            flexDirection=\"column\"\n            justifyContent=\"space-between\"\n            ml=\"10px\"\n          >\n            {icon}\n          </Flex>\n        )}\n\n        {/* Render custom component, if provided */}\n        {tabHeaderComponent}\n      </Button>\n\n      <Ribbon\n        active={selected || !!tabHeaderComponent} // in tabHeaderComponent mode, it should fill the gap.\n        activeColor={activeColorOfRibbon}\n        color={bg}\n      />\n    </Flex>\n  );\n}\n"],"names":["Ribbon","active","activeColor","color","jsx","Box","Tab","width","height","label","secondaryText","icon","id","onClick","selected","tabPadding","bg","activeBg","activeRibbonColor","borderRadius","tabHeaderComponent","elementId","maxWidth","labelSx","secondaryTextSx","containerSx","activeColorOfRibbon","jsxs","Flex","Button","ResponsiveTextV2"],"mappings":";;;;AAQO,MAAMA,IAAS,CAAC;AAAA,EACrB,QAAAC,IAAS;AAAA,EACT,aAAAC,IAAc;AAAA,EACd,OAAAC,IAAQ;AACV,MACEC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,QAAQ;AAAA,IACR,OAAM;AAAA,IACN,IAAIJ,IAASC,IAAcC;AAAA,IAC3B,IAAI;AAAA,MACF,IAAI;AAAA,MACJ,YAAY;AAAA,IACd;AAAA,IACA,eAAY;AAAA,EAAA;AACd;AAGK,SAASG,EAAO;AAAA,EACrB,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,IAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAZ,IAAc;AAAA,EACd,OAAAC,IAAQ;AAAA,EACR,YAAAY;AAAA,EACA,IAAAC,IAAK;AAAA,EACL,UAAAC,IAAW;AAAA,EACX,mBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AACF,GAAgB;AACd,QAAMC,IAAsBN,IACxBN,IACEG,IACAD,IACFE,KAAqBhB;AAGvB,SAAAyB,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,IAAI;AAAA,QACF,OAAO;AAAA,QACP,UAAAN;AAAA,QACA,UAAU;AAAA,QACV,GAAGG;AAAA,MACL;AAAA,MAEA,UAAA;AAAA,QAAAE,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,IAAIR;AAAA,YACJ,OAAAd;AAAA,YACA,QAAAC;AAAA,YACA,IAAIM,IAAWG,IAAWD;AAAA,YAC1B,SAAAH;AAAA,YACA,cAAAM;AAAA,YACA,eAAa,OAAOP,CAAE;AAAA,YACtB,SAASG;AAAA,YACT,UAAUD;AAAA,YACV,SAAQ;AAAA,YAEP,UAAA;AAAA,cACCL,KAAAL,gBAAAA,EAAA;AAAA,gBAAC0B;AAAA,gBAAA;AAAA,kBACC,gBAAgB,CAAC,CAAC,IAAI,MAAM,CAAC;AAAA,kBAC7B,IAAI;AAAA,oBACF,eAAe;AAAA,oBACf,eAAe;AAAA,oBACf,GAAGP;AAAA,kBACL;AAAA,kBACA,eAAY;AAAA,kBACZ,OAAOT,IAAWZ,IAAcC;AAAA,kBAE/B,UAAAM;AAAA,gBAAA;AAAA,cACH;AAAA,cAGDC,KACCN,gBAAAA,EAAA;AAAA,gBAAC0B;AAAA,gBAAA;AAAA,kBACC,gBAAgB,CAAC,CAAC,IAAI,WAAW,CAAC;AAAA,kBAClC,IAAI;AAAA,oBACF,eAAe;AAAA,oBACf,eAAe;AAAA,oBACf,GAAGN;AAAA,kBACL;AAAA,kBACA,OAAOV,IAAWZ,IAAcC;AAAA,kBAE/B,UAAAO;AAAA,gBAAA;AAAA,cACH;AAAA,cAGDC,KACCP,gBAAAA,EAAA;AAAA,gBAACwB;AAAA,gBAAA;AAAA,kBACC,QAAO;AAAA,kBACP,eAAc;AAAA,kBACd,gBAAe;AAAA,kBACf,IAAG;AAAA,kBAEF,UAAAjB;AAAA,gBAAA;AAAA,cACH;AAAA,cAIDS;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAEAhB,gBAAAA,EAAA;AAAA,UAACJ;AAAA,UAAA;AAAA,YACC,QAAQc,KAAY,CAAC,CAACM;AAAA,YACtB,aAAaM;AAAA,YACb,OAAOV;AAAA,UAAA;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library272.js

@@ -1,12 +1,125 @@
-import * as e from "react";
-const t = (n) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 18 18", ...n }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, `
-            .info-icon-a {
-            stroke-linecap: round;
-            stroke-linejoin: round;
-            stroke-width: 2px;
+import { j as i } from "./sd-component-library197.js";
+import { useRef as B, useEffect as L } from "react";
+import { Box as s } from "rebass";
+import { ResponsiveTextV2 as V } from "./sd-component-library151.js";
+const R = ({
+  id: b,
+  label: g,
+  color: a,
+  activeColor: x,
+  borderColor: r,
+  borderWidth: p,
+  borderRadius: o,
+  selectedIndex: e,
+  idx: n,
+  onSelect: S,
+  dashWidth: $ = 20,
+  dashHeight: j = 3,
+  px: u,
+  fontSize: v,
+  totalTabs: y,
+  topAdditionalOffset: w = 8,
+  bottomAdditionalOffset: T = 4,
+  scrollOnChange: l = !0
+}) => {
+  const c = B(null), t = e === n;
+  L(() => {
+    var h;
+    t && l && ((h = c.current) == null || h.scrollIntoView({
+      behavior: "smooth",
+      inline: "center",
+      block: "end"
+    }));
+  }, [t, l]);
+  const f = e === n + 1, m = e !== -1 && e === n - 1, z = n === y - 1;
+  return /* @__PURE__ */ i.jsxs(
+    s,
+    {
+      onClick: () => S(b),
+      sx: {
+        cursor: "pointer",
+        position: "relative",
+        left: `-${n > e ? 2 : n == e ? 1 : 0}px`,
+        zIndex: t ? 1 : 0
+      },
+      ref: c,
+      children: [
+        /* @__PURE__ */ i.jsx(
+          s,
+          {
+            sx: {
+              height: `${o + w}px`,
+              borderWidth: p,
+              borderColor: r,
+              borderStyle: t ? "solid" : "none",
+              borderBottomStyle: "none",
+              borderRadius: t ? `${o}px ${o}px 0 0` : z ? `0 ${o}px 0 0` : void 0,
+              bg: "cl_white"
             }
-        `)), /* @__PURE__ */ e.createElement("g", { transform: "translate(1 1)" }, /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M19,11a8,8,0,1,1-8-8A8,8,0,0,1,19,11Z", transform: "translate(-3 -3)" }), /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M18,21.2V18", transform: "translate(-10 -10)" }), /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M18,12h0", transform: "translate(-10 -7.2)" })));
+          }
+        ),
+        /* @__PURE__ */ i.jsx(
+          s,
+          {
+            sx: {
+              borderWidth: p,
+              borderColor: r,
+              borderStyle: t ? "none solid" : "none",
+              boxSizing: "content-box"
+            },
+            children: /* @__PURE__ */ i.jsx(
+              V,
+              {
+                fontSizeWeight: [v, "bold"],
+                textTransform: "uppercase",
+                color: t ? x : a,
+                sx: {
+                  bg: "cl_white",
+                  letterSpacing: "1px",
+                  px: u
+                },
+                children: g
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ i.jsx(
+          s,
+          {
+            sx: {
+              height: `${o + T}px`,
+              borderWidth: p,
+              borderColor: r,
+              borderBottomStyle: t ? "none" : "solid",
+              borderLeftStyle: m ? "solid" : "none",
+              borderRightStyle: f ? "solid" : "none",
+              borderTopStyle: "none",
+              borderRadius: `0 0 ${f ? o : 0}px ${m ? o : 0}px`,
+              bg: "cl_white",
+              mx: t ? "1px" : void 0
+            }
+          }
+        ),
+        t && /* @__PURE__ */ i.jsx(
+          s,
+          {
+            sx: {
+              bg: x,
+              height: `${j}px`,
+              width: `${$}px`,
+              position: "absolute",
+              left: "50%",
+              bottom: 0,
+              transform: "translateX(-50%)",
+              borderRadius: "1px"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  t as ReactComponent
+  R as TabV2
 };
 //# sourceMappingURL=sd-component-library272.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library272.js","sources":["../src/components/tooltips/base-info-tooltip/assets/info-icon.svg"],"sourcesContent":["export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxOCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGU+CiAgICAgICAgICAgIC5pbmZvLWljb24tYSB7CiAgICAgICAgICAgIHN0cm9rZS1saW5lY2FwOiByb3VuZDsKICAgICAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICAgICAgc3Ryb2tlLXdpZHRoOiAycHg7CiAgICAgICAgICAgIH0KICAgICAgICA8L3N0eWxlPgogICAgPC9kZWZzPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+CiAgICAgICAgPHBhdGggY2xhc3M9ImluZm8taWNvbi1hIiBkPSJNMTksMTFhOCw4LDAsMSwxLTgtOEE4LDgsMCwwLDEsMTksMTFaIgogICAgICAgICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zIC0zKSIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJpbmZvLWljb24tYSIgZD0iTTE4LDIxLjJWMTgiCiAgICAgICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwIC0xMCkiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iaW5mby1pY29uLWEiIGQ9Ik0xOCwxMmgwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAgLTcuMikiLz4KICAgIDwvZz4KPC9zdmc+Cg==\""],"names":["SvgInfoIcon","props","React"],"mappings":";AACK,MAACA,IAAc,CAACC,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,SAAS,aAAa,GAAGD,EAAO,GAAkB,gBAAAC,EAAM,cAAc,QAAQ,MAAsB,gBAAAA,EAAM,cAAc,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAgK,CAAC,GAAmB,gBAAAA,EAAM,cAAc,KAAK,EAAE,WAAW,iBAAgB,GAAoB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,yCAAyC,WAAW,oBAAoB,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,eAAe,WAAW,qBAAoB,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,YAAY,WAAW,sBAAuB,CAAA,CAAC,CAAC;"}
+{"version":3,"file":"sd-component-library272.js","sources":["../src/components/tabs/tab-bar-v2/partials/tab-v2/tab-v2.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TabV2Props as Props } from \"./interfaces\";\n\nexport const TabV2: React.FC<Props> = ({\n  id,\n  label,\n  color,\n  activeColor,\n  borderColor,\n  borderWidth,\n  borderRadius,\n  selectedIndex,\n  idx,\n  onSelect,\n  dashWidth = 20,\n  dashHeight = 3,\n  px,\n  fontSize,\n  totalTabs,\n  topAdditionalOffset = 8,\n  bottomAdditionalOffset = 4,\n  scrollOnChange = true,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const active = selectedIndex === idx;\n\n  useEffect(() => {\n    if (active && scrollOnChange)\n      ref.current?.scrollIntoView({\n        behavior: \"smooth\",\n        inline: \"center\",\n        block: \"end\",\n      });\n  }, [active, scrollOnChange]);\n\n  const atLeftOfActive = selectedIndex === idx + 1;\n  const atRightOfActive = selectedIndex !== -1 && selectedIndex === idx - 1;\n  const isLast = idx === totalTabs - 1;\n\n  return (\n    <Box\n      onClick={() => onSelect(id)}\n      sx={{\n        cursor: \"pointer\",\n        position: \"relative\",\n        left: `-${idx > selectedIndex ? 2 : idx == selectedIndex ? 1 : 0}px`,\n        zIndex: active ? 1 : 0,\n      }}\n      ref={ref}\n    >\n      <Box\n        sx={{\n          height: `${borderRadius + topAdditionalOffset}px`,\n          borderWidth,\n          borderColor,\n          borderStyle: active ? \"solid\" : \"none\",\n          borderBottomStyle: \"none\",\n          borderRadius: active\n            ? `${borderRadius}px ${borderRadius}px 0 0`\n            : isLast\n            ? `0 ${borderRadius}px 0 0`\n            : undefined,\n          bg: \"cl_white\",\n        }}\n      />\n\n      <Box\n        sx={{\n          borderWidth,\n          borderColor,\n          borderStyle: active ? \"none solid\" : \"none\",\n          boxSizing: \"content-box\",\n        }}\n      >\n        <ResponsiveTextV2\n          fontSizeWeight={[fontSize, \"bold\"]}\n          textTransform=\"uppercase\"\n          color={active ? activeColor : color}\n          sx={{\n            bg: \"cl_white\",\n            letterSpacing: \"1px\",\n            px,\n          }}\n        >\n          {label}\n        </ResponsiveTextV2>\n      </Box>\n\n      <Box\n        sx={{\n          height: `${borderRadius + bottomAdditionalOffset}px`,\n          borderWidth,\n          borderColor,\n          borderBottomStyle: active ? \"none\" : \"solid\",\n          borderLeftStyle: atRightOfActive ? \"solid\" : \"none\",\n          borderRightStyle: atLeftOfActive ? \"solid\" : \"none\",\n          borderTopStyle: \"none\",\n          borderRadius: `0 0 ${atLeftOfActive ? borderRadius : 0}px ${\n            atRightOfActive ? borderRadius : 0\n          }px`,\n          bg: \"cl_white\",\n          mx: active ? \"1px\" : undefined,\n        }}\n      />\n\n      {active && (\n        <Box\n          sx={{\n            bg: activeColor,\n            height: `${dashHeight}px`,\n            width: `${dashWidth}px`,\n            position: \"absolute\",\n            left: \"50%\",\n            bottom: 0,\n            transform: \"translateX(-50%)\",\n            borderRadius: \"1px\",\n          }}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":["TabV2","id","label","color","activeColor","borderColor","borderWidth","borderRadius","selectedIndex","idx","onSelect","dashWidth","dashHeight","px","fontSize","totalTabs","topAdditionalOffset","bottomAdditionalOffset","scrollOnChange","ref","useRef","active","useEffect","_a","atLeftOfActive","atRightOfActive","isLast","jsxs","Box","jsx","ResponsiveTextV2"],"mappings":";;;;AAOO,MAAMA,IAAyB,CAAC;AAAA,EACrC,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,wBAAAC,IAAyB;AAAA,EACzB,gBAAAC,IAAiB;AACnB,MAAM;AACE,QAAAC,IAAMC,EAAuB,IAAI,GACjCC,IAASb,MAAkBC;AAEjC,EAAAa,EAAU,MAAM;;AACd,IAAID,KAAUH,OACZK,IAAAJ,EAAI,YAAJ,QAAAI,EAAa,eAAe;AAAA,MAC1B,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA;AAAA,EACR,GACF,CAACF,GAAQH,CAAc,CAAC;AAErB,QAAAM,IAAiBhB,MAAkBC,IAAM,GACzCgB,IAAkBjB,MAAkB,MAAMA,MAAkBC,IAAM,GAClEiB,IAASjB,MAAQM,IAAY;AAGjC,SAAAY,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAS,MAAMlB,EAAST,CAAE;AAAA,MAC1B,IAAI;AAAA,QACF,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,MAAM,IAAIQ,IAAMD,IAAgB,IAAIC,KAAOD,IAAgB,IAAI,CAAC;AAAA,QAChE,QAAQa,IAAS,IAAI;AAAA,MACvB;AAAA,MACA,KAAAF;AAAA,MAEA,UAAA;AAAA,QAAAU,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,QAAQ,GAAGrB,IAAeS,CAAmB;AAAA,cAC7C,aAAAV;AAAA,cACA,aAAAD;AAAA,cACA,aAAagB,IAAS,UAAU;AAAA,cAChC,mBAAmB;AAAA,cACnB,cAAcA,IACV,GAAGd,CAAY,MAAMA,CAAY,WACjCmB,IACA,KAAKnB,CAAY,WACjB;AAAA,cACJ,IAAI;AAAA,YACN;AAAA,UAAA;AAAA,QACF;AAAA,QAEAsB,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,aAAAtB;AAAA,cACA,aAAAD;AAAA,cACA,aAAagB,IAAS,eAAe;AAAA,cACrC,WAAW;AAAA,YACb;AAAA,YAEA,UAAAQ,gBAAAA,EAAA;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,gBAAgB,CAAChB,GAAU,MAAM;AAAA,gBACjC,eAAc;AAAA,gBACd,OAAOO,IAASjB,IAAcD;AAAA,gBAC9B,IAAI;AAAA,kBACF,IAAI;AAAA,kBACJ,eAAe;AAAA,kBACf,IAAAU;AAAA,gBACF;AAAA,gBAEC,UAAAX;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QACF;AAAA,QAEA2B,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,QAAQ,GAAGrB,IAAeU,CAAsB;AAAA,cAChD,aAAAX;AAAA,cACA,aAAAD;AAAA,cACA,mBAAmBgB,IAAS,SAAS;AAAA,cACrC,iBAAiBI,IAAkB,UAAU;AAAA,cAC7C,kBAAkBD,IAAiB,UAAU;AAAA,cAC7C,gBAAgB;AAAA,cAChB,cAAc,OAAOA,IAAiBjB,IAAe,CAAC,MACpDkB,IAAkBlB,IAAe,CACnC;AAAA,cACA,IAAI;AAAA,cACJ,IAAIc,IAAS,QAAQ;AAAA,YACvB;AAAA,UAAA;AAAA,QACF;AAAA,QAECA,KACCQ,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,IAAIxB;AAAA,cACJ,QAAQ,GAAGQ,CAAU;AAAA,cACrB,OAAO,GAAGD,CAAS;AAAA,cACnB,UAAU;AAAA,cACV,MAAM;AAAA,cACN,QAAQ;AAAA,cACR,WAAW;AAAA,cACX,cAAc;AAAA,YAChB;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}