@selfdecode/sd-component-library 4.0.92 → 4.0.94

package/lib/sd-component-library276.js

@@ -1,54 +1,95 @@
-import { j as r } from "./sd-component-library195.js";
-import s from "react";
-import { Box as n } from "rebass";
-import { TriangularPointerIcon as m } from "./sd-component-library189.js";
-import { SecondaryCustomSelectorOptionRow as x } from "./sd-component-library324.js";
-import { HorizontalDivider as i } from "./sd-component-library49.js";
-const f = ({
-  options: t,
-  onSelect: l
-}) => {
-  const c = (o) => () => l(o);
-  return /* @__PURE__ */ r.jsxs(
-    n,
-    {
+import { j as o } from "./sd-component-library196.js";
+import g from "react";
+import { Flex as j, Box as s } from "rebass";
+import { TriangularPointerIcon as n } from "./sd-component-library190.js";
+import { ResponsiveTextV2 as y } from "./sd-component-library150.js";
+const w = g.forwardRef(
+  ({
+    pointerSx: x,
+    tooltipPx: p,
+    tooltipText: d,
+    tooltipSx: a,
+    tooltipPy: l,
+    tooltipOffset: e,
+    pointerSize: m,
+    tooltipWidth: c,
+    placement: t,
+    state: h,
+    containerSx: R,
+    animationDuration: b,
+    pointerColor: r
+  }, u) => {
+    const f = t === "bottom" ? {
+      top: "100%"
+    } : {
+      bottom: "100%"
+    }, i = {
+      size: `${m}px`,
+      color: r,
       sx: {
-        position: "absolute",
-        right: "-16px",
-        top: "calc(100% - 12px)",
-        minWidth: "calc(100% + 16px)",
-        zIndex: 1
-      },
-      children: [
-        /* @__PURE__ */ r.jsx(m, { direction: "top", mr: "15px", ml: "auto" }),
-        /* @__PURE__ */ r.jsx(i, { height: "2px", color: "cl_purple" }),
-        t.map((o, e) => /* @__PURE__ */ r.jsxs(s.Fragment, { children: [
-          e !== 0 && /* @__PURE__ */ r.jsx(
-            i,
+        my: "auto",
+        ...x
+      }
+    };
+    return /* @__PURE__ */ o.jsxs(
+      j,
+      {
+        flexDirection: "column",
+        sx: {
+          position: "absolute",
+          left: "50%",
+          transform: "translateX(-50%)",
+          cursor: "default",
+          alignItems: "center",
+          opacity: h === "entered" ? 1 : 0,
+          transition: `opacity ${b}ms`,
+          zIndex: 1,
+          ...f,
+          ...a
+        },
+        ref: u,
+        "data-test": "tooltip-content",
+        children: [
+          t === "bottom" && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+            /* @__PURE__ */ o.jsx(s, { height: `${e}px` }),
+            /* @__PURE__ */ o.jsx(n, { direction: "top", ...i })
+          ] }),
+          /* @__PURE__ */ o.jsx(
+            y,
             {
-              color: "cl_headerLine",
+              fontSizeWeight: [14, "regular"],
               sx: {
-                borderStyle: "none solid",
+                width: c,
+                lineHeight: "16px",
+                bg: "cl_white",
+                px: p,
+                py: l,
                 borderColor: "cl_lightGrey",
-                borderWidth: "1px"
-              }
+                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: d
             }
           ),
-          /* @__PURE__ */ r.jsx(
-            x,
-            {
-              title: o.title,
-              onClick: c(o),
-              isLast: e === t.length - 1
-            },
-            o.id
-          )
-        ] }, o.id))
-      ]
-    }
-  );
-};
+          t === "top" && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+            /* @__PURE__ */ o.jsx(n, { direction: "bottom", ...i }),
+            /* @__PURE__ */ o.jsx(s, { height: `${e}px` })
+          ] })
+        ]
+      }
+    );
+  }
+);
 export {
-  f as SecondaryCustomSelectorOptionsBox
+  w as TooltipWithPointerVertical
 };
 //# sourceMappingURL=sd-component-library276.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library276.js","sources":["../src/components/selectors/secondary-custom-selector/partials/secondary-custom-selector-options-box/secondary-custom-selector-options-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { HorizontalDivider } from \"../../../../dividers\";\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { SelectorOptionV2 } from \"../../../selector-v2\";\nimport { SecondaryCustomSelectorOptionRow } from \"../secondary-custom-selector-option-row\";\nimport { SecondaryCustomSelectorOptionsBoxProps as Props } from \"./interfaces\";\n\nexport const SecondaryCustomSelectorOptionsBox = <T extends string = string>({\n  options,\n  onSelect,\n}: Props<T>) => {\n  const onClick = (option: SelectorOptionV2<T>) => () => onSelect(option);\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        right: \"-16px\",\n        top: \"calc(100% - 12px)\",\n        minWidth: \"calc(100% + 16px)\",\n        zIndex: 1,\n      }}\n    >\n      <TriangularPointerIcon direction=\"top\" mr=\"15px\" ml=\"auto\" />\n\n      <HorizontalDivider height=\"2px\" color=\"cl_purple\" />\n\n      {options.map((option, idx) => (\n        <React.Fragment key={option.id}>\n          {idx !== 0 && (\n            <HorizontalDivider\n              color=\"cl_headerLine\"\n              sx={{\n                borderStyle: \"none solid\",\n                borderColor: \"cl_lightGrey\",\n                borderWidth: \"1px\",\n              }}\n            />\n          )}\n\n          <SecondaryCustomSelectorOptionRow\n            key={option.id}\n            title={option.title}\n            onClick={onClick(option)}\n            isLast={idx === options.length - 1}\n          />\n        </React.Fragment>\n      ))}\n    </Box>\n  );\n};\n"],"names":["SecondaryCustomSelectorOptionsBox","options","onSelect","onClick","option","jsxs","Box","jsx","TriangularPointerIcon","HorizontalDivider","idx","React","SecondaryCustomSelectorOptionRow"],"mappings":";;;;;;AAUO,MAAMA,IAAoC,CAA4B;AAAA,EAC3E,SAAAC;AAAA,EACA,UAAAC;AACF,MAAgB;AACd,QAAMC,IAAU,CAACC,MAAgC,MAAMF,EAASE,CAAM;AAGpE,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,MAACC,KAAsB,WAAU,OAAM,IAAG,QAAO,IAAG,QAAO;AAAA,QAE1DD,gBAAAA,EAAA,IAAAE,GAAA,EAAkB,QAAO,OAAM,OAAM,aAAY;AAAA,QAEjDR,EAAQ,IAAI,CAACG,GAAQM,MACnBL,gBAAAA,EAAAA,KAAAM,EAAM,UAAN,EACE,UAAA;AAAA,UAAAD,MAAQ,KACPH,gBAAAA,EAAA;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,IAAI;AAAA,gBACF,aAAa;AAAA,gBACb,aAAa;AAAA,gBACb,aAAa;AAAA,cACf;AAAA,YAAA;AAAA,UACF;AAAA,UAGFF,gBAAAA,EAAA;AAAA,YAACK;AAAA,YAAA;AAAA,cAEC,OAAOR,EAAO;AAAA,cACd,SAASD,EAAQC,CAAM;AAAA,cACvB,QAAQM,MAAQT,EAAQ,SAAS;AAAA,YAAA;AAAA,YAH5BG,EAAO;AAAA,UAId;AAAA,QAAA,KAjBmBA,EAAO,EAkB5B,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"sd-component-library276.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","pointerSx","tooltipPx","tooltipText","tooltipSx","tooltipPy","tooltipOffset","pointerSize","tooltipWidth","placement","state","containerSx","animationDuration","pointerColor","ref","tooltipContainerProps","pointerCommonProps","jsxs","Flex","Fragment","jsx","Box","TriangularPointerIcon","ResponsiveTextV2"],"mappings":";;;;;AAQO,MAAMA,IAA6BC,EAAM;AAAA,EAI9C,CACE;AAAA,IACE,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,cAAAC;AAAA,KAEFC,MACG;AACG,UAAAC,IACJN,MAAc,WACV;AAAA,MACE,KAAK;AAAA,IAAA,IAEP;AAAA,MACE,QAAQ;AAAA,IAAA,GAGVO,IAAqB;AAAA,MACzB,MAAM,GAAGT,CAAW;AAAA,MACpB,OAAOM;AAAA,MACP,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,GAAGZ;AAAA,MACL;AAAA,IAAA;AAIA,WAAAgB,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,eAAc;AAAA,QACd,IAAI;AAAA,UACF,UAAU;AAAA,UACV,MAAM;AAAA,UACN,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,SAASR,MAAU,YAAY,IAAI;AAAA,UACnC,YAAY,WAAWE,CAAiB;AAAA,UACxC,QAAQ;AAAA,UACR,GAAGG;AAAA,UACH,GAAGX;AAAA,QACL;AAAA,QACA,KAAAU;AAAA,QACA,aAAU;AAAA,QAET,UAAA;AAAA,UAAAL,MAAc,YAEXQ,gBAAAA,EAAAA,KAAAE,EAAA,UAAA,EAAA,UAAA;AAAA,YAAAC,gBAAAA,EAAA,IAACC,GAAI,EAAA,QAAQ,GAAGf,CAAa,MAAM;AAAA,YAClCc,gBAAAA,EAAA,IAAAE,GAAA,EAAsB,WAAU,OAAO,GAAGN,EAAoB,CAAA;AAAA,UAAA,GACjE;AAAA,UAGFI,gBAAAA,EAAA;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,cAC9B,IAAI;AAAA,gBACF,OAAOf;AAAA,gBACP,YAAY;AAAA,gBACZ,IAAI;AAAA,gBACJ,IAAIN;AAAA,gBACJ,IAAIG;AAAA,gBACJ,aAAa;AAAA,gBACb,aAAa;AAAA,gBACb,aAAa;AAAA,gBACb,GAAII,MAAc,QACd;AAAA,kBACE,mBAAmB;AAAA,kBACnB,mBAAmBI;AAAA,kBACnB,cAAc;AAAA,gBAAA,IAEhB;AAAA,kBACE,gBAAgB;AAAA,kBAChB,gBAAgBA;AAAA,kBAChB,cAAc;AAAA,gBAChB;AAAA,cACN;AAAA,cAEC,UAAAV;AAAA,YAAA;AAAA,UACH;AAAA,UAECM,MAAc,SAEXQ,gBAAAA,EAAAA,KAAAE,EAAA,UAAA,EAAA,UAAA;AAAA,YAAAC,gBAAAA,EAAA,IAACE,GAAsB,EAAA,WAAU,UAAU,GAAGN,EAAoB,CAAA;AAAA,YACjEI,gBAAAA,EAAA,IAAAC,GAAA,EAAI,QAAQ,GAAGf,CAAa,MAAM;AAAA,UAAA,GACrC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/lib/sd-component-library277.js

