@selfdecode/sd-component-library 4.0.74 → 4.0.76

package/lib/sd-component-library256.js

@@ -1,27 +1,25 @@
-import { j as t } from "./sd-component-library195.js";
-import { ResponsiveTextV2 as o } from "./sd-component-library147.js";
-const s = (e) => {
-  const { currentPage: r } = e;
-  return /* @__PURE__ */ t.jsx(
-    o,
-    {
-      fontSizeWeight: [14, "regular"],
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        borderColor: "cl_lightGrey",
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderRadius: "3px",
-        height: "30px",
-        minWidth: "30px"
-      },
-      children: r
-    }
-  );
-};
+import { j as r } from "./sd-component-library190.js";
+import { ResponsiveTextV2 as t } from "./sd-component-library144.js";
+const n = ({
+  children: e
+}) => /* @__PURE__ */ r.jsx(
+  t,
+  {
+    fontSizeWeight: [18, "regular"],
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      borderRadius: "5px",
+      borderWidth: "1px",
+      borderColor: "cl_lightGrey",
+      borderStyle: "solid"
+    },
+    children: e
+  }
+);
 export {
-  s as CurrentPage
+  n as PaginationBarCurrentPage
 };
 //# sourceMappingURL=sd-component-library256.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library256.js","sources":["../src/components/page-selectors/page-selector/partials/current-page/current-page.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { CurrentPageProps as Props } from \"./interfaces\";\n\nexport const CurrentPage: React.FC<Props> = (props) => {\n  const { currentPage } = props;\n\n  return (\n    <ResponsiveTextV2\n      fontSizeWeight={[14, \"regular\"]}\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        borderColor: \"cl_lightGrey\",\n        borderWidth: 1,\n        borderStyle: \"solid\",\n        borderRadius: \"3px\",\n        height: \"30px\",\n        minWidth: \"30px\",\n      }}\n    >\n      {currentPage}\n    </ResponsiveTextV2>\n  );\n};\n"],"names":["CurrentPage","props","currentPage","jsx","ResponsiveTextV2"],"mappings":";;AAKa,MAAAA,IAA+B,CAACC,MAAU;AAC/C,QAAA,EAAE,aAAAC,EAAgB,IAAAD;AAGtB,SAAAE,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,MAC9B,IAAI;AAAA,QACF,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,UAAU;AAAA,MACZ;AAAA,MAEC,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"sd-component-library256.js","sources":["../src/components/pagination-bars/pagination-bar-mobile/partials/pagination-bar-current-page/pagination-bar-current-page.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts\";\n\nexport const PaginationBarCurrentPage: React.FC<PropsWithChildren<{}>> = ({\n  children,\n}) => {\n  return (\n    <ResponsiveTextV2\n      fontSizeWeight={[18, \"regular\"]}\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        height: \"100%\",\n        borderRadius: \"5px\",\n        borderWidth: \"1px\",\n        borderColor: \"cl_lightGrey\",\n        borderStyle: \"solid\",\n      }}\n    >\n      {children}\n    </ResponsiveTextV2>\n  );\n};\n"],"names":["PaginationBarCurrentPage","children","jsx","ResponsiveTextV2"],"mappings":";;AAIO,MAAMA,IAA4D,CAAC;AAAA,EACxE,UAAAC;AACF,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,IAC9B,IAAI;AAAA,MACF,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,IACf;AAAA,IAEC,UAAAF;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library257.js

