@selfdecode/sd-component-library 4.0.84 → 4.0.85

package/lib/sd-component-library260.js

@@ -1,77 +1,28 @@
-import { j as o } from "./sd-component-library190.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-library144.js";
-const m = ({
-  options: l,
-  onSelect: t
+import { j as i } from "./sd-component-library195.js";
+import { FlexCenter as l } from "./sd-component-library35.js";
+const x = ({
+  children: t,
+  disabled: o,
+  onClick: e
 }) => {
-  const i = {
-    borderColor: "cl_lightGrey",
-    borderWidth: "1px"
-  }, x = (r) => () => t(r);
-  return /* @__PURE__ */ o.jsxs(
-    e,
+  const r = o ? "cl_lightGrey" : "cl_blue";
+  return /* @__PURE__ */ i.jsx(
+    l,
     {
+      height: "100%",
       sx: {
-        position: "absolute",
-        top: "100%",
-        right: 0,
-        zIndex: 1
+        borderWidth: "2px",
+        borderColor: r,
+        borderStyle: "solid",
+        borderRadius: "5px",
+        fill: r
       },
-      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
-                ))
-              }
-            )
-          }
-        )
-      ]
+      onClick: o ? void 0 : e,
+      children: t
     }
   );
 };
 export {
-  m as CustomScrollableOptionsBox
+  x as PaginationBarButton
 };
 //# sourceMappingURL=sd-component-library260.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library260.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-library260.js","sources":["../src/components/pagination-bars/pagination-bar-mobile/partials/pagination-bar-button/pagination-bar-button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport { FlexCenter } from \"../../../../containers\";\nimport { PaginationBarButtonProps as Props } from \"./interfaces\";\n\nexport const PaginationBarButton: React.FC<PropsWithChildren<Props>> = ({\n  children,\n  disabled,\n  onClick,\n}) => {\n  const color = disabled ? \"cl_lightGrey\" : \"cl_blue\";\n  return (\n    <FlexCenter\n      height=\"100%\"\n      sx={{\n        borderWidth: \"2px\",\n        borderColor: color,\n        borderStyle: \"solid\",\n        borderRadius: \"5px\",\n        fill: color,\n      }}\n      onClick={disabled ? undefined : onClick}\n    >\n      {children}\n    </FlexCenter>\n  );\n};\n"],"names":["PaginationBarButton","children","disabled","onClick","color","jsx","FlexCenter"],"mappings":";;AAKO,MAAMA,IAA0D,CAAC;AAAA,EACtE,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AACE,QAAAC,IAAQF,IAAW,iBAAiB;AAExC,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,IAAI;AAAA,QACF,aAAa;AAAA,QACb,aAAaF;AAAA,QACb,aAAa;AAAA,QACb,cAAc;AAAA,QACd,MAAMA;AAAA,MACR;AAAA,MACA,SAASF,IAAW,SAAYC;AAAA,MAE/B,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/lib/sd-component-library261.js

@@ -1,79 +1,25 @@
-import { j as r } from "./sd-component-library190.js";
-import { createElement as u } from "react";
-import { Box as i } from "rebass";
-import { TriangularPointerIcon as g } from "./sd-component-library184.js";
-import { HorizontalDivider as f } from "./sd-component-library49.js";
-import { OptionRow as w } from "./sd-component-library315.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
-              }
-            ))
-          }
-        )
-      ]
-    }
-  );
-};
+import { j as r } from "./sd-component-library195.js";
+import { ResponsiveTextV2 as t } from "./sd-component-library149.js";
+const n = ({
+  children: e
+}) => /* @__PURE__ */ r.jsx(
+  t,
+  {
+    fontSizeWeight: [18, "regular"],
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      borderRadius: "5px",
+      borderWidth: "1px",
+      borderColor: "cl_lightGrey",
+      borderStyle: "solid"
+    },
+    children: e
+  }
+);
 export {
-  v as CustomScrollableOptionsBox
+  n as PaginationBarCurrentPage
 };
 //# sourceMappingURL=sd-component-library261.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library261.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-library261.js","sources":["../src/components/pagination-bars/pagination-bar-mobile/partials/pagination-bar-current-page/pagination-bar-current-page.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts\";\n\nexport const PaginationBarCurrentPage: React.FC<PropsWithChildren<{}>> = ({\n  children,\n}) => {\n  return (\n    <ResponsiveTextV2\n      fontSizeWeight={[18, \"regular\"]}\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        height: \"100%\",\n        borderRadius: \"5px\",\n        borderWidth: \"1px\",\n        borderColor: \"cl_lightGrey\",\n        borderStyle: \"solid\",\n      }}\n    >\n      {children}\n    </ResponsiveTextV2>\n  );\n};\n"],"names":["PaginationBarCurrentPage","children","jsx","ResponsiveTextV2"],"mappings":";;AAIO,MAAMA,IAA4D,CAAC;AAAA,EACxE,UAAAC;AACF,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,IAC9B,IAAI;AAAA,MACF,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,IACf;AAAA,IAEC,UAAAF;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library262.js

@@ -1,5 +1,5 @@
-import { j as r } from "./sd-component-library190.js";
-import { ReactComponent as s } from "./sd-component-library186.js";
+import { j as r } from "./sd-component-library195.js";
+import { ReactComponent as s } from "./sd-component-library191.js";
 import { FlexItemsCenter as i } from "./sd-component-library35.js";
 const l = ({ width: e, direction: t, onClick: o }) => /* @__PURE__ */ r.jsx(
   i,

package/lib/sd-component-library263.js

@@ -1,4 +1,4 @@
-import { j as e } from "./sd-component-library190.js";
+import { j as e } from "./sd-component-library195.js";
 import { Box as n } from "rebass";
 const g = ({ width: s, direction: t, offset: o }) => {
   const r = "#000000AA", a = "#00000000";

package/lib/sd-component-library264.js

@@ -1,7 +1,7 @@
-import { j as t } from "./sd-component-library190.js";
+import { j as t } from "./sd-component-library195.js";
 import { Flex as f, Box as W } from "rebass";
 import { Button as y } from "./sd-component-library25.js";
-import { ResponsiveTextV2 as m } from "./sd-component-library144.js";
+import { ResponsiveTextV2 as m } from "./sd-component-library149.js";
 const z = ({
   active: n = !1,
   activeColor: s = "cl_purple",

package/lib/sd-component-library265.js

@@ -1,7 +1,7 @@
-import { j as i } from "./sd-component-library190.js";
+import { j as i } from "./sd-component-library195.js";
 import { useRef as B, useEffect as L } from "react";
 import { Box as s } from "rebass";
-import { ResponsiveTextV2 as V } from "./sd-component-library144.js";
+import { ResponsiveTextV2 as V } from "./sd-component-library149.js";
 const R = ({
   id: b,
   label: g,

package/lib/sd-component-library266.js

@@ -1,4 +1,4 @@
-import { j as c } from "./sd-component-library190.js";
+import { j as c } from "./sd-component-library195.js";
 import { useRef as f, useEffect as n } from "react";
 import { Box as p } from "rebass";
 const m = (l) => {

package/lib/sd-component-library267.js

@@ -1,5 +1,5 @@
-import { j as o } from "./sd-component-library190.js";
-import { ThirteenBold as h } from "./sd-component-library148.js";
+import { j as o } from "./sd-component-library195.js";
+import { ThirteenBold as h } from "./sd-component-library153.js";
 import { Button as m } from "./sd-component-library25.js";
 import { MaxMaxContainer as d } from "./sd-component-library41.js";
 const T = (s) => {

package/lib/sd-component-library268.js

@@ -1,12 +1,33 @@
-import * as e from "react";
-const t = (n) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 18 18", ...n }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, `
-            .info-icon-a {
-            stroke-linecap: round;
-            stroke-linejoin: round;
-            stroke-width: 2px;
-            }
-        `)), /* @__PURE__ */ e.createElement("g", { transform: "translate(1 1)" }, /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M19,11a8,8,0,1,1-8-8A8,8,0,0,1,19,11Z", transform: "translate(-3 -3)" }), /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M18,21.2V18", transform: "translate(-10 -10)" }), /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M18,12h0", transform: "translate(-10 -7.2)" })));
+import { j as e } from "./sd-component-library195.js";
+import { FlexCenterSpaceBetween as p } from "./sd-component-library35.js";
+import { ResponsiveTextV2 as t } from "./sd-component-library149.js";
+const h = ({
+  title: i,
+  secondaryText: r,
+  textTransform: o,
+  ...n
+}) => /* @__PURE__ */ e.jsxs(
+  p,
+  {
+    width: "100%",
+    p: "12px 16px",
+    bg: "white",
+    sx: { cursor: "pointer" },
+    ...n,
+    children: [
+      /* @__PURE__ */ e.jsx(
+        t,
+        {
+          fontSizeWeight: [16, "regular"],
+          textTransform: o,
+          children: i
+        }
+      ),
+      r && /* @__PURE__ */ e.jsx(t, { fontSizeWeight: [14, "regular"], children: r })
+    ]
+  }
+);
 export {
-  t as ReactComponent
+  h as CustomOptionBox
 };
 //# sourceMappingURL=sd-component-library268.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library268.js","sources":["../src/components/tooltips/base-info-tooltip/assets/info-icon.svg"],"sourcesContent":["export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxOCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGU+CiAgICAgICAgICAgIC5pbmZvLWljb24tYSB7CiAgICAgICAgICAgIHN0cm9rZS1saW5lY2FwOiByb3VuZDsKICAgICAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICAgICAgc3Ryb2tlLXdpZHRoOiAycHg7CiAgICAgICAgICAgIH0KICAgICAgICA8L3N0eWxlPgogICAgPC9kZWZzPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+CiAgICAgICAgPHBhdGggY2xhc3M9ImluZm8taWNvbi1hIiBkPSJNMTksMTFhOCw4LDAsMSwxLTgtOEE4LDgsMCwwLDEsMTksMTFaIgogICAgICAgICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zIC0zKSIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJpbmZvLWljb24tYSIgZD0iTTE4LDIxLjJWMTgiCiAgICAgICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwIC0xMCkiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iaW5mby1pY29uLWEiIGQ9Ik0xOCwxMmgwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAgLTcuMikiLz4KICAgIDwvZz4KPC9zdmc+Cg==\""],"names":["SvgInfoIcon","props","React"],"mappings":";AACK,MAACA,IAAc,CAACC,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,SAAS,aAAa,GAAGD,EAAO,GAAkB,gBAAAC,EAAM,cAAc,QAAQ,MAAsB,gBAAAA,EAAM,cAAc,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAgK,CAAC,GAAmB,gBAAAA,EAAM,cAAc,KAAK,EAAE,WAAW,iBAAgB,GAAoB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,yCAAyC,WAAW,oBAAoB,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,eAAe,WAAW,qBAAoB,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,YAAY,WAAW,sBAAuB,CAAA,CAAC,CAAC;"}
+{"version":3,"file":"sd-component-library268.js","sources":["../src/components/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  textTransform,\n  ...props\n}) => {\n  return (\n    <FlexCenterSpaceBetween\n      width=\"100%\"\n      p=\"12px 16px\"\n      bg=\"white\"\n      sx={{ cursor: \"pointer\" }}\n      {...props}\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","textTransform","props","jsxs","FlexCenterSpaceBetween","jsx","ResponsiveTextV2"],"mappings":";;;AAMO,MAAMA,IAAmC,CAAC;AAAA,EAC/C,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,GAAE;AAAA,IACF,IAAG;AAAA,IACH,IAAI,EAAE,QAAQ,UAAU;AAAA,IACvB,GAAGF;AAAA,IAEJ,UAAA;AAAA,MAAAG,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,UAC9B,eAAAL;AAAA,UAEC,UAAAF;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-library269.js

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

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

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

package/lib/sd-component-library27.js

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