@@ -1,134 +1,8 @@
-import { j as t } from "./sd-component-library195.js";
-import { Select as A } from "@rebass/forms";
-import { Box as T } from "rebass";
-import { getNoTranslateClass as p } from "./sd-component-library112.js";
-import { BaseLabel as Z } from "./sd-component-library226.js";
-import { MaxMaxContainer as q } from "./sd-component-library41.js";
-import { ResponsiveTextV2 as D } from "./sd-component-library149.js";
-const X = ({
-  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: F,
-  defaultOptionColor: c,
-  textTransform: N,
-  onSelect: S,
-  noOptionsToSelect: a,
-  name: o,
-  selection: l,
-  hasDefaultValue: B,
-  onFocus: E,
-  errorBackground: M,
-  labelContainerAlignItems: V,
-  translateSelect: d = !0,
-  translateDefaultOption: x,
-  containerVariant: _,
-  disabled: z,
-  pl: I
-}) => {
-  const R = !r || !["compact", "tertiary", "secondaryV2", "updatedSecondary"].includes(
-    r
-  ), W = navigator.userAgent.toLowerCase().indexOf("firefox") > -1, k = p(
-    x !== !0 && !d || x === !1
-  ), w = p(!d);
-  return /* @__PURE__ */ t.jsxs(
-    T,
-    {
-      variant: `_containers.selectors.${_ || 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(q, { gap: "0px", alignItems: V, children: [
-          /* @__PURE__ */ t.jsx(
-            Z,
-            {
-              htmlFor: o,
-              variant: `selectors.${r}${m ? "Error" : ""}`,
-              label: i,
-              m: b,
-              "data-testid": "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-testid": "second-label",
-              children: e.text
-            }
-          )
-        ] }),
-        /* @__PURE__ */ t.jsx(
-          A,
-          {
-            id: o,
-            name: o,
-            height: F,
-            value: a ? n : l.title.trim(),
-            variant: `_selectors.${r}${m ? "Error" : ""}`,
-            onChange: (s) => S(s.target.value),
-            onFocus: E,
-            backgroundColor: M ? "rgba(255, 0, 0, 0.05)" : "",
-            sx: {
-              textTransform: N,
-              ...c && l.value === null ? { color: c } : {},
-              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?
-              B && 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
-            )) })
-          }
-        )
-      ]
-    }
-  );
-};
+import * as e from "react";
+const t = (l) => /* @__PURE__ */ e.createElement("svg", { id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 460.775 460.775", style: {
+  enableBackground: "new 0 0 460.775 460.775"
+}, xmlSpace: "preserve", ...l }, /* @__PURE__ */ e.createElement("path", { d: "M285.08,230.397L456.218,59.27c6.076-6.077,6.076-15.911,0-21.986L423.511,4.565c-2.913-2.911-6.866-4.55-10.992-4.55 c-4.127,0-8.08,1.639-10.993,4.55l-171.138,171.14L59.25,4.565c-2.913-2.911-6.866-4.55-10.993-4.55 c-4.126,0-8.08,1.639-10.992,4.55L4.558,37.284c-6.077,6.075-6.077,15.909,0,21.986l171.138,171.128L4.575,401.505 c-6.074,6.077-6.074,15.911,0,21.986l32.709,32.719c2.911,2.911,6.865,4.55,10.992,4.55c4.127,0,8.08-1.639,10.994-4.55 l171.117-171.12l171.118,171.12c2.913,2.911,6.866,4.55,10.993,4.55c4.128,0,8.081-1.639,10.992-4.55l32.709-32.719 c6.074-6.075,6.074-15.909,0-21.986L285.08,230.397z" }), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null), /* @__PURE__ */ e.createElement("g", null));
 export {
-  X as BaseSelectorV2
+  t as ReactComponent
 };
 //# 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/selectors/selector-v2/partials/base-selector-v2/base-selector-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Select } from \"@rebass/forms\";\nimport { Box } from \"rebass\";\n\nimport { MaxMaxContainer } from \"../../../../containers\";\nimport { BaseLabel } from \"../../../../labels/base-label\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { getNoTranslateClass } from \"../../../selector/selector\";\nimport { BaseSelectorV2Props as Props } from \"./interfaces\";\n\nexport const BaseSelectorV2 = <T extends string = string>({\n  variant,\n  options,\n  width,\n  m,\n  mt,\n  mr,\n  mb,\n  ml,\n  gap,\n  selectorLabel,\n  secondLabel,\n  errorMessage,\n  disabledTextValue,\n  hideDefaultOnSelect,\n  labelMargin,\n  selectElementHeight,\n  defaultOptionColor,\n  textTransform,\n  onSelect,\n  noOptionsToSelect,\n  name,\n  selection,\n  hasDefaultValue,\n  onFocus,\n  errorBackground,\n  labelContainerAlignItems,\n  translateSelect = true,\n  translateDefaultOption,\n  containerVariant,\n  disabled,\n  pl,\n}: Props<T>) => {\n  const useDefaultIconStyles =\n    !variant ||\n    ![\"compact\", \"tertiary\", \"secondaryV2\", \"updatedSecondary\"].includes(\n      variant\n    );\n  const isFirefox = navigator.userAgent.toLowerCase().indexOf(\"firefox\") > -1;\n\n  const defaultOptionClassName = getNoTranslateClass(\n    (translateDefaultOption !== true && !translateSelect) ||\n      translateDefaultOption === false\n  );\n  const regularOptionClassName = getNoTranslateClass(!translateSelect);\n\n  return (\n    <Box\n      variant={`_containers.selectors.${containerVariant || variant}`}\n      sx={{\n        width,\n        m,\n        mt,\n        mr,\n        mb,\n        ml,\n        position: \"relative\",\n        ...(useDefaultIconStyles\n          ? {\n              svg: {\n                transform: `translate(-2px,${isFirefox ? 0 : 5}px) scale(.78)`,\n                fill: \"#4568F8\",\n              },\n            }\n          : {}),\n        path: {\n          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')\",\n        },\n        gap,\n      }}\n      data-testid=\"base-selector-v2\"\n    >\n      {selectorLabel && (\n        <MaxMaxContainer gap=\"0px\" alignItems={labelContainerAlignItems}>\n          <BaseLabel\n            htmlFor={name}\n            variant={`selectors.${variant}${errorMessage ? \"Error\" : \"\"}`}\n            label={selectorLabel}\n            m={labelMargin}\n            data-testid=\"selector-label\"\n          />\n\n          {secondLabel && (\n            <ResponsiveTextV2\n              letterSpacing=\"1px\"\n              textTransform=\"uppercase\"\n              mt={secondLabel.mt}\n              ml={secondLabel.ml || \"3px\"}\n              color={secondLabel.color || \"cl_grey\"}\n              fontSizeWeight={secondLabel.fontSizeWeight || [10, \"semi-bold\"]}\n              data-testid=\"second-label\"\n            >\n              {secondLabel.text}\n            </ResponsiveTextV2>\n          )}\n        </MaxMaxContainer>\n      )}\n\n      <Select\n        id={name}\n        name={name}\n        height={selectElementHeight}\n        value={noOptionsToSelect ? disabledTextValue : selection.title.trim()}\n        variant={`_selectors.${variant}${errorMessage ? \"Error\" : \"\"}`}\n        onChange={(event) => onSelect(event.target.value)}\n        onFocus={onFocus}\n        backgroundColor={errorBackground ? \"rgba(255, 0, 0, 0.05)\" : \"\"}\n        sx={{\n          textTransform,\n          ...(defaultOptionColor && selection.value === null\n            ? { color: defaultOptionColor }\n            : {}),\n          pl,\n        }}\n        disabled={disabled || noOptionsToSelect}\n      >\n        {noOptionsToSelect ? (\n          <option key=\"disabledTextValue\" data-test=\"disabled-option\">\n            {disabledTextValue}\n          </option>\n        ) : (\n          <>\n            {options\n              .slice(\n                // should default option be hidden?\n                hasDefaultValue &&\n                  hideDefaultOnSelect &&\n                  selection.value !== null\n                  ? 1\n                  : 0\n              )\n              .map((option) => (\n                <option\n                  key={option.id}\n                  data-testid=\"selector-option\"\n                  className={\n                    option.value === null\n                      ? defaultOptionClassName\n                      : regularOptionClassName\n                  }\n                >\n                  {option.title}\n                </option>\n              ))}\n          </>\n        )}\n      </Select>\n    </Box>\n  );\n};\n"],"names":["BaseSelectorV2","variant","options","width","m","mt","mr","mb","ml","gap","selectorLabel","secondLabel","errorMessage","disabledTextValue","hideDefaultOnSelect","labelMargin","selectElementHeight","defaultOptionColor","textTransform","onSelect","noOptionsToSelect","name","selection","hasDefaultValue","onFocus","errorBackground","labelContainerAlignItems","translateSelect","translateDefaultOption","containerVariant","disabled","pl","useDefaultIconStyles","isFirefox","defaultOptionClassName","getNoTranslateClass","regularOptionClassName","jsxs","Box","MaxMaxContainer","jsx","BaseLabel","ResponsiveTextV2","Select","event","Fragment","option"],"mappings":"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"}
+{"version":3,"file":"sd-component-library277.js","sources":["../src/components/modals/modal/assets/x-symbol.svg"],"sourcesContent":["export default \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDYwLjc3NSA0NjAuNzc1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NjAuNzc1IDQ2MC43NzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZD0iTTI4NS4wOCwyMzAuMzk3TDQ1Ni4yMTgsNTkuMjdjNi4wNzYtNi4wNzcsNi4wNzYtMTUuOTExLDAtMjEuOTg2TDQyMy41MTEsNC41NjVjLTIuOTEzLTIuOTExLTYuODY2LTQuNTUtMTAuOTkyLTQuNTUKCWMtNC4xMjcsMC04LjA4LDEuNjM5LTEwLjk5Myw0LjU1bC0xNzEuMTM4LDE3MS4xNEw1OS4yNSw0LjU2NWMtMi45MTMtMi45MTEtNi44NjYtNC41NS0xMC45OTMtNC41NQoJYy00LjEyNiwwLTguMDgsMS42MzktMTAuOTkyLDQuNTVMNC41NTgsMzcuMjg0Yy02LjA3Nyw2LjA3NS02LjA3NywxNS45MDksMCwyMS45ODZsMTcxLjEzOCwxNzEuMTI4TDQuNTc1LDQwMS41MDUKCWMtNi4wNzQsNi4wNzctNi4wNzQsMTUuOTExLDAsMjEuOTg2bDMyLjcwOSwzMi43MTljMi45MTEsMi45MTEsNi44NjUsNC41NSwxMC45OTIsNC41NWM0LjEyNywwLDguMDgtMS42MzksMTAuOTk0LTQuNTUKCWwxNzEuMTE3LTE3MS4xMmwxNzEuMTE4LDE3MS4xMmMyLjkxMywyLjkxMSw2Ljg2Niw0LjU1LDEwLjk5Myw0LjU1YzQuMTI4LDAsOC4wODEtMS42MzksMTAuOTkyLTQuNTVsMzIuNzA5LTMyLjcxOQoJYzYuMDc0LTYuMDc1LDYuMDc0LTE1LjkwOSwwLTIxLjk4NkwyODUuMDgsMjMwLjM5N3oiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==\""],"names":["SvgXSymbol","props","React"],"mappings":";AACK,MAACA,IAAa,CAACC,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,IAAI,UAAU,OAAO,8BAA8B,YAAY,gCAAgC,GAAG,OAAO,GAAG,OAAO,SAAS,uBAAuB,OAAO;AAAA,EACnO,kBAAkB;AACpB,GAAG,UAAU,YAAY,GAAGD,EAAO,GAAkB,gBAAAC,EAAM,cAAc,QAAQ,EAAE,GAAG,4lBAA4lB,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,GAAmB,gBAAAA,EAAM,cAAc,KAAK,IAAI,CAAC;"}

package/lib/sd-component-library278.js

@@ -1,77 +1,52 @@
-import { j as o } from "./sd-component-library195.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-library149.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
-                ))
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
+var n = Object.defineProperty;
+var R = (t, e, s) => e in t ? n(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
+var i = (t, e, s) => (R(t, typeof e != "symbol" ? e + "" : e, s), s);
+class h {
+  constructor() {
+    i(this, "refRegistry", {});
+  }
+  /**
+   * Check if ref is registered for a component with provided ID.
+   * @param id ID for the component.
+   */
+  doesRefExist(e) {
+    return !!this.refRegistry[e];
+  }
+  /**
+   * Register a ref.
+   *
+   * @param id ID for the component.
+   * @param ref React Ref object for the component. Used for scrolling.
+   */
+  addRef(e, s) {
+    const r = e.startsWith("#") ? e : `#${e}`;
+    this.refRegistry[r] = s;
+  }
+  /**
+   * Remove a ref from registry.
+   *
+   * @param id ID for the component.
+   */
+  removeRef(e) {
+    this.doesRefExist(e) ? delete this.refRegistry[e] : console.error(`Ref with ID ${e} does not exist in the registry`);
+  }
+  /**
+   * Scroll the component with provided ID into the view.
+   *
+   * @param id ID for the component.
+   * @param behavior Scroll behavior.
+   */
+  scrollToRef(e, { behavior: s = "smooth", block: r, inline: f }) {
+    var o;
+    this.doesRefExist(e) ? (o = this.refRegistry[e].current) == null || o.scrollIntoView({
+      behavior: s,
+      block: r,
+      inline: f
+    }) : console.error(`Ref with ID ${e} does not exist in the registry`);
+  }
+}
+const g = new h();
 export {
-  m as CustomScrollableOptionsBox
+  g as refsManager
 };
 //# 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/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;"}
+{"version":3,"file":"sd-component-library278.js","sources":["../src/components/utils/anchor/refs-manager.ts"],"sourcesContent":["import React from \"react\";\n\nimport { refsMap } from \"./interfaces\";\n\n/**\n * Refs Manager class to keep record of registered refs on the page.\n */\nclass RefsManager {\n  refRegistry: refsMap = {};\n\n  /**\n   * Check if ref is registered for a component with provided ID.\n   * @param id ID for the component.\n   */\n  public doesRefExist(id: string) {\n    return !!this.refRegistry[id];\n  }\n\n  /**\n   * Register a ref.\n   *\n   * @param id ID for the component.\n   * @param ref React Ref object for the component. Used for scrolling.\n   */\n  public addRef(\n    id: string,\n    ref: React.MutableRefObject<HTMLDivElement | undefined>\n  ) {\n    const key = id.startsWith(\"#\") ? id : `#${id}`;\n\n    this.refRegistry[key] = ref;\n  }\n\n  /**\n   * Remove a ref from registry.\n   *\n   * @param id ID for the component.\n   */\n  public removeRef(id: string) {\n    if (this.doesRefExist(id)) delete this.refRegistry[id];\n    else console.error(`Ref with ID ${id} does not exist in the registry`);\n  }\n\n  /**\n   * Scroll the component with provided ID into the view.\n   *\n   * @param id ID for the component.\n   * @param behavior Scroll behavior.\n   */\n  public scrollToRef(\n    id: string,\n    { behavior = \"smooth\", block, inline }: ScrollIntoViewOptions\n  ) {\n    if (this.doesRefExist(id))\n      this.refRegistry[id].current?.scrollIntoView({\n        behavior,\n        block,\n        inline,\n      });\n    else console.error(`Ref with ID ${id} does not exist in the registry`);\n  }\n}\n\nexport const refsManager = new RefsManager();\n"],"names":["RefsManager","__publicField","id","ref","key","behavior","block","inline","_a","refsManager"],"mappings":";;;AAOA,MAAMA,EAAY;AAAA,EAAlB;AACE,IAAAC,EAAA,qBAAuB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMhB,aAAaC,GAAY;AAC9B,WAAO,CAAC,CAAC,KAAK,YAAYA,CAAE;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQO,OACLA,GACAC,GACA;AACA,UAAMC,IAAMF,EAAG,WAAW,GAAG,IAAIA,IAAK,IAAIA,CAAE;AAEvC,SAAA,YAAYE,CAAG,IAAID;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOO,UAAUD,GAAY;AACvB,IAAA,KAAK,aAAaA,CAAE,IAAU,OAAA,KAAK,YAAYA,CAAE,IACxC,QAAA,MAAM,eAAeA,CAAE,iCAAiC;AAAA,EACvE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQO,YACLA,GACA,EAAE,UAAAG,IAAW,UAAU,OAAAC,GAAO,QAAAC,KAC9B;AA7CJ,QAAAC;AA8CQ,IAAA,KAAK,aAAaN,CAAE,KACtBM,IAAA,KAAK,YAAYN,CAAE,EAAE,YAArB,QAAAM,EAA8B,eAAe;AAAA,MAC3C,UAAAH;AAAA,MACA,OAAAC;AAAA,MACA,QAAAC;AAAA,IAAA,KAES,QAAA,MAAM,eAAeL,CAAE,iCAAiC;AAAA,EACvE;AACF;AAEa,MAAAO,IAAc,IAAIT,EAAY;"}

package/lib/sd-component-library279.js

@@ -1,79 +1,5 @@
-import { j as r } from "./sd-component-library195.js";
-import { createElement as u } from "react";
-import { Box as i } from "rebass";
-import { TriangularPointerIcon as g } from "./sd-component-library189.js";
-import { HorizontalDivider as f } from "./sd-component-library49.js";
-import { OptionRow as w } from "./sd-component-library320.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,
-    {
-      sx: {
-        minWidth: "100%",
-        position: "absolute",
-        top: "100%",
-        right: 0,
-        zIndex: 1,
-        cursor: "default"
-      },
-      children: [
-        /* @__PURE__ */ r.jsx(g, { direction: "top", mr: "15px", ml: "auto" }),
-        /* @__PURE__ */ r.jsx(f, { color: "cl_purple", height: "2px" }),
-        /* @__PURE__ */ r.jsx(
-          i,
-          {
-            sx: {
-              bg: "cl_white",
-              borderRadius: "0 0 3px 3px",
-              boxShadow: "0px 3px 10px #0000001A",
-              borderWidth: "1px",
-              borderColor: "cl_lightGrey",
-              borderStyle: "solid",
-              borderTopStyle: "none",
-              overflow: "auto",
-              maxHeight: `calc(${C} * ${S})`,
-              scrollbarWidth: "thin",
-              scrollbarColor: `${n} ${s}`,
-              "::-webkit-scrollbar-track": {
-                borderRadius: l,
-                bg: n,
-                border: `${e}px solid transparent`,
-                backgroundClip: "content-box"
-              },
-              "::-webkit-scrollbar": {
-                width: 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
-              }
-            ))
-          }
-        )
-      ]
-    }
-  );
-};
+var r = {};
 export {
-  v as CustomScrollableOptionsBox
+  r as __exports
 };
 //# 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/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;"}