@@ -1,6 +1,33 @@
-import * as a from "react";
-const e = (t) => /* @__PURE__ */ a.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 7, height: 13, viewBox: "0 0 7 13", ...t }, /* @__PURE__ */ a.createElement("path", { id: "Forma_1_copy_3", "data-name": "Forma 1 copy 3", d: "M8105.27,5251.88l5.6-6.08a0.435,0.435,0,0,0,0-.6l-5.6-6.08a0.349,0.349,0,0,0-.27-0.13,0.354,0.354,0,0,0-.28.13l-0.6.65a0.435,0.435,0,0,0,0,.6l4.72,5.13-4.72,5.13a0.423,0.423,0,0,0-.12.3,0.441,0.441,0,0,0,.12.3l0.6,0.65a0.354,0.354,0,0,0,.28.13A0.349,0.349,0,0,0,8105.27,5251.88Z", transform: "translate(-8104 -5239)" }));
+import { j as r } from "./sd-component-library190.js";
+import { ReactComponent as s } from "./sd-component-library186.js";
+import { FlexItemsCenter as i } from "./sd-component-library35.js";
+const l = ({ width: e, direction: t, onClick: o }) => /* @__PURE__ */ r.jsx(
+  i,
+  {
+    justifyContent: t === "right" ? "flex-end" : "flex-start",
+    sx: {
+      position: "absolute",
+      ...t === "right" ? { right: 0 } : 0,
+      top: 0,
+      width: e,
+      height: "100%",
+      stroke: "cl_blue",
+      cursor: "pointer",
+      bg: "cl_white",
+      ":hover": { stroke: "cl_purple" },
+      zIndex: 1
+    },
+    onClick: o,
+    children: /* @__PURE__ */ r.jsx(
+      s,
+      {
+        width: "18px",
+        transform: `rotate(${t === "right" ? 180 : 0})`
+      }
+    )
+  }
+);
 export {
-  e as ReactComponent
+  l as ArrowButton
 };
 //# sourceMappingURL=sd-component-library257.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library257.js","sources":["../src/components/page-selectors/page-selector/assets/next.svg"],"sourcesContent":["export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3IiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgNyAxMyI+CiAgPHBhdGggaWQ9IkZvcm1hXzFfY29weV8zIiBkYXRhLW5hbWU9IkZvcm1hIDEgY29weSAzIiBkPSJNODEwNS4yNyw1MjUxLjg4bDUuNi02LjA4YTAuNDM1LDAuNDM1LDAsMCwwLDAtLjZsLTUuNi02LjA4YTAuMzQ5LDAuMzQ5LDAsMCwwLS4yNy0wLjEzLDAuMzU0LDAuMzU0LDAsMCwwLS4yOC4xM2wtMC42LjY1YTAuNDM1LDAuNDM1LDAsMCwwLDAsLjZsNC43Miw1LjEzLTQuNzIsNS4xM2EwLjQyMywwLjQyMywwLDAsMC0uMTIuMywwLjQ0MSwwLjQ0MSwwLDAsMCwuMTIuM2wwLjYsMC42NWEwLjM1NCwwLjM1NCwwLDAsMCwuMjguMTNBMC4zNDksMC4zNDksMCwwLDAsODEwNS4yNyw1MjUxLjg4WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTgxMDQgLTUyMzkpIi8+Cjwvc3ZnPgo=\""],"names":["SvgNext","props","React"],"mappings":";AACK,MAACA,IAAU,CAACC,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,OAAO,GAAG,QAAQ,IAAI,SAAS,YAAY,GAAGD,EAAO,GAAkB,gBAAAC,EAAM,cAAc,QAAQ,EAAE,IAAI,kBAAkB,aAAa,kBAAkB,GAAG,0RAA0R,WAAW,yBAAwB,CAAE,CAAC;"}
+{"version":3,"file":"sd-component-library257.js","sources":["../src/components/tabs/tab-bar/partials/arrow-button/arrow-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { FlexItemsCenter } from \"../../../../containers\";\nimport { ThinArrowLeftIcon } from \"../../../../icons\";\nimport { ArrowButtonProps as Props } from \"./interfaces\";\n\nexport const ArrowButton: React.FC<Props> = ({ width, direction, onClick }) => {\n  return (\n    <FlexItemsCenter\n      justifyContent={direction === \"right\" ? \"flex-end\" : \"flex-start\"}\n      sx={{\n        position: \"absolute\",\n        ...(direction === \"right\" ? { right: 0 } : { left: 0 } ? 0 : undefined),\n        top: 0,\n        width,\n        height: \"100%\",\n        stroke: \"cl_blue\",\n        cursor: \"pointer\",\n        bg: \"cl_white\",\n        \":hover\": { stroke: \"cl_purple\" },\n        zIndex: 1,\n      }}\n      onClick={onClick}\n    >\n      <ThinArrowLeftIcon\n        width=\"18px\"\n        transform={`rotate(${direction === \"right\" ? 180 : 0})`}\n      />\n    </FlexItemsCenter>\n  );\n};\n"],"names":["ArrowButton","width","direction","onClick","jsx","FlexItemsCenter","ThinArrowLeftIcon"],"mappings":";;;AAMO,MAAMA,IAA+B,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,SAAAC,QAE7DC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAgBH,MAAc,UAAU,aAAa;AAAA,IACrD,IAAI;AAAA,MACF,UAAU;AAAA,MACV,GAAIA,MAAc,UAAU,EAAE,OAAO,EAAE,IAAkB;AAAA,MACzD,KAAK;AAAA,MACL,OAAAD;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,UAAU,EAAE,QAAQ,YAAY;AAAA,MAChC,QAAQ;AAAA,IACV;AAAA,IACA,SAAAE;AAAA,IAEA,UAAAC,gBAAAA,EAAA;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,WAAW,UAAUJ,MAAc,UAAU,MAAM,CAAC;AAAA,MAAA;AAAA,IACtD;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library258.js

@@ -1,28 +1,24 @@
-import { j as i } from "./sd-component-library195.js";
-import { FlexCenter as l } from "./sd-component-library37.js";
-const x = ({
-  children: t,
-  disabled: o,
-  onClick: e
-}) => {
-  const r = o ? "cl_lightGrey" : "cl_blue";
-  return /* @__PURE__ */ i.jsx(
-    l,
+import { j as e } from "./sd-component-library190.js";
+import { Box as n } from "rebass";
+const g = ({ width: s, direction: t, offset: o }) => {
+  const r = "#000000AA", a = "#00000000";
+  return /* @__PURE__ */ e.jsx(
+    n,
     {
-      height: "100%",
       sx: {
-        borderWidth: "2px",
-        borderColor: r,
-        borderStyle: "solid",
-        borderRadius: "5px",
-        fill: r
-      },
-      onClick: o ? void 0 : e,
-      children: t
+        position: "absolute",
+        top: 0,
+        left: t === "left" ? o : void 0,
+        right: t === "right" ? o : void 0,
+        height: "100%",
+        width: s,
+        background: `transparent linear-gradient(-90deg, ${t === "left" ? a : r} 0%, ${t === "right" ? a : r} 100%) 0% 0% no-repeat padding-box`,
+        opacity: 0.05
+      }
     }
   );
 };
 export {
-  x as PaginationBarButton
+  g as Mask
 };
 //# sourceMappingURL=sd-component-library258.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library258.js","sources":["../src/components/pagination-bars/pagination-bar-mobile/partials/pagination-bar-button/pagination-bar-button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport { FlexCenter } from \"../../../../containers\";\nimport { PaginationBarButtonProps as Props } from \"./interfaces\";\n\nexport const PaginationBarButton: React.FC<PropsWithChildren<Props>> = ({\n  children,\n  disabled,\n  onClick,\n}) => {\n  const color = disabled ? \"cl_lightGrey\" : \"cl_blue\";\n  return (\n    <FlexCenter\n      height=\"100%\"\n      sx={{\n        borderWidth: \"2px\",\n        borderColor: color,\n        borderStyle: \"solid\",\n        borderRadius: \"5px\",\n        fill: color,\n      }}\n      onClick={disabled ? undefined : onClick}\n    >\n      {children}\n    </FlexCenter>\n  );\n};\n"],"names":["PaginationBarButton","children","disabled","onClick","color","jsx","FlexCenter"],"mappings":";;AAKO,MAAMA,IAA0D,CAAC;AAAA,EACtE,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AACE,QAAAC,IAAQF,IAAW,iBAAiB;AAExC,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,IAAI;AAAA,QACF,aAAa;AAAA,QACb,aAAaF;AAAA,QACb,aAAa;AAAA,QACb,cAAc;AAAA,QACd,MAAMA;AAAA,MACR;AAAA,MACA,SAASF,IAAW,SAAYC;AAAA,MAE/B,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"sd-component-library258.js","sources":["../src/components/tabs/tab-bar/partials/mask/mask.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { MaskProps as Props } from \"./interfaces\";\n\nexport const Mask: React.FC<Props> = ({ width, direction, offset }) => {\n  const startColor = \"#000000AA\";\n  const endColor = \"#00000000\";\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        top: 0,\n        left: direction === \"left\" ? offset : undefined,\n        right: direction === \"right\" ? offset : undefined,\n        height: \"100%\",\n        width,\n        background: `transparent linear-gradient(-90deg, ${\n          direction === \"left\" ? endColor : startColor\n        } 0%, ${\n          direction === \"right\" ? endColor : startColor\n        } 100%) 0% 0% no-repeat padding-box`,\n        opacity: 0.05,\n      }}\n    />\n  );\n};\n"],"names":["Mask","width","direction","offset","startColor","endColor","jsx","Box"],"mappings":";;AAMO,MAAMA,IAAwB,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,QAAAC,QAAa;AACrE,QAAMC,IAAa,aACbC,IAAW;AAGf,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAML,MAAc,SAASC,IAAS;AAAA,QACtC,OAAOD,MAAc,UAAUC,IAAS;AAAA,QACxC,QAAQ;AAAA,QACR,OAAAF;AAAA,QACA,YAAY,uCACVC,MAAc,SAASG,IAAWD,CACpC,QACEF,MAAc,UAAUG,IAAWD,CACrC;AAAA,QACA,SAAS;AAAA,MACX;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library259.js

@@ -1,25 +1,128 @@
-import { j as r } from "./sd-component-library195.js";
-import { ResponsiveTextV2 as t } from "./sd-component-library147.js";
-const n = ({
-  children: e
-}) => /* @__PURE__ */ r.jsx(
-  t,
+import { j as t } from "./sd-component-library190.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-library144.js";
+const z = ({
+  active: n = !1,
+  activeColor: s = "cl_purple",
+  color: r = "transparent"
+}) => /* @__PURE__ */ t.jsx(
+  W,
   {
-    fontSizeWeight: [18, "regular"],
+    height: 4,
+    width: "100%",
+    bg: n ? s : r,
     sx: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      borderRadius: "5px",
-      borderWidth: "1px",
-      borderColor: "cl_lightGrey",
-      borderStyle: "solid"
+      mt: "auto",
+      transition: "all 175ms ease"
     },
-    children: e
+    "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,
+    {
+      flexDirection: "column",
+      sx: {
+        width: "fit-content",
+        maxWidth: _,
+        minWidth: "fit-content",
+        ...w
+      },
+      children: [
+        /* @__PURE__ */ t.jsxs(
+          y,
+          {
+            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__ */ t.jsx(
+          z,
+          {
+            active: i || !!a,
+            activeColor: T,
+            color: o
+          }
+        )
+      ]
+    }
+  );
+}
 export {
-  n as PaginationBarCurrentPage
+  z as Ribbon,
+  E as Tab
 };
 //# sourceMappingURL=sd-component-library259.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library259.js","sources":["../src/components/pagination-bars/pagination-bar-mobile/partials/pagination-bar-current-page/pagination-bar-current-page.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts\";\n\nexport const PaginationBarCurrentPage: React.FC<PropsWithChildren<{}>> = ({\n  children,\n}) => {\n  return (\n    <ResponsiveTextV2\n      fontSizeWeight={[18, \"regular\"]}\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        height: \"100%\",\n        borderRadius: \"5px\",\n        borderWidth: \"1px\",\n        borderColor: \"cl_lightGrey\",\n        borderStyle: \"solid\",\n      }}\n    >\n      {children}\n    </ResponsiveTextV2>\n  );\n};\n"],"names":["PaginationBarCurrentPage","children","jsx","ResponsiveTextV2"],"mappings":";;AAIO,MAAMA,IAA4D,CAAC;AAAA,EACxE,UAAAC;AACF,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,IAC9B,IAAI;AAAA,MACF,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,IACf;AAAA,IAEC,UAAAF;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"sd-component-library259.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-library26.js

@@ -1,16 +1,47 @@
-import { j as o } from "./sd-component-library195.js";
-import { LogoButton as e } from "./sd-component-library205.js";
-import { ReactComponent as r } from "./sd-component-library206.js";
-const s = (t) => /* @__PURE__ */ o.jsx(
-  e,
-  {
-    ...t,
-    variant: "poweredByLogo",
-    "data-testid": "powered-by-grey-logo-button",
-    children: /* @__PURE__ */ o.jsx(r, {})
-  }
-);
+import { j as B } from "./sd-component-library190.js";
+import { Button as C } from "./sd-component-library25.js";
+const m = (r) => {
+  const {
+    v1: h,
+    disabled: o,
+    borderRadius: a = h ? "0" : "5px",
+    borderWidth: e = "2px",
+    borderColor: s,
+    color: t,
+    bg: b,
+    hoverBorderColor: c,
+    hoverColor: l,
+    hoverBg: v,
+    disabledBg: d = "cl_grey",
+    disabledColor: i = "cl_white",
+    children: g,
+    height: n = "42px"
+  } = r;
+  return /* @__PURE__ */ B.jsx(
+    C,
+    {
+      "data-testid": "cta-button",
+      ...r,
+      variant: "_cta",
+      borderRadius: a,
+      height: n,
+      bg: o ? d : b,
+      color: o ? i : t,
+      fill: t,
+      borderStyle: "solid",
+      borderWidth: e,
+      borderColor: o ? "cl_grey" : s,
+      hoverBg: o ? d : v,
+      hoverColor: o ? i : l,
+      hoverFill: l,
+      hoverBorderStyle: "solid",
+      hoverBorderWidth: e,
+      hoverBorderColor: o ? "cl_grey" : c,
+      children: g
+    }
+  );
+};
 export {
-  s as PoweredByGreyLogoButton
+  m as CtaButton
 };
 //# sourceMappingURL=sd-component-library26.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library26.js","sources":["../src/components/buttons/logos/powered-by-grey-logo/powered-by-grey-logo.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { LogoButton } from \"../logo\";\nimport { PoweredByGrey } from \"./assets\";\nimport { PoweredByGreyLogoProps } from \"./interfaces\";\n\n/**\n * The powered by grey logo button.\n */\nexport const PoweredByGreyLogoButton: React.FC<PoweredByGreyLogoProps> = (\n  props\n) => (\n  <LogoButton\n    {...props}\n    variant=\"poweredByLogo\"\n    data-testid=\"powered-by-grey-logo-button\"\n  >\n    <PoweredByGrey />\n  </LogoButton>\n);\n"],"names":["PoweredByGreyLogoButton","props","jsx","LogoButton","PoweredByGrey"],"mappings":";;;AASa,MAAAA,IAA4D,CACvEC,MAEAC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,SAAQ;AAAA,IACR,eAAY;AAAA,IAEZ,gCAACG,GAAc,EAAA;AAAA,EAAA;AACjB;"}
+{"version":3,"file":"sd-component-library26.js","sources":["../src/components/buttons/cta/cta-button/cta-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Button } from \"../../button\";\nimport { CtaButtonProps } from \"./interfaces\";\n\n/**\n * The cta button.\n */\nexport const CtaButton: React.FC<CtaButtonProps> = (props) => {\n  const {\n    v1,\n    disabled,\n    borderRadius = v1 ? \"0\" : \"5px\",\n    borderWidth = \"2px\",\n    borderColor,\n    color,\n    bg,\n    hoverBorderColor,\n    hoverColor,\n    hoverBg,\n    disabledBg = \"cl_grey\",\n    disabledColor = \"cl_white\",\n    children,\n    height = \"42px\",\n  } = props;\n\n  return (\n    <Button\n      data-testid=\"cta-button\"\n      {...props}\n      variant=\"_cta\"\n      borderRadius={borderRadius}\n      height={height}\n      bg={disabled ? disabledBg : bg}\n      color={disabled ? disabledColor : color}\n      fill={color}\n      borderStyle=\"solid\"\n      borderWidth={borderWidth}\n      borderColor={disabled ? \"cl_grey\" : borderColor}\n      hoverBg={disabled ? disabledBg : hoverBg}\n      hoverColor={disabled ? disabledColor : hoverColor}\n      hoverFill={hoverColor}\n      hoverBorderStyle=\"solid\"\n      hoverBorderWidth={borderWidth}\n      hoverBorderColor={disabled ? \"cl_grey\" : hoverBorderColor}\n    >\n      {children}\n    </Button>\n  );\n};\n"],"names":["CtaButton","props","v1","disabled","borderRadius","borderWidth","borderColor","color","bg","hoverBorderColor","hoverColor","hoverBg","disabledBg","disabledColor","children","height","jsx","Button"],"mappings":";;AAQa,MAAAA,IAAsC,CAACC,MAAU;AACtD,QAAA;AAAA,IACJ,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC,IAAeF,IAAK,MAAM;AAAA,IAC1B,aAAAG,IAAc;AAAA,IACd,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,IAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,EACP,IAAAd;AAGF,SAAAe,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAGhB;AAAA,MACJ,SAAQ;AAAA,MACR,cAAAG;AAAA,MACA,QAAAW;AAAA,MACA,IAAIZ,IAAWS,IAAaJ;AAAA,MAC5B,OAAOL,IAAWU,IAAgBN;AAAA,MAClC,MAAMA;AAAA,MACN,aAAY;AAAA,MACZ,aAAAF;AAAA,MACA,aAAaF,IAAW,YAAYG;AAAA,MACpC,SAASH,IAAWS,IAAaD;AAAA,MACjC,YAAYR,IAAWU,IAAgBH;AAAA,MACvC,WAAWA;AAAA,MACX,kBAAiB;AAAA,MACjB,kBAAkBL;AAAA,MAClB,kBAAkBF,IAAW,YAAYM;AAAA,MAExC,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/lib/sd-component-library260.js

@@ -1,54 +1,125 @@
-import { j as r } from "./sd-component-library195.js";
-import s from "react";
-import { Box as n } from "rebass";
-import { TriangularPointerIcon as m } from "./sd-component-library189.js";
-import { SecondaryCustomSelectorOptionRow as x } from "./sd-component-library666.js";
-import { HorizontalDivider as i } from "./sd-component-library51.js";
-const f = ({
-  options: t,
-  onSelect: l
+import { j as i } from "./sd-component-library190.js";
+import { useRef as B, useEffect as L } from "react";
+import { Box as s } from "rebass";
+import { ResponsiveTextV2 as V } from "./sd-component-library144.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 = (o) => () => l(o);
-  return /* @__PURE__ */ r.jsxs(
-    n,
+  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: {
-        position: "absolute",
-        right: "-16px",
-        top: "calc(100% - 12px)",
-        minWidth: "calc(100% + 16px)",
-        zIndex: 1
+        cursor: "pointer",
+        position: "relative",
+        left: `-${n > e ? 2 : n == e ? 1 : 0}px`,
+        zIndex: t ? 1 : 0
       },
+      ref: c,
       children: [
-        /* @__PURE__ */ r.jsx(m, { direction: "top", mr: "15px", ml: "auto" }),
-        /* @__PURE__ */ r.jsx(i, { height: "2px", color: "cl_purple" }),
-        t.map((o, e) => /* @__PURE__ */ r.jsxs(s.Fragment, { children: [
-          e !== 0 && /* @__PURE__ */ r.jsx(
-            i,
-            {
-              color: "cl_headerLine",
-              sx: {
-                borderStyle: "none solid",
-                borderColor: "cl_lightGrey",
-                borderWidth: "1px"
-              }
+        /* @__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__ */ r.jsx(
-            x,
-            {
-              title: o.title,
-              onClick: c(o),
-              isLast: e === t.length - 1
+          }
+        ),
+        /* @__PURE__ */ i.jsx(
+          s,
+          {
+            sx: {
+              borderWidth: p,
+              borderColor: r,
+              borderStyle: t ? "none solid" : "none",
+              boxSizing: "content-box"
             },
-            o.id
-          )
-        ] }, o.id))
+            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 {
-  f as SecondaryCustomSelectorOptionsBox
+  R as TabV2
 };
 //# sourceMappingURL=sd-component-library260.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library260.js","sources":["../src/components/selectors/secondary-custom-selector/partials/secondary-custom-selector-options-box/secondary-custom-selector-options-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { HorizontalDivider } from \"../../../../dividers\";\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { SelectorOptionV2 } from \"../../../selector-v2\";\nimport { SecondaryCustomSelectorOptionRow } from \"../secondary-custom-selector-option-row\";\nimport { SecondaryCustomSelectorOptionsBoxProps as Props } from \"./interfaces\";\n\nexport const SecondaryCustomSelectorOptionsBox = <T extends string = string>({\n  options,\n  onSelect,\n}: Props<T>) => {\n  const onClick = (option: SelectorOptionV2<T>) => () => onSelect(option);\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        right: \"-16px\",\n        top: \"calc(100% - 12px)\",\n        minWidth: \"calc(100% + 16px)\",\n        zIndex: 1,\n      }}\n    >\n      <TriangularPointerIcon direction=\"top\" mr=\"15px\" ml=\"auto\" />\n\n      <HorizontalDivider height=\"2px\" color=\"cl_purple\" />\n\n      {options.map((option, idx) => (\n        <React.Fragment key={option.id}>\n          {idx !== 0 && (\n            <HorizontalDivider\n              color=\"cl_headerLine\"\n              sx={{\n                borderStyle: \"none solid\",\n                borderColor: \"cl_lightGrey\",\n                borderWidth: \"1px\",\n              }}\n            />\n          )}\n\n          <SecondaryCustomSelectorOptionRow\n            key={option.id}\n            title={option.title}\n            onClick={onClick(option)}\n            isLast={idx === options.length - 1}\n          />\n        </React.Fragment>\n      ))}\n    </Box>\n  );\n};\n"],"names":["SecondaryCustomSelectorOptionsBox","options","onSelect","onClick","option","jsxs","Box","jsx","TriangularPointerIcon","HorizontalDivider","idx","React","SecondaryCustomSelectorOptionRow"],"mappings":";;;;;;AAUO,MAAMA,IAAoC,CAA4B;AAAA,EAC3E,SAAAC;AAAA,EACA,UAAAC;AACF,MAAgB;AACd,QAAMC,IAAU,CAACC,MAAgC,MAAMF,EAASE,CAAM;AAGpE,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,MAACC,KAAsB,WAAU,OAAM,IAAG,QAAO,IAAG,QAAO;AAAA,QAE1DD,gBAAAA,EAAA,IAAAE,GAAA,EAAkB,QAAO,OAAM,OAAM,aAAY;AAAA,QAEjDR,EAAQ,IAAI,CAACG,GAAQM,MACnBL,gBAAAA,EAAAA,KAAAM,EAAM,UAAN,EACE,UAAA;AAAA,UAAAD,MAAQ,KACPH,gBAAAA,EAAA;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,IAAI;AAAA,gBACF,aAAa;AAAA,gBACb,aAAa;AAAA,gBACb,aAAa;AAAA,cACf;AAAA,YAAA;AAAA,UACF;AAAA,UAGFF,gBAAAA,EAAA;AAAA,YAACK;AAAA,YAAA;AAAA,cAEC,OAAOR,EAAO;AAAA,cACd,SAASD,EAAQC,CAAM;AAAA,cACvB,QAAQM,MAAQT,EAAQ,SAAS;AAAA,YAAA;AAAA,YAH5BG,EAAO;AAAA,UAId;AAAA,QAAA,KAjBmBA,EAAO,EAkB5B,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"sd-component-library260.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":"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"}