@selfdecode/sd-component-library 4.0.73-vite4 → 4.0.73-vite5

package/lib/sd-component-library115.js

@@ -1,32 +1,32 @@
-import { j as o } from "./sd-component-library196.js";
-import u, { r as x } from "./sd-component-library193.js";
-import "./sd-component-library199.js";
-import { OutsideClickBox as f } from "./sd-component-library14.js";
-import { ReactComponent as g } from "./sd-component-library186.js";
-import { Box as b } from "./sd-component-library200.js";
-import { CustomOptionBox as j } from "./sd-component-library281.js";
-import { GridCenter as C } from "./sd-component-library44.js";
-import { EighteenRegular as m } from "./sd-component-library139.js";
-import { HorizontalDivider as S } from "./sd-component-library51.js";
-const $ = ({
+import { j as o } from "./sd-component-library195.js";
+import u, { useState as h, useMemo as f } from "react";
+import "./sd-component-library196.js";
+import { OutsideClickBox as g } from "./sd-component-library14.js";
+import { ReactComponent as b } from "./sd-component-library186.js";
+import { Box as j } from "./sd-component-library197.js";
+import { CustomOptionBox as C } from "./sd-component-library269.js";
+import { GridCenter as S } from "./sd-component-library44.js";
+import { EighteenRegular as x } from "./sd-component-library139.js";
+import { HorizontalDivider as _ } from "./sd-component-library51.js";
+const A = ({
   value: e,
-  onChange: d,
+  onChange: m,
   options: n,
   width: p = ["100%"],
   textTransform: c = "capitalize"
 }) => {
-  const [r, s] = x.useState(!1), i = x.useMemo(() => n.filter(({ title: t }) => t !== e.title), [n, e]), l = !i.length, h = () => !l && s((t) => !t);
+  const [r, s] = h(!1), i = f(() => n.filter(({ title: t }) => t !== e.title), [n, e]), l = !i.length, d = () => !l && s((t) => !t);
   return /* @__PURE__ */ o.jsx(
-    f,
+    g,
     {
       "data-test": "custom-selector",
       onClickOutside: () => s(!1),
       children: /* @__PURE__ */ o.jsxs(
-        C,
+        S,
         {
           width: p,
           gap: "5px",
-          onClick: h,
+          onClick: d,
           sx: {
             position: "relative",
             gridTemplateColumns: "1fr max-content",
@@ -39,9 +39,9 @@ const $ = ({
           },
           "data-test": "current-value",
           children: [
-            l ? /* @__PURE__ */ o.jsx(m, { color: "cl_grey", children: "No options" }) : /* @__PURE__ */ o.jsx(m, { cursor: "pointer", textTransform: c, children: e.title }),
+            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(
-              g,
+              b,
               {
                 width: "10px",
                 style: {
@@ -51,7 +51,7 @@ const $ = ({
               }
             ),
             r && /* @__PURE__ */ o.jsx(
-              b,
+              j,
               {
                 width: p,
                 sx: {
@@ -70,18 +70,18 @@ const $ = ({
                 "data-test": "options-list",
                 children: i.map((t, a) => /* @__PURE__ */ o.jsxs(u.Fragment, { children: [
                   /* @__PURE__ */ o.jsx(
-                    j,
+                    C,
                     {
                       ...t,
                       onClick: () => {
-                        d(t), s(!1);
+                        m(t), s(!1);
                       },
                       textTransform: c,
                       "data-test": "selector-option"
                     }
                   ),
                   a !== i.length - 1 && /* @__PURE__ */ o.jsx(
-                    S,
+                    _,
                     {
                       height: "1px",
                       color: "cl_lightGrey",
@@ -99,6 +99,6 @@ const $ = ({
   );
 };
 export {
-  $ as CustomSelector
+  A 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,WAAS,EAAK,GAG9CC,IAAqBC,EAAAA,QAAQ,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;AAAAA,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","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;AAAAA,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;"}

package/lib/sd-component-library116.js

@@ -1,9 +1,9 @@
-import { j as o } from "./sd-component-library196.js";
-import { r as x } from "./sd-component-library193.js";
-import { BaseLabel as f } from "./sd-component-library237.js";
+import { j as o } from "./sd-component-library195.js";
+import { useState as x } from "react";
+import { BaseLabel as f } from "./sd-component-library231.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-library282.js";
+import { SecondaryCustomSelectorOptionsBox as S } from "./sd-component-library270.js";
 import { GridContainerV2 as g } from "./sd-component-library41.js";
 import { ResponsiveTextV2 as C } from "./sd-component-library147.js";
 import { FlexCenter as j } from "./sd-component-library37.js";
@@ -12,19 +12,19 @@ const R = ({
   onChange: c,
   options: t,
   width: p,
-  label: a,
+  label: m,
   variant: s = "customSecondary",
-  containerSx: m
+  containerSx: a
 }) => {
-  const [r, i] = x.useState(!1), n = t.find((e) => e.id === l.id), d = () => i(!1);
+  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", ...m },
+      sx: { cursor: "default", ...a },
       children: [
-        /* @__PURE__ */ o.jsx(f, { variant: `selectors.${s}`, label: a }),
+        /* @__PURE__ */ o.jsx(f, { variant: `selectors.${s}`, label: m }),
         /* @__PURE__ */ o.jsxs(
           u,
           {

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,WAAS,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","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;"}

package/lib/sd-component-library117.js

@@ -1,4 +1,4 @@
-import { j as t } from "./sd-component-library196.js";
+import { j 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" });
 export {

package/lib/sd-component-library118.js

@@ -1,24 +1,24 @@
-import { j as o } from "./sd-component-library196.js";
-import { r as d } from "./sd-component-library193.js";
+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 { ReactComponent as x } from "./sd-component-library186.js";
 import { ResponsiveTextV2 as f } 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-library282.js";
+import { SecondaryCustomSelectorOptionsBox as g } from "./sd-component-library270.js";
 const k = ({
   width: l,
-  options: t,
+  options: r,
   value: n,
   onChange: p,
   label: c
 }) => {
-  const [e, i] = d.useState(!1), s = t.find((r) => r.id === n.id), m = () => i(!1);
+  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((r) => !r),
+      onClick: () => i((t) => !t),
       sx: {
         width: l,
         position: "relative",
@@ -61,7 +61,7 @@ const k = ({
         e && /* @__PURE__ */ o.jsx(
           g,
           {
-            options: t,
+            options: r,
             onSelect: p
           }
         )

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,WAAS,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","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;"}

package/lib/sd-component-library119.js

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

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,EAAAA,QAAsC,OAEpDJ,IACG,CAACA,CAAmB,IACpB,CAAA,GACJ,OAAOC,CAAO,GACf,CAACA,GAASD,CAAmB,CAAC,GAE3BK,IAAWC,EAAA;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","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;"}

package/lib/sd-component-library12.js

@@ -1,6 +1,6 @@
-import { j as s } from "./sd-component-library196.js";
-import "./sd-component-library199.js";
-import { Box as e } from "./sd-component-library200.js";
+import { j as s } from "./sd-component-library195.js";
+import "./sd-component-library196.js";
+import { Box as e } from "./sd-component-library197.js";
 const d = (o) => {
   const { children: t, ...r } = o;
   return /* @__PURE__ */ s.jsx(

package/lib/sd-component-library120.js

@@ -1,4 +1,4 @@
-import { j as r } from "./sd-component-library196.js";
+import { j as r } from "./sd-component-library195.js";
 import { SelectorV2 as e } from "./sd-component-library119.js";
 const i = (t) => /* @__PURE__ */ r.jsx(
   e,

package/lib/sd-component-library121.js

@@ -1,4 +1,4 @@
-import { j as e } from "./sd-component-library196.js";
+import { j as e } from "./sd-component-library195.js";
 import { SelectorV2 as o } from "./sd-component-library119.js";
 const s = (t) => {
   const { gap: r = "8px" } = t;

package/lib/sd-component-library122.js

@@ -1,4 +1,4 @@
-import { j as t } from "./sd-component-library196.js";
+import { j as t } from "./sd-component-library195.js";
 import { SelectorV2 as e } from "./sd-component-library119.js";
 const i = (r) => /* @__PURE__ */ t.jsx(
   e,

package/lib/sd-component-library123.js

@@ -1,34 +1,34 @@
-import { j as e } from "./sd-component-library196.js";
-import { r as o } from "./sd-component-library193.js";
-import "./sd-component-library199.js";
-import { Box as c } from "./sd-component-library200.js";
-import { SelectorV2 as d } from "./sd-component-library119.js";
-import { ResponsiveTextV2 as m } from "./sd-component-library147.js";
-const g = ({
-  selectorLabel: r,
-  gap: i = 5,
-  ...s
+import { j as e } from "./sd-component-library195.js";
+import { useState as n, useCallback as c } from "react";
+import "./sd-component-library196.js";
+import { Box as d } from "./sd-component-library197.js";
+import { SelectorV2 as m } from "./sd-component-library119.js";
+import { ResponsiveTextV2 as p } from "./sd-component-library147.js";
+const y = ({
+  selectorLabel: o,
+  gap: r = 5,
+  ...i
 }) => {
-  const [a, l] = o.useState(0), n = o.useCallback((t) => {
-    t && l(t.getBoundingClientRect().width);
+  const [s, a] = n(0), l = c((t) => {
+    t && a(t.getBoundingClientRect().width);
   }, []);
   return /* @__PURE__ */ e.jsxs(
-    c,
+    d,
     {
       sx: { position: "relative" },
       "data-testid": "combined-secondary-selector-v2",
       children: [
         /* @__PURE__ */ e.jsx(
-          d,
+          m,
           {
-            ...s,
+            ...i,
             variant: "secondaryV2",
             containerVariant: "combined",
-            pl: `${a + i}px`
+            pl: `${s + r}px`
           }
         ),
         /* @__PURE__ */ e.jsx(
-          m,
+          p,
           {
             fontSizeWeight: [18, "regular"],
             color: "cl_grey",
@@ -41,9 +41,9 @@ const g = ({
               alignItems: "flex-start",
               cursor: "default"
             },
-            ref: n,
+            ref: l,
             "data-testid": "combined-secondary-selector-label",
-            children: r
+            children: o
           }
         )
       ]
@@ -51,6 +51,6 @@ const g = ({
   );
 };
 export {
-  g as CombinedSecondarySelectorV2
+  y as CombinedSecondarySelectorV2
 };
 //# sourceMappingURL=sd-component-library123.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library123.js","sources":["../src/components/selectors/combined-secondary-selector-v2/combined-secondary-selector-v2.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport { SelectorV2 } from \"../selector-v2\";\nimport { CombinedSecondarySelectorV2Props as Props } from \"./interfaces\";\n\nexport const CombinedSecondarySelectorV2: React.FC<Props> = ({\n  selectorLabel,\n  gap = 5,\n  ...restOfProps\n}) => {\n  const [labelWidth, setLabelWidth] = useState(0);\n  const labelRef = useCallback((node: HTMLDivElement) => {\n    if (node) setLabelWidth(node.getBoundingClientRect().width);\n  }, []);\n\n  return (\n    <Box\n      sx={{ position: \"relative\" }}\n      data-testid=\"combined-secondary-selector-v2\"\n    >\n      <SelectorV2\n        {...restOfProps}\n        variant=\"secondaryV2\"\n        containerVariant=\"combined\"\n        pl={`${labelWidth + gap}px`}\n      />\n\n      <ResponsiveTextV2\n        fontSizeWeight={[18, \"regular\"]}\n        color=\"cl_grey\"\n        sx={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          display: \"flex\",\n          height: \"100%\",\n          alignItems: \"flex-start\",\n          cursor: \"default\",\n        }}\n        ref={labelRef}\n        data-testid=\"combined-secondary-selector-label\"\n      >\n        {selectorLabel}\n      </ResponsiveTextV2>\n    </Box>\n  );\n};\n"],"names":["CombinedSecondarySelectorV2","selectorLabel","gap","restOfProps","labelWidth","setLabelWidth","useState","labelRef","useCallback","node","jsxs","Box","jsx","SelectorV2","ResponsiveTextV2"],"mappings":";;;;;;AAQO,MAAMA,IAA+C,CAAC;AAAA,EAC3D,eAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAIC,WAAS,CAAC,GACxCC,IAAWC,cAAY,CAACC,MAAyB;AACjD,IAAAA,KAAoBJ,EAAAI,EAAK,sBAAsB,EAAE,KAAK;AAAA,EAC5D,GAAG,CAAE,CAAA;AAGH,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,IAAI,EAAE,UAAU,WAAW;AAAA,MAC3B,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAAC,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGV;AAAA,YACJ,SAAQ;AAAA,YACR,kBAAiB;AAAA,YACjB,IAAI,GAAGC,IAAaF,CAAG;AAAA,UAAA;AAAA,QACzB;AAAA,QAEAU,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,YAC9B,OAAM;AAAA,YACN,IAAI;AAAA,cACF,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,SAAS;AAAA,cACT,QAAQ;AAAA,cACR,YAAY;AAAA,cACZ,QAAQ;AAAA,YACV;AAAA,YACA,KAAKP;AAAA,YACL,eAAY;AAAA,YAEX,UAAAN;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library123.js","sources":["../src/components/selectors/combined-secondary-selector-v2/combined-secondary-selector-v2.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport { SelectorV2 } from \"../selector-v2\";\nimport { CombinedSecondarySelectorV2Props as Props } from \"./interfaces\";\n\nexport const CombinedSecondarySelectorV2: React.FC<Props> = ({\n  selectorLabel,\n  gap = 5,\n  ...restOfProps\n}) => {\n  const [labelWidth, setLabelWidth] = useState(0);\n  const labelRef = useCallback((node: HTMLDivElement) => {\n    if (node) setLabelWidth(node.getBoundingClientRect().width);\n  }, []);\n\n  return (\n    <Box\n      sx={{ position: \"relative\" }}\n      data-testid=\"combined-secondary-selector-v2\"\n    >\n      <SelectorV2\n        {...restOfProps}\n        variant=\"secondaryV2\"\n        containerVariant=\"combined\"\n        pl={`${labelWidth + gap}px`}\n      />\n\n      <ResponsiveTextV2\n        fontSizeWeight={[18, \"regular\"]}\n        color=\"cl_grey\"\n        sx={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          display: \"flex\",\n          height: \"100%\",\n          alignItems: \"flex-start\",\n          cursor: \"default\",\n        }}\n        ref={labelRef}\n        data-testid=\"combined-secondary-selector-label\"\n      >\n        {selectorLabel}\n      </ResponsiveTextV2>\n    </Box>\n  );\n};\n"],"names":["CombinedSecondarySelectorV2","selectorLabel","gap","restOfProps","labelWidth","setLabelWidth","useState","labelRef","useCallback","node","jsxs","Box","jsx","SelectorV2","ResponsiveTextV2"],"mappings":";;;;;;AAQO,MAAMA,IAA+C,CAAC;AAAA,EAC3D,eAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,CAAC,GACxCC,IAAWC,EAAY,CAACC,MAAyB;AACjD,IAAAA,KAAoBJ,EAAAI,EAAK,sBAAsB,EAAE,KAAK;AAAA,EAC5D,GAAG,CAAE,CAAA;AAGH,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,IAAI,EAAE,UAAU,WAAW;AAAA,MAC3B,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAAC,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGV;AAAA,YACJ,SAAQ;AAAA,YACR,kBAAiB;AAAA,YACjB,IAAI,GAAGC,IAAaF,CAAG;AAAA,UAAA;AAAA,QACzB;AAAA,QAEAU,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,YAC9B,OAAM;AAAA,YACN,IAAI;AAAA,cACF,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,SAAS;AAAA,cACT,QAAQ;AAAA,cACR,YAAY;AAAA,cACZ,QAAQ;AAAA,YACV;AAAA,YACA,KAAKP;AAAA,YACL,eAAY;AAAA,YAEX,UAAAN;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library124.js

@@ -1,15 +1,15 @@
-import { j as o } from "./sd-component-library196.js";
-import { r as x } from "./sd-component-library193.js";
-import { BaseLabel as f } from "./sd-component-library237.js";
+import { j as o } from "./sd-component-library195.js";
+import { useState as x } from "react";
+import { BaseLabel as f } from "./sd-component-library231.js";
 import { ReactComponent as u } from "./sd-component-library186.js";
-import { CustomScrollableOptionsBox as h } from "./sd-component-library284.js";
+import { CustomScrollableOptionsBox as h } from "./sd-component-library272.js";
 import { GridContainerV2 as S } from "./sd-component-library41.js";
 import { OutsideClickBox as b } from "./sd-component-library14.js";
 import { ResponsiveTextV2 as C } from "./sd-component-library147.js";
 import { FlexCenter as g } from "./sd-component-library37.js";
-const E = (l) => {
-  const { value: n, onChange: c, options: r, width: p, label: a, containerSx: m } = l, [e, s] = x.useState(!1), i = r.find((t) => t.id === n.id), d = () => s(!1);
-  return i ? /* @__PURE__ */ o.jsxs(
+const G = (l) => {
+  const { value: n, onChange: c, options: r, width: p, label: a, containerSx: m } = l, [e, i] = x(!1), s = r.find((t) => t.id === n.id), d = () => i(!1);
+  return s ? /* @__PURE__ */ o.jsxs(
     S,
     {
       width: p,
@@ -21,7 +21,7 @@ const E = (l) => {
           b,
           {
             onClickOutside: d,
-            onClick: () => s((t) => !t),
+            onClick: () => i((t) => !t),
             sx: {
               position: "relative",
               display: "grid",
@@ -35,7 +35,7 @@ const E = (l) => {
               borderWidth: "2px"
             },
             children: [
-              /* @__PURE__ */ o.jsx(C, { fontSizeWeight: [[24, "bold"]], color: "cl_purple", children: i.title }),
+              /* @__PURE__ */ o.jsx(C, { fontSizeWeight: [[24, "bold"]], color: "cl_purple", children: s.title }),
               /* @__PURE__ */ o.jsx(
                 g,
                 {
@@ -58,6 +58,6 @@ const E = (l) => {
   ) : null;
 };
 export {
-  E as CustomScrollableSelector
+  G as CustomScrollableSelector
 };
 //# sourceMappingURL=sd-component-library124.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library124.js","sources":["../src/components/selectors/custom-scrollable-selector/custom-scrollable-selector.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport {\n  FlexCenter,\n  Grid,\n  OutsideClickBox,\n  ResponsiveTextV2,\n  ShortDownArrowIcon,\n} from \"../../../index\";\nimport { BaseLabel } from \"../../labels/base-label\";\nimport { CustomScrollableSelectorProps as Props } from \"./interfaces\";\nimport { CustomScrollableOptionsBox } from \"./partials\";\n\nexport const CustomScrollableSelector = <T extends string = string>(\n  props: Props<T>\n) => {\n  const { value, onChange, options, width, label, containerSx } = props;\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    <Grid\n      width={width}\n      variant=\"_containers.selectors.customScrollable\"\n      sx={{ cursor: \"default\", ...containerSx }}\n    >\n      <BaseLabel variant=\"selectors.customScrollable\" 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: \"2px\",\n          borderBottom: \"2px solid\",\n          borderColor: \"cl_lightGrey\",\n          borderWidth: \"2px\",\n        }}\n      >\n        <ResponsiveTextV2 fontSizeWeight={[[24, \"bold\"]]} color=\"cl_purple\">\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: \"cl_purple\",\n          }}\n        >\n          <ShortDownArrowIcon />\n        </FlexCenter>\n\n        {showOptions && (\n          <CustomScrollableOptionsBox options={options} onSelect={onChange} />\n        )}\n      </OutsideClickBox>\n    </Grid>\n  );\n};\n"],"names":["CustomScrollableSelector","props","value","onChange","options","width","label","containerSx","showOptions","setShowOptions","useState","selectedOption","option","hideOptions","jsxs","Grid","jsx","BaseLabel","OutsideClickBox","prev","ResponsiveTextV2","FlexCenter","ShortDownArrowIcon","CustomScrollableOptionsBox"],"mappings":";;;;;;;;;AAaa,MAAAA,IAA2B,CACtCC,MACG;AACH,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,SAAAC,GAAS,OAAAC,GAAO,OAAAC,GAAO,aAAAC,EAAgB,IAAAN,GAE1D,CAACO,GAAaC,CAAc,IAAIC,WAAS,EAAK,GAE9CC,IAAiBP,EAAQ,KAAK,CAACQ,MAAWA,EAAO,OAAOV,EAAM,EAAE,GAEhEW,IAAc,MAAMJ,EAAe,EAAK;AAE9C,SAAKE,IAGHG,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAV;AAAA,MACA,SAAQ;AAAA,MACR,IAAI,EAAE,QAAQ,WAAW,GAAGE,EAAY;AAAA,MAExC,UAAA;AAAA,QAACS,gBAAAA,EAAAA,IAAAC,GAAA,EAAU,SAAQ,8BAA6B,OAAAX,EAAc,CAAA;AAAA,QAE9DQ,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,cACb,aAAa;AAAA,YACf;AAAA,YAEA,UAAA;AAAA,cAACH,gBAAAA,EAAAA,IAAAI,GAAA,EAAiB,gBAAgB,CAAC,CAAC,IAAI,MAAM,CAAC,GAAG,OAAM,aACrD,UAAAT,EAAe,MAClB,CAAA;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,MAAM;AAAA,kBACR;AAAA,kBAEA,gCAACc,GAAmB,EAAA;AAAA,gBAAA;AAAA,cACtB;AAAA,cAECd,KACCQ,gBAAAA,EAAA,IAACO,GAA2B,EAAA,SAAAnB,GAAkB,UAAUD,GAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAEtE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IA7CwB;AAgD9B;"}
+{"version":3,"file":"sd-component-library124.js","sources":["../src/components/selectors/custom-scrollable-selector/custom-scrollable-selector.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport {\n  FlexCenter,\n  Grid,\n  OutsideClickBox,\n  ResponsiveTextV2,\n  ShortDownArrowIcon,\n} from \"../../../index\";\nimport { BaseLabel } from \"../../labels/base-label\";\nimport { CustomScrollableSelectorProps as Props } from \"./interfaces\";\nimport { CustomScrollableOptionsBox } from \"./partials\";\n\nexport const CustomScrollableSelector = <T extends string = string>(\n  props: Props<T>\n) => {\n  const { value, onChange, options, width, label, containerSx } = props;\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    <Grid\n      width={width}\n      variant=\"_containers.selectors.customScrollable\"\n      sx={{ cursor: \"default\", ...containerSx }}\n    >\n      <BaseLabel variant=\"selectors.customScrollable\" 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: \"2px\",\n          borderBottom: \"2px solid\",\n          borderColor: \"cl_lightGrey\",\n          borderWidth: \"2px\",\n        }}\n      >\n        <ResponsiveTextV2 fontSizeWeight={[[24, \"bold\"]]} color=\"cl_purple\">\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: \"cl_purple\",\n          }}\n        >\n          <ShortDownArrowIcon />\n        </FlexCenter>\n\n        {showOptions && (\n          <CustomScrollableOptionsBox options={options} onSelect={onChange} />\n        )}\n      </OutsideClickBox>\n    </Grid>\n  );\n};\n"],"names":["CustomScrollableSelector","props","value","onChange","options","width","label","containerSx","showOptions","setShowOptions","useState","selectedOption","option","hideOptions","jsxs","Grid","jsx","BaseLabel","OutsideClickBox","prev","ResponsiveTextV2","FlexCenter","ShortDownArrowIcon","CustomScrollableOptionsBox"],"mappings":";;;;;;;;;AAaa,MAAAA,IAA2B,CACtCC,MACG;AACH,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,SAAAC,GAAS,OAAAC,GAAO,OAAAC,GAAO,aAAAC,EAAgB,IAAAN,GAE1D,CAACO,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9CC,IAAiBP,EAAQ,KAAK,CAACQ,MAAWA,EAAO,OAAOV,EAAM,EAAE,GAEhEW,IAAc,MAAMJ,EAAe,EAAK;AAE9C,SAAKE,IAGHG,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAV;AAAA,MACA,SAAQ;AAAA,MACR,IAAI,EAAE,QAAQ,WAAW,GAAGE,EAAY;AAAA,MAExC,UAAA;AAAA,QAACS,gBAAAA,EAAAA,IAAAC,GAAA,EAAU,SAAQ,8BAA6B,OAAAX,EAAc,CAAA;AAAA,QAE9DQ,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,cACb,aAAa;AAAA,YACf;AAAA,YAEA,UAAA;AAAA,cAACH,gBAAAA,EAAAA,IAAAI,GAAA,EAAiB,gBAAgB,CAAC,CAAC,IAAI,MAAM,CAAC,GAAG,OAAM,aACrD,UAAAT,EAAe,MAClB,CAAA;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,MAAM;AAAA,kBACR;AAAA,kBAEA,gCAACc,GAAmB,EAAA;AAAA,gBAAA;AAAA,cACtB;AAAA,cAECd,KACCQ,gBAAAA,EAAA,IAACO,GAA2B,EAAA,SAAAnB,GAAkB,UAAUD,GAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAEtE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IA7CwB;AAgD9B;"}

package/lib/sd-component-library125.js

@@ -1,14 +1,14 @@
-import { j as o } from "./sd-component-library196.js";
-import { r as x } from "./sd-component-library193.js";
-import "./sd-component-library199.js";
+import { j as o } from "./sd-component-library195.js";
+import { useState as x } from "react";
+import "./sd-component-library196.js";
 import { OutsideClickBox as d } from "./sd-component-library14.js";
-import { BaseLabel as u } from "./sd-component-library237.js";
-import { Flex as i } from "./sd-component-library200.js";
+import { BaseLabel as u } from "./sd-component-library231.js";
+import { Flex as i } from "./sd-component-library197.js";
 import { ReactComponent as f } from "./sd-component-library186.js";
-import { CustomScrollableOptionsBox as h } from "./sd-component-library285.js";
+import { CustomScrollableOptionsBox as h } from "./sd-component-library273.js";
 import { ResponsiveTextV2 as b } from "./sd-component-library147.js";
-const w = (e) => {
-  const { leftSlot: s, label: l, value: n, width: c } = e, [t, r] = x.useState(!1), p = () => r(!1), a = () => r((m) => !m);
+const w = (t) => {
+  const { leftSlot: s, label: l, value: n, width: c } = t, [e, r] = x(!1), p = () => r(!1), a = () => r((m) => !m);
   return /* @__PURE__ */ o.jsxs(
     d,
     {
@@ -40,9 +40,9 @@ const w = (e) => {
                   justifyContent: "center",
                   ml: "auto",
                   sx: {
-                    transform: `rotate3d(${t ? 1 : 0}, 0, 0, 180deg)`,
+                    transform: `rotate3d(${e ? 1 : 0}, 0, 0, 180deg)`,
                     transition: "all 0.2s",
-                    fill: t ? "cl_purple" : "cl_blue"
+                    fill: e ? "cl_purple" : "cl_blue"
                   },
                   children: /* @__PURE__ */ o.jsx(f, {})
                 }
@@ -50,7 +50,7 @@ const w = (e) => {
             ]
           }
         ),
-        /* @__PURE__ */ o.jsx(h, { isVisible: t, ...e })
+        /* @__PURE__ */ o.jsx(h, { isVisible: e, ...t })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library125.js","sources":["../src/components/selectors/primary-custom-scrollable-selector/primary-custom-scrollable-selector.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { Flex } from \"rebass\";\n\nimport { OutsideClickBox } from \"../../boxes\";\nimport { ShortDownArrowIcon } from \"../../icons\";\nimport { BaseLabel } from \"../../labels/base-label\";\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport { PrimaryCustomScrollableSelectorProps as Props } from \"./interfaces\";\nimport { CustomScrollableOptionsBox } from \"./partials/custom-scrollable-options-box\";\n\nexport const PrimaryCustomScrollableSelector = <T extends string = string>(\n  props: Props<T>\n) => {\n  const { leftSlot, label, value, width } = props;\n\n  const [optionsVisible, setOptionsVisible] = useState(false);\n  const hideOptions = () => setOptionsVisible(false);\n  const onSelectorClick = () => setOptionsVisible((prev) => !prev);\n\n  return (\n    <OutsideClickBox\n      onClickOutside={hideOptions}\n      onClick={onSelectorClick}\n      sx={{ width, position: \"relative\", cursor: \"pointer\" }}\n    >\n      <BaseLabel variant=\"selectors.primaryV2\" label={label} />\n\n      <Flex\n        alignItems=\"center\"\n        sx={{\n          height: \"42px\",\n          borderRadius: \"3px\",\n          border: \"1px solid\",\n          borderColor: \"cl_lightGrey\",\n          px: \"16px\",\n        }}\n      >\n        {leftSlot}\n\n        <ResponsiveTextV2 fontSizeWeight={[[16, \"regular\"]]} color=\"cl_purple\">\n          {value.title}\n        </ResponsiveTextV2>\n\n        <Flex\n          width=\"10px\"\n          height=\"10px\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          ml=\"auto\"\n          sx={{\n            transform: `rotate3d(${optionsVisible ? 1 : 0}, 0, 0, 180deg)`,\n            transition: \"all 0.2s\",\n            fill: optionsVisible ? \"cl_purple\" : \"cl_blue\",\n          }}\n        >\n          <ShortDownArrowIcon />\n        </Flex>\n      </Flex>\n\n      <CustomScrollableOptionsBox isVisible={optionsVisible} {...props} />\n    </OutsideClickBox>\n  );\n};\n"],"names":["PrimaryCustomScrollableSelector","props","leftSlot","label","value","width","optionsVisible","setOptionsVisible","useState","hideOptions","onSelectorClick","prev","jsxs","OutsideClickBox","jsx","BaseLabel","Flex","ResponsiveTextV2","ShortDownArrowIcon","CustomScrollableOptionsBox"],"mappings":";;;;;;;;;AAWa,MAAAA,IAAkC,CAC7CC,MACG;AACH,QAAM,EAAE,UAAAC,GAAU,OAAAC,GAAO,OAAAC,GAAO,OAAAC,MAAUJ,GAEpC,CAACK,GAAgBC,CAAiB,IAAIC,WAAS,EAAK,GACpDC,IAAc,MAAMF,EAAkB,EAAK,GAC3CG,IAAkB,MAAMH,EAAkB,CAACI,MAAS,CAACA,CAAI;AAG7D,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAgBJ;AAAA,MAChB,SAASC;AAAA,MACT,IAAI,EAAE,OAAAL,GAAO,UAAU,YAAY,QAAQ,UAAU;AAAA,MAErD,UAAA;AAAA,QAACS,gBAAAA,EAAAA,IAAAC,GAAA,EAAU,SAAQ,uBAAsB,OAAAZ,EAAc,CAAA;AAAA,QAEvDS,gBAAAA,EAAA;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,YAAW;AAAA,YACX,IAAI;AAAA,cACF,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,QAAQ;AAAA,cACR,aAAa;AAAA,cACb,IAAI;AAAA,YACN;AAAA,YAEC,UAAA;AAAA,cAAAd;AAAA,cAEAY,gBAAAA,EAAAA,IAAAG,GAAA,EAAiB,gBAAgB,CAAC,CAAC,IAAI,SAAS,CAAC,GAAG,OAAM,aACxD,UAAAb,EAAM,MACT,CAAA;AAAA,cAEAU,gBAAAA,EAAA;AAAA,gBAACE;AAAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,YAAW;AAAA,kBACX,gBAAe;AAAA,kBACf,IAAG;AAAA,kBACH,IAAI;AAAA,oBACF,WAAW,YAAYV,IAAiB,IAAI,CAAC;AAAA,oBAC7C,YAAY;AAAA,oBACZ,MAAMA,IAAiB,cAAc;AAAA,kBACvC;AAAA,kBAEA,gCAACY,GAAmB,EAAA;AAAA,gBAAA;AAAA,cACtB;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAECJ,gBAAAA,EAAA,IAAAK,GAAA,EAA2B,WAAWb,GAAiB,GAAGL,EAAO,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE;"}
+{"version":3,"file":"sd-component-library125.js","sources":["../src/components/selectors/primary-custom-scrollable-selector/primary-custom-scrollable-selector.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { Flex } from \"rebass\";\n\nimport { OutsideClickBox } from \"../../boxes\";\nimport { ShortDownArrowIcon } from \"../../icons\";\nimport { BaseLabel } from \"../../labels/base-label\";\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport { PrimaryCustomScrollableSelectorProps as Props } from \"./interfaces\";\nimport { CustomScrollableOptionsBox } from \"./partials/custom-scrollable-options-box\";\n\nexport const PrimaryCustomScrollableSelector = <T extends string = string>(\n  props: Props<T>\n) => {\n  const { leftSlot, label, value, width } = props;\n\n  const [optionsVisible, setOptionsVisible] = useState(false);\n  const hideOptions = () => setOptionsVisible(false);\n  const onSelectorClick = () => setOptionsVisible((prev) => !prev);\n\n  return (\n    <OutsideClickBox\n      onClickOutside={hideOptions}\n      onClick={onSelectorClick}\n      sx={{ width, position: \"relative\", cursor: \"pointer\" }}\n    >\n      <BaseLabel variant=\"selectors.primaryV2\" label={label} />\n\n      <Flex\n        alignItems=\"center\"\n        sx={{\n          height: \"42px\",\n          borderRadius: \"3px\",\n          border: \"1px solid\",\n          borderColor: \"cl_lightGrey\",\n          px: \"16px\",\n        }}\n      >\n        {leftSlot}\n\n        <ResponsiveTextV2 fontSizeWeight={[[16, \"regular\"]]} color=\"cl_purple\">\n          {value.title}\n        </ResponsiveTextV2>\n\n        <Flex\n          width=\"10px\"\n          height=\"10px\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          ml=\"auto\"\n          sx={{\n            transform: `rotate3d(${optionsVisible ? 1 : 0}, 0, 0, 180deg)`,\n            transition: \"all 0.2s\",\n            fill: optionsVisible ? \"cl_purple\" : \"cl_blue\",\n          }}\n        >\n          <ShortDownArrowIcon />\n        </Flex>\n      </Flex>\n\n      <CustomScrollableOptionsBox isVisible={optionsVisible} {...props} />\n    </OutsideClickBox>\n  );\n};\n"],"names":["PrimaryCustomScrollableSelector","props","leftSlot","label","value","width","optionsVisible","setOptionsVisible","useState","hideOptions","onSelectorClick","prev","jsxs","OutsideClickBox","jsx","BaseLabel","Flex","ResponsiveTextV2","ShortDownArrowIcon","CustomScrollableOptionsBox"],"mappings":";;;;;;;;;AAWa,MAAAA,IAAkC,CAC7CC,MACG;AACH,QAAM,EAAE,UAAAC,GAAU,OAAAC,GAAO,OAAAC,GAAO,OAAAC,MAAUJ,GAEpC,CAACK,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GACpDC,IAAc,MAAMF,EAAkB,EAAK,GAC3CG,IAAkB,MAAMH,EAAkB,CAACI,MAAS,CAACA,CAAI;AAG7D,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAgBJ;AAAA,MAChB,SAASC;AAAA,MACT,IAAI,EAAE,OAAAL,GAAO,UAAU,YAAY,QAAQ,UAAU;AAAA,MAErD,UAAA;AAAA,QAACS,gBAAAA,EAAAA,IAAAC,GAAA,EAAU,SAAQ,uBAAsB,OAAAZ,EAAc,CAAA;AAAA,QAEvDS,gBAAAA,EAAA;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,YAAW;AAAA,YACX,IAAI;AAAA,cACF,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,QAAQ;AAAA,cACR,aAAa;AAAA,cACb,IAAI;AAAA,YACN;AAAA,YAEC,UAAA;AAAA,cAAAd;AAAA,cAEAY,gBAAAA,EAAAA,IAAAG,GAAA,EAAiB,gBAAgB,CAAC,CAAC,IAAI,SAAS,CAAC,GAAG,OAAM,aACxD,UAAAb,EAAM,MACT,CAAA;AAAA,cAEAU,gBAAAA,EAAA;AAAA,gBAACE;AAAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,YAAW;AAAA,kBACX,gBAAe;AAAA,kBACf,IAAG;AAAA,kBACH,IAAI;AAAA,oBACF,WAAW,YAAYV,IAAiB,IAAI,CAAC;AAAA,oBAC7C,YAAY;AAAA,oBACZ,MAAMA,IAAiB,cAAc;AAAA,kBACvC;AAAA,kBAEA,gCAACY,GAAmB,EAAA;AAAA,gBAAA;AAAA,cACtB;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAECJ,gBAAAA,EAAA,IAAAK,GAAA,EAA2B,WAAWb,GAAiB,GAAGL,EAAO,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE;"}

package/lib/sd-component-library126.js

@@ -1,4 +1,4 @@
-import { j as e } from "./sd-component-library196.js";
+import { j as e } from "./sd-component-library195.js";
 import { SelectorV2 as r } from "./sd-component-library119.js";
 const d = (t) => /* @__PURE__ */ e.jsx(
   r,

package/lib/sd-component-library127.js

@@ -1,6 +1,6 @@
-import { j as t } from "./sd-component-library196.js";
+import { j as t } from "./sd-component-library195.js";
 import { IconButton as s } from "./sd-component-library25.js";
-import { ReactComponent as c } from "./sd-component-library215.js";
+import { ReactComponent as c } from "./sd-component-library210.js";
 import { EighteenBold as p } from "./sd-component-library138.js";
 import { GridCenter as g } from "./sd-component-library44.js";
 const C = ({