+{"version":3,"file":"sd-component-library279.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/lib/sd-component-library28.js

@@ -1,9 +1,9 @@
-import { j as n } from "./sd-component-library195.js";
+import { j as n } from "./sd-component-library196.js";
 import { Box as p } from "rebass";
-import { ReactComponent as i } from "./sd-component-library186.js";
-import { ReactComponent as a } from "./sd-component-library185.js";
-import { ReactComponent as x } from "./sd-component-library175.js";
-import { ReactComponent as C } from "./sd-component-library177.js";
+import { ReactComponent as i } from "./sd-component-library187.js";
+import { ReactComponent as a } from "./sd-component-library186.js";
+import { ReactComponent as x } from "./sd-component-library176.js";
+import { ReactComponent as C } from "./sd-component-library178.js";
 const t = ({
   sx: o,
   onClick: r,

package/lib/sd-component-library280.js

@@ -1,5 +1,5 @@
-const s = "";
+var e = {};
 export {
-  s as default
+  e as __exports
 };
 //# sourceMappingURL=sd-component-library280.js.map

package/lib/sd-component-library281.js

@@ -1,5 +1,5 @@
-const t = "";
+const s = "";
 export {
-  t as default
+  s as default
 };
 //# sourceMappingURL=sd-component-library281.js.map