@selfdecode/sd-component-library 4.0.73-vite12 → 4.0.73-vite13

package/lib/sd-component-library277.js

@@ -1,24 +1,77 @@
-import { jsx as n } from "./sd-component-library196.js";
-import "./sd-component-library197.js";
-import { Box as p } from "./sd-component-library198.js";
-const l = ({
-  width: e,
-  direction: o,
-  offset: t
-}) => {
-  const r = "#000000AA", a = "#00000000";
-  return /* @__PURE__ */ n(p, { sx: {
+import { jsxs as i, Fragment as n, jsx as r } from "./sd-component-library195.js";
+import y from "react";
+import "./sd-component-library198.js";
+import { Box as p, Flex as _ } from "./sd-component-library199.js";
+import { TriangularPointerIcon as x } from "./sd-component-library189.js";
+import { ResponsiveTextV2 as w } from "./sd-component-library147.js";
+const S = y.forwardRef(({
+  pointerSx: l,
+  tooltipSx: s,
+  tooltipText: a,
+  tooltipWidth: h,
+  tooltipPy: c,
+  tooltipPx: f,
+  pointerSize: g,
+  tooltipOffset: e,
+  placement: t,
+  containerSx: W,
+  animationDuration: m,
+  state: b,
+  pointerColor: o
+}, u) => {
+  const R = t === "right" ? {
+    left: "100%"
+  } : {
+    right: "100%"
+  }, d = {
+    size: `${g}px`,
+    color: o,
+    sx: {
+      my: "auto",
+      ...l
+    }
+  };
+  return /* @__PURE__ */ i(_, { sx: {
     position: "absolute",
-    top: 0,
-    left: o === "left" ? t : void 0,
-    right: o === "right" ? t : void 0,
-    height: "100%",
-    width: e,
-    background: `transparent linear-gradient(-90deg, ${o === "left" ? a : r} 0%, ${o === "right" ? a : r} 100%) 0% 0% no-repeat padding-box`,
-    opacity: 0.05
-  } });
-};
+    top: "calc(50% - 14px)",
+    cursor: "default",
+    alignItems: "center",
+    opacity: b === "entered" ? 1 : 0,
+    transition: `opacity ${m}ms`,
+    zIndex: 1,
+    ...R,
+    ...s
+  }, ref: u, "data-test": "tooltip-content", children: [
+    t === "right" && /* @__PURE__ */ i(n, { children: [
+      /* @__PURE__ */ r(p, { width: `${e}px` }),
+      /* @__PURE__ */ r(x, { direction: "left", ...d })
+    ] }),
+    /* @__PURE__ */ r(w, { fontSizeWeight: [14, "regular"], sx: {
+      width: h,
+      lineHeight: "16px",
+      bg: "cl_white",
+      px: f,
+      py: c,
+      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: a }),
+    t === "left" && /* @__PURE__ */ i(n, { children: [
+      /* @__PURE__ */ r(x, { direction: "right", ...d }),
+      /* @__PURE__ */ r(p, { width: `${e}px` })
+    ] })
+  ] });
+});
 export {
-  l as Mask
+  S as TooltipWithPointerHorizontal
 };
 //# sourceMappingURL=sd-component-library277.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library277.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,SAAA,gBAAAC,EAACC,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;"}
+{"version":3,"file":"sd-component-library277.js","sources":["../src/components/tooltips/tooltip-with-pointer/partials/tooltip-with-pointer-horizontal/tooltip-with-pointer-horizontal.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TooltipWithPointerPartialProps as Props } from \"../interfaces\";\n\nexport const TooltipWithPointerHorizontal = React.forwardRef<\n  HTMLDivElement,\n  Props\n>(\n  (\n    {\n      pointerSx,\n      tooltipSx,\n      tooltipText,\n      tooltipWidth,\n      tooltipPy,\n      tooltipPx,\n      pointerSize,\n      tooltipOffset,\n      placement,\n      containerSx,\n      animationDuration,\n      state,\n      pointerColor,\n    },\n    ref\n  ) => {\n    const tooltipContainerProps =\n      placement === \"right\"\n        ? {\n            left: \"100%\",\n          }\n        : {\n            right: \"100%\",\n          };\n\n    const pointerCommonProps = {\n      size: `${pointerSize}px`,\n      color: pointerColor,\n      sx: {\n        my: \"auto\",\n        ...pointerSx,\n      },\n    };\n\n    return (\n      <Flex\n        sx={{\n          position: \"absolute\",\n          top: \"calc(50% - 14px)\",\n          cursor: \"default\",\n          alignItems: \"center\",\n          opacity: state === \"entered\" ? 1 : 0,\n          transition: `opacity ${animationDuration}ms`,\n          zIndex: 1,\n          ...tooltipContainerProps,\n          ...tooltipSx,\n        }}\n        ref={ref}\n        data-test=\"tooltip-content\"\n      >\n        {placement === \"right\" && (\n          <>\n            <Box width={`${tooltipOffset}px`} />\n            <TriangularPointerIcon direction=\"left\" {...pointerCommonProps} />\n          </>\n        )}\n\n        <ResponsiveTextV2\n          fontSizeWeight={[14, \"regular\"]}\n          sx={{\n            width: tooltipWidth,\n            lineHeight: \"16px\",\n            bg: \"cl_white\",\n            px: tooltipPx,\n            py: tooltipPy,\n            borderColor: \"cl_lightGrey\",\n            borderWidth: \"1px\",\n            borderStyle: \"solid\",\n            ...(placement === \"left\"\n              ? {\n                  borderRightWidth: \"2px\",\n                  borderRightColor: pointerColor,\n                  borderRadius: \"3px 0 0 3px\",\n                }\n              : {\n                  borderLeftWidth: \"2px\",\n                  borderLeftColor: pointerColor,\n                  borderRadius: \"0 3px 3px 0\",\n                }),\n          }}\n        >\n          {tooltipText}\n        </ResponsiveTextV2>\n\n        {placement === \"left\" && (\n          <>\n            <TriangularPointerIcon direction=\"right\" {...pointerCommonProps} />\n            <Box width={`${tooltipOffset}px`} />\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n"],"names":["TooltipWithPointerHorizontal","React","forwardRef","pointerSx","tooltipSx","tooltipText","tooltipWidth","tooltipPy","tooltipPx","pointerSize","tooltipOffset","placement","containerSx","animationDuration","state","pointerColor","ref","tooltipContainerProps","left","right","pointerCommonProps","size","color","sx","my","jsxs","Flex","position","top","cursor","alignItems","opacity","transition","zIndex","Fragment","jsx","Box","TriangularPointerIcon","ResponsiveTextV2","width","lineHeight","bg","px","py","borderColor","borderWidth","borderStyle","borderRightWidth","borderRightColor","borderRadius","borderLeftWidth","borderLeftColor"],"mappings":";;;;;;AAQaA,MAAAA,IAA+BC,EAAMC,WAIhD,CACE;AAAA,EACEC,WAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,mBAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AACF,GACAC,MACG;AACGC,QAAAA,IACJN,MAAc,UACV;AAAA,IACEO,MAAM;AAAA,EAAA,IAER;AAAA,IACEC,OAAO;AAAA,EAAA,GAGTC,IAAqB;AAAA,IACzBC,MAAO,GAAEZ,CAAY;AAAA,IACrBa,OAAOP;AAAAA,IACPQ,IAAI;AAAA,MACFC,IAAI;AAAA,MACJ,GAAGrB;AAAAA,IACL;AAAA,EAAA;AAIA,SAAA,gBAAAsB,EAACC,KACC,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,SAASjB,MAAU,YAAY,IAAI;AAAA,IACnCkB,YAAa,WAAUnB,CAAkB;AAAA,IACzCoB,QAAQ;AAAA,IACR,GAAGhB;AAAAA,IACH,GAAGb;AAAAA,EACL,GACA,KAAAY,GACA,aAAU,mBAETL,UAAAA;AAAAA,IAAAA,MAAc,WAEX,gBAAAc,EAAAS,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAI,EAAA,OAAQ,GAAE1B,CAAc,MAAI;AAAA,MAChC,gBAAAyB,EAAAE,GAAA,EAAsB,WAAU,QAAWjB,GAAAA,EAAmB,CAAA;AAAA,IAAA,GACjE;AAAA,sBAGDkB,GACC,EAAA,gBAAgB,CAAC,IAAI,SAAS,GAC9B,IAAI;AAAA,MACFC,OAAOjC;AAAAA,MACPkC,YAAY;AAAA,MACZC,IAAI;AAAA,MACJC,IAAIlC;AAAAA,MACJmC,IAAIpC;AAAAA,MACJqC,aAAa;AAAA,MACbC,aAAa;AAAA,MACbC,aAAa;AAAA,MACb,GAAInC,MAAc,SACd;AAAA,QACEoC,kBAAkB;AAAA,QAClBC,kBAAkBjC;AAAAA,QAClBkC,cAAc;AAAA,MAAA,IAEhB;AAAA,QACEC,iBAAiB;AAAA,QACjBC,iBAAiBpC;AAAAA,QACjBkC,cAAc;AAAA,MAChB;AAAA,IAAA,GAGL5C,UACHA,GAAA;AAAA,IAECM,MAAc,UAEX,gBAAAc,EAAAS,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAC,EAACE,GAAsB,EAAA,WAAU,SAAYjB,GAAAA,EAAmB,CAAA;AAAA,MAC/D,gBAAAe,EAAAC,GAAA,EAAI,OAAQ,GAAE1B,CAAc,MAAI;AAAA,IAAA,GACnC;AAAA,EAEJ,EAAA,CAAA;AAEJ,CACF;"}

package/lib/sd-component-library278.js

@@ -1,88 +1,78 @@
-import { jsxs as L, jsx as i } from "./sd-component-library196.js";
-import { r as a } from "./sd-component-library193.js";
-import "./sd-component-library197.js";
-import { Box as r } from "./sd-component-library198.js";
-import { ResponsiveTextV2 as V } from "./sd-component-library147.js";
-const R = ({
-  id: b,
-  label: g,
-  color: S,
-  activeColor: l,
-  borderColor: s,
-  borderWidth: p,
-  borderRadius: o,
-  selectedIndex: e,
-  idx: n,
-  onSelect: $,
-  dashWidth: v = 20,
-  dashHeight: y = 3,
-  px: u,
-  fontSize: w,
-  totalTabs: B,
-  topAdditionalOffset: T = 8,
-  bottomAdditionalOffset: _ = 4,
-  scrollOnChange: x = !0
-}) => {
-  const c = a.useRef(null), t = e === n;
-  a.useEffect(() => {
-    var h;
-    t && x && ((h = c.current) == null || h.scrollIntoView({
-      behavior: "smooth",
-      inline: "center",
-      block: "end"
-    }));
-  }, [t, x]);
-  const f = e === n + 1, m = e !== -1 && e === n - 1, z = n === B - 1;
-  return /* @__PURE__ */ L(r, { onClick: () => $(b), sx: {
-    cursor: "pointer",
-    position: "relative",
-    left: `-${n > e ? 2 : n == e ? 1 : 0}px`,
-    zIndex: t ? 1 : 0
-  }, ref: c, children: [
-    /* @__PURE__ */ i(r, { sx: {
-      height: `${o + T}px`,
-      borderWidth: p,
-      borderColor: s,
-      borderStyle: t ? "solid" : "none",
-      borderBottomStyle: "none",
-      borderRadius: t ? `${o}px ${o}px 0 0` : z ? `0 ${o}px 0 0` : void 0,
-      bg: "cl_white"
-    } }),
-    /* @__PURE__ */ i(r, { sx: {
-      borderWidth: p,
-      borderColor: s,
-      borderStyle: t ? "none solid" : "none",
-      boxSizing: "content-box"
-    }, children: /* @__PURE__ */ i(V, { fontSizeWeight: [w, "bold"], textTransform: "uppercase", color: t ? l : S, sx: {
+import { jsxs as e, Fragment as p, jsx as o } from "./sd-component-library195.js";
+import _ from "react";
+import "./sd-component-library198.js";
+import { Box as d, Flex as R } from "./sd-component-library199.js";
+import { TriangularPointerIcon as s } from "./sd-component-library189.js";
+import { ResponsiveTextV2 as T } from "./sd-component-library147.js";
+const F = _.forwardRef(({
+  pointerSx: x,
+  tooltipPx: l,
+  tooltipText: a,
+  tooltipSx: m,
+  tooltipPy: c,
+  tooltipOffset: i,
+  pointerSize: h,
+  tooltipWidth: b,
+  placement: t,
+  state: f,
+  containerSx: W,
+  animationDuration: u,
+  pointerColor: r
+}, g) => {
+  const y = t === "bottom" ? {
+    top: "100%"
+  } : {
+    bottom: "100%"
+  }, n = {
+    size: `${h}px`,
+    color: r,
+    sx: {
+      my: "auto",
+      ...x
+    }
+  };
+  return /* @__PURE__ */ e(R, { flexDirection: "column", sx: {
+    position: "absolute",
+    left: "50%",
+    transform: "translateX(-50%)",
+    cursor: "default",
+    alignItems: "center",
+    opacity: f === "entered" ? 1 : 0,
+    transition: `opacity ${u}ms`,
+    zIndex: 1,
+    ...y,
+    ...m
+  }, ref: g, "data-test": "tooltip-content", children: [
+    t === "bottom" && /* @__PURE__ */ e(p, { children: [
+      /* @__PURE__ */ o(d, { height: `${i}px` }),
+      /* @__PURE__ */ o(s, { direction: "top", ...n })
+    ] }),
+    /* @__PURE__ */ o(T, { fontSizeWeight: [14, "regular"], sx: {
+      width: b,
+      lineHeight: "16px",
       bg: "cl_white",
-      letterSpacing: "1px",
-      px: u
-    }, children: g }) }),
-    /* @__PURE__ */ i(r, { sx: {
-      height: `${o + _}px`,
-      borderWidth: p,
-      borderColor: s,
-      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(r, { sx: {
-      bg: l,
-      height: `${y}px`,
-      width: `${v}px`,
-      position: "absolute",
-      left: "50%",
-      bottom: 0,
-      transform: "translateX(-50%)",
-      borderRadius: "1px"
-    } })
+      px: l,
+      py: c,
+      borderColor: "cl_lightGrey",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      ...t === "top" ? {
+        borderBottomWidth: "2px",
+        borderBottomColor: r,
+        borderRadius: "3px 3px 0 0"
+      } : {
+        borderTopWidth: "2px",
+        borderTopColor: r,
+        borderRadius: "0 0 3px 3px"
+      }
+    }, children: a }),
+    t === "top" && /* @__PURE__ */ e(p, { children: [
+      /* @__PURE__ */ o(s, { direction: "bottom", ...n }),
+      /* @__PURE__ */ o(d, { height: `${i}px` })
+    ] })
   ] });
-};
+});
 export {
-  R as TabV2
+  F as TooltipWithPointerVertical
 };
 //# sourceMappingURL=sd-component-library278.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library278.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-library278.js","sources":["../src/components/tooltips/tooltip-with-pointer/partials/tooltip-with-pointer-vertical/tooltip-with-pointer-vertical.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TooltipWithPointerPartialProps as Props } from \"../interfaces\";\n\nexport const TooltipWithPointerVertical = React.forwardRef<\n  HTMLDivElement,\n  Props\n>(\n  (\n    {\n      pointerSx,\n      tooltipPx,\n      tooltipText,\n      tooltipSx,\n      tooltipPy,\n      tooltipOffset,\n      pointerSize,\n      tooltipWidth,\n      placement,\n      state,\n      containerSx,\n      animationDuration,\n      pointerColor,\n    },\n    ref\n  ) => {\n    const tooltipContainerProps =\n      placement === \"bottom\"\n        ? {\n            top: \"100%\",\n          }\n        : {\n            bottom: \"100%\",\n          };\n\n    const pointerCommonProps = {\n      size: `${pointerSize}px`,\n      color: pointerColor,\n      sx: {\n        my: \"auto\",\n        ...pointerSx,\n      },\n    };\n\n    return (\n      <Flex\n        flexDirection=\"column\"\n        sx={{\n          position: \"absolute\",\n          left: \"50%\",\n          transform: \"translateX(-50%)\",\n          cursor: \"default\",\n          alignItems: \"center\",\n          opacity: state === \"entered\" ? 1 : 0,\n          transition: `opacity ${animationDuration}ms`,\n          zIndex: 1,\n          ...tooltipContainerProps,\n          ...tooltipSx,\n        }}\n        ref={ref}\n        data-test=\"tooltip-content\"\n      >\n        {placement === \"bottom\" && (\n          <>\n            <Box height={`${tooltipOffset}px`} />\n            <TriangularPointerIcon direction=\"top\" {...pointerCommonProps} />\n          </>\n        )}\n\n        <ResponsiveTextV2\n          fontSizeWeight={[14, \"regular\"]}\n          sx={{\n            width: tooltipWidth,\n            lineHeight: \"16px\",\n            bg: \"cl_white\",\n            px: tooltipPx,\n            py: tooltipPy,\n            borderColor: \"cl_lightGrey\",\n            borderWidth: \"1px\",\n            borderStyle: \"solid\",\n            ...(placement === \"top\"\n              ? {\n                  borderBottomWidth: \"2px\",\n                  borderBottomColor: pointerColor,\n                  borderRadius: \"3px 3px 0 0\",\n                }\n              : {\n                  borderTopWidth: \"2px\",\n                  borderTopColor: pointerColor,\n                  borderRadius: \"0 0 3px 3px\",\n                }),\n          }}\n        >\n          {tooltipText}\n        </ResponsiveTextV2>\n\n        {placement === \"top\" && (\n          <>\n            <TriangularPointerIcon direction=\"bottom\" {...pointerCommonProps} />\n            <Box height={`${tooltipOffset}px`} />\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n"],"names":["TooltipWithPointerVertical","React","forwardRef","pointerSx","tooltipPx","tooltipText","tooltipSx","tooltipPy","tooltipOffset","pointerSize","tooltipWidth","placement","state","containerSx","animationDuration","pointerColor","ref","tooltipContainerProps","top","bottom","pointerCommonProps","size","color","sx","my","jsxs","Flex","position","left","transform","cursor","alignItems","opacity","transition","zIndex","Fragment","jsx","Box","TriangularPointerIcon","ResponsiveTextV2","width","lineHeight","bg","px","py","borderColor","borderWidth","borderStyle","borderBottomWidth","borderBottomColor","borderRadius","borderTopWidth","borderTopColor"],"mappings":";;;;;;AAQaA,MAAAA,IAA6BC,EAAMC,WAI9C,CACE;AAAA,EACEC,WAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,mBAAAA;AAAAA,EACAC,cAAAA;AACF,GACAC,MACG;AACGC,QAAAA,IACJN,MAAc,WACV;AAAA,IACEO,KAAK;AAAA,EAAA,IAEP;AAAA,IACEC,QAAQ;AAAA,EAAA,GAGVC,IAAqB;AAAA,IACzBC,MAAO,GAAEZ,CAAY;AAAA,IACrBa,OAAOP;AAAAA,IACPQ,IAAI;AAAA,MACFC,IAAI;AAAA,MACJ,GAAGrB;AAAAA,IACL;AAAA,EAAA;AAGF,SACG,gBAAAsB,EAAAC,GAAA,EACC,eAAc,UACd,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,SAASpB,MAAU,YAAY,IAAI;AAAA,IACnCqB,YAAa,WAAUnB,CAAkB;AAAA,IACzCoB,QAAQ;AAAA,IACR,GAAGjB;AAAAA,IACH,GAAGX;AAAAA,EACL,GACA,KAAAU,GACA,aAAU,mBAETL,UAAAA;AAAAA,IAAAA,MAAc,YAEX,gBAAAc,EAAAU,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAI,EAAA,QAAS,GAAE7B,CAAc,MAAI;AAAA,MACjC,gBAAA4B,EAAAE,GAAA,EAAsB,WAAU,OAAUlB,GAAAA,EAAmB,CAAA;AAAA,IAAA,GAChE;AAAA,sBAGDmB,GACC,EAAA,gBAAgB,CAAC,IAAI,SAAS,GAC9B,IAAI;AAAA,MACFC,OAAO9B;AAAAA,MACP+B,YAAY;AAAA,MACZC,IAAI;AAAA,MACJC,IAAIvC;AAAAA,MACJwC,IAAIrC;AAAAA,MACJsC,aAAa;AAAA,MACbC,aAAa;AAAA,MACbC,aAAa;AAAA,MACb,GAAIpC,MAAc,QACd;AAAA,QACEqC,mBAAmB;AAAA,QACnBC,mBAAmBlC;AAAAA,QACnBmC,cAAc;AAAA,MAAA,IAEhB;AAAA,QACEC,gBAAgB;AAAA,QAChBC,gBAAgBrC;AAAAA,QAChBmC,cAAc;AAAA,MAChB;AAAA,IAAA,GAGL7C,UACHA,GAAA;AAAA,IAECM,MAAc,SAEX,gBAAAc,EAAAU,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAC,EAACE,GAAsB,EAAA,WAAU,UAAalB,GAAAA,EAAmB,CAAA;AAAA,MAChE,gBAAAgB,EAAAC,GAAA,EAAI,QAAS,GAAE7B,CAAc,MAAI;AAAA,IAAA,GACpC;AAAA,EAEJ,EAAA,CAAA;AAEJ,CACF;"}

package/lib/sd-component-library279.js

@@ -1,20 +1,18 @@
-import { jsx as f } from "./sd-component-library196.js";
-import { r as l } from "./sd-component-library193.js";
-import "./sd-component-library197.js";
-import { Box as p } from "./sd-component-library198.js";
-const u = (s) => {
-  const {
-    hash: e,
-    selectedTab: t,
-    autoScrollTabs: o,
-    scrollTabOnSelect: a,
-    children: c
-  } = s, r = l.useRef(null);
-  return l.useEffect(() => {
-    o && t === e && r.current && a(r);
-  }, [t, e, o, r, a]), /* @__PURE__ */ f(p, { "data-test": "scrollable-tab-wrapper", ref: r, children: c });
-};
+import { jsxs as p, jsx as r } from "./sd-component-library195.js";
+import { FlexCenterSpaceBetween as s } from "./sd-component-library37.js";
+import { ResponsiveTextV2 as t } from "./sd-component-library147.js";
+const l = ({
+  title: i,
+  secondaryText: e,
+  onClick: o,
+  textTransform: n
+}) => /* @__PURE__ */ p(s, { width: "100%", p: "12px 16px", onClick: o, bg: "white", sx: {
+  cursor: "pointer"
+}, children: [
+  /* @__PURE__ */ r(t, { fontSizeWeight: [16, "regular"], textTransform: n, children: i }),
+  e && /* @__PURE__ */ r(t, { fontSizeWeight: [14, "regular"], children: e })
+] });
 export {
-  u as ScrollableTabWrapper
+  l as CustomOptionBox
 };
 //# sourceMappingURL=sd-component-library279.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library279.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","current","Box"],"mappings":";;;;AAMO,MAAMA,IAAyCC,CAAUA,MAAA;AACxD,QAAA;AAAA,IAAEC,MAAAA;AAAAA,IAAMC,aAAAA;AAAAA,IAAaC,gBAAAA;AAAAA,IAAgBC,mBAAAA;AAAAA,IAAmBC,UAAAA;AAAAA,EAC5DL,IAAAA,GAEIM,IAASC,SAAuB,IAAI;AAE1CC,SAAAA,EAAAA,UAAU,MAAM;AACd,IAAKL,KAKDD,MAAgBD,KAAQK,EAAOG,WACjCL,EAAkBE,CAAM;AAAA,EAC1B,GACC,CAACJ,GAAaD,GAAME,GAAgBG,GAAQF,CAAiB,CAAC,qBAG9DM,GAAI,EAAA,aAAU,0BAAyB,KAAKJ,GAC1CD,UAAAA,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library279.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","cursor","jsx","ResponsiveTextV2"],"mappings":";;;AAMO,MAAMA,IAAmCA,CAAC;AAAA,EAC/CC,OAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,eAAAA;AACF,MAEI,gBAAAC,EAACC,KACC,OAAM,QACN,GAAE,aACF,SAAAH,GACA,IAAG,SACH,IAAI;AAAA,EAAEI,QAAQ;AAEd,GAAA,UAAA;AAAA,EAAA,gBAAAC,EAACC,KACC,gBAAgB,CAAC,IAAI,SAAS,GAC9B,eAAAL,GAECH,UACHA,GAAA;AAAA,EAECC,uBACEO,GAAiB,EAAA,gBAAgB,CAAC,IAAI,SAAS,GAC7CP,UACHA,GAAA;AAEJ,EAAA,CAAA;"}

package/lib/sd-component-library28.js

@@ -1,8 +1,8 @@
-import { jsx as r, Fragment as O } from "./sd-component-library196.js";
-import { Link as Q } from "./sd-component-library217.js";
-import { Button as T } from "./sd-component-library197.js";
-import { Flex as U } from "./sd-component-library198.js";
-import { LoadingSpinner as V } from "./sd-component-library218.js";
+import { jsx as r, Fragment as O } from "./sd-component-library195.js";
+import { Link as Q } from "react-router-dom";
+import { Button as T } from "./sd-component-library198.js";
+import { Flex as U } from "./sd-component-library199.js";
+import { LoadingSpinner as V } from "./sd-component-library212.js";
 function X(o, t, e) {
   return (n) => {
     o == null || o(n), t && (`#${t}` !== window.location.hash && (e != null && e.replace(`${window.location.pathname.split("#")[0]}#${t}`) || window.history.replaceState(void 0, "", `${window.location.pathname.split("#")[0]}#${t}`)), window.dispatchEvent(new HashChangeEvent("hashchange")));

package/lib/sd-component-library280.js

@@ -1,30 +1,35 @@
-import { jsx as r, jsxs as m } from "./sd-component-library196.js";
-import { ThirteenBold as x } from "./sd-component-library151.js";
-import { MaxMaxContainer as f } from "./sd-component-library43.js";
-import { Button as b } from "./sd-component-library28.js";
-const A = (i) => {
-  const {
-    Icon: n,
-    iconHeight: l,
-    title: c,
-    isActive: t,
-    hash: o,
-    onTabSelect: s,
-    enableScroll: a,
-    activeColor: e,
-    history: p
-  } = i, h = a ? {
-    scrollTo: o
-  } : {};
-  return /* @__PURE__ */ r(b, { bg: "transparent", onClick: () => s(o), history: p, "data-test": `tab-${o}`, ...h, children: /* @__PURE__ */ m(f, { gap: ["15px", "20px"], children: [
-    /* @__PURE__ */ r(n, { style: {
-      height: l,
-      fill: t ? e : "#434A54"
-    } }),
-    /* @__PURE__ */ r(x, { textTransform: "uppercase", color: t ? e : "#434A54", cursor: "pointer", children: c })
-  ] }) });
+import { jsxs as i, jsx as r } from "./sd-component-library195.js";
+import n from "react";
+import "./sd-component-library198.js";
+import { TriangularPointerIcon as p } from "./sd-component-library189.js";
+import { SecondaryCustomSelectorOptionRow as a } from "./sd-component-library731.js";
+import { Box as d } from "./sd-component-library199.js";
+import { HorizontalDivider as l } from "./sd-component-library51.js";
+const C = ({
+  options: t,
+  onSelect: c
+}) => {
+  const m = (o) => () => c(o);
+  return /* @__PURE__ */ i(d, { sx: {
+    position: "absolute",
+    right: "-16px",
+    top: "calc(100% - 12px)",
+    minWidth: "calc(100% + 16px)",
+    zIndex: 1
+  }, children: [
+    /* @__PURE__ */ r(p, { direction: "top", mr: "15px", ml: "auto" }),
+    /* @__PURE__ */ r(l, { height: "2px", color: "cl_purple" }),
+    t.map((o, e) => /* @__PURE__ */ i(n.Fragment, { children: [
+      e !== 0 && /* @__PURE__ */ r(l, { color: "cl_headerLine", sx: {
+        borderStyle: "none solid",
+        borderColor: "cl_lightGrey",
+        borderWidth: "1px"
+      } }),
+      /* @__PURE__ */ r(a, { title: o.title, onClick: m(o), isLast: e === t.length - 1 }, o.id)
+    ] }, o.id))
+  ] });
 };
 export {
-  A as Tab
+  C as SecondaryCustomSelectorOptionsBox
 };
 //# sourceMappingURL=sd-component-library280.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library280.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","scrollTo","jsx","Button","jsxs","MaxMaxContainer","height","fill","ThirteenBold"],"mappings":";;;;AAQO,MAAMA,IAA2BC,CAAUA,MAAA;AAC1C,QAAA;AAAA,IACJC,MAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,SAAAA;AAAAA,EACET,IAAAA,GAEEU,IAAcH,IAChB;AAAA,IACEI,UAAUN;AAAAA,MAEZ;AAGF,SAAA,gBAAAO,EAACC,KACC,IAAG,eACH,SAAS,MAAMP,EAAYD,CAAI,GAC/B,SAAAI,GACA,aAAY,OAAMJ,CAAK,IACvB,GAAIK,GAEJ,UAAA,gBAAAI,EAACC,KAAgB,KAAK,CAAC,QAAQ,MAAM,GACnC,UAAA;AAAA,IAAA,gBAAAH,EAACX,KACC,OAAO;AAAA,MACLe,QAAQd;AAAAA,MACRe,MAAMb,IAAWI,IAAc;AAAA,IAAA,GAC/B;AAAA,IAEJ,gBAAAI,EAACM,GACC,EAAA,eAAc,aACd,OAAOd,IAAWI,IAAc,WAChC,QAAO,WAENL,UACHA,EAAA,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library280.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","position","right","top","minWidth","zIndex","jsx","TriangularPointerIcon","HorizontalDivider","map","idx","React","borderStyle","borderColor","borderWidth","SecondaryCustomSelectorOptionRow","title","length","id"],"mappings":";;;;;;;AAUO,MAAMA,IAAoC,CAA4B;AAAA,EAC3EC,SAAAA;AAAAA,EACAC,UAAAA;AACQ,MAAM;AACd,QAAMC,IAAUA,CAACC,MAAgC,MAAMF,EAASE,CAAM;AAGpE,SAAA,gBAAAC,EAACC,KACC,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,KAAK;AAAA,IACLC,UAAU;AAAA,IACVC,QAAQ;AAAA,EAGV,GAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAsB,WAAU,OAAM,IAAG,QAAO,IAAG,QAAM;AAAA,IAEzD,gBAAAD,EAAAE,GAAA,EAAkB,QAAO,OAAM,OAAM,aAAW;AAAA,IAEhDb,EAAQc,IAAI,CAACX,GAAQY,MACnB,gBAAAX,EAAAY,EAAM,UAAN,EACED,UAAAA;AAAAA,MAAAA,MAAQ,KACP,gBAAAJ,EAACE,GACC,EAAA,OAAM,iBACN,IAAI;AAAA,QACFI,aAAa;AAAA,QACbC,aAAa;AAAA,QACbC,aAAa;AAAA,MAAA,GAGlB;AAAA,MAEA,gBAAAR,EAAAS,GAAA,EAEC,OAAOjB,EAAOkB,OACd,SAASnB,EAAQC,CAAM,GACvB,QAAQY,MAAQf,EAAQsB,SAAS,EAAA,GAH5BnB,EAAOoB,EAGuB;AAAA,IAAA,KAhBlBpB,EAAOoB,EAkB5B,CACD;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/lib/sd-component-library281.js

@@ -1,18 +1,81 @@
-import { jsxs as p, jsx as r } from "./sd-component-library196.js";
-import { FlexCenterSpaceBetween as s } from "./sd-component-library37.js";
-import { ResponsiveTextV2 as t } from "./sd-component-library147.js";
-const l = ({
-  title: i,
-  secondaryText: e,
-  onClick: o,
-  textTransform: n
-}) => /* @__PURE__ */ p(s, { width: "100%", p: "12px 16px", onClick: o, bg: "white", sx: {
-  cursor: "pointer"
-}, children: [
-  /* @__PURE__ */ r(t, { fontSizeWeight: [16, "regular"], textTransform: n, children: i }),
-  e && /* @__PURE__ */ r(t, { fontSizeWeight: [14, "regular"], children: e })
-] });
+import { jsxs as x, jsx as e, Fragment as T } from "./sd-component-library195.js";
+import { Select as Z } from "./sd-component-library213.js";
+import "./sd-component-library198.js";
+import { getNoTranslateClass as u } from "./sd-component-library110.js";
+import { MaxMaxContainer as q } from "./sd-component-library43.js";
+import { BaseLabel as D } from "./sd-component-library228.js";
+import { Box as G } from "./sd-component-library199.js";
+import { ResponsiveTextV2 as H } from "./sd-component-library147.js";
+const O = ({
+  variant: r,
+  options: f,
+  width: g,
+  m: h,
+  mt: C,
+  mr: v,
+  mb: $,
+  ml: y,
+  gap: b,
+  selectorLabel: i,
+  secondLabel: t,
+  errorMessage: m,
+  disabledTextValue: n,
+  hideDefaultOnSelect: B,
+  labelMargin: F,
+  selectElementHeight: N,
+  defaultOptionColor: c,
+  textTransform: S,
+  onSelect: _,
+  noOptionsToSelect: o,
+  name: l,
+  selection: s,
+  hasDefaultValue: M,
+  onFocus: V,
+  errorBackground: j,
+  labelContainerAlignItems: z,
+  translateSelect: d = !0,
+  translateDefaultOption: p,
+  containerVariant: E,
+  disabled: I,
+  pl: W
+}) => {
+  const k = !r || !["compact", "tertiary", "secondaryV2", "updatedSecondary"].includes(r), w = navigator.userAgent.toLowerCase().indexOf("firefox") > -1, A = u(p !== !0 && !d || p === !1), R = u(!d);
+  return /* @__PURE__ */ x(G, { variant: `_containers.selectors.${E || r}`, sx: {
+    width: g,
+    m: h,
+    mt: C,
+    mr: v,
+    mb: $,
+    ml: y,
+    position: "relative",
+    ...k ? {
+      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: b
+  }, "data-testid": "base-selector-v2", children: [
+    i && /* @__PURE__ */ x(q, { gap: "0px", alignItems: z, children: [
+      /* @__PURE__ */ e(D, { htmlFor: l, variant: `selectors.${r}${m ? "Error" : ""}`, label: i, m: F, "data-test": "selector-label" }),
+      t && /* @__PURE__ */ e(H, { letterSpacing: "1px", textTransform: "uppercase", mt: t.mt, ml: t.ml || "3px", color: t.color || "cl_grey", fontSizeWeight: t.fontSizeWeight || [10, "semi-bold"], "data-test": "second-label", children: t.text })
+    ] }),
+    /* @__PURE__ */ e(Z, { id: l, name: l, height: N, value: o ? n : s.title.trim(), variant: `_selectors.${r}${m ? "Error" : ""}`, onChange: (a) => _(a.target.value), onFocus: V, backgroundColor: j ? "rgba(255, 0, 0, 0.05)" : "", sx: {
+      textTransform: S,
+      ...c && s.value === null ? {
+        color: c
+      } : {},
+      pl: W
+    }, disabled: I || o, children: o ? /* @__PURE__ */ e("option", { "data-test": "disabled-option", children: n }, "disabledTextValue") : /* @__PURE__ */ e(T, { children: f.slice(
+      // should default option be hidden?
+      M && B && s.value !== null ? 1 : 0
+    ).map((a) => /* @__PURE__ */ e("option", { "data-testid": "selector-option", className: a.value === null ? A : R, children: a.title }, a.id)) }) })
+  ] });
+};
 export {
-  l as CustomOptionBox
+  O as BaseSelectorV2
 };
 //# sourceMappingURL=sd-component-library281.js.map