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

package/lib/sd-component-library115.js

@@ -1,103 +1,61 @@
-import { j as o } from "./sd-component-library195.js";
-import u, { useState as h, useMemo as f } from "react";
-import { Box as g } from "rebass";
-import { OutsideClickBox as b } from "./sd-component-library14.js";
-import { ReactComponent as j } from "./sd-component-library186.js";
-import { CustomOptionBox as C } from "./sd-component-library266.js";
-import { GridCenter as S } from "./sd-component-library44.js";
-import { EighteenRegular as x } from "./sd-component-library139.js";
+import { jsx as t, jsxs as d } from "./sd-component-library195.js";
+import h, { useState as u, useMemo as f } from "react";
+import "./sd-component-library198.js";
+import { ReactComponent as g } from "./sd-component-library186.js";
+import { Box as C } from "./sd-component-library199.js";
+import { CustomOptionBox as b } from "./sd-component-library279.js";
+import { OutsideClickBox as S } from "./sd-component-library14.js";
+import { EighteenRegular as m } from "./sd-component-library139.js";
 import { HorizontalDivider as _ } from "./sd-component-library51.js";
-const z = ({
+import { GridCenter as w } from "./sd-component-library44.js";
+const D = ({
   value: e,
-  onChange: d,
-  options: n,
+  onChange: x,
+  options: s,
   width: p = ["100%"],
   textTransform: c = "capitalize"
 }) => {
-  const [r, s] = h(!1), i = f(() => n.filter(({ title: t }) => t !== e.title), [n, e]), l = !i.length, m = () => !l && s((t) => !t);
-  return /* @__PURE__ */ o.jsx(
-    b,
-    {
-      "data-test": "custom-selector",
-      onClickOutside: () => s(!1),
-      children: /* @__PURE__ */ o.jsxs(
-        S,
-        {
-          width: p,
-          gap: "5px",
-          onClick: m,
-          sx: {
-            position: "relative",
-            gridTemplateColumns: "1fr max-content",
-            gap: "5px",
-            cursor: l ? "default" : "pointer",
-            pb: "10px",
-            borderBottom: "2px solid",
-            borderColor: r ? "cl_blue" : "cl_lightGrey",
-            userSelect: "none"
-          },
-          "data-test": "current-value",
-          children: [
-            l ? /* @__PURE__ */ o.jsx(x, { color: "cl_grey", children: "No options" }) : /* @__PURE__ */ o.jsx(x, { cursor: "pointer", textTransform: c, children: e.title }),
-            /* @__PURE__ */ o.jsx(
-              j,
-              {
-                width: "10px",
-                style: {
-                  transform: `rotate(${r ? "180deg" : "0deg"})`,
-                  transition: "all 0.3s"
-                }
-              }
-            ),
-            r && /* @__PURE__ */ o.jsx(
-              g,
-              {
-                width: p,
-                sx: {
-                  position: "absolute",
-                  left: "0",
-                  top: "calc(100% + 2px)",
-                  border: "1px solid",
-                  borderRadius: "0 0 4px 4px",
-                  borderColor: "cl_lightGrey",
-                  borderTopStyle: "none",
-                  overflow: "hidden",
-                  boxShadow: "2px 3px 10px #0000001A",
-                  userSelect: "none",
-                  bg: "cl_white"
-                },
-                "data-test": "options-list",
-                children: i.map((t, a) => /* @__PURE__ */ o.jsxs(u.Fragment, { children: [
-                  /* @__PURE__ */ o.jsx(
-                    C,
-                    {
-                      ...t,
-                      onClick: () => {
-                        d(t), s(!1);
-                      },
-                      textTransform: c,
-                      "data-test": "selector-option"
-                    }
-                  ),
-                  a !== i.length - 1 && /* @__PURE__ */ o.jsx(
-                    _,
-                    {
-                      height: "1px",
-                      color: "cl_lightGrey",
-                      opacity: "0.5",
-                      sx: { mx: "2px" }
-                    }
-                  )
-                ] }, `${a}-${t.title}`))
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
+  const [r, i] = u(!1), l = f(() => s.filter(({
+    title: o
+  }) => o !== e.title), [s, e]), n = !l.length;
+  return /* @__PURE__ */ t(S, { "data-test": "custom-selector", onClickOutside: () => i(!1), children: /* @__PURE__ */ d(w, { width: p, gap: "5px", onClick: () => !n && i((o) => !o), sx: {
+    position: "relative",
+    gridTemplateColumns: "1fr max-content",
+    gap: "5px",
+    cursor: n ? "default" : "pointer",
+    pb: "10px",
+    borderBottom: "2px solid",
+    borderColor: r ? "cl_blue" : "cl_lightGrey",
+    userSelect: "none"
+  }, "data-test": "current-value", children: [
+    n ? /* @__PURE__ */ t(m, { color: "cl_grey", children: "No options" }) : /* @__PURE__ */ t(m, { cursor: "pointer", textTransform: c, children: e.title }),
+    /* @__PURE__ */ t(g, { width: "10px", style: {
+      transform: `rotate(${r ? "180deg" : "0deg"})`,
+      transition: "all 0.3s"
+    } }),
+    r && /* @__PURE__ */ t(C, { width: p, sx: {
+      position: "absolute",
+      left: "0",
+      top: "calc(100% + 2px)",
+      border: "1px solid",
+      borderRadius: "0 0 4px 4px",
+      borderColor: "cl_lightGrey",
+      borderTopStyle: "none",
+      overflow: "hidden",
+      boxShadow: "2px 3px 10px #0000001A",
+      userSelect: "none",
+      bg: "cl_white"
+    }, "data-test": "options-list", children: l.map((o, a) => /* @__PURE__ */ d(h.Fragment, { children: [
+      /* @__PURE__ */ t(b, { ...o, onClick: () => {
+        x(o), i(!1);
+      }, textTransform: c, "data-test": "selector-option" }),
+      a !== l.length - 1 && /* @__PURE__ */ t(_, { height: "1px", color: "cl_lightGrey", opacity: "0.5", sx: {
+        mx: "2px"
+      } })
+    ] }, `${a}-${o.title}`)) })
+  ] }) });
 };
 export {
-  z as CustomSelector
+  D as CustomSelector
 };
 //# sourceMappingURL=sd-component-library115.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library115.js","sources":["../src/components/selectors/custom-selector/custom-selector.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { OutsideClickBox } from \"../../boxes\";\nimport { GridCenter } from \"../../containers\";\nimport { HorizontalDivider } from \"../../dividers\";\nimport { ShortDownArrowIcon } from \"../../icons/short-dropdown-arrow-icon\";\nimport { EighteenRegular } from \"../../texts\";\nimport { CustomSelectorProps as Props } from \"./interfaces\";\nimport { CustomOptionBox } from \"./partials\";\n\nexport const CustomSelector: React.FC<Props> = ({\n  value,\n  onChange,\n  options,\n  width = [\"100%\"],\n  textTransform = \"capitalize\",\n}) => {\n  const [showOptions, setShowOptions] = useState(false);\n\n  /* List of options to be displayed below */\n  const notSelectedOptions = useMemo(() => {\n    return options.filter(({ title }) => title !== value.title);\n  }, [options, value]);\n\n  const noOptions = !notSelectedOptions.length;\n\n  const onClick = () => !noOptions && setShowOptions((prev) => !prev);\n\n  return (\n    <OutsideClickBox\n      data-test=\"custom-selector\"\n      onClickOutside={() => setShowOptions(false)}\n    >\n      <GridCenter\n        width={width}\n        gap=\"5px\"\n        onClick={onClick}\n        sx={{\n          position: \"relative\",\n          gridTemplateColumns: \"1fr max-content\",\n          gap: \"5px\",\n          cursor: noOptions ? \"default\" : \"pointer\",\n          pb: \"10px\",\n          borderBottom: \"2px solid\",\n          borderColor: showOptions ? \"cl_blue\" : \"cl_lightGrey\",\n          userSelect: \"none\",\n        }}\n        data-test=\"current-value\"\n      >\n        {noOptions ? (\n          <EighteenRegular color=\"cl_grey\">No options</EighteenRegular>\n        ) : (\n          <EighteenRegular cursor=\"pointer\" textTransform={textTransform}>\n            {value.title}\n          </EighteenRegular>\n        )}\n\n        <ShortDownArrowIcon\n          width=\"10px\"\n          style={{\n            transform: `rotate(${showOptions ? \"180deg\" : \"0deg\"})`,\n            transition: \"all 0.3s\",\n          }}\n        />\n\n        {showOptions && (\n          <Box\n            width={width}\n            sx={{\n              position: \"absolute\",\n              left: \"0\",\n              top: \"calc(100% + 2px)\",\n              border: \"1px solid\",\n              borderRadius: \"0 0 4px 4px\",\n              borderColor: \"cl_lightGrey\",\n              borderTopStyle: \"none\",\n              overflow: \"hidden\",\n              boxShadow: \"2px 3px 10px #0000001A\",\n              userSelect: \"none\",\n              bg: \"cl_white\",\n            }}\n            data-test=\"options-list\"\n          >\n            {notSelectedOptions.map((option, idx) => (\n              <React.Fragment key={`${idx}-${option.title}`}>\n                <CustomOptionBox\n                  {...option}\n                  onClick={() => {\n                    onChange(option);\n                    setShowOptions(false);\n                  }}\n                  textTransform={textTransform}\n                  data-test=\"selector-option\"\n                />\n\n                {idx !== notSelectedOptions.length - 1 && (\n                  <HorizontalDivider\n                    height=\"1px\"\n                    color=\"cl_lightGrey\"\n                    opacity=\"0.5\"\n                    sx={{ mx: \"2px\" }}\n                  />\n                )}\n              </React.Fragment>\n            ))}\n          </Box>\n        )}\n      </GridCenter>\n    </OutsideClickBox>\n  );\n};\n"],"names":["CustomSelector","value","onChange","options","width","textTransform","showOptions","setShowOptions","useState","notSelectedOptions","useMemo","title","noOptions","onClick","prev","jsx","OutsideClickBox","jsxs","GridCenter","EighteenRegular","ShortDownArrowIcon","Box","option","idx","React","CustomOptionBox","HorizontalDivider"],"mappings":";;;;;;;;;AAYO,MAAMA,IAAkC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC,IAAQ,CAAC,MAAM;AAAA,EACf,eAAAC,IAAgB;AAClB,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAG9CC,IAAqBC,EAAQ,MAC1BP,EAAQ,OAAO,CAAC,EAAE,OAAAQ,EAAY,MAAAA,MAAUV,EAAM,KAAK,GACzD,CAACE,GAASF,CAAK,CAAC,GAEbW,IAAY,CAACH,EAAmB,QAEhCI,IAAU,MAAM,CAACD,KAAaL,EAAe,CAACO,MAAS,CAACA,CAAI;AAGhE,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAgB,MAAMT,EAAe,EAAK;AAAA,MAE1C,UAAAU,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAAd;AAAA,UACA,KAAI;AAAA,UACJ,SAAAS;AAAA,UACA,IAAI;AAAA,YACF,UAAU;AAAA,YACV,qBAAqB;AAAA,YACrB,KAAK;AAAA,YACL,QAAQD,IAAY,YAAY;AAAA,YAChC,IAAI;AAAA,YACJ,cAAc;AAAA,YACd,aAAaN,IAAc,YAAY;AAAA,YACvC,YAAY;AAAA,UACd;AAAA,UACA,aAAU;AAAA,UAET,UAAA;AAAA,YAAAM,IACEG,gBAAAA,EAAA,IAAAI,GAAA,EAAgB,OAAM,WAAU,UAAU,cAAA,IAE1CJ,gBAAAA,EAAA,IAAAI,GAAA,EAAgB,QAAO,WAAU,eAAAd,GAC/B,UAAAJ,EAAM,OACT;AAAA,YAGFc,gBAAAA,EAAA;AAAA,cAACK;AAAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,OAAO;AAAA,kBACL,WAAW,UAAUd,IAAc,WAAW,MAAM;AAAA,kBACpD,YAAY;AAAA,gBACd;AAAA,cAAA;AAAA,YACF;AAAA,YAECA,KACCS,gBAAAA,EAAA;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,OAAAjB;AAAA,gBACA,IAAI;AAAA,kBACF,UAAU;AAAA,kBACV,MAAM;AAAA,kBACN,KAAK;AAAA,kBACL,QAAQ;AAAA,kBACR,cAAc;AAAA,kBACd,aAAa;AAAA,kBACb,gBAAgB;AAAA,kBAChB,UAAU;AAAA,kBACV,WAAW;AAAA,kBACX,YAAY;AAAA,kBACZ,IAAI;AAAA,gBACN;AAAA,gBACA,aAAU;AAAA,gBAET,UAAAK,EAAmB,IAAI,CAACa,GAAQC,MAC9BN,gBAAAA,EAAAA,KAAAO,EAAM,UAAN,EACC,UAAA;AAAA,kBAAAT,gBAAAA,EAAA;AAAA,oBAACU;AAAA,oBAAA;AAAA,sBACE,GAAGH;AAAA,sBACJ,SAAS,MAAM;AACb,wBAAApB,EAASoB,CAAM,GACff,EAAe,EAAK;AAAA,sBACtB;AAAA,sBACA,eAAAF;AAAA,sBACA,aAAU;AAAA,oBAAA;AAAA,kBACZ;AAAA,kBAECkB,MAAQd,EAAmB,SAAS,KACnCM,gBAAAA,EAAA;AAAA,oBAACW;AAAA,oBAAA;AAAA,sBACC,QAAO;AAAA,sBACP,OAAM;AAAA,sBACN,SAAQ;AAAA,sBACR,IAAI,EAAE,IAAI,MAAM;AAAA,oBAAA;AAAA,kBAClB;AAAA,gBAAA,EAAA,GAjBiB,GAAGH,CAAG,IAAID,EAAO,KAAK,EAmB3C,CACD;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library115.js","sources":["../src/components/selectors/custom-selector/custom-selector.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { OutsideClickBox } from \"../../boxes\";\nimport { GridCenter } from \"../../containers\";\nimport { HorizontalDivider } from \"../../dividers\";\nimport { ShortDownArrowIcon } from \"../../icons/short-dropdown-arrow-icon\";\nimport { EighteenRegular } from \"../../texts\";\nimport { CustomSelectorProps as Props } from \"./interfaces\";\nimport { CustomOptionBox } from \"./partials\";\n\nexport const CustomSelector: React.FC<Props> = ({\n  value,\n  onChange,\n  options,\n  width = [\"100%\"],\n  textTransform = \"capitalize\",\n}) => {\n  const [showOptions, setShowOptions] = useState(false);\n\n  /* List of options to be displayed below */\n  const notSelectedOptions = useMemo(() => {\n    return options.filter(({ title }) => title !== value.title);\n  }, [options, value]);\n\n  const noOptions = !notSelectedOptions.length;\n\n  const onClick = () => !noOptions && setShowOptions((prev) => !prev);\n\n  return (\n    <OutsideClickBox\n      data-test=\"custom-selector\"\n      onClickOutside={() => setShowOptions(false)}\n    >\n      <GridCenter\n        width={width}\n        gap=\"5px\"\n        onClick={onClick}\n        sx={{\n          position: \"relative\",\n          gridTemplateColumns: \"1fr max-content\",\n          gap: \"5px\",\n          cursor: noOptions ? \"default\" : \"pointer\",\n          pb: \"10px\",\n          borderBottom: \"2px solid\",\n          borderColor: showOptions ? \"cl_blue\" : \"cl_lightGrey\",\n          userSelect: \"none\",\n        }}\n        data-test=\"current-value\"\n      >\n        {noOptions ? (\n          <EighteenRegular color=\"cl_grey\">No options</EighteenRegular>\n        ) : (\n          <EighteenRegular cursor=\"pointer\" textTransform={textTransform}>\n            {value.title}\n          </EighteenRegular>\n        )}\n\n        <ShortDownArrowIcon\n          width=\"10px\"\n          style={{\n            transform: `rotate(${showOptions ? \"180deg\" : \"0deg\"})`,\n            transition: \"all 0.3s\",\n          }}\n        />\n\n        {showOptions && (\n          <Box\n            width={width}\n            sx={{\n              position: \"absolute\",\n              left: \"0\",\n              top: \"calc(100% + 2px)\",\n              border: \"1px solid\",\n              borderRadius: \"0 0 4px 4px\",\n              borderColor: \"cl_lightGrey\",\n              borderTopStyle: \"none\",\n              overflow: \"hidden\",\n              boxShadow: \"2px 3px 10px #0000001A\",\n              userSelect: \"none\",\n              bg: \"cl_white\",\n            }}\n            data-test=\"options-list\"\n          >\n            {notSelectedOptions.map((option, idx) => (\n              <React.Fragment key={`${idx}-${option.title}`}>\n                <CustomOptionBox\n                  {...option}\n                  onClick={() => {\n                    onChange(option);\n                    setShowOptions(false);\n                  }}\n                  textTransform={textTransform}\n                  data-test=\"selector-option\"\n                />\n\n                {idx !== notSelectedOptions.length - 1 && (\n                  <HorizontalDivider\n                    height=\"1px\"\n                    color=\"cl_lightGrey\"\n                    opacity=\"0.5\"\n                    sx={{ mx: \"2px\" }}\n                  />\n                )}\n              </React.Fragment>\n            ))}\n          </Box>\n        )}\n      </GridCenter>\n    </OutsideClickBox>\n  );\n};\n"],"names":["CustomSelector","value","onChange","options","width","textTransform","showOptions","setShowOptions","useState","notSelectedOptions","useMemo","filter","title","noOptions","length","jsx","OutsideClickBox","GridCenter","onClick","prev","position","gridTemplateColumns","gap","cursor","pb","borderBottom","borderColor","userSelect","EighteenRegular","ShortDownArrowIcon","transform","transition","Box","left","top","border","borderRadius","borderTopStyle","overflow","boxShadow","bg","map","option","idx","jsxs","React","CustomOptionBox","HorizontalDivider","mx"],"mappings":";;;;;;;;;;AAYO,MAAMA,IAAkCA,CAAC;AAAA,EAC9CC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,OAAAA,IAAQ,CAAC,MAAM;AAAA,EACfC,eAAAA,IAAgB;AAClB,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAG9CC,IAAqBC,EAAQ,MAC1BP,EAAQQ,OAAO,CAAC;AAAA,IAAEC,OAAAA;AAAAA,EAAAA,MAAYA,MAAUX,EAAMW,KAAK,GACzD,CAACT,GAASF,CAAK,CAAC,GAEbY,IAAY,CAACJ,EAAmBK;AAItC,SACG,gBAAAC,EAAAC,GAAA,EACC,aAAU,mBACV,gBAAgB,MAAMT,EAAe,EAAK,GAE1C,4BAACU,GACC,EAAA,OAAAb,GACA,KAAI,OACJ,SAVUc,MAAM,CAACL,KAAaN,EAAgBY,CAAAA,MAAS,CAACA,CAAI,GAW5D,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,qBAAqB;AAAA,IACrBC,KAAK;AAAA,IACLC,QAAQV,IAAY,YAAY;AAAA,IAChCW,IAAI;AAAA,IACJC,cAAc;AAAA,IACdC,aAAapB,IAAc,YAAY;AAAA,IACvCqB,YAAY;AAAA,EAAA,GAEd,aAAU,iBAETd,UAAAA;AAAAA,IAAAA,IACE,gBAAAE,EAAAa,GAAA,EAAgB,OAAM,WAAU,UAAU,cAAA,IAE1C,gBAAAb,EAAAa,GAAA,EAAgB,QAAO,WAAU,eAAAvB,GAC/BJ,UAAAA,EAAMW,OACT;AAAA,IAGD,gBAAAG,EAAAc,GAAA,EACC,OAAM,QACN,OAAO;AAAA,MACLC,WAAY,UAASxB,IAAc,WAAW,MAAO;AAAA,MACrDyB,YAAY;AAAA,IAAA,GACZ;AAAA,IAGHzB,KACC,gBAAAS,EAACiB,GACC,EAAA,OAAA5B,GACA,IAAI;AAAA,MACFgB,UAAU;AAAA,MACVa,MAAM;AAAA,MACNC,KAAK;AAAA,MACLC,QAAQ;AAAA,MACRC,cAAc;AAAA,MACdV,aAAa;AAAA,MACbW,gBAAgB;AAAA,MAChBC,UAAU;AAAA,MACVC,WAAW;AAAA,MACXZ,YAAY;AAAA,MACZa,IAAI;AAAA,IACN,GACA,aAAU,gBAET/B,UAAmBgC,EAAAA,IAAI,CAACC,GAAQC,MAC/B,gBAAAC,EAACC,EAAM,UAAN,EACC,UAAA;AAAA,MAAA,gBAAA9B,EAAC+B,GACKJ,EAAAA,GAAAA,GACJ,SAAS,MAAM;AACbxC,QAAAA,EAASwC,CAAM,GACfnC,EAAe,EAAK;AAAA,MAAA,GAEtB,eAAAF,GACA,aAAU,mBAAiB;AAAA,MAG5BsC,MAAQlC,EAAmBK,SAAS,KAClC,gBAAAC,EAAAgC,GAAA,EACC,QAAO,OACP,OAAM,gBACN,SAAQ,OACR,IAAI;AAAA,QAAEC,IAAI;AAAA,MAAA,GAEb;AAAA,IAAA,KAlBmB,GAAEL,CAAI,IAAGD,EAAO9B,KAAM,EAmB5C,CACD,GACH;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;"}

package/lib/sd-component-library116.js

@@ -1,83 +1,49 @@
-import { j as o } from "./sd-component-library195.js";
-import { useState as x } from "react";
-import { BaseLabel as f } from "./sd-component-library228.js";
-import { OutsideClickBox as u } from "./sd-component-library14.js";
-import { ReactComponent as h } from "./sd-component-library186.js";
-import { SecondaryCustomSelectorOptionsBox as S } from "./sd-component-library267.js";
-import { GridContainerV2 as g } from "./sd-component-library41.js";
+import { jsxs as s, jsx as o } from "./sd-component-library195.js";
+import { useState as u } from "react";
+import { OutsideClickBox as x } from "./sd-component-library14.js";
+import { BaseLabel as h } from "./sd-component-library228.js";
+import { ReactComponent as S } from "./sd-component-library186.js";
+import { SecondaryCustomSelectorOptionsBox as g } from "./sd-component-library280.js";
 import { ResponsiveTextV2 as C } from "./sd-component-library147.js";
-import { FlexCenter as j } from "./sd-component-library37.js";
-const R = ({
-  value: l,
-  onChange: c,
+import { GridContainerV2 as O } from "./sd-component-library41.js";
+import { FlexCenter as y } from "./sd-component-library37.js";
+const I = ({
+  value: c,
+  onChange: p,
   options: t,
-  width: p,
-  label: m,
-  variant: s = "customSecondary",
-  containerSx: a
+  width: m,
+  label: a,
+  variant: i = "customSecondary",
+  containerSx: d
 }) => {
-  const [r, i] = x(!1), n = t.find((e) => e.id === l.id), d = () => i(!1);
-  return n ? /* @__PURE__ */ o.jsxs(
-    g,
-    {
-      width: p,
-      variant: `_containers.selectors.${s}`,
-      sx: { cursor: "default", ...a },
-      children: [
-        /* @__PURE__ */ o.jsx(f, { variant: `selectors.${s}`, label: m }),
-        /* @__PURE__ */ o.jsxs(
-          u,
-          {
-            onClickOutside: d,
-            onClick: () => i((e) => !e),
-            sx: {
-              position: "relative",
-              display: "grid",
-              gridTemplateColumns: "1fr max-content",
-              gap: "5px",
-              alignItems: "center",
-              cursor: "pointer",
-              pb: "12px",
-              borderBottom: "2px solid",
-              borderColor: "cl_lightGrey"
-            },
-            children: [
-              /* @__PURE__ */ o.jsx(
-                C,
-                {
-                  fontSizeWeight: [18, "regular"],
-                  color: r ? "cl_purple" : "cl_darkGrey",
-                  children: n.title
-                }
-              ),
-              /* @__PURE__ */ o.jsx(
-                j,
-                {
-                  width: "10px",
-                  height: "10px",
-                  sx: {
-                    transform: `rotate3d(${r ? 1 : 0}, 0, 0, 180deg)`,
-                    transition: "all 0.2s",
-                    fill: r ? "cl_purple" : "cl_blue"
-                  },
-                  children: /* @__PURE__ */ o.jsx(h, {})
-                }
-              ),
-              r && /* @__PURE__ */ o.jsx(
-                S,
-                {
-                  options: t,
-                  onSelect: c
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  ) : null;
+  const [r, n] = u(!1), l = t.find((e) => e.id === c.id), f = () => n(!1);
+  return l ? /* @__PURE__ */ s(O, { width: m, variant: `_containers.selectors.${i}`, sx: {
+    cursor: "default",
+    ...d
+  }, children: [
+    /* @__PURE__ */ o(h, { variant: `selectors.${i}`, label: a }),
+    /* @__PURE__ */ s(x, { onClickOutside: f, onClick: () => n((e) => !e), sx: {
+      position: "relative",
+      display: "grid",
+      gridTemplateColumns: "1fr max-content",
+      gap: "5px",
+      alignItems: "center",
+      cursor: "pointer",
+      pb: "12px",
+      borderBottom: "2px solid",
+      borderColor: "cl_lightGrey"
+    }, children: [
+      /* @__PURE__ */ o(C, { fontSizeWeight: [18, "regular"], color: r ? "cl_purple" : "cl_darkGrey", children: l.title }),
+      /* @__PURE__ */ o(y, { width: "10px", height: "10px", sx: {
+        transform: `rotate3d(${r ? 1 : 0}, 0, 0, 180deg)`,
+        transition: "all 0.2s",
+        fill: r ? "cl_purple" : "cl_blue"
+      }, children: /* @__PURE__ */ o(S, {}) }),
+      r && /* @__PURE__ */ o(g, { options: t, onSelect: p })
+    ] })
+  ] }) : null;
 };
 export {
-  R as SecondaryCustomSelector
+  I as SecondaryCustomSelector
 };
 //# sourceMappingURL=sd-component-library116.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library116.js","sources":["../src/components/selectors/secondary-custom-selector/secondary-custom-selector.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { FlexCenter, Grid, OutsideClickBox } from \"../../../index\";\nimport { ShortDownArrowIcon } from \"../../icons/short-dropdown-arrow-icon\";\nimport { BaseLabel } from \"../../labels/base-label\";\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport { SecondaryCustomSelectorProps as Props } from \"./interfaces\";\nimport { SecondaryCustomSelectorOptionsBox } from \"./partials\";\n\nexport const SecondaryCustomSelector = <T extends string = string>({\n  value,\n  onChange,\n  options,\n  width,\n  label,\n  variant = \"customSecondary\",\n  containerSx,\n}: Props<T>) => {\n  const [showOptions, setShowOptions] = useState(false);\n\n  const selectedOption = options.find((option) => option.id === value.id);\n\n  const hideOptions = () => setShowOptions(false);\n\n  if (!selectedOption) return null;\n\n  return (\n    <Grid\n      width={width}\n      variant={`_containers.selectors.${variant}`}\n      sx={{ cursor: \"default\", ...containerSx }}\n    >\n      <BaseLabel variant={`selectors.${variant}`} label={label} />\n\n      <OutsideClickBox\n        onClickOutside={hideOptions}\n        onClick={() => setShowOptions((prev) => !prev)}\n        sx={{\n          position: \"relative\",\n          display: \"grid\",\n          gridTemplateColumns: \"1fr max-content\",\n          gap: \"5px\",\n          alignItems: \"center\",\n          cursor: \"pointer\",\n          pb: \"12px\",\n          borderBottom: \"2px solid\",\n          borderColor: \"cl_lightGrey\",\n        }}\n      >\n        <ResponsiveTextV2\n          fontSizeWeight={[18, \"regular\"]}\n          color={showOptions ? \"cl_purple\" : \"cl_darkGrey\"}\n        >\n          {selectedOption.title}\n        </ResponsiveTextV2>\n\n        <FlexCenter\n          width=\"10px\"\n          height=\"10px\"\n          sx={{\n            transform: `rotate3d(${showOptions ? 1 : 0}, 0, 0, 180deg)`,\n            transition: \"all 0.2s\",\n            fill: showOptions ? \"cl_purple\" : \"cl_blue\",\n          }}\n        >\n          <ShortDownArrowIcon />\n        </FlexCenter>\n\n        {showOptions && (\n          <SecondaryCustomSelectorOptionsBox\n            options={options}\n            onSelect={onChange}\n          />\n        )}\n      </OutsideClickBox>\n    </Grid>\n  );\n};\n"],"names":["SecondaryCustomSelector","value","onChange","options","width","label","variant","containerSx","showOptions","setShowOptions","useState","selectedOption","option","hideOptions","jsxs","Grid","jsx","BaseLabel","OutsideClickBox","prev","ResponsiveTextV2","FlexCenter","ShortDownArrowIcon","SecondaryCustomSelectorOptionsBox"],"mappings":";;;;;;;;;AASO,MAAMA,IAA0B,CAA4B;AAAA,EACjE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC;AACF,MAAgB;AACd,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9CC,IAAiBR,EAAQ,KAAK,CAACS,MAAWA,EAAO,OAAOX,EAAM,EAAE,GAEhEY,IAAc,MAAMJ,EAAe,EAAK;AAE9C,SAAKE,IAGHG,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAX;AAAA,MACA,SAAS,yBAAyBE,CAAO;AAAA,MACzC,IAAI,EAAE,QAAQ,WAAW,GAAGC,EAAY;AAAA,MAExC,UAAA;AAAA,QAAAS,gBAAAA,MAACC,GAAU,EAAA,SAAS,aAAaX,CAAO,IAAI,OAAAD,GAAc;AAAA,QAE1DS,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,gBAAgBL;AAAA,YAChB,SAAS,MAAMJ,EAAe,CAACU,MAAS,CAACA,CAAI;AAAA,YAC7C,IAAI;AAAA,cACF,UAAU;AAAA,cACV,SAAS;AAAA,cACT,qBAAqB;AAAA,cACrB,KAAK;AAAA,cACL,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,IAAI;AAAA,cACJ,cAAc;AAAA,cACd,aAAa;AAAA,YACf;AAAA,YAEA,UAAA;AAAA,cAAAH,gBAAAA,EAAA;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,kBAC9B,OAAOZ,IAAc,cAAc;AAAA,kBAElC,UAAeG,EAAA;AAAA,gBAAA;AAAA,cAClB;AAAA,cAEAK,gBAAAA,EAAA;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,IAAI;AAAA,oBACF,WAAW,YAAYb,IAAc,IAAI,CAAC;AAAA,oBAC1C,YAAY;AAAA,oBACZ,MAAMA,IAAc,cAAc;AAAA,kBACpC;AAAA,kBAEA,gCAACc,GAAmB,EAAA;AAAA,gBAAA;AAAA,cACtB;AAAA,cAECd,KACCQ,gBAAAA,EAAA;AAAA,gBAACO;AAAA,gBAAA;AAAA,kBACC,SAAApB;AAAA,kBACA,UAAUD;AAAA,gBAAA;AAAA,cACZ;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAlDwB;AAqD9B;"}
+{"version":3,"file":"sd-component-library116.js","sources":["../src/components/selectors/secondary-custom-selector/secondary-custom-selector.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { FlexCenter, Grid, OutsideClickBox } from \"../../../index\";\nimport { ShortDownArrowIcon } from \"../../icons/short-dropdown-arrow-icon\";\nimport { BaseLabel } from \"../../labels/base-label\";\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport { SecondaryCustomSelectorProps as Props } from \"./interfaces\";\nimport { SecondaryCustomSelectorOptionsBox } from \"./partials\";\n\nexport const SecondaryCustomSelector = <T extends string = string>({\n  value,\n  onChange,\n  options,\n  width,\n  label,\n  variant = \"customSecondary\",\n  containerSx,\n}: Props<T>) => {\n  const [showOptions, setShowOptions] = useState(false);\n\n  const selectedOption = options.find((option) => option.id === value.id);\n\n  const hideOptions = () => setShowOptions(false);\n\n  if (!selectedOption) return null;\n\n  return (\n    <Grid\n      width={width}\n      variant={`_containers.selectors.${variant}`}\n      sx={{ cursor: \"default\", ...containerSx }}\n    >\n      <BaseLabel variant={`selectors.${variant}`} label={label} />\n\n      <OutsideClickBox\n        onClickOutside={hideOptions}\n        onClick={() => setShowOptions((prev) => !prev)}\n        sx={{\n          position: \"relative\",\n          display: \"grid\",\n          gridTemplateColumns: \"1fr max-content\",\n          gap: \"5px\",\n          alignItems: \"center\",\n          cursor: \"pointer\",\n          pb: \"12px\",\n          borderBottom: \"2px solid\",\n          borderColor: \"cl_lightGrey\",\n        }}\n      >\n        <ResponsiveTextV2\n          fontSizeWeight={[18, \"regular\"]}\n          color={showOptions ? \"cl_purple\" : \"cl_darkGrey\"}\n        >\n          {selectedOption.title}\n        </ResponsiveTextV2>\n\n        <FlexCenter\n          width=\"10px\"\n          height=\"10px\"\n          sx={{\n            transform: `rotate3d(${showOptions ? 1 : 0}, 0, 0, 180deg)`,\n            transition: \"all 0.2s\",\n            fill: showOptions ? \"cl_purple\" : \"cl_blue\",\n          }}\n        >\n          <ShortDownArrowIcon />\n        </FlexCenter>\n\n        {showOptions && (\n          <SecondaryCustomSelectorOptionsBox\n            options={options}\n            onSelect={onChange}\n          />\n        )}\n      </OutsideClickBox>\n    </Grid>\n  );\n};\n"],"names":["SecondaryCustomSelector","value","onChange","options","width","label","variant","containerSx","showOptions","setShowOptions","useState","selectedOption","find","option","id","hideOptions","Grid","cursor","jsx","BaseLabel","jsxs","OutsideClickBox","prev","position","display","gridTemplateColumns","gap","alignItems","pb","borderBottom","borderColor","ResponsiveTextV2","title","FlexCenter","transform","transition","fill","ShortDownArrowIcon","SecondaryCustomSelectorOptionsBox"],"mappings":";;;;;;;;;AASO,MAAMA,IAA0B,CAA4B;AAAA,EACjEC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,aAAAA;AACQ,MAAM;AACd,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9CC,IAAiBR,EAAQS,KAAMC,OAAWA,EAAOC,OAAOb,EAAMa,EAAE,GAEhEC,IAAcA,MAAMN,EAAe,EAAK;AAE9C,SAAKE,sBAGFK,GACC,EAAA,OAAAZ,GACA,SAAU,yBAAwBE,CAAQ,IAC1C,IAAI;AAAA,IAAEW,QAAQ;AAAA,IAAW,GAAGV;AAAAA,EAE5B,GAAA,UAAA;AAAA,IAAA,gBAAAW,EAACC,GAAU,EAAA,SAAU,aAAYb,CAAQ,IAAG,OAAAD,GAAa;AAAA,IAEzD,gBAAAe,EAACC,GACC,EAAA,gBAAgBN,GAChB,SAAS,MAAMN,EAAgBa,CAASA,MAAA,CAACA,CAAI,GAC7C,IAAI;AAAA,MACFC,UAAU;AAAA,MACVC,SAAS;AAAA,MACTC,qBAAqB;AAAA,MACrBC,KAAK;AAAA,MACLC,YAAY;AAAA,MACZV,QAAQ;AAAA,MACRW,IAAI;AAAA,MACJC,cAAc;AAAA,MACdC,aAAa;AAAA,IAGf,GAAA,UAAA;AAAA,MAAC,gBAAAZ,EAAAa,GAAA,EACC,gBAAgB,CAAC,IAAI,SAAS,GAC9B,OAAOvB,IAAc,cAAc,eAElCG,UAAAA,EAAeqB,MAClB,CAAA;AAAA,wBAECC,GACC,EAAA,OAAM,QACN,QAAO,QACP,IAAI;AAAA,QACFC,WAAY,YAAW1B,IAAc,IAAI,CAAE;AAAA,QAC3C2B,YAAY;AAAA,QACZC,MAAM5B,IAAc,cAAc;AAAA,MACpC,GAEA,UAAC,gBAAAU,EAAAmB,GAAA,CAAA,CAAkB,EACrB,CAAA;AAAA,MAEC7B,KACC,gBAAAU,EAACoB,GACC,EAAA,SAAAnC,GACA,UAAUD,GAEb;AAAA,IAAA,GACH;AAAA,EACF,EAAA,CAAA,IAnD0B;AAqD9B;"}

package/lib/sd-component-library117.js

@@ -1,7 +1,7 @@
-import { j as t } from "./sd-component-library195.js";
+import { jsx as t } from "./sd-component-library195.js";
 import { SecondaryCustomSelector as o } from "./sd-component-library116.js";
-const s = (r) => /* @__PURE__ */ t.jsx(o, { ...r, variant: "customTertiary" });
+const a = (r) => /* @__PURE__ */ t(o, { ...r, variant: "customTertiary" });
 export {
-  s as TertiaryCustomSelector
+  a as TertiaryCustomSelector
 };
 //# sourceMappingURL=sd-component-library117.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library117.js","sources":["../src/components/selectors/tertiary-custom-selector/tertiary-custom-selector.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { SecondaryCustomSelector } from \"../secondary-custom-selector\";\nimport { TertiaryCustomSelectorProps as Props } from \"./interfaces\";\n\nexport const TertiaryCustomSelector: React.FC<Props> = (props) => {\n  return <SecondaryCustomSelector {...props} variant=\"customTertiary\" />;\n};\n"],"names":["TertiaryCustomSelector","props","jsx","SecondaryCustomSelector"],"mappings":";;AAKa,MAAAA,IAA0C,CAACC,MAC9CC,gBAAAA,EAAAA,IAAAC,GAAA,EAAyB,GAAGF,GAAO,SAAQ,iBAAiB,CAAA;"}
+{"version":3,"file":"sd-component-library117.js","sources":["../src/components/selectors/tertiary-custom-selector/tertiary-custom-selector.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { SecondaryCustomSelector } from \"../secondary-custom-selector\";\nimport { TertiaryCustomSelectorProps as Props } from \"./interfaces\";\n\nexport const TertiaryCustomSelector: React.FC<Props> = (props) => {\n  return <SecondaryCustomSelector {...props} variant=\"customTertiary\" />;\n};\n"],"names":["TertiaryCustomSelector","props","jsx","SecondaryCustomSelector"],"mappings":";;AAKO,MAAMA,IAA2CC,CAAUA,MACxD,gBAAAC,EAAAC,GAAA,EAA4BF,GAAAA,GAAO,SAAQ,iBAAmB,CAAA;"}

package/lib/sd-component-library118.js

@@ -1,75 +1,45 @@
-import { j as o } from "./sd-component-library195.js";
-import { useState as d } from "react";
-import { OutsideClickBox as a } from "./sd-component-library14.js";
+import { jsxs as n, jsx as e } from "./sd-component-library195.js";
+import { useState as a } from "react";
+import { OutsideClickBox as f } from "./sd-component-library14.js";
 import { ReactComponent as x } from "./sd-component-library186.js";
-import { ResponsiveTextV2 as f } from "./sd-component-library147.js";
+import { ResponsiveTextV2 as h } from "./sd-component-library147.js";
 import { BaseTextV2 as u } from "./sd-component-library135.js";
-import { FlexCenter as h } from "./sd-component-library37.js";
-import { SecondaryCustomSelectorOptionsBox as g } from "./sd-component-library267.js";
-const k = ({
-  width: l,
-  options: r,
-  value: n,
-  onChange: p,
-  label: c
+import { FlexCenter as g } from "./sd-component-library37.js";
+import { SecondaryCustomSelectorOptionsBox as C } from "./sd-component-library280.js";
+const v = ({
+  width: s,
+  options: t,
+  value: p,
+  onChange: c,
+  label: m
 }) => {
-  const [e, i] = d(!1), s = r.find((t) => t.id === n.id), m = () => i(!1);
-  return s ? /* @__PURE__ */ o.jsxs(
-    a,
-    {
-      onClickOutside: m,
-      onClick: () => i((t) => !t),
-      sx: {
-        width: l,
-        position: "relative",
-        display: "grid",
-        gridTemplateColumns: "1fr max-content",
-        gap: "5px",
-        alignItems: "center",
-        cursor: "pointer",
-        pb: "12px",
-        borderBottom: "2px solid",
-        borderColor: "cl_lightGrey"
-      },
-      children: [
-        /* @__PURE__ */ o.jsxs(f, { fontSizeWeight: [18, "regular"], color: "cl_grey", children: [
-          c,
-          " ",
-          /* @__PURE__ */ o.jsx(
-            u,
-            {
-              color: e ? "cl_purple" : "cl_darkGrey",
-              fontWeight: "700",
-              display: "inline",
-              children: s.title
-            }
-          )
-        ] }),
-        /* @__PURE__ */ o.jsx(
-          h,
-          {
-            width: "10px",
-            height: "10px",
-            sx: {
-              transform: `rotate3d(${e ? 1 : 0}, 0, 0, 180deg)`,
-              transition: "all 0.2s",
-              fill: e ? "cl_purple" : "cl_blue"
-            },
-            children: /* @__PURE__ */ o.jsx(x, {})
-          }
-        ),
-        e && /* @__PURE__ */ o.jsx(
-          g,
-          {
-            options: r,
-            onSelect: p
-          }
-        )
-      ]
-    }
-  ) : null;
+  const [o, i] = a(!1), l = t.find((r) => r.id === p.id), d = () => i(!1);
+  return l ? /* @__PURE__ */ n(f, { onClickOutside: d, onClick: () => i((r) => !r), sx: {
+    width: s,
+    position: "relative",
+    display: "grid",
+    gridTemplateColumns: "1fr max-content",
+    gap: "5px",
+    alignItems: "center",
+    cursor: "pointer",
+    pb: "12px",
+    borderBottom: "2px solid",
+    borderColor: "cl_lightGrey"
+  }, children: [
+    /* @__PURE__ */ n(h, { fontSizeWeight: [18, "regular"], color: "cl_grey", children: [
+      m,
+      " ",
+      /* @__PURE__ */ e(u, { color: o ? "cl_purple" : "cl_darkGrey", fontWeight: "700", display: "inline", children: l.title })
+    ] }),
+    /* @__PURE__ */ e(g, { width: "10px", height: "10px", sx: {
+      transform: `rotate3d(${o ? 1 : 0}, 0, 0, 180deg)`,
+      transition: "all 0.2s",
+      fill: o ? "cl_purple" : "cl_blue"
+    }, children: /* @__PURE__ */ e(x, {}) }),
+    o && /* @__PURE__ */ e(C, { options: t, onSelect: c })
+  ] }) : null;
 };
 export {
-  k as CombinedSecondaryCustomSelector
+  v as CombinedSecondaryCustomSelector
 };
 //# sourceMappingURL=sd-component-library118.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library118.js","sources":["../src/components/selectors/combined-secondary-custom-selector/combined-secondary-custom-selector.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { OutsideClickBox } from \"../../boxes\";\nimport { FlexCenter } from \"../../containers\";\nimport { ShortDownArrowIcon } from \"../../icons/short-dropdown-arrow-icon\";\nimport { BaseTextV2 } from \"../../texts\";\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport { SecondaryCustomSelectorOptionsBox } from \"../secondary-custom-selector/partials\";\nimport { CombinedSecondaryCustomSelectorProps as Props } from \"./interfaces\";\n\nexport const CombinedSecondaryCustomSelector: React.FC<Props> = ({\n  width,\n  options,\n  value,\n  onChange,\n  label,\n}) => {\n  const [showOptions, setShowOptions] = useState(false);\n\n  const selectedOption = options.find((option) => option.id === value.id);\n\n  const hideOptions = () => setShowOptions(false);\n\n  if (!selectedOption) return null;\n\n  return (\n    <OutsideClickBox\n      onClickOutside={hideOptions}\n      onClick={() => setShowOptions((prev) => !prev)}\n      sx={{\n        width,\n        position: \"relative\",\n        display: \"grid\",\n        gridTemplateColumns: \"1fr max-content\",\n        gap: \"5px\",\n        alignItems: \"center\",\n        cursor: \"pointer\",\n        pb: \"12px\",\n        borderBottom: \"2px solid\",\n        borderColor: \"cl_lightGrey\",\n      }}\n    >\n      <ResponsiveTextV2 fontSizeWeight={[18, \"regular\"]} color=\"cl_grey\">\n        {label}{\" \"}\n        <BaseTextV2\n          color={showOptions ? \"cl_purple\" : \"cl_darkGrey\"}\n          fontWeight=\"700\"\n          display=\"inline\"\n        >\n          {selectedOption.title}\n        </BaseTextV2>\n      </ResponsiveTextV2>\n\n      <FlexCenter\n        width=\"10px\"\n        height=\"10px\"\n        sx={{\n          transform: `rotate3d(${showOptions ? 1 : 0}, 0, 0, 180deg)`,\n          transition: \"all 0.2s\",\n          fill: showOptions ? \"cl_purple\" : \"cl_blue\",\n        }}\n      >\n        <ShortDownArrowIcon />\n      </FlexCenter>\n\n      {showOptions && (\n        <SecondaryCustomSelectorOptionsBox\n          options={options}\n          onSelect={onChange}\n        />\n      )}\n    </OutsideClickBox>\n  );\n};\n"],"names":["CombinedSecondaryCustomSelector","width","options","value","onChange","label","showOptions","setShowOptions","useState","selectedOption","option","hideOptions","jsxs","OutsideClickBox","prev","ResponsiveTextV2","jsx","BaseTextV2","FlexCenter","ShortDownArrowIcon","SecondaryCustomSelectorOptionsBox"],"mappings":";;;;;;;;AAUO,MAAMA,IAAmD,CAAC;AAAA,EAC/D,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9CC,IAAiBP,EAAQ,KAAK,CAACQ,MAAWA,EAAO,OAAOP,EAAM,EAAE,GAEhEQ,IAAc,MAAMJ,EAAe,EAAK;AAE9C,SAAKE,IAGHG,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAgBF;AAAA,MAChB,SAAS,MAAMJ,EAAe,CAACO,MAAS,CAACA,CAAI;AAAA,MAC7C,IAAI;AAAA,QACF,OAAAb;AAAA,QACA,UAAU;AAAA,QACV,SAAS;AAAA,QACT,qBAAqB;AAAA,QACrB,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,cAAc;AAAA,QACd,aAAa;AAAA,MACf;AAAA,MAEA,UAAA;AAAA,QAAAW,gBAAAA,OAACG,KAAiB,gBAAgB,CAAC,IAAI,SAAS,GAAG,OAAM,WACtD,UAAA;AAAA,UAAAV;AAAA,UAAO;AAAA,UACRW,gBAAAA,EAAA;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAOX,IAAc,cAAc;AAAA,cACnC,YAAW;AAAA,cACX,SAAQ;AAAA,cAEP,UAAeG,EAAA;AAAA,YAAA;AAAA,UAClB;AAAA,QAAA,GACF;AAAA,QAEAO,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAI;AAAA,cACF,WAAW,YAAYZ,IAAc,IAAI,CAAC;AAAA,cAC1C,YAAY;AAAA,cACZ,MAAMA,IAAc,cAAc;AAAA,YACpC;AAAA,YAEA,gCAACa,GAAmB,EAAA;AAAA,UAAA;AAAA,QACtB;AAAA,QAECb,KACCU,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,SAAAlB;AAAA,YACA,UAAUE;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IA9CsB;AAkD9B;"}
+{"version":3,"file":"sd-component-library118.js","sources":["../src/components/selectors/combined-secondary-custom-selector/combined-secondary-custom-selector.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { OutsideClickBox } from \"../../boxes\";\nimport { FlexCenter } from \"../../containers\";\nimport { ShortDownArrowIcon } from \"../../icons/short-dropdown-arrow-icon\";\nimport { BaseTextV2 } from \"../../texts\";\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport { SecondaryCustomSelectorOptionsBox } from \"../secondary-custom-selector/partials\";\nimport { CombinedSecondaryCustomSelectorProps as Props } from \"./interfaces\";\n\nexport const CombinedSecondaryCustomSelector: React.FC<Props> = ({\n  width,\n  options,\n  value,\n  onChange,\n  label,\n}) => {\n  const [showOptions, setShowOptions] = useState(false);\n\n  const selectedOption = options.find((option) => option.id === value.id);\n\n  const hideOptions = () => setShowOptions(false);\n\n  if (!selectedOption) return null;\n\n  return (\n    <OutsideClickBox\n      onClickOutside={hideOptions}\n      onClick={() => setShowOptions((prev) => !prev)}\n      sx={{\n        width,\n        position: \"relative\",\n        display: \"grid\",\n        gridTemplateColumns: \"1fr max-content\",\n        gap: \"5px\",\n        alignItems: \"center\",\n        cursor: \"pointer\",\n        pb: \"12px\",\n        borderBottom: \"2px solid\",\n        borderColor: \"cl_lightGrey\",\n      }}\n    >\n      <ResponsiveTextV2 fontSizeWeight={[18, \"regular\"]} color=\"cl_grey\">\n        {label}{\" \"}\n        <BaseTextV2\n          color={showOptions ? \"cl_purple\" : \"cl_darkGrey\"}\n          fontWeight=\"700\"\n          display=\"inline\"\n        >\n          {selectedOption.title}\n        </BaseTextV2>\n      </ResponsiveTextV2>\n\n      <FlexCenter\n        width=\"10px\"\n        height=\"10px\"\n        sx={{\n          transform: `rotate3d(${showOptions ? 1 : 0}, 0, 0, 180deg)`,\n          transition: \"all 0.2s\",\n          fill: showOptions ? \"cl_purple\" : \"cl_blue\",\n        }}\n      >\n        <ShortDownArrowIcon />\n      </FlexCenter>\n\n      {showOptions && (\n        <SecondaryCustomSelectorOptionsBox\n          options={options}\n          onSelect={onChange}\n        />\n      )}\n    </OutsideClickBox>\n  );\n};\n"],"names":["CombinedSecondaryCustomSelector","width","options","value","onChange","label","showOptions","setShowOptions","useState","selectedOption","find","option","id","hideOptions","jsxs","OutsideClickBox","prev","position","display","gridTemplateColumns","gap","alignItems","cursor","pb","borderBottom","borderColor","ResponsiveTextV2","jsx","BaseTextV2","title","FlexCenter","transform","transition","fill","ShortDownArrowIcon","SecondaryCustomSelectorOptionsBox"],"mappings":";;;;;;;;AAUO,MAAMA,IAAmDA,CAAC;AAAA,EAC/DC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,OAAAA;AACF,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9CC,IAAiBP,EAAQQ,KAAMC,OAAWA,EAAOC,OAAOT,EAAMS,EAAE,GAEhEC,IAAcA,MAAMN,EAAe,EAAK;AAE9C,SAAKE,IAGH,gBAAAK,EAACC,GACC,EAAA,gBAAgBF,GAChB,SAAS,MAAMN,EAAgBS,CAASA,MAAA,CAACA,CAAI,GAC7C,IAAI;AAAA,IACFf,OAAAA;AAAAA,IACAgB,UAAU;AAAA,IACVC,SAAS;AAAA,IACTC,qBAAqB;AAAA,IACrBC,KAAK;AAAA,IACLC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,IAAI;AAAA,IACJC,cAAc;AAAA,IACdC,aAAa;AAAA,EAGf,GAAA,UAAA;AAAA,IAAA,gBAAAX,EAACY,KAAiB,gBAAgB,CAAC,IAAI,SAAS,GAAG,OAAM,WACtDrB,UAAAA;AAAAA,MAAAA;AAAAA,MAAO;AAAA,MACR,gBAAAsB,EAACC,GACC,EAAA,OAAOtB,IAAc,cAAc,eACnC,YAAW,OACX,SAAQ,UAEPG,UAAAA,EAAeoB,MAClB,CAAA;AAAA,IAAA,GACF;AAAA,sBAECC,GACC,EAAA,OAAM,QACN,QAAO,QACP,IAAI;AAAA,MACFC,WAAY,YAAWzB,IAAc,IAAI,CAAE;AAAA,MAC3C0B,YAAY;AAAA,MACZC,MAAM3B,IAAc,cAAc;AAAA,IACpC,GAEA,UAAC,gBAAAqB,EAAAO,GAAA,CAAA,CAAkB,EACrB,CAAA;AAAA,IAEC5B,KACC,gBAAAqB,EAACQ,GACC,EAAA,SAAAjC,GACA,UAAUE,GAEb;AAAA,EACH,EAAA,CAAA,IAhD0B;AAkD9B;"}

package/lib/sd-component-library119.js

@@ -1,34 +1,20 @@
-import { j as i } from "./sd-component-library195.js";
+import { jsx as i } from "./sd-component-library195.js";
 import { useMemo as S, useCallback as p } from "react";
-import { BaseSelectorV2 as u } from "./sd-component-library268.js";
+import { BaseSelectorV2 as u } from "./sd-component-library281.js";
 const g = ({
-  value: s,
-  onChange: r,
+  value: l,
+  onChange: t,
   defaultOptionObject: e,
   options: o,
-  ...l
+  ...s
 }) => {
-  const t = S(() => (e ? [e] : []).concat(o), [o, e]), c = p(
-    (n) => {
-      const m = t.find(
-        ({ title: a }) => a.trim().replaceAll(/\s{2,}/g, " ") === n
-      );
-      r(m);
-    },
-    [r, t]
-  );
-  return /* @__PURE__ */ i.jsx(
-    u,
-    {
-      selection: s,
-      options: t,
-      onSelect: c,
-      hasDefaultValue: !!e,
-      noOptionsToSelect: !o.length,
-      ...l,
-      "data-test": "selector-v2"
-    }
-  );
+  const r = S(() => (e ? [e] : []).concat(o), [o, e]), c = p((n) => {
+    const m = r.find(({
+      title: a
+    }) => a.trim().replaceAll(/\s{2,}/g, " ") === n);
+    t(m);
+  }, [t, r]);
+  return /* @__PURE__ */ i(u, { selection: l, options: r, onSelect: c, hasDefaultValue: !!e, noOptionsToSelect: !o.length, ...s, "data-test": "selector-v2" });
 };
 export {
   g as SelectorV2

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library119.js","sources":["../src/components/selectors/selector-v2/selector-v2.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\n\nimport { SelectorV2Props as Props, SelectorOptionV2 } from \"./interfaces\";\nimport { BaseSelectorV2 } from \"./partials\";\n\nexport const SelectorV2 = <T extends string = string>({\n  value,\n  onChange,\n  defaultOptionObject,\n  options,\n  ...baseProps\n}: Props<T>) => {\n  const allOptions = useMemo<SelectorOptionV2<T | null>[]>(() => {\n    return (\n      (defaultOptionObject\n        ? [defaultOptionObject]\n        : []) as SelectorOptionV2<T | null>[]\n    ).concat(options);\n  }, [options, defaultOptionObject]);\n\n  const onSelect = useCallback(\n    (selectionString: string) => {\n      const newSelection = allOptions.find(\n        ({ title }) =>\n          title.trim().replaceAll(/\\s{2,}/g, \" \") === selectionString\n      )!;\n      onChange(newSelection);\n    },\n    [onChange, allOptions]\n  );\n\n  return (\n    <BaseSelectorV2\n      selection={value}\n      options={allOptions}\n      onSelect={onSelect}\n      hasDefaultValue={!!defaultOptionObject}\n      noOptionsToSelect={!options.length}\n      {...baseProps}\n      data-test=\"selector-v2\"\n    />\n  );\n};\n"],"names":["SelectorV2","value","onChange","defaultOptionObject","options","baseProps","allOptions","useMemo","onSelect","useCallback","selectionString","newSelection","title","jsx","BaseSelectorV2"],"mappings":";;;AAKO,MAAMA,IAAa,CAA4B;AAAA,EACpD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAgB;AACR,QAAAC,IAAaC,EAAsC,OAEpDJ,IACG,CAACA,CAAmB,IACpB,CAAA,GACJ,OAAOC,CAAO,GACf,CAACA,GAASD,CAAmB,CAAC,GAE3BK,IAAWC;AAAA,IACf,CAACC,MAA4B;AAC3B,YAAMC,IAAeL,EAAW;AAAA,QAC9B,CAAC,EAAE,OAAAM,EACD,MAAAA,EAAM,KAAO,EAAA,WAAW,WAAW,GAAG,MAAMF;AAAA,MAAA;AAEhD,MAAAR,EAASS,CAAY;AAAA,IACvB;AAAA,IACA,CAACT,GAAUI,CAAU;AAAA,EAAA;AAIrB,SAAAO,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWb;AAAA,MACX,SAASK;AAAA,MACT,UAAAE;AAAA,MACA,iBAAiB,CAAC,CAACL;AAAA,MACnB,mBAAmB,CAACC,EAAQ;AAAA,MAC3B,GAAGC;AAAA,MACJ,aAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"sd-component-library119.js","sources":["../src/components/selectors/selector-v2/selector-v2.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\n\nimport { SelectorV2Props as Props, SelectorOptionV2 } from \"./interfaces\";\nimport { BaseSelectorV2 } from \"./partials\";\n\nexport const SelectorV2 = <T extends string = string>({\n  value,\n  onChange,\n  defaultOptionObject,\n  options,\n  ...baseProps\n}: Props<T>) => {\n  const allOptions = useMemo<SelectorOptionV2<T | null>[]>(() => {\n    return (\n      (defaultOptionObject\n        ? [defaultOptionObject]\n        : []) as SelectorOptionV2<T | null>[]\n    ).concat(options);\n  }, [options, defaultOptionObject]);\n\n  const onSelect = useCallback(\n    (selectionString: string) => {\n      const newSelection = allOptions.find(\n        ({ title }) =>\n          title.trim().replaceAll(/\\s{2,}/g, \" \") === selectionString\n      )!;\n      onChange(newSelection);\n    },\n    [onChange, allOptions]\n  );\n\n  return (\n    <BaseSelectorV2\n      selection={value}\n      options={allOptions}\n      onSelect={onSelect}\n      hasDefaultValue={!!defaultOptionObject}\n      noOptionsToSelect={!options.length}\n      {...baseProps}\n      data-test=\"selector-v2\"\n    />\n  );\n};\n"],"names":["SelectorV2","value","onChange","defaultOptionObject","options","baseProps","allOptions","useMemo","concat","onSelect","useCallback","selectionString","newSelection","find","title","trim","replaceAll","BaseSelectorV2","length"],"mappings":";;;AAKO,MAAMA,IAAa,CAA4B;AAAA,EACpDC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,qBAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACK,MAAM;AACRC,QAAAA,IAAaC,EAAsC,OAEpDJ,IACG,CAACA,CAAmB,IACpB,CAAA,GACJK,OAAOJ,CAAO,GACf,CAACA,GAASD,CAAmB,CAAC,GAE3BM,IAAWC,EACf,CAACC,MAA4B;AACrBC,UAAAA,IAAeN,EAAWO,KAC9B,CAAC;AAAA,MAAEC,OAAAA;AAAAA,IAAAA,MACDA,EAAMC,OAAOC,WAAW,WAAW,GAAG,MAAML,CAChD;AACAT,IAAAA,EAASU,CAAY;AAAA,EAAA,GAEvB,CAACV,GAAUI,CAAU,CACvB;AAEA,2BACGW,GACC,EAAA,WAAWhB,GACX,SAASK,GACT,UAAAG,GACA,iBAAiB,CAAC,CAACN,GACnB,mBAAmB,CAACC,EAAQc,QACxBb,GAAAA,GACJ,aAAU,cACV,CAAA;AAEN;"}

package/lib/sd-component-library12.js

@@ -1,18 +1,16 @@
-import { j as r } from "./sd-component-library195.js";
-import { Box as s } from "rebass";
-const x = (o) => {
-  const { children: t, ...e } = o;
-  return /* @__PURE__ */ r.jsx(
-    s,
-    {
-      "data-test": "mobile-hidden-box",
-      sx: { display: ["none", "block"] },
-      ...e,
-      children: t
-    }
-  );
+import { jsx as e } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
+import { Box as i } from "./sd-component-library199.js";
+const d = (o) => {
+  const {
+    children: r,
+    ...t
+  } = o;
+  return /* @__PURE__ */ e(i, { "data-test": "mobile-hidden-box", sx: {
+    display: ["none", "block"]
+  }, ...t, children: r });
 };
 export {
-  x as MobileHiddenBox
+  d as MobileHiddenBox
 };
 //# sourceMappingURL=sd-component-library12.js.map