@selfdecode/sd-component-library 4.0.73-vite15 → 4.0.73-vite16

package/lib/sd-component-library272.js

@@ -1,45 +1,64 @@
-import { j as o } from "./sd-component-library195.js";
-import "./sd-component-library198.js";
-import { Box as e } from "./sd-component-library199.js";
-import { CustomScrollbarBox as p } from "./sd-component-library50.js";
-import { HorizontalDivider as s } from "./sd-component-library51.js";
-import { ResponsiveTextV2 as d } from "./sd-component-library147.js";
-const g = ({
-  options: l,
-  onSelect: t
-}) => {
-  const i = {
-    borderColor: "cl_lightGrey",
-    borderWidth: "1px"
-  }, x = (r) => () => t(r);
-  return /* @__PURE__ */ o.jsxs(e, { sx: {
+import { j as r } from "./sd-component-library195.js";
+import { createElement as u } from "react";
+import "./sd-component-library197.js";
+import { Box as i } from "./sd-component-library198.js";
+import { TriangularPointerIcon as g } from "./sd-component-library189.js";
+import { HorizontalDivider as f } from "./sd-component-library51.js";
+import { OptionRow as w } from "./sd-component-library658.js";
+const k = 8, e = 5, c = k + 2 * e, l = c / 2, n = "cl_header", s = "cl_lightGrey", C = "46px", S = 4, B = (a) => {
+  const {
+    isVisible: d,
+    options: p,
+    value: t,
+    onChange: b
+  } = a;
+  if (!d)
+    return null;
+  const x = (o) => () => b(o), m = [t, ...p.filter(({
+    id: o
+  }) => o !== t.id)], h = `${c}px`;
+  return /* @__PURE__ */ r.jsxs(i, { sx: {
+    minWidth: "100%",
     position: "absolute",
     top: "100%",
     right: 0,
-    zIndex: 1
+    zIndex: 1,
+    cursor: "default"
   }, children: [
-    /* @__PURE__ */ o.jsx(s, { color: "cl_purple", height: "2px" }),
-    /* @__PURE__ */ o.jsx(e, { sx: {
+    /* @__PURE__ */ r.jsx(g, { direction: "top", mr: "15px", ml: "auto" }),
+    /* @__PURE__ */ r.jsx(f, { color: "cl_purple", height: "2px" }),
+    /* @__PURE__ */ r.jsx(i, { sx: {
       bg: "cl_white",
       borderRadius: "0 0 3px 3px",
-      ...i,
+      boxShadow: "0px 3px 10px #0000001A",
+      borderWidth: "1px",
+      borderColor: "cl_lightGrey",
       borderStyle: "solid",
       borderTopStyle: "none",
-      boxShadow: "0px 3px 10px #0000001A"
-    }, children: /* @__PURE__ */ o.jsx(p, { height: "180px", width: "max-content", scrollbarThumbColor: "cl_purple", scrollbarTrackColor: "cl_headerLine", scrollbarWidth: "5px", hoverScrollbarWidth: "5px", bg: "cl_transparent", p: "5px 7px 5px 0", sx: {
-      pr: "8px"
-    }, children: l.map((r) => /* @__PURE__ */ o.jsx(d, { fontSizeWeight: [14, "regular"], sx: {
-      display: "flex",
-      alignItems: "center",
-      height: "36px",
-      px: "10px",
-      borderColor: "cl_headerLine",
-      borderWidth: "1px",
-      borderBottomStyle: "solid"
-    }, onClick: x(r), children: r.title }, r.id)) }) })
+      overflow: "auto",
+      maxHeight: `calc(${C} * ${S})`,
+      scrollbarWidth: "thin",
+      scrollbarColor: `${n} ${s}`,
+      "::-webkit-scrollbar-track": {
+        borderRadius: l,
+        bg: n,
+        border: `${e}px solid transparent`,
+        backgroundClip: "content-box"
+      },
+      "::-webkit-scrollbar": {
+        width: h,
+        bg: "transparent"
+      },
+      "::-webkit-scrollbar-thumb": {
+        borderRadius: l,
+        bg: s,
+        border: `${e}px solid transparent`,
+        backgroundClip: "content-box"
+      }
+    }, children: m.map((o) => /* @__PURE__ */ u(w, { onClick: x(o), ...o, key: o.id, currentSelection: t.id === o.id })) })
   ] });
 };
 export {
-  g as CustomScrollableOptionsBox
+  B as CustomScrollableOptionsBox
 };
 //# 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/selectors/custom-scrollable-selector/partials/custom-scrollable-options-box/custom-scrollable-options-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { CustomScrollbarBox } from \"../../../../custom-scrollbar-box\";\nimport { HorizontalDivider } from \"../../../../dividers\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { SelectorOptionV2 } from \"../../../selector-v2\";\nimport { CustomScrollableOptionsBoxProps as Props } from \"./interfaces\";\n\nexport const CustomScrollableOptionsBox = <T extends string = string>({\n  options,\n  onSelect,\n}: Props<T>) => {\n  const lightGreyThinBorder = {\n    borderColor: \"cl_lightGrey\",\n    borderWidth: \"1px\",\n  };\n\n  const onClick = (option: SelectorOptionV2<T>) => () => onSelect(option);\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        top: \"100%\",\n        right: 0,\n        zIndex: 1,\n      }}\n    >\n      <HorizontalDivider color=\"cl_purple\" height=\"2px\" />\n\n      <Box\n        sx={{\n          bg: \"cl_white\",\n          borderRadius: \"0 0 3px 3px\",\n          ...lightGreyThinBorder,\n          borderStyle: \"solid\",\n          borderTopStyle: \"none\",\n          boxShadow: \"0px 3px 10px #0000001A\",\n        }}\n      >\n        <CustomScrollbarBox\n          height=\"180px\"\n          width=\"max-content\"\n          scrollbarThumbColor=\"cl_purple\"\n          scrollbarTrackColor=\"cl_headerLine\"\n          scrollbarWidth=\"5px\"\n          hoverScrollbarWidth=\"5px\"\n          bg=\"cl_transparent\"\n          p=\"5px 7px 5px 0\"\n          sx={{ pr: \"8px\" }}\n        >\n          {options.map((option) => (\n            <ResponsiveTextV2\n              key={option.id}\n              fontSizeWeight={[14, \"regular\"]}\n              sx={{\n                display: \"flex\",\n                alignItems: \"center\",\n                height: \"36px\",\n                px: \"10px\",\n                borderColor: \"cl_headerLine\",\n                borderWidth: \"1px\",\n                borderBottomStyle: \"solid\",\n              }}\n              onClick={onClick(option)}\n            >\n              {option.title}\n            </ResponsiveTextV2>\n          ))}\n        </CustomScrollbarBox>\n      </Box>\n    </Box>\n  );\n};\n"],"names":["CustomScrollableOptionsBox","options","onSelect","lightGreyThinBorder","borderColor","borderWidth","onClick","option","jsxs","Box","position","top","right","zIndex","jsx","HorizontalDivider","bg","borderRadius","borderStyle","borderTopStyle","boxShadow","CustomScrollbarBox","pr","map","ResponsiveTextV2","display","alignItems","height","px","borderBottomStyle","title","id"],"mappings":";;;;;;AAUO,MAAMA,IAA6B,CAA4B;AAAA,EACpEC,SAAAA;AAAAA,EACAC,UAAAA;AACQ,MAAM;AACd,QAAMC,IAAsB;AAAA,IAC1BC,aAAa;AAAA,IACbC,aAAa;AAAA,EAAA,GAGTC,IAAUA,CAACC,MAAgC,MAAML,EAASK,CAAM;AAGpE,SAAAC,gBAAAA,EAAA,KAACC,KACC,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,OAAO;AAAA,IACPC,QAAQ;AAAA,EAGV,GAAA,UAAA;AAAA,IAAAC,gBAAAA,EAAA,IAACC,GAAkB,EAAA,OAAM,aAAY,QAAO,OAAK;AAAA,IAEjDD,gBAAAA,MAACL,KACC,IAAI;AAAA,MACFO,IAAI;AAAA,MACJC,cAAc;AAAA,MACd,GAAGd;AAAAA,MACHe,aAAa;AAAA,MACbC,gBAAgB;AAAA,MAChBC,WAAW;AAAA,IAAA,GAGb,UAACN,gBAAAA,MAAAO,GAAA,EACC,QAAO,SACP,OAAM,eACN,qBAAoB,aACpB,qBAAoB,iBACpB,gBAAe,OACf,qBAAoB,OACpB,IAAG,kBACH,GAAE,iBACF,IAAI;AAAA,MAAEC,IAAI;AAAA,IAAM,GAEfrB,UAAQsB,EAAAA,IAAKhB,CACZA,MAAAO,gBAAAA,EAAA,IAACU,GAEC,EAAA,gBAAgB,CAAC,IAAI,SAAS,GAC9B,IAAI;AAAA,MACFC,SAAS;AAAA,MACTC,YAAY;AAAA,MACZC,QAAQ;AAAA,MACRC,IAAI;AAAA,MACJxB,aAAa;AAAA,MACbC,aAAa;AAAA,MACbwB,mBAAmB;AAAA,IACrB,GACA,SAASvB,EAAQC,CAAM,GAEtBA,UAAOuB,EAAAA,MAAAA,GAbHvB,EAAOwB,EAcd,CACD,EAAA,CACH,EACF,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library272.js","sources":["../src/components/selectors/primary-custom-scrollable-selector/partials/custom-scrollable-options-box/custom-scrollable-options-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { HorizontalDivider } from \"../../../../dividers/horizontal-divider\";\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { SelectorOptionV2 } from \"../../../selector-v2\";\nimport { OptionRow } from \"../option-row\";\nimport { CustomScrollableOptionsBoxProps as Props } from \"./interfaces\";\n\nconst scrollbarWidth = 8;\nconst offset = 5;\nconst totalWidth = scrollbarWidth + 2 * offset;\nconst borderRadius = totalWidth / 2;\n\nconst trackColor = \"cl_header\";\nconst thumbColor = \"cl_lightGrey\";\nconst rowHeight = \"46px\";\nconst maxRows = 4;\n\nexport const CustomScrollableOptionsBox = <T extends string = string>(\n  props: Props<T>\n) => {\n  const { isVisible, options, value, onChange } = props;\n\n  if (!isVisible) return null;\n\n  const onSelect = (option: SelectorOptionV2<T>) => () => onChange(option);\n  const regroupedOptions = [\n    value,\n    ...options.filter(({ id }) => id !== value.id),\n  ];\n\n  const scrollbarWidthStr = `${totalWidth}px`;\n\n  return (\n    <Box\n      sx={{\n        minWidth: \"100%\",\n        position: \"absolute\",\n        top: \"100%\",\n        right: 0,\n        zIndex: 1,\n        cursor: \"default\",\n      }}\n    >\n      <TriangularPointerIcon direction=\"top\" mr=\"15px\" ml=\"auto\" />\n\n      <HorizontalDivider color=\"cl_purple\" height=\"2px\" />\n\n      <Box\n        sx={{\n          bg: \"cl_white\",\n          borderRadius: \"0 0 3px 3px\",\n          boxShadow: \"0px 3px 10px #0000001A\",\n          borderWidth: \"1px\",\n          borderColor: \"cl_lightGrey\",\n          borderStyle: \"solid\",\n          borderTopStyle: \"none\",\n          overflow: \"auto\",\n          maxHeight: `calc(${rowHeight} * ${maxRows})`,\n          scrollbarWidth: \"thin\",\n          scrollbarColor: `${trackColor} ${thumbColor}`,\n          \"::-webkit-scrollbar-track\": {\n            borderRadius,\n            bg: trackColor,\n            border: `${offset}px solid transparent`,\n            backgroundClip: \"content-box\",\n          },\n          \"::-webkit-scrollbar\": {\n            width: scrollbarWidthStr,\n            bg: \"transparent\",\n          },\n          \"::-webkit-scrollbar-thumb\": {\n            borderRadius,\n            bg: thumbColor,\n            border: `${offset}px solid transparent`,\n            backgroundClip: \"content-box\",\n          },\n        }}\n      >\n        {(regroupedOptions as SelectorOptionV2<T>[]).map((option) => (\n          <OptionRow\n            onClick={onSelect(option)}\n            {...option}\n            key={option.id}\n            currentSelection={value.id === option.id}\n          />\n        ))}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["scrollbarWidth","offset","totalWidth","borderRadius","trackColor","thumbColor","rowHeight","maxRows","CustomScrollableOptionsBox","props","isVisible","options","value","onChange","onSelect","option","regroupedOptions","filter","id","scrollbarWidthStr","jsxs","Box","minWidth","position","top","right","zIndex","cursor","jsx","TriangularPointerIcon","HorizontalDivider","bg","boxShadow","borderWidth","borderColor","borderStyle","borderTopStyle","overflow","maxHeight","scrollbarColor","border","backgroundClip","width","map","OptionRow"],"mappings":";;;;;;;AAUA,MAAMA,IAAiB,GACjBC,IAAS,GACTC,IAAaF,IAAiB,IAAIC,GAClCE,IAAeD,IAAa,GAE5BE,IAAa,aACbC,IAAa,gBACbC,IAAY,QACZC,IAAU,GAEHC,IAA6B,CACxCC,MACG;AACG,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWC,SAAAA;AAAAA,IAASC,OAAAA;AAAAA,IAAOC,UAAAA;AAAAA,EAAaJ,IAAAA;AAEhD,MAAI,CAACC;AAAkB,WAAA;AAEvB,QAAMI,IAAWA,CAACC,MAAgC,MAAMF,EAASE,CAAM,GACjEC,IAAmB,CACvBJ,GACA,GAAGD,EAAQM,OAAO,CAAC;AAAA,IAAEC,IAAAA;AAAAA,EAASA,MAAAA,MAAON,EAAMM,EAAE,CAAC,GAG1CC,IAAqB,GAAEjB,CAAW;AAGtC,SAAAkB,gBAAAA,EAAA,KAACC,KACC,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,QAAQ;AAAA,EAGV,GAAA,UAAA;AAAA,IAAAC,gBAAAA,MAACC,KAAsB,WAAU,OAAM,IAAG,QAAO,IAAG,QAAM;AAAA,IAEzDD,gBAAAA,EAAA,IAAAE,GAAA,EAAkB,OAAM,aAAY,QAAO,OAAK;AAAA,IAEjDF,gBAAAA,MAACP,KACC,IAAI;AAAA,MACFU,IAAI;AAAA,MACJ5B,cAAc;AAAA,MACd6B,WAAW;AAAA,MACXC,aAAa;AAAA,MACbC,aAAa;AAAA,MACbC,aAAa;AAAA,MACbC,gBAAgB;AAAA,MAChBC,UAAU;AAAA,MACVC,WAAY,QAAOhC,CAAU,MAAKC,CAAQ;AAAA,MAC1CP,gBAAgB;AAAA,MAChBuC,gBAAiB,GAAEnC,CAAW,IAAGC,CAAW;AAAA,MAC5C,6BAA6B;AAAA,QAC3BF,cAAAA;AAAAA,QACA4B,IAAI3B;AAAAA,QACJoC,QAAS,GAAEvC,CAAO;AAAA,QAClBwC,gBAAgB;AAAA,MAClB;AAAA,MACA,uBAAuB;AAAA,QACrBC,OAAOvB;AAAAA,QACPY,IAAI;AAAA,MACN;AAAA,MACA,6BAA6B;AAAA,QAC3B5B,cAAAA;AAAAA,QACA4B,IAAI1B;AAAAA,QACJmC,QAAS,GAAEvC,CAAO;AAAA,QAClBwC,gBAAgB;AAAA,MAClB;AAAA,IACF,GAEEzB,YAA2C2B,IAAK5B,CAAAA,wBAC/C6B,GACC,EAAA,SAAS9B,EAASC,CAAM,GACpBA,GAAAA,GACJ,KAAKA,EAAOG,IACZ,kBAAkBN,EAAMM,OAAOH,EAAOG,IAAG,CAE5C,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/lib/sd-component-library273.js

@@ -1,64 +1,27 @@
 import { j as r } from "./sd-component-library195.js";
-import { createElement as u } from "react";
-import "./sd-component-library198.js";
-import { Box as i } from "./sd-component-library199.js";
-import { TriangularPointerIcon as g } from "./sd-component-library189.js";
-import { HorizontalDivider as f } from "./sd-component-library51.js";
-import { OptionRow as w } from "./sd-component-library659.js";
-const k = 8, e = 5, c = k + 2 * e, l = c / 2, n = "cl_header", s = "cl_lightGrey", C = "46px", S = 4, B = (a) => {
-  const {
-    isVisible: d,
-    options: p,
-    value: t,
-    onChange: b
-  } = a;
-  if (!d)
-    return null;
-  const x = (o) => () => b(o), m = [t, ...p.filter(({
-    id: o
-  }) => o !== t.id)], h = `${c}px`;
-  return /* @__PURE__ */ r.jsxs(i, { sx: {
-    minWidth: "100%",
-    position: "absolute",
-    top: "100%",
-    right: 0,
-    zIndex: 1,
-    cursor: "default"
-  }, children: [
-    /* @__PURE__ */ r.jsx(g, { direction: "top", mr: "15px", ml: "auto" }),
-    /* @__PURE__ */ r.jsx(f, { color: "cl_purple", height: "2px" }),
-    /* @__PURE__ */ r.jsx(i, { sx: {
-      bg: "cl_white",
-      borderRadius: "0 0 3px 3px",
-      boxShadow: "0px 3px 10px #0000001A",
-      borderWidth: "1px",
-      borderColor: "cl_lightGrey",
-      borderStyle: "solid",
-      borderTopStyle: "none",
-      overflow: "auto",
-      maxHeight: `calc(${C} * ${S})`,
-      scrollbarWidth: "thin",
-      scrollbarColor: `${n} ${s}`,
-      "::-webkit-scrollbar-track": {
-        borderRadius: l,
-        bg: n,
-        border: `${e}px solid transparent`,
-        backgroundClip: "content-box"
-      },
-      "::-webkit-scrollbar": {
-        width: h,
-        bg: "transparent"
-      },
-      "::-webkit-scrollbar-thumb": {
-        borderRadius: l,
-        bg: s,
-        border: `${e}px solid transparent`,
-        backgroundClip: "content-box"
-      }
-    }, children: m.map((o) => /* @__PURE__ */ u(w, { onClick: x(o), ...o, key: o.id, currentSelection: t.id === o.id })) })
-  ] });
-};
+import { ReactComponent as s } from "./sd-component-library191.js";
+import { FlexItemsCenter as i } from "./sd-component-library37.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 {
-  B as CustomScrollableOptionsBox
+  l as ArrowButton
 };
 //# sourceMappingURL=sd-component-library273.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library273.js","sources":["../src/components/selectors/primary-custom-scrollable-selector/partials/custom-scrollable-options-box/custom-scrollable-options-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { HorizontalDivider } from \"../../../../dividers/horizontal-divider\";\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { SelectorOptionV2 } from \"../../../selector-v2\";\nimport { OptionRow } from \"../option-row\";\nimport { CustomScrollableOptionsBoxProps as Props } from \"./interfaces\";\n\nconst scrollbarWidth = 8;\nconst offset = 5;\nconst totalWidth = scrollbarWidth + 2 * offset;\nconst borderRadius = totalWidth / 2;\n\nconst trackColor = \"cl_header\";\nconst thumbColor = \"cl_lightGrey\";\nconst rowHeight = \"46px\";\nconst maxRows = 4;\n\nexport const CustomScrollableOptionsBox = <T extends string = string>(\n  props: Props<T>\n) => {\n  const { isVisible, options, value, onChange } = props;\n\n  if (!isVisible) return null;\n\n  const onSelect = (option: SelectorOptionV2<T>) => () => onChange(option);\n  const regroupedOptions = [\n    value,\n    ...options.filter(({ id }) => id !== value.id),\n  ];\n\n  const scrollbarWidthStr = `${totalWidth}px`;\n\n  return (\n    <Box\n      sx={{\n        minWidth: \"100%\",\n        position: \"absolute\",\n        top: \"100%\",\n        right: 0,\n        zIndex: 1,\n        cursor: \"default\",\n      }}\n    >\n      <TriangularPointerIcon direction=\"top\" mr=\"15px\" ml=\"auto\" />\n\n      <HorizontalDivider color=\"cl_purple\" height=\"2px\" />\n\n      <Box\n        sx={{\n          bg: \"cl_white\",\n          borderRadius: \"0 0 3px 3px\",\n          boxShadow: \"0px 3px 10px #0000001A\",\n          borderWidth: \"1px\",\n          borderColor: \"cl_lightGrey\",\n          borderStyle: \"solid\",\n          borderTopStyle: \"none\",\n          overflow: \"auto\",\n          maxHeight: `calc(${rowHeight} * ${maxRows})`,\n          scrollbarWidth: \"thin\",\n          scrollbarColor: `${trackColor} ${thumbColor}`,\n          \"::-webkit-scrollbar-track\": {\n            borderRadius,\n            bg: trackColor,\n            border: `${offset}px solid transparent`,\n            backgroundClip: \"content-box\",\n          },\n          \"::-webkit-scrollbar\": {\n            width: scrollbarWidthStr,\n            bg: \"transparent\",\n          },\n          \"::-webkit-scrollbar-thumb\": {\n            borderRadius,\n            bg: thumbColor,\n            border: `${offset}px solid transparent`,\n            backgroundClip: \"content-box\",\n          },\n        }}\n      >\n        {(regroupedOptions as SelectorOptionV2<T>[]).map((option) => (\n          <OptionRow\n            onClick={onSelect(option)}\n            {...option}\n            key={option.id}\n            currentSelection={value.id === option.id}\n          />\n        ))}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["scrollbarWidth","offset","totalWidth","borderRadius","trackColor","thumbColor","rowHeight","maxRows","CustomScrollableOptionsBox","props","isVisible","options","value","onChange","onSelect","option","regroupedOptions","filter","id","scrollbarWidthStr","jsxs","Box","minWidth","position","top","right","zIndex","cursor","jsx","TriangularPointerIcon","HorizontalDivider","bg","boxShadow","borderWidth","borderColor","borderStyle","borderTopStyle","overflow","maxHeight","scrollbarColor","border","backgroundClip","width","map","OptionRow"],"mappings":";;;;;;;AAUA,MAAMA,IAAiB,GACjBC,IAAS,GACTC,IAAaF,IAAiB,IAAIC,GAClCE,IAAeD,IAAa,GAE5BE,IAAa,aACbC,IAAa,gBACbC,IAAY,QACZC,IAAU,GAEHC,IAA6B,CACxCC,MACG;AACG,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWC,SAAAA;AAAAA,IAASC,OAAAA;AAAAA,IAAOC,UAAAA;AAAAA,EAAaJ,IAAAA;AAEhD,MAAI,CAACC;AAAkB,WAAA;AAEvB,QAAMI,IAAWA,CAACC,MAAgC,MAAMF,EAASE,CAAM,GACjEC,IAAmB,CACvBJ,GACA,GAAGD,EAAQM,OAAO,CAAC;AAAA,IAAEC,IAAAA;AAAAA,EAASA,MAAAA,MAAON,EAAMM,EAAE,CAAC,GAG1CC,IAAqB,GAAEjB,CAAW;AAGtC,SAAAkB,gBAAAA,EAAA,KAACC,KACC,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,QAAQ;AAAA,EAGV,GAAA,UAAA;AAAA,IAAAC,gBAAAA,MAACC,KAAsB,WAAU,OAAM,IAAG,QAAO,IAAG,QAAM;AAAA,IAEzDD,gBAAAA,EAAA,IAAAE,GAAA,EAAkB,OAAM,aAAY,QAAO,OAAK;AAAA,IAEjDF,gBAAAA,MAACP,KACC,IAAI;AAAA,MACFU,IAAI;AAAA,MACJ5B,cAAc;AAAA,MACd6B,WAAW;AAAA,MACXC,aAAa;AAAA,MACbC,aAAa;AAAA,MACbC,aAAa;AAAA,MACbC,gBAAgB;AAAA,MAChBC,UAAU;AAAA,MACVC,WAAY,QAAOhC,CAAU,MAAKC,CAAQ;AAAA,MAC1CP,gBAAgB;AAAA,MAChBuC,gBAAiB,GAAEnC,CAAW,IAAGC,CAAW;AAAA,MAC5C,6BAA6B;AAAA,QAC3BF,cAAAA;AAAAA,QACA4B,IAAI3B;AAAAA,QACJoC,QAAS,GAAEvC,CAAO;AAAA,QAClBwC,gBAAgB;AAAA,MAClB;AAAA,MACA,uBAAuB;AAAA,QACrBC,OAAOvB;AAAAA,QACPY,IAAI;AAAA,MACN;AAAA,MACA,6BAA6B;AAAA,QAC3B5B,cAAAA;AAAAA,QACA4B,IAAI1B;AAAAA,QACJmC,QAAS,GAAEvC,CAAO;AAAA,QAClBwC,gBAAgB;AAAA,MAClB;AAAA,IACF,GAEEzB,YAA2C2B,IAAK5B,CAAAA,wBAC/C6B,GACC,EAAA,SAAS9B,EAASC,CAAM,GACpBA,GAAAA,GACJ,KAAKA,EAAOG,IACZ,kBAAkBN,EAAMM,OAAOH,EAAOG,IAAG,CAE5C,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library273.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","FlexItemsCenter","position","right","top","height","stroke","cursor","bg","zIndex","jsx","ThinArrowLeftIcon"],"mappings":";;;AAMO,MAAMA,IAA+BA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,WAAAA;AAAAA,EAAWC,SAAAA;AAAQ,4BAEpEC,GACC,EAAA,gBAAgBF,MAAc,UAAU,aAAa,cACrD,IAAI;AAAA,EACFG,UAAU;AAAA,EACV,GAAIH,MAAc,UAAU;AAAA,IAAEI,OAAO;AAAA,EAAA,IAAoB;AAAA,EACzDC,KAAK;AAAA,EACLN,OAAAA;AAAAA,EACAO,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,IAAI;AAAA,EACJ,UAAU;AAAA,IAAEF,QAAQ;AAAA,EAAY;AAAA,EAChCG,QAAQ;AAAA,GAEV,SAAAT,GAEA,UAACU,gBAAAA,EAAA,IAAAC,GAAA,EACC,OAAM,QACN,WAAY,UAASZ,MAAc,UAAU,MAAM,CAAE,KAAG,EAE5D,CAAA;"}

package/lib/sd-component-library274.js

@@ -1,88 +1,24 @@
-import { j as i } from "./sd-component-library195.js";
-import { useRef as _, useEffect as z } from "react";
-import "./sd-component-library198.js";
-import { Box as s } from "./sd-component-library199.js";
-import { ResponsiveTextV2 as L } from "./sd-component-library147.js";
-const O = ({
-  id: b,
-  label: a,
-  color: g,
-  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: B = 4,
-  scrollOnChange: l = !0
+import { j as e } from "./sd-component-library195.js";
+import "./sd-component-library197.js";
+import { Box as n } from "./sd-component-library198.js";
+const x = ({
+  width: s,
+  direction: t,
+  offset: o
 }) => {
-  const c = _(null), t = e === n;
-  z(() => {
-    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, T = 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` : T ? `0 ${o}px 0 0` : void 0,
-      bg: "cl_white"
-    } }),
-    /* @__PURE__ */ i.jsx(s, { sx: {
-      borderWidth: p,
-      borderColor: r,
-      borderStyle: t ? "none solid" : "none",
-      boxSizing: "content-box"
-    }, children: /* @__PURE__ */ i.jsx(L, { fontSizeWeight: [v, "bold"], textTransform: "uppercase", color: t ? x : g, sx: {
-      bg: "cl_white",
-      letterSpacing: "1px",
-      px: u
-    }, children: a }) }),
-    /* @__PURE__ */ i.jsx(s, { sx: {
-      height: `${o + B}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"
-    } })
-  ] });
+  const r = "#000000AA", a = "#00000000";
+  return /* @__PURE__ */ e.jsx(n, { sx: {
+    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 {
-  O as TabV2
+  x as Mask
 };
 //# sourceMappingURL=sd-component-library274.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library274.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","current","scrollIntoView","behavior","inline","block","atLeftOfActive","atRightOfActive","isLast","Box","cursor","position","left","zIndex","jsx","height","borderStyle","borderBottomStyle","undefined","bg","boxSizing","ResponsiveTextV2","letterSpacing","borderLeftStyle","borderRightStyle","borderTopStyle","mx","width","bottom","transform"],"mappings":"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"}
+{"version":3,"file":"sd-component-library274.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","position","top","left","undefined","right","height","background","opacity"],"mappings":";;;AAMO,MAAMA,IAAwBA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,WAAAA;AAAAA,EAAWC,QAAAA;AAAO,MAAM;AACrE,QAAMC,IAAa,aACbC,IAAW;AAGf,SAAAC,gBAAAA,EAAA,IAACC,KACC,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,MAAMR,MAAc,SAASC,IAASQ;AAAAA,IACtCC,OAAOV,MAAc,UAAUC,IAASQ;AAAAA,IACxCE,QAAQ;AAAA,IACRZ,OAAAA;AAAAA,IACAa,YAAa,uCACXZ,MAAc,SAASG,IAAWD,CACnC,QACCF,MAAc,UAAUG,IAAWD,CACpC;AAAA,IACDW,SAAS;AAAA,EAEX,EAAA,CAAA;AAEN;"}

package/lib/sd-component-library275.js

@@ -1,27 +1,72 @@
-import { j as r } from "./sd-component-library195.js";
-import { ReactComponent as s } from "./sd-component-library191.js";
-import { FlexItemsCenter as i } from "./sd-component-library37.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})` }) });
+import { j as t } from "./sd-component-library195.js";
+import "./sd-component-library197.js";
+import { Flex as f, Box as W } from "./sd-component-library198.js";
+import { Button as y } from "./sd-component-library28.js";
+import { ResponsiveTextV2 as m } from "./sd-component-library147.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"
+} });
+function E({
+  width: n,
+  height: s,
+  label: r,
+  secondaryText: p,
+  icon: l,
+  id: h,
+  onClick: u,
+  selected: i = !1,
+  activeColor: o = "cl_purple",
+  color: a = "cl_darkGrey",
+  tabPadding: d,
+  bg: e = "cl_transparent",
+  activeBg: c = "cl_transparent",
+  activeRibbonColor: j,
+  borderRadius: b = "4px",
+  tabHeaderComponent: x,
+  elementId: _,
+  maxWidth: g,
+  labelSx: R,
+  secondaryTextSx: S,
+  containerSx: w
+}) {
+  const T = x ? i ? c : e : j || o;
+  return /* @__PURE__ */ t.jsxs(f, { flexDirection: "column", sx: {
+    width: "fit-content",
+    maxWidth: g,
+    minWidth: "fit-content",
+    ...w
+  }, children: [
+    /* @__PURE__ */ t.jsxs(y, { id: _, width: n, height: s, bg: i ? c : e, onClick: u, borderRadius: b, "data-test": `tab-${h}`, padding: d, disabled: i, display: "flex", children: [
+      r && /* @__PURE__ */ t.jsx(m, { fontSizeWeight: [[13, "bold"]], sx: {
+        letterSpacing: "1.3px",
+        textTransform: "uppercase",
+        ...R
+      }, color: i ? o : a, children: r }),
+      p && /* @__PURE__ */ t.jsx(m, { fontSizeWeight: [[10, "semi-bold"]], sx: {
+        letterSpacing: "1px",
+        textTransform: "uppercase",
+        ...S
+      }, color: i ? o : a, children: p }),
+      l && /* @__PURE__ */ t.jsx(f, { height: "16px", flexDirection: "column", justifyContent: "space-between", ml: "10px", children: l }),
+      x
+    ] }),
+    /* @__PURE__ */ t.jsx(
+      z,
+      {
+        active: i || !!x,
+        activeColor: T,
+        color: e
+      }
+    )
+  ] });
+}
 export {
-  l as ArrowButton
+  z as Ribbon,
+  E as Tab
 };
 //# sourceMappingURL=sd-component-library275.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library275.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","FlexItemsCenter","position","right","top","height","stroke","cursor","bg","zIndex","jsx","ThinArrowLeftIcon"],"mappings":";;;AAMO,MAAMA,IAA+BA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,WAAAA;AAAAA,EAAWC,SAAAA;AAAQ,4BAEpEC,GACC,EAAA,gBAAgBF,MAAc,UAAU,aAAa,cACrD,IAAI;AAAA,EACFG,UAAU;AAAA,EACV,GAAIH,MAAc,UAAU;AAAA,IAAEI,OAAO;AAAA,EAAA,IAAoB;AAAA,EACzDC,KAAK;AAAA,EACLN,OAAAA;AAAAA,EACAO,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,IAAI;AAAA,EACJ,UAAU;AAAA,IAAEF,QAAQ;AAAA,EAAY;AAAA,EAChCG,QAAQ;AAAA,GAEV,SAAAT,GAEA,UAACU,gBAAAA,EAAA,IAAAC,GAAA,EACC,OAAM,QACN,WAAY,UAASZ,MAAc,UAAU,MAAM,CAAE,KAAG,EAE5D,CAAA;"}
+{"version":3,"file":"sd-component-library275.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  />\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-test={`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            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","mt","transition","Tab","width","height","label","secondaryText","icon","id","onClick","selected","tabPadding","bg","activeBg","activeRibbonColor","borderRadius","tabHeaderComponent","elementId","maxWidth","labelSx","secondaryTextSx","containerSx","activeColorOfRibbon","jsxs","Flex","minWidth","Button","ResponsiveTextV2","letterSpacing","textTransform"],"mappings":";;;;;AAQO,MAAMA,IAASA,CAAC;AAAA,EACrBC,QAAAA,IAAS;AAAA,EACTC,aAAAA,IAAc;AAAA,EACdC,OAAAA,IAAQ;AACV,MACEC,gBAAAA,MAACC,GACC,EAAA,QAAQ,GACR,OAAM,QACN,IAAIJ,IAASC,IAAcC,GAC3B,IAAI;AAAA,EACFG,IAAI;AAAA,EACJC,YAAY;AACd,GAEH;AAEM,SAASC,EAAO;AAAA,EACrBC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXd,aAAAA,IAAc;AAAA,EACdC,OAAAA,IAAQ;AAAA,EACRc,YAAAA;AAAAA,EACAC,IAAAA,IAAK;AAAA,EACLC,UAAAA,IAAW;AAAA,EACXC,mBAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,oBAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,aAAAA;AACW,GAAG;AACd,QAAMC,IAAsBN,IACxBN,IACEG,IACAD,IACFE,KAAqBlB;AAEzB,SACG2B,gBAAAA,EAAA,KAAAC,GAAA,EACC,eAAc,UACd,IAAI;AAAA,IACFrB,OAAO;AAAA,IACPe,UAAAA;AAAAA,IACAO,UAAU;AAAA,IACV,GAAGJ;AAAAA,EAGL,GAAA,UAAA;AAAA,IAACE,gBAAAA,EAAAA,KAAAG,GAAA,EACC,IAAIT,GACJ,OAAAd,GACA,QAAAC,GACA,IAAIM,IAAWG,IAAWD,GAC1B,SAAAH,GACA,cAAAM,GACA,aAAY,OAAMP,CAAG,IACrB,SAASG,GACT,UAAUD,GACV,SAAQ,QAEPL,UAAAA;AAAAA,MACCA,KAAAP,gBAAAA,EAAAA,IAAC6B,KACC,gBAAgB,CAAC,CAAC,IAAI,MAAM,CAAC,GAC7B,IAAI;AAAA,QACFC,eAAe;AAAA,QACfC,eAAe;AAAA,QACf,GAAGV;AAAAA,MAAAA,GAEL,OAAOT,IAAWd,IAAcC,GAE/BQ,UACHA,GAAA;AAAA,MAGDC,KACER,gBAAAA,EAAAA,IAAA6B,GAAA,EACC,gBAAgB,CAAC,CAAC,IAAI,WAAW,CAAC,GAClC,IAAI;AAAA,QACFC,eAAe;AAAA,QACfC,eAAe;AAAA,QACf,GAAGT;AAAAA,MAAAA,GAEL,OAAOV,IAAWd,IAAcC,GAE/BS,UACHA,GAAA;AAAA,MAGDC,KACET,gBAAAA,EAAAA,IAAA0B,GAAA,EACC,QAAO,QACP,eAAc,UACd,gBAAe,iBACf,IAAG,QAEFjB,UACHA,EAAA,CAAA;AAAA,MAIDS;AAAAA,IAAAA,GACH;AAAA,IAEAlB,gBAAAA,EAAA;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,QAAQgB,KAAY,CAAC,CAACM;AAAAA,QACtB,aAAaM;AAAAA,QACb,OAAOV;AAAAA,MAAAA;AAAAA,IAAG;AAAA,EAEd,EAAA,CAAA;AAEJ;"}

package/lib/sd-component-library276.js

@@ -1,24 +1,88 @@
-import { j as e } from "./sd-component-library195.js";
-import "./sd-component-library198.js";
-import { Box as n } from "./sd-component-library199.js";
-const x = ({
-  width: s,
-  direction: t,
-  offset: o
+import { j as i } from "./sd-component-library195.js";
+import { useRef as _, useEffect as z } from "react";
+import "./sd-component-library197.js";
+import { Box as s } from "./sd-component-library198.js";
+import { ResponsiveTextV2 as L } from "./sd-component-library147.js";
+const O = ({
+  id: b,
+  label: a,
+  color: g,
+  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: B = 4,
+  scrollOnChange: l = !0
 }) => {
-  const r = "#000000AA", a = "#00000000";
-  return /* @__PURE__ */ e.jsx(n, { sx: {
-    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
-  } });
+  const c = _(null), t = e === n;
+  z(() => {
+    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, T = 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` : T ? `0 ${o}px 0 0` : void 0,
+      bg: "cl_white"
+    } }),
+    /* @__PURE__ */ i.jsx(s, { sx: {
+      borderWidth: p,
+      borderColor: r,
+      borderStyle: t ? "none solid" : "none",
+      boxSizing: "content-box"
+    }, children: /* @__PURE__ */ i.jsx(L, { fontSizeWeight: [v, "bold"], textTransform: "uppercase", color: t ? x : g, sx: {
+      bg: "cl_white",
+      letterSpacing: "1px",
+      px: u
+    }, children: a }) }),
+    /* @__PURE__ */ i.jsx(s, { sx: {
+      height: `${o + B}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 {
-  x as Mask
+  O as TabV2
 };
 //# sourceMappingURL=sd-component-library276.js.map