@selfdecode/sd-component-library 4.0.92 → 4.0.93

package/lib/sd-component-library266.js

@@ -1,13 +1,77 @@
-import { j as c } from "./sd-component-library195.js";
-import { useRef as f, useEffect as n } from "react";
-import { Box as p } from "rebass";
-const m = (l) => {
-  const { hash: e, selectedTab: t, autoScrollTabs: o, scrollTabOnSelect: a, children: s } = l, r = f(null);
-  return n(() => {
-    o && t === e && r.current && a(r);
-  }, [t, e, o, r, a]), /* @__PURE__ */ c.jsx(p, { "data-test": "scrollable-tab-wrapper", ref: r, children: s });
+import { j as o } from "./sd-component-library196.js";
+import { Box as e } from "rebass";
+import { CustomScrollbarBox as p } from "./sd-component-library48.js";
+import { HorizontalDivider as s } from "./sd-component-library49.js";
+import { ResponsiveTextV2 as d } from "./sd-component-library150.js";
+const m = ({
+  options: l,
+  onSelect: t
+}) => {
+  const i = {
+    borderColor: "cl_lightGrey",
+    borderWidth: "1px"
+  }, x = (r) => () => t(r);
+  return /* @__PURE__ */ o.jsxs(
+    e,
+    {
+      sx: {
+        position: "absolute",
+        top: "100%",
+        right: 0,
+        zIndex: 1
+      },
+      children: [
+        /* @__PURE__ */ o.jsx(s, { color: "cl_purple", height: "2px" }),
+        /* @__PURE__ */ o.jsx(
+          e,
+          {
+            sx: {
+              bg: "cl_white",
+              borderRadius: "0 0 3px 3px",
+              ...i,
+              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
+                ))
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  m as ScrollableTabWrapper
+  m as CustomScrollableOptionsBox
 };
 //# sourceMappingURL=sd-component-library266.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library266.js","sources":["../src/components/tabs/tabs-menu/partials/scrollable-tab-wrapper/scrollable-tab-wrapper.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ScrollableTabWrapperProps as Props } from \"./interfaces\";\n\nexport const ScrollableTabWrapper: React.FC<Props> = (props) => {\n  const { hash, selectedTab, autoScrollTabs, scrollTabOnSelect, children } =\n    props;\n\n  const tabRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!autoScrollTabs) return;\n\n    /**\n     * If current tab is the selected one, call the callback to scroll the tab.\n     */\n    if (selectedTab === hash && tabRef.current) {\n      scrollTabOnSelect(tabRef);\n    }\n  }, [selectedTab, hash, autoScrollTabs, tabRef, scrollTabOnSelect]);\n\n  return (\n    <Box data-test=\"scrollable-tab-wrapper\" ref={tabRef}>\n      {children}\n    </Box>\n  );\n};\n"],"names":["ScrollableTabWrapper","props","hash","selectedTab","autoScrollTabs","scrollTabOnSelect","children","tabRef","useRef","useEffect","Box"],"mappings":";;;AAMa,MAAAA,IAAwC,CAACC,MAAU;AAC9D,QAAM,EAAE,MAAAC,GAAM,aAAAC,GAAa,gBAAAC,GAAgB,mBAAAC,GAAmB,UAAAC,EAC5D,IAAAL,GAEIM,IAASC,EAAuB,IAAI;AAE1C,SAAAC,EAAU,MAAM;AACd,IAAKL,KAKDD,MAAgBD,KAAQK,EAAO,WACjCF,EAAkBE,CAAM;AAAA,EAC1B,GACC,CAACJ,GAAaD,GAAME,GAAgBG,GAAQF,CAAiB,CAAC,yBAG9DK,GAAI,EAAA,aAAU,0BAAyB,KAAKH,GAC1C,UAAAD,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library266.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","onClick","option","jsxs","Box","jsx","HorizontalDivider","CustomScrollbarBox","ResponsiveTextV2"],"mappings":";;;;;AAUO,MAAMA,IAA6B,CAA4B;AAAA,EACpE,SAAAC;AAAA,EACA,UAAAC;AACF,MAAgB;AACd,QAAMC,IAAsB;AAAA,IAC1B,aAAa;AAAA,IACb,aAAa;AAAA,EAAA,GAGTC,IAAU,CAACC,MAAgC,MAAMH,EAASG,CAAM;AAGpE,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,EAAA,IAACC,GAAkB,EAAA,OAAM,aAAY,QAAO,OAAM;AAAA,QAElDD,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,IAAI;AAAA,cACJ,cAAc;AAAA,cACd,GAAGJ;AAAA,cACH,aAAa;AAAA,cACb,gBAAgB;AAAA,cAChB,WAAW;AAAA,YACb;AAAA,YAEA,UAAAK,gBAAAA,EAAA;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,QAAO;AAAA,gBACP,OAAM;AAAA,gBACN,qBAAoB;AAAA,gBACpB,qBAAoB;AAAA,gBACpB,gBAAe;AAAA,gBACf,qBAAoB;AAAA,gBACpB,IAAG;AAAA,gBACH,GAAE;AAAA,gBACF,IAAI,EAAE,IAAI,MAAM;AAAA,gBAEf,UAAAT,EAAQ,IAAI,CAACI,MACZG,gBAAAA,EAAA;AAAA,kBAACG;AAAA,kBAAA;AAAA,oBAEC,gBAAgB,CAAC,IAAI,SAAS;AAAA,oBAC9B,IAAI;AAAA,sBACF,SAAS;AAAA,sBACT,YAAY;AAAA,sBACZ,QAAQ;AAAA,sBACR,IAAI;AAAA,sBACJ,aAAa;AAAA,sBACb,aAAa;AAAA,sBACb,mBAAmB;AAAA,oBACrB;AAAA,oBACA,SAASP,EAAQC,CAAM;AAAA,oBAEtB,UAAOA,EAAA;AAAA,kBAAA;AAAA,kBAbHA,EAAO;AAAA,gBAAA,CAef;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library267.js

@@ -1,53 +1,79 @@
-import { j as o } from "./sd-component-library195.js";
-import { ThirteenBold as h } from "./sd-component-library153.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 r } from "./sd-component-library196.js";
+import { createElement as u } from "react";
+import { Box as i } from "rebass";
+import { TriangularPointerIcon as g } from "./sd-component-library190.js";
+import { HorizontalDivider as f } from "./sd-component-library49.js";
+import { OptionRow as w } from "./sd-component-library321.js";
+const k = 8, e = 5, c = k + 2 * e, l = c / 2, n = "cl_header", s = "cl_lightGrey", C = "46px", S = 4, v = (a) => {
+  const { isVisible: d, options: p, value: t, onChange: b } = a;
+  if (!d)
+    return null;
+  const x = (o) => () => b(o), h = [
+    t,
+    ...p.filter(({ id: o }) => o !== t.id)
+  ], m = `${c}px`;
+  return /* @__PURE__ */ r.jsxs(
+    i,
     {
-      bg: "transparent",
-      onClick: () => c(t),
-      history: p,
-      "data-testid": `tab-${t}`,
-      ...x,
-      children: /* @__PURE__ */ o.jsxs(d, { gap: ["15px", "20px"], children: [
-        /* @__PURE__ */ o.jsx(
+      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,
           {
-            style: {
-              height: n,
-              fill: r ? e : "#434A54"
-            }
-          }
-        ),
-        /* @__PURE__ */ o.jsx(
-          h,
-          {
-            textTransform: "uppercase",
-            color: r ? e : "#434A54",
-            cursor: "pointer",
-            children: l
+            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: m,
+                bg: "transparent"
+              },
+              "::-webkit-scrollbar-thumb": {
+                borderRadius: l,
+                bg: s,
+                border: `${e}px solid transparent`,
+                backgroundClip: "content-box"
+              }
+            },
+            children: h.map((o) => /* @__PURE__ */ u(
+              w,
+              {
+                onClick: x(o),
+                ...o,
+                key: o.id,
+                currentSelection: t.id === o.id
+              }
+            ))
           }
         )
-      ] })
+      ]
     }
   );
 };
 export {
-  T as Tab
+  v as CustomScrollableOptionsBox
 };
 //# sourceMappingURL=sd-component-library267.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library267.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-library267.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","id","scrollbarWidthStr","jsxs","Box","jsx","TriangularPointerIcon","HorizontalDivider","createElement","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;AACH,QAAM,EAAE,WAAAC,GAAW,SAAAC,GAAS,OAAAC,GAAO,UAAAC,MAAaJ;AAEhD,MAAI,CAACC;AAAkB,WAAA;AAEvB,QAAMI,IAAW,CAACC,MAAgC,MAAMF,EAASE,CAAM,GACjEC,IAAmB;AAAA,IACvBJ;AAAA,IACA,GAAGD,EAAQ,OAAO,CAAC,EAAE,IAAAM,EAAG,MAAMA,MAAOL,EAAM,EAAE;AAAA,EAAA,GAGzCM,IAAoB,GAAGhB,CAAU;AAGrC,SAAAiB,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,MAACC,KAAsB,WAAU,OAAM,IAAG,QAAO,IAAG,QAAO;AAAA,QAE1DD,gBAAAA,EAAA,IAAAE,GAAA,EAAkB,OAAM,aAAY,QAAO,OAAM;AAAA,QAElDF,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,IAAI;AAAA,cACJ,cAAc;AAAA,cACd,WAAW;AAAA,cACX,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,cACb,gBAAgB;AAAA,cAChB,UAAU;AAAA,cACV,WAAW,QAAQd,CAAS,MAAMC,CAAO;AAAA,cACzC,gBAAgB;AAAA,cAChB,gBAAgB,GAAGH,CAAU,IAAIC,CAAU;AAAA,cAC3C,6BAA6B;AAAA,gBAC3B,cAAAF;AAAA,gBACA,IAAIC;AAAA,gBACJ,QAAQ,GAAGH,CAAM;AAAA,gBACjB,gBAAgB;AAAA,cAClB;AAAA,cACA,uBAAuB;AAAA,gBACrB,OAAOiB;AAAA,gBACP,IAAI;AAAA,cACN;AAAA,cACA,6BAA6B;AAAA,gBAC3B,cAAAf;AAAA,gBACA,IAAIE;AAAA,gBACJ,QAAQ,GAAGJ,CAAM;AAAA,gBACjB,gBAAgB;AAAA,cAClB;AAAA,YACF;AAAA,YAEE,UAAAe,EAA2C,IAAI,CAACD,MAChD,gBAAAS;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,SAASX,EAASC,CAAM;AAAA,gBACvB,GAAGA;AAAA,gBACJ,KAAKA,EAAO;AAAA,gBACZ,kBAAkBH,EAAM,OAAOG,EAAO;AAAA,cAAA;AAAA,YAAA,CAEzC;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library268.js

@@ -1,12 +1,33 @@
-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;
-            }
-        `)), /* @__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)" })));
+import { j as r } from "./sd-component-library196.js";
+import { ReactComponent as s } from "./sd-component-library192.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 {
-  t as ReactComponent
+  l as ArrowButton
 };
 //# sourceMappingURL=sd-component-library268.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library268.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-library268.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-library269.js

@@ -1,54 +1,24 @@
-import { j as i } from "./sd-component-library195.js";
-import d from "react";
-import { FlexCenter as e } from "./sd-component-library35.js";
-import { ResponsiveTextV2 as r } from "./sd-component-library149.js";
-import { HorizontalDivider as m } from "./sd-component-library49.js";
-const g = d.forwardRef(
-  ({ mobileTitle: t, tooltipWidth: o, tooltipText: x, zIndex: h, pointerColor: n }, p) => /* @__PURE__ */ i.jsx(
-    e,
+import { j as e } from "./sd-component-library196.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,
     {
       sx: {
-        position: "fixed",
+        position: "absolute",
         top: 0,
-        left: 0,
-        width: "100vw",
-        height: "100vh",
-        bg: "#262626AA",
-        zIndex: h
-      },
-      ref: p,
-      children: /* @__PURE__ */ i.jsxs(
-        e,
-        {
-          flexDirection: "column",
-          sx: {
-            width: o,
-            maxWidth: "min(500px, calc(100vw - 30px))",
-            bg: "cl_white",
-            p: "20px",
-            borderRadius: "5px"
-          },
-          children: [
-            t && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-              /* @__PURE__ */ i.jsx(r, { maxWidth: "100%", fontSizeWeight: [16, "bold"], children: t }),
-              /* @__PURE__ */ i.jsx(
-                m,
-                {
-                  width: "min(50px, calc(100% - 40px))",
-                  color: n,
-                  height: "2px",
-                  m: "10px 0"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ i.jsx(r, { maxWidth: "100%", fontSizeWeight: [14, "regular"], children: x })
-          ]
-        }
-      )
+        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 {
-  g as TooltipWithPointerMobile
+  g as Mask
 };
 //# sourceMappingURL=sd-component-library269.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library269.js","sources":["../src/components/tooltips/tooltip-with-pointer/partials/tooltip-with-pointer-mobile/tooltip-with-pointer-mobile.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { FlexCenter } from \"../../../../containers\";\nimport { HorizontalDivider } from \"../../../../dividers\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TooltipWithPointerProps } from \"../../interfaces\";\n\ntype Props = Pick<\n  TooltipWithPointerProps,\n  \"mobileTitle\" | \"tooltipText\" | \"tooltipWidth\" | \"zIndex\" | \"pointerColor\"\n>;\n\nexport const TooltipWithPointerMobile = React.forwardRef<HTMLDivElement, Props>(\n  ({ mobileTitle, tooltipWidth, tooltipText, zIndex, pointerColor }, ref) => {\n    return (\n      <FlexCenter\n        sx={{\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          width: \"100vw\",\n          height: \"100vh\",\n          bg: \"#262626AA\",\n          zIndex,\n        }}\n        ref={ref}\n      >\n        <FlexCenter\n          flexDirection=\"column\"\n          sx={{\n            width: tooltipWidth,\n            maxWidth: \"min(500px, calc(100vw - 30px))\",\n            bg: \"cl_white\",\n            p: \"20px\",\n            borderRadius: \"5px\",\n          }}\n        >\n          {mobileTitle && (\n            <>\n              <ResponsiveTextV2 maxWidth=\"100%\" fontSizeWeight={[16, \"bold\"]}>\n                {mobileTitle}\n              </ResponsiveTextV2>\n\n              <HorizontalDivider\n                width=\"min(50px, calc(100% - 40px))\"\n                color={pointerColor}\n                height=\"2px\"\n                m=\"10px 0\"\n              />\n            </>\n          )}\n\n          <ResponsiveTextV2 maxWidth=\"100%\" fontSizeWeight={[14, \"regular\"]}>\n            {tooltipText}\n          </ResponsiveTextV2>\n        </FlexCenter>\n      </FlexCenter>\n    );\n  }\n);\n"],"names":["TooltipWithPointerMobile","React","mobileTitle","tooltipWidth","tooltipText","zIndex","pointerColor","ref","jsx","FlexCenter","jsxs","Fragment","ResponsiveTextV2","HorizontalDivider"],"mappings":";;;;;AAYO,MAAMA,IAA2BC,EAAM;AAAA,EAC5C,CAAC,EAAE,aAAAC,GAAa,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,cAAAC,KAAgBC,MAE/DC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,QAAAJ;AAAA,MACF;AAAA,MACA,KAAAE;AAAA,MAEA,UAAAG,gBAAAA,EAAA;AAAA,QAACD;AAAA,QAAA;AAAA,UACC,eAAc;AAAA,UACd,IAAI;AAAA,YACF,OAAON;AAAA,YACP,UAAU;AAAA,YACV,IAAI;AAAA,YACJ,GAAG;AAAA,YACH,cAAc;AAAA,UAChB;AAAA,UAEC,UAAA;AAAA,YAAAD,KAEGQ,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,cAACH,gBAAAA,EAAAA,IAAAI,GAAA,EAAiB,UAAS,QAAO,gBAAgB,CAAC,IAAI,MAAM,GAC1D,UACHV,EAAA,CAAA;AAAA,cAEAM,gBAAAA,EAAA;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,OAAOP;AAAA,kBACP,QAAO;AAAA,kBACP,GAAE;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA,GACF;AAAA,YAGFE,gBAAAA,EAAAA,IAACI,KAAiB,UAAS,QAAO,gBAAgB,CAAC,IAAI,SAAS,GAC7D,UACHR,EAAA,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"sd-component-library269.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-library27.js

@@ -1,4 +1,4 @@
-import { j as r } from "./sd-component-library195.js";
+import { j as r } from "./sd-component-library196.js";
 import { Button as e } from "./sd-component-library25.js";
 const x = (t) => {
   const { color: o = "cl_blue", children: n } = t;

package/lib/sd-component-library270.js

@@ -1,93 +1,128 @@
-import { j as r } from "./sd-component-library195.js";
-import u from "react";
-import { Flex as j, Box as s } from "rebass";
-import { TriangularPointerIcon as x } from "./sd-component-library189.js";
-import { ResponsiveTextV2 as R } from "./sd-component-library149.js";
-const $ = u.forwardRef(
-  ({
-    pointerSx: n,
-    tooltipSx: d,
-    tooltipText: p,
-    tooltipWidth: l,
-    tooltipPy: a,
-    tooltipPx: h,
-    pointerSize: c,
-    tooltipOffset: i,
-    placement: t,
-    containerSx: y,
-    animationDuration: g,
-    state: m,
-    pointerColor: o
-  }, f) => {
-    const b = t === "right" ? {
-      left: "100%"
-    } : {
-      right: "100%"
-    }, e = {
-      size: `${c}px`,
-      color: o,
-      sx: {
-        my: "auto",
-        ...n
-      }
-    };
-    return /* @__PURE__ */ r.jsxs(
-      j,
-      {
-        sx: {
-          position: "absolute",
-          top: "calc(50% - 14px)",
-          cursor: "default",
-          alignItems: "center",
-          opacity: m === "entered" ? 1 : 0,
-          transition: `opacity ${g}ms`,
-          zIndex: 1,
-          ...b,
-          ...d
-        },
-        ref: f,
-        "data-test": "tooltip-content",
-        children: [
-          t === "right" && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-            /* @__PURE__ */ r.jsx(s, { width: `${i}px` }),
-            /* @__PURE__ */ r.jsx(x, { direction: "left", ...e })
-          ] }),
-          /* @__PURE__ */ r.jsx(
-            R,
-            {
-              fontSizeWeight: [14, "regular"],
-              sx: {
-                width: l,
-                lineHeight: "16px",
-                bg: "cl_white",
-                px: h,
-                py: a,
-                borderColor: "cl_lightGrey",
-                borderWidth: "1px",
-                borderStyle: "solid",
-                ...t === "left" ? {
-                  borderRightWidth: "2px",
-                  borderRightColor: o,
-                  borderRadius: "3px 0 0 3px"
-                } : {
-                  borderLeftWidth: "2px",
-                  borderLeftColor: o,
-                  borderRadius: "0 3px 3px 0"
-                }
-              },
-              children: p
-            }
-          ),
-          t === "left" && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-            /* @__PURE__ */ r.jsx(x, { direction: "right", ...e }),
-            /* @__PURE__ */ r.jsx(s, { width: `${i}px` })
-          ] })
-        ]
-      }
-    );
+import { j as t } from "./sd-component-library196.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-library150.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,
+    {
+      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 {
-  $ as TooltipWithPointerHorizontal
+  z as Ribbon,
+  E as Tab
 };
 //# sourceMappingURL=sd-component-library270.js.map