@selfdecode/sd-component-library 4.0.73-vite22 → 4.0.73-vite23

package/lib/sd-component-library269.js

@@ -1,126 +1,33 @@
-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-library148.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 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"
-            }
-          }
-        )
-      ]
-    }
-  );
-};
+import { j as e } from "./sd-component-library195.js";
+import { FlexCenterSpaceBetween as p } from "./sd-component-library38.js";
+import { ResponsiveTextV2 as t } from "./sd-component-library148.js";
+const h = ({
+  title: i,
+  secondaryText: r,
+  onClick: o,
+  textTransform: n
+}) => /* @__PURE__ */ e.jsxs(
+  p,
+  {
+    width: "100%",
+    p: "12px 16px",
+    onClick: o,
+    bg: "white",
+    sx: { cursor: "pointer" },
+    children: [
+      /* @__PURE__ */ e.jsx(
+        t,
+        {
+          fontSizeWeight: [16, "regular"],
+          textTransform: n,
+          children: i
+        }
+      ),
+      r && /* @__PURE__ */ e.jsx(t, { fontSizeWeight: [14, "regular"], children: r })
+    ]
+  }
+);
 export {
-  O as TabV2
+  h as CustomOptionBox
 };
 //# 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/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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"}
+{"version":3,"file":"sd-component-library269.js","sources":["../src/components/selectors/custom-selector/partials/custom-option-box/custom-option-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { FlexCenterSpaceBetween } from \"../../../../containers\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { CustomOptionBoxProps as Props } from \"./interfaces\";\n\nexport const CustomOptionBox: React.FC<Props> = ({\n  title,\n  secondaryText,\n  onClick,\n  textTransform,\n}) => {\n  return (\n    <FlexCenterSpaceBetween\n      width=\"100%\"\n      p=\"12px 16px\"\n      onClick={onClick}\n      bg=\"white\"\n      sx={{ cursor: \"pointer\" }}\n    >\n      <ResponsiveTextV2\n        fontSizeWeight={[16, \"regular\"]}\n        textTransform={textTransform}\n      >\n        {title}\n      </ResponsiveTextV2>\n\n      {secondaryText && (\n        <ResponsiveTextV2 fontSizeWeight={[14, \"regular\"]}>\n          {secondaryText}\n        </ResponsiveTextV2>\n      )}\n    </FlexCenterSpaceBetween>\n  );\n};\n"],"names":["CustomOptionBox","title","secondaryText","onClick","textTransform","jsxs","FlexCenterSpaceBetween","jsx","ResponsiveTextV2"],"mappings":";;;AAMO,MAAMA,IAAmC,CAAC;AAAA,EAC/C,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AACF,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,GAAE;AAAA,IACF,SAAAH;AAAA,IACA,IAAG;AAAA,IACH,IAAI,EAAE,QAAQ,UAAU;AAAA,IAExB,UAAA;AAAA,MAAAI,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,UAC9B,eAAAJ;AAAA,UAEC,UAAAH;AAAA,QAAA;AAAA,MACH;AAAA,MAECC,2BACEM,GAAiB,EAAA,gBAAgB,CAAC,IAAI,SAAS,GAC7C,UACHN,GAAA;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library27.js

@@ -1,6 +1,6 @@
 import { j as o } from "./sd-component-library195.js";
-import { LogoButton as r } from "./sd-component-library207.js";
-import { ReactComponent as e } from "./sd-component-library208.js";
+import { LogoButton as r } from "./sd-component-library231.js";
+import { ReactComponent as e } from "./sd-component-library232.js";
 const s = (t) => /* @__PURE__ */ o.jsx(
   r,
   {

package/lib/sd-component-library270.js

@@ -1,14 +1,55 @@
-import { j as c } from "./sd-component-library195.js";
-import { useRef as f, useEffect as n } from "react";
-import "./sd-component-library198.js";
-import { Box as p } from "./sd-component-library199.js";
-const x = (s) => {
-  const { hash: e, selectedTab: t, autoScrollTabs: o, scrollTabOnSelect: a, children: l } = s, 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: l });
+import { j as r } from "./sd-component-library195.js";
+import c from "react";
+import "./sd-component-library196.js";
+import { Box as m } from "./sd-component-library197.js";
+import { TriangularPointerIcon as n } from "./sd-component-library190.js";
+import { SecondaryCustomSelectorOptionRow as x } from "./sd-component-library738.js";
+import { HorizontalDivider as i } from "./sd-component-library52.js";
+const g = ({
+  options: t,
+  onSelect: l
+}) => {
+  const s = (o) => () => l(o);
+  return /* @__PURE__ */ r.jsxs(
+    m,
+    {
+      sx: {
+        position: "absolute",
+        right: "-16px",
+        top: "calc(100% - 12px)",
+        minWidth: "calc(100% + 16px)",
+        zIndex: 1
+      },
+      children: [
+        /* @__PURE__ */ r.jsx(n, { direction: "top", mr: "15px", ml: "auto" }),
+        /* @__PURE__ */ r.jsx(i, { height: "2px", color: "cl_purple" }),
+        t.map((o, e) => /* @__PURE__ */ r.jsxs(c.Fragment, { children: [
+          e !== 0 && /* @__PURE__ */ r.jsx(
+            i,
+            {
+              color: "cl_headerLine",
+              sx: {
+                borderStyle: "none solid",
+                borderColor: "cl_lightGrey",
+                borderWidth: "1px"
+              }
+            }
+          ),
+          /* @__PURE__ */ r.jsx(
+            x,
+            {
+              title: o.title,
+              onClick: s(o),
+              isLast: e === t.length - 1
+            },
+            o.id
+          )
+        ] }, o.id))
+      ]
+    }
+  );
 };
 export {
-  x as ScrollableTabWrapper
+  g as SecondaryCustomSelectorOptionsBox
 };
 //# sourceMappingURL=sd-component-library270.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library270.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-library270.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;AAAAA,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;"}

package/lib/sd-component-library271.js

@@ -1,53 +1,126 @@
-import { j as o } from "./sd-component-library195.js";
-import { ThirteenBold as h } from "./sd-component-library152.js";
-import { Button as m } from "./sd-component-library29.js";
-import { MaxMaxContainer as f } from "./sd-component-library44.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 i } from "./sd-component-library195.js";
+import { useRef as _, useEffect as z } from "react";
+import "./sd-component-library196.js";
+import { Box as s } from "./sd-component-library197.js";
+import { ResponsiveTextV2 as L } from "./sd-component-library148.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 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,
     {
-      bg: "transparent",
-      onClick: () => c(t),
-      history: p,
-      "data-test": `tab-${t}`,
-      ...x,
-      children: /* @__PURE__ */ o.jsxs(f, { gap: ["15px", "20px"], children: [
-        /* @__PURE__ */ o.jsx(
-          i,
+      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,
           {
-            style: {
-              height: n,
-              fill: r ? e : "#434A54"
+            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__ */ o.jsx(
-          h,
+        /* @__PURE__ */ i.jsx(
+          s,
           {
-            textTransform: "uppercase",
-            color: r ? e : "#434A54",
-            cursor: "pointer",
-            children: l
+            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 {
-  T as Tab
+  O as TabV2
 };
 //# sourceMappingURL=sd-component-library271.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library271.js","sources":["../src/components/tabs/tabs-menu/partials/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Button, MaxMaxContainer, ThirteenBold } from \"../../../../..\";\nimport { TabProps } from \"./interfaces\";\n\n/**\n * Tab component to render a single tab button.\n */\nexport const Tab: React.FC<TabProps> = (props) => {\n  const {\n    Icon,\n    iconHeight,\n    title,\n    isActive,\n    hash,\n    onTabSelect,\n    enableScroll,\n    activeColor,\n    history,\n  } = props;\n\n  const scrollProps = enableScroll\n    ? {\n        scrollTo: hash,\n      }\n    : {};\n\n  return (\n    <Button\n      bg=\"transparent\"\n      onClick={() => onTabSelect(hash)}\n      history={history}\n      data-test={`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,aAAW,OAAOJ,CAAI;AAAA,MACrB,GAAGK;AAAA,MAEJ,iCAACG,GAAgB,EAAA,KAAK,CAAC,QAAQ,MAAM,GACnC,UAAA;AAAA,QAAAF,gBAAAA,EAAA;AAAA,UAACV;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQC;AAAA,cACR,MAAME,IAAWI,IAAc;AAAA,YACjC;AAAA,UAAA;AAAA,QACF;AAAA,QACAG,gBAAAA,EAAA;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAOV,IAAWI,IAAc;AAAA,YAChC,QAAO;AAAA,YAEN,UAAAL;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library271.js","sources":["../src/components/tabs/tab-bar-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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"}

package/lib/sd-component-library272.js

@@ -1,33 +1,135 @@
-import { j as r } from "./sd-component-library195.js";
-import { ReactComponent as s } from "./sd-component-library192.js";
-import { FlexItemsCenter as i } from "./sd-component-library38.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 { Select as A } from "./sd-component-library212.js";
+import "./sd-component-library196.js";
+import { getNoTranslateClass as d } from "./sd-component-library111.js";
+import { Box as T } from "./sd-component-library197.js";
+import { MaxMaxContainer as Z } from "./sd-component-library44.js";
+import { BaseLabel as q } from "./sd-component-library221.js";
+import { ResponsiveTextV2 as D } from "./sd-component-library148.js";
+const Y = ({
+  variant: r,
+  options: u,
+  width: f,
+  m: g,
+  mt: h,
+  mr: C,
+  mb: j,
+  ml: v,
+  gap: $,
+  selectorLabel: i,
+  secondLabel: e,
+  errorMessage: m,
+  disabledTextValue: n,
+  hideDefaultOnSelect: y,
+  labelMargin: b,
+  selectElementHeight: B,
+  defaultOptionColor: x,
+  textTransform: F,
+  onSelect: N,
+  noOptionsToSelect: a,
+  name: o,
+  selection: l,
+  hasDefaultValue: S,
+  onFocus: _,
+  errorBackground: E,
+  labelContainerAlignItems: M,
+  translateSelect: c = !0,
+  translateDefaultOption: p,
+  containerVariant: V,
+  disabled: z,
+  pl: I
+}) => {
+  const R = !r || !["compact", "tertiary", "secondaryV2", "updatedSecondary"].includes(
+    r
+  ), W = navigator.userAgent.toLowerCase().indexOf("firefox") > -1, k = d(
+    p !== !0 && !c || p === !1
+  ), w = d(!c);
+  return /* @__PURE__ */ t.jsxs(
+    T,
+    {
+      variant: `_containers.selectors.${V || r}`,
+      sx: {
+        width: f,
+        m: g,
+        mt: h,
+        mr: C,
+        mb: j,
+        ml: v,
+        position: "relative",
+        ...R ? {
+          svg: {
+            transform: `translate(-2px,${W ? 0 : 5}px) scale(.78)`,
+            fill: "#4568F8"
+          }
+        } : {},
+        path: {
+          d: "path('M12,8.6L6.72,3.29C6.32,2.9,5.68,2.9,5.29,3.29C4.90,3.69,4.9,4.33,5.29,4.73L11.23,10.7C11.44,10.91,11.72,11.01,12,11C12.27,11.01,12.55,10.91,12.76,10.7L18.7,4.73C19.09,4.33,19.09,3.69,18.7,3.29C18.31,2.9,17.67,2.9,17.27,3.29Z M12,8.6')"
+        },
+        gap: $
+      },
+      "data-testid": "base-selector-v2",
+      children: [
+        i && /* @__PURE__ */ t.jsxs(Z, { gap: "0px", alignItems: M, children: [
+          /* @__PURE__ */ t.jsx(
+            q,
+            {
+              htmlFor: o,
+              variant: `selectors.${r}${m ? "Error" : ""}`,
+              label: i,
+              m: b,
+              "data-test": "selector-label"
+            }
+          ),
+          e && /* @__PURE__ */ t.jsx(
+            D,
+            {
+              letterSpacing: "1px",
+              textTransform: "uppercase",
+              mt: e.mt,
+              ml: e.ml || "3px",
+              color: e.color || "cl_grey",
+              fontSizeWeight: e.fontSizeWeight || [10, "semi-bold"],
+              "data-test": "second-label",
+              children: e.text
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          A,
+          {
+            id: o,
+            name: o,
+            height: B,
+            value: a ? n : l.title.trim(),
+            variant: `_selectors.${r}${m ? "Error" : ""}`,
+            onChange: (s) => N(s.target.value),
+            onFocus: _,
+            backgroundColor: E ? "rgba(255, 0, 0, 0.05)" : "",
+            sx: {
+              textTransform: F,
+              ...x && l.value === null ? { color: x } : {},
+              pl: I
+            },
+            disabled: z || a,
+            children: a ? /* @__PURE__ */ t.jsx("option", { "data-test": "disabled-option", children: n }, "disabledTextValue") : /* @__PURE__ */ t.jsx(t.Fragment, { children: u.slice(
+              // should default option be hidden?
+              S && y && l.value !== null ? 1 : 0
+            ).map((s) => /* @__PURE__ */ t.jsx(
+              "option",
+              {
+                "data-testid": "selector-option",
+                className: s.value === null ? k : w,
+                children: s.title
+              },
+              s.id
+            )) })
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  l as ArrowButton
+  Y as BaseSelectorV2
 };
 //# sourceMappingURL=sd-component-library272.js.map