@selfdecode/sd-component-library 4.0.76-test2 → 4.0.76-test3

package/lib/sd-component-library118.js

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

package/lib/sd-component-library119.js

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

package/lib/sd-component-library12.js

@@ -1,4 +1,4 @@
-import { j as m } from "./sd-component-library190.js";
+import { j as m } from "./sd-component-library191.js";
 import { Box as n } from "rebass";
 const c = ({
   url: o,

package/lib/sd-component-library120.js

@@ -1,33 +1,33 @@
-import { j as e } from "./sd-component-library190.js";
-import { useState as n, useCallback as c } from "react";
-import { Box as d } from "rebass";
-import { SelectorV2 as m } from "./sd-component-library116.js";
-import { ResponsiveTextV2 as p } from "./sd-component-library144.js";
-const g = ({
-  selectorLabel: o,
-  gap: r = 5,
-  ...i
+import { j as e } from "./sd-component-library191.js";
+import { r as o } from "./sd-component-library188.js";
+import { Box as c } from "rebass";
+import { SelectorV2 as d } from "./sd-component-library116.js";
+import { ResponsiveTextV2 as m } from "./sd-component-library144.js";
+const h = ({
+  selectorLabel: r,
+  gap: i = 5,
+  ...s
 }) => {
-  const [s, a] = n(0), l = c((t) => {
-    t && a(t.getBoundingClientRect().width);
+  const [a, l] = o.useState(0), n = o.useCallback((t) => {
+    t && l(t.getBoundingClientRect().width);
   }, []);
   return /* @__PURE__ */ e.jsxs(
-    d,
+    c,
     {
       sx: { position: "relative" },
       "data-testid": "combined-secondary-selector-v2",
       children: [
         /* @__PURE__ */ e.jsx(
-          m,
+          d,
           {
-            ...i,
+            ...s,
             variant: "secondaryV2",
             containerVariant: "combined",
-            pl: `${s + r}px`
+            pl: `${a + i}px`
           }
         ),
         /* @__PURE__ */ e.jsx(
-          p,
+          m,
           {
             fontSizeWeight: [18, "regular"],
             color: "cl_grey",
@@ -40,9 +40,9 @@ const g = ({
               alignItems: "flex-start",
               cursor: "default"
             },
-            ref: l,
+            ref: n,
             "data-testid": "combined-secondary-selector-label",
-            children: o
+            children: r
           }
         )
       ]
@@ -50,6 +50,6 @@ const g = ({
   );
 };
 export {
-  g as CombinedSecondarySelectorV2
+  h as CombinedSecondarySelectorV2
 };
 //# sourceMappingURL=sd-component-library120.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library120.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;AAAA,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-library120.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;AAAA,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-library121.js

@@ -1,15 +1,15 @@
-import { j as o } from "./sd-component-library190.js";
-import { useState as x } from "react";
-import { BaseLabel as f } from "./sd-component-library216.js";
+import { j as o } from "./sd-component-library191.js";
+import { r as x } from "./sd-component-library188.js";
+import { BaseLabel as f } from "./sd-component-library223.js";
 import { ReactComponent as u } from "./sd-component-library181.js";
-import { CustomScrollableOptionsBox as h } from "./sd-component-library260.js";
+import { CustomScrollableOptionsBox as h } from "./sd-component-library265.js";
 import { GridContainerV2 as S } from "./sd-component-library39.js";
 import { OutsideClickBox as b } from "./sd-component-library11.js";
 import { ResponsiveTextV2 as C } from "./sd-component-library144.js";
 import { FlexCenter as g } from "./sd-component-library35.js";
-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(
+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(
     S,
     {
       width: p,
@@ -21,7 +21,7 @@ const G = (l) => {
           b,
           {
             onClickOutside: d,
-            onClick: () => i((t) => !t),
+            onClick: () => s((t) => !t),
             sx: {
               position: "relative",
               display: "grid",
@@ -35,7 +35,7 @@ const G = (l) => {
               borderWidth: "2px"
             },
             children: [
-              /* @__PURE__ */ o.jsx(C, { fontSizeWeight: [[24, "bold"]], color: "cl_purple", children: s.title }),
+              /* @__PURE__ */ o.jsx(C, { fontSizeWeight: [[24, "bold"]], color: "cl_purple", children: i.title }),
               /* @__PURE__ */ o.jsx(
                 g,
                 {
@@ -58,6 +58,6 @@ const G = (l) => {
   ) : null;
 };
 export {
-  G as CustomScrollableSelector
+  E as CustomScrollableSelector
 };
 //# sourceMappingURL=sd-component-library121.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library121.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;"}
+{"version":3,"file":"sd-component-library121.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;"}

package/lib/sd-component-library122.js

@@ -1,13 +1,13 @@
-import { j as o } from "./sd-component-library190.js";
-import { useState as x } from "react";
+import { j as o } from "./sd-component-library191.js";
+import { r as x } from "./sd-component-library188.js";
 import { Flex as i } from "rebass";
 import { OutsideClickBox as d } from "./sd-component-library11.js";
-import { BaseLabel as u } from "./sd-component-library216.js";
+import { BaseLabel as u } from "./sd-component-library223.js";
 import { ReactComponent as f } from "./sd-component-library181.js";
-import { CustomScrollableOptionsBox as h } from "./sd-component-library261.js";
+import { CustomScrollableOptionsBox as h } from "./sd-component-library266.js";
 import { ResponsiveTextV2 as b } from "./sd-component-library144.js";
-const w = (t) => {
-  const { leftSlot: s, label: l, value: n, width: c } = t, [e, r] = x(!1), p = () => r(!1), a = () => r((m) => !m);
+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);
   return /* @__PURE__ */ o.jsxs(
     d,
     {
@@ -39,9 +39,9 @@ const w = (t) => {
                   justifyContent: "center",
                   ml: "auto",
                   sx: {
-                    transform: `rotate3d(${e ? 1 : 0}, 0, 0, 180deg)`,
+                    transform: `rotate3d(${t ? 1 : 0}, 0, 0, 180deg)`,
                     transition: "all 0.2s",
-                    fill: e ? "cl_purple" : "cl_blue"
+                    fill: t ? "cl_purple" : "cl_blue"
                   },
                   children: /* @__PURE__ */ o.jsx(f, {})
                 }
@@ -49,7 +49,7 @@ const w = (t) => {
             ]
           }
         ),
-        /* @__PURE__ */ o.jsx(h, { isVisible: e, ...t })
+        /* @__PURE__ */ o.jsx(h, { isVisible: t, ...e })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library122.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;AAAA,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;AAAA,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-library122.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;AAAA,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;AAAA,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-library123.js

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

package/lib/sd-component-library124.js

@@ -1,6 +1,6 @@
-import { j as t } from "./sd-component-library190.js";
+import { j as t } from "./sd-component-library191.js";
 import { IconButton as s } from "./sd-component-library22.js";
-import { ReactComponent as c } from "./sd-component-library197.js";
+import { ReactComponent as c } from "./sd-component-library202.js";
 import { EighteenBold as p } from "./sd-component-library135.js";
 import { GridCenter as g } from "./sd-component-library42.js";
 const C = ({

package/lib/sd-component-library125.js

@@ -1,27 +1,27 @@
-import { j as r } from "./sd-component-library190.js";
-import { useState as g, useEffect as v } from "react";
-import { Flex as b, Box as a } from "rebass";
-const R = (t) => {
-  const { value: e } = t, [o, n] = g(e || "left");
-  v(() => {
+import { j as r } from "./sd-component-library191.js";
+import { r as l } from "./sd-component-library188.js";
+import { Flex as v, Box as a } from "rebass";
+const w = (t) => {
+  const { value: e } = t, [o, n] = l.useState(e || "left");
+  l.useEffect(() => {
     e && n(e);
   }, [e]);
-  const l = () => {
+  const x = () => {
     n("left"), t.leftActive();
-  }, x = () => {
+  }, u = () => {
     n("right"), t.rightActive();
-  }, u = {
+  }, h = {
     color: t.activeTextColor || "#fff",
     border: "none",
     backgroundColor: "transparent"
-  }, h = {
+  }, f = {
     color: t.unactiveTextColor,
     border: "1px solid",
     borderColor: t.unactiveTextColor,
     backgroundColor: t.unactiveBGColor || "transparent"
-  }, d = (f) => f === o ? u : h, i = t.borderRadius || "3px", s = `${i} 0 0 ${i}`, c = `0 ${i} ${i} 0`;
+  }, s = (g) => g === o ? h : f, i = t.borderRadius || "3px", d = `${i} 0 0 ${i}`, c = `0 ${i} ${i} 0`;
   return /* @__PURE__ */ r.jsxs(
-    b,
+    v,
     {
       ...t,
       width: t.width || "280px",
@@ -43,7 +43,7 @@ const R = (t) => {
               transitionProperty: "transform",
               transitionTimingFunction: "ease-out",
               transitionDuration: "0.1s",
-              borderRadius: o === "left" ? s : c
+              borderRadius: o === "left" ? d : c
             },
             "data-testid": "toggle"
           }
@@ -51,14 +51,14 @@ const R = (t) => {
         /* @__PURE__ */ r.jsx(
           a,
           {
-            onClick: l,
+            onClick: x,
             width: "50%",
             variant: "_switches.textSwitch.side",
             py: t.sidePy,
             px: t.sidePx,
             sx: {
-              borderRadius: s,
-              ...d("left"),
+              borderRadius: d,
+              ...s("left"),
               borderRight: "none !important"
             },
             "data-testid": "left",
@@ -68,14 +68,14 @@ const R = (t) => {
         /* @__PURE__ */ r.jsx(
           a,
           {
-            onClick: x,
+            onClick: u,
             width: "50%",
             variant: "_switches.textSwitch.side",
             py: t.sidePy,
             px: t.sidePx,
             sx: {
               borderRadius: c,
-              ...d("right"),
+              ...s("right"),
               borderLeft: "none !important"
             },
             "data-testid": "right",
@@ -87,6 +87,6 @@ const R = (t) => {
   );
 };
 export {
-  R as TextSwitch
+  w as TextSwitch
 };
 //# sourceMappingURL=sd-component-library125.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library125.js","sources":["../src/components/switches/text-switch/text-switch.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { Sides, TextSwitchProps } from \"./interfaces\";\n\nexport const TextSwitch: React.FC<TextSwitchProps> = (props) => {\n  const { value } = props;\n  const [activeSide, setActiveSide] = useState<Sides>(value || \"left\");\n\n  useEffect(() => {\n    value && setActiveSide(value);\n  }, [value]);\n\n  const leftClicked = () => {\n    setActiveSide(\"left\");\n    props.leftActive();\n  };\n\n  const rightClicked = () => {\n    setActiveSide(\"right\");\n    props.rightActive();\n  };\n\n  const activeStyle = {\n    color: props.activeTextColor || \"#fff\",\n    border: \"none\",\n    backgroundColor: \"transparent\",\n  };\n\n  const unactiveStyle = {\n    color: props.unactiveTextColor,\n    border: \"1px solid\",\n    borderColor: props.unactiveTextColor,\n    backgroundColor: props.unactiveBGColor || \"transparent\",\n  };\n\n  const currentStyle = (side: Sides) =>\n    side === activeSide ? activeStyle : unactiveStyle;\n\n  const borderRadius = props.borderRadius || \"3px\";\n  const leftBorderRadius = `${borderRadius} 0 0 ${borderRadius}`;\n  const rightBorderRadius = `0 ${borderRadius} ${borderRadius} 0`;\n\n  return (\n    <Flex\n      {...props}\n      width={props.width || \"280px\"}\n      sx={{\n        position: \"relative\",\n        cursor: \"pointer\",\n      }}\n      data-testid=\"text-switch\"\n    >\n      <Box\n        sx={{\n          backgroundColor: props.activeBGColor,\n          height: \"100%\",\n          width: \"50%\",\n          position: \"absolute\",\n          transform:\n            activeSide === \"left\" ? \"translateX(0)\" : \"translateX(100%)\",\n          transitionProperty: \"transform\",\n          transitionTimingFunction: \"ease-out\",\n          transitionDuration: \"0.1s\",\n          borderRadius:\n            activeSide === \"left\" ? leftBorderRadius : rightBorderRadius,\n        }}\n        data-testid=\"toggle\"\n      />\n      <Box\n        onClick={leftClicked}\n        width=\"50%\"\n        variant=\"_switches.textSwitch.side\"\n        py={props.sidePy}\n        px={props.sidePx}\n        sx={{\n          borderRadius: leftBorderRadius,\n          ...currentStyle(\"left\"),\n          borderRight: \"none !important\",\n        }}\n        data-testid=\"left\"\n      >\n        {props.leftText}\n      </Box>\n      <Box\n        onClick={rightClicked}\n        width=\"50%\"\n        variant=\"_switches.textSwitch.side\"\n        py={props.sidePy}\n        px={props.sidePx}\n        sx={{\n          borderRadius: rightBorderRadius,\n          ...currentStyle(\"right\"),\n          borderLeft: \"none !important\",\n        }}\n        data-testid=\"right\"\n      >\n        {props.rightText}\n      </Box>\n    </Flex>\n  );\n};\n"],"names":["TextSwitch","props","value","activeSide","setActiveSide","useState","useEffect","leftClicked","rightClicked","activeStyle","unactiveStyle","currentStyle","side","borderRadius","leftBorderRadius","rightBorderRadius","jsxs","Flex","jsx","Box"],"mappings":";;;AAMa,MAAAA,IAAwC,CAACC,MAAU;AACxD,QAAA,EAAE,OAAAC,EAAU,IAAAD,GACZ,CAACE,GAAYC,CAAa,IAAIC,EAAgBH,KAAS,MAAM;AAEnE,EAAAI,EAAU,MAAM;AACd,IAAAJ,KAASE,EAAcF,CAAK;AAAA,EAAA,GAC3B,CAACA,CAAK,CAAC;AAEV,QAAMK,IAAc,MAAM;AACxB,IAAAH,EAAc,MAAM,GACpBH,EAAM,WAAW;AAAA,EAAA,GAGbO,IAAe,MAAM;AACzB,IAAAJ,EAAc,OAAO,GACrBH,EAAM,YAAY;AAAA,EAAA,GAGdQ,IAAc;AAAA,IAClB,OAAOR,EAAM,mBAAmB;AAAA,IAChC,QAAQ;AAAA,IACR,iBAAiB;AAAA,EAAA,GAGbS,IAAgB;AAAA,IACpB,OAAOT,EAAM;AAAA,IACb,QAAQ;AAAA,IACR,aAAaA,EAAM;AAAA,IACnB,iBAAiBA,EAAM,mBAAmB;AAAA,EAAA,GAGtCU,IAAe,CAACC,MACpBA,MAAST,IAAaM,IAAcC,GAEhCG,IAAeZ,EAAM,gBAAgB,OACrCa,IAAmB,GAAGD,CAAY,QAAQA,CAAY,IACtDE,IAAoB,KAAKF,CAAY,IAAIA,CAAY;AAGzD,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGhB;AAAA,MACJ,OAAOA,EAAM,SAAS;AAAA,MACtB,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MACA,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAAiB,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,iBAAiBlB,EAAM;AAAA,cACvB,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,cACV,WACEE,MAAe,SAAS,kBAAkB;AAAA,cAC5C,oBAAoB;AAAA,cACpB,0BAA0B;AAAA,cAC1B,oBAAoB;AAAA,cACpB,cACEA,MAAe,SAASW,IAAmBC;AAAA,YAC/C;AAAA,YACA,eAAY;AAAA,UAAA;AAAA,QACd;AAAA,QACAG,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAASZ;AAAA,YACT,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,IAAIN,EAAM;AAAA,YACV,IAAIA,EAAM;AAAA,YACV,IAAI;AAAA,cACF,cAAca;AAAA,cACd,GAAGH,EAAa,MAAM;AAAA,cACtB,aAAa;AAAA,YACf;AAAA,YACA,eAAY;AAAA,YAEX,UAAMV,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,QACAiB,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAASX;AAAA,YACT,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,IAAIP,EAAM;AAAA,YACV,IAAIA,EAAM;AAAA,YACV,IAAI;AAAA,cACF,cAAcc;AAAA,cACd,GAAGJ,EAAa,OAAO;AAAA,cACvB,YAAY;AAAA,YACd;AAAA,YACA,eAAY;AAAA,YAEX,UAAMV,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library125.js","sources":["../src/components/switches/text-switch/text-switch.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { Sides, TextSwitchProps } from \"./interfaces\";\n\nexport const TextSwitch: React.FC<TextSwitchProps> = (props) => {\n  const { value } = props;\n  const [activeSide, setActiveSide] = useState<Sides>(value || \"left\");\n\n  useEffect(() => {\n    value && setActiveSide(value);\n  }, [value]);\n\n  const leftClicked = () => {\n    setActiveSide(\"left\");\n    props.leftActive();\n  };\n\n  const rightClicked = () => {\n    setActiveSide(\"right\");\n    props.rightActive();\n  };\n\n  const activeStyle = {\n    color: props.activeTextColor || \"#fff\",\n    border: \"none\",\n    backgroundColor: \"transparent\",\n  };\n\n  const unactiveStyle = {\n    color: props.unactiveTextColor,\n    border: \"1px solid\",\n    borderColor: props.unactiveTextColor,\n    backgroundColor: props.unactiveBGColor || \"transparent\",\n  };\n\n  const currentStyle = (side: Sides) =>\n    side === activeSide ? activeStyle : unactiveStyle;\n\n  const borderRadius = props.borderRadius || \"3px\";\n  const leftBorderRadius = `${borderRadius} 0 0 ${borderRadius}`;\n  const rightBorderRadius = `0 ${borderRadius} ${borderRadius} 0`;\n\n  return (\n    <Flex\n      {...props}\n      width={props.width || \"280px\"}\n      sx={{\n        position: \"relative\",\n        cursor: \"pointer\",\n      }}\n      data-testid=\"text-switch\"\n    >\n      <Box\n        sx={{\n          backgroundColor: props.activeBGColor,\n          height: \"100%\",\n          width: \"50%\",\n          position: \"absolute\",\n          transform:\n            activeSide === \"left\" ? \"translateX(0)\" : \"translateX(100%)\",\n          transitionProperty: \"transform\",\n          transitionTimingFunction: \"ease-out\",\n          transitionDuration: \"0.1s\",\n          borderRadius:\n            activeSide === \"left\" ? leftBorderRadius : rightBorderRadius,\n        }}\n        data-testid=\"toggle\"\n      />\n      <Box\n        onClick={leftClicked}\n        width=\"50%\"\n        variant=\"_switches.textSwitch.side\"\n        py={props.sidePy}\n        px={props.sidePx}\n        sx={{\n          borderRadius: leftBorderRadius,\n          ...currentStyle(\"left\"),\n          borderRight: \"none !important\",\n        }}\n        data-testid=\"left\"\n      >\n        {props.leftText}\n      </Box>\n      <Box\n        onClick={rightClicked}\n        width=\"50%\"\n        variant=\"_switches.textSwitch.side\"\n        py={props.sidePy}\n        px={props.sidePx}\n        sx={{\n          borderRadius: rightBorderRadius,\n          ...currentStyle(\"right\"),\n          borderLeft: \"none !important\",\n        }}\n        data-testid=\"right\"\n      >\n        {props.rightText}\n      </Box>\n    </Flex>\n  );\n};\n"],"names":["TextSwitch","props","value","activeSide","setActiveSide","useState","useEffect","leftClicked","rightClicked","activeStyle","unactiveStyle","currentStyle","side","borderRadius","leftBorderRadius","rightBorderRadius","jsxs","Flex","jsx","Box"],"mappings":";;;AAMa,MAAAA,IAAwC,CAACC,MAAU;AACxD,QAAA,EAAE,OAAAC,EAAU,IAAAD,GACZ,CAACE,GAAYC,CAAa,IAAIC,EAAAA,SAAgBH,KAAS,MAAM;AAEnEI,EAAAA,EAAAA,UAAU,MAAM;AACd,IAAAJ,KAASE,EAAcF,CAAK;AAAA,EAAA,GAC3B,CAACA,CAAK,CAAC;AAEV,QAAMK,IAAc,MAAM;AACxB,IAAAH,EAAc,MAAM,GACpBH,EAAM,WAAW;AAAA,EAAA,GAGbO,IAAe,MAAM;AACzB,IAAAJ,EAAc,OAAO,GACrBH,EAAM,YAAY;AAAA,EAAA,GAGdQ,IAAc;AAAA,IAClB,OAAOR,EAAM,mBAAmB;AAAA,IAChC,QAAQ;AAAA,IACR,iBAAiB;AAAA,EAAA,GAGbS,IAAgB;AAAA,IACpB,OAAOT,EAAM;AAAA,IACb,QAAQ;AAAA,IACR,aAAaA,EAAM;AAAA,IACnB,iBAAiBA,EAAM,mBAAmB;AAAA,EAAA,GAGtCU,IAAe,CAACC,MACpBA,MAAST,IAAaM,IAAcC,GAEhCG,IAAeZ,EAAM,gBAAgB,OACrCa,IAAmB,GAAGD,CAAY,QAAQA,CAAY,IACtDE,IAAoB,KAAKF,CAAY,IAAIA,CAAY;AAGzD,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGhB;AAAA,MACJ,OAAOA,EAAM,SAAS;AAAA,MACtB,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MACA,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAAiB,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,iBAAiBlB,EAAM;AAAA,cACvB,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,cACV,WACEE,MAAe,SAAS,kBAAkB;AAAA,cAC5C,oBAAoB;AAAA,cACpB,0BAA0B;AAAA,cAC1B,oBAAoB;AAAA,cACpB,cACEA,MAAe,SAASW,IAAmBC;AAAA,YAC/C;AAAA,YACA,eAAY;AAAA,UAAA;AAAA,QACd;AAAA,QACAG,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAASZ;AAAA,YACT,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,IAAIN,EAAM;AAAA,YACV,IAAIA,EAAM;AAAA,YACV,IAAI;AAAA,cACF,cAAca;AAAA,cACd,GAAGH,EAAa,MAAM;AAAA,cACtB,aAAa;AAAA,YACf;AAAA,YACA,eAAY;AAAA,YAEX,UAAMV,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,QACAiB,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAASX;AAAA,YACT,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,IAAIP,EAAM;AAAA,YACV,IAAIA,EAAM;AAAA,YACV,IAAI;AAAA,cACF,cAAcc;AAAA,cACd,GAAGJ,EAAa,OAAO;AAAA,cACvB,YAAY;AAAA,YACd;AAAA,YACA,eAAY;AAAA,YAEX,UAAMV,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library126.js

@@ -1,4 +1,4 @@
-import { j as o } from "./sd-component-library190.js";
+import { j as o } from "./sd-component-library191.js";
 import { Box as e } from "rebass";
 import { useDependantState as d } from "./sd-component-library3.js";
 const i = 200, m = (r) => {

package/lib/sd-component-library127.js

@@ -1,11 +1,11 @@
-import { j as t } from "./sd-component-library190.js";
-import { useState as y } from "react";
+import { j as t } from "./sd-component-library191.js";
+import { r as _ } from "./sd-component-library188.js";
 import { Flex as m } from "rebass";
 import { useBoundingClientRect as x } from "./sd-component-library3.js";
-import { ArrowButton as l } from "./sd-component-library262.js";
-import { Mask as p } from "./sd-component-library263.js";
-import { Tab as A } from "./sd-component-library264.js";
-import { HorizontalDivider as E } from "./sd-component-library49.js";
+import { ArrowButton as l } from "./sd-component-library267.js";
+import { Mask as p } from "./sd-component-library268.js";
+import { Tab as y } from "./sd-component-library269.js";
+import { HorizontalDivider as A } from "./sd-component-library49.js";
 const s = 30, e = `${s}px`, w = "30px";
 function Q({
   tabs: u,
@@ -26,15 +26,15 @@ function Q({
   tabSx: X,
   innerContainerSx: $
 }) {
-  const [d, a] = y(0), { ref: D, rect: r } = x({
+  const [d, a] = _.useState(0), { ref: D, rect: r } = x({
     listenForResize: !0
-  }), { ref: L, rect: o } = x({
+  }), { ref: E, rect: o } = x({
     listenForResize: !0
-  }), f = !n && o && r && !!d, h = !n && o && r && d + r.width < o.width, O = () => {
+  }), f = !n && o && r && !!d, h = !n && o && r && d + r.width < o.width, L = () => {
     o && r && a(
       (i) => Math.max(0, i - r.width + 2 * s)
     );
-  }, _ = () => {
+  }, O = () => {
     o && r && a(
       (i) => Math.min(
         o.width - r.width + s,
@@ -61,7 +61,7 @@ function Q({
             l,
             {
               width: e,
-              onClick: O,
+              onClick: L,
               direction: "left"
             }
           ),
@@ -72,7 +72,7 @@ function Q({
             l,
             {
               width: e,
-              onClick: _,
+              onClick: O,
               direction: "right"
             }
           ),
@@ -90,9 +90,9 @@ function Q({
               overflowX: n ? "auto" : void 0,
               ...$
             },
-            ref: L,
+            ref: E,
             children: u.map((i) => /* @__PURE__ */ t.jsx(
-              A,
+              y,
               {
                 activeColor: g,
                 color: R,
@@ -112,7 +112,7 @@ function Q({
             ))
           }
         ),
-        k && /* @__PURE__ */ t.jsx(E, { height: "2px" })
+        k && /* @__PURE__ */ t.jsx(A, { height: "2px" })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library127.js","sources":["../src/components/tabs/tab-bar/tab-bar.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { Flex } from \"rebass\";\n\nimport { useBoundingClientRect } from \"../../../core/custom-hooks\";\nimport { HorizontalDivider } from \"../../dividers\";\nimport { TabBarProps } from \"./interfaces\";\nimport { ArrowButton, Mask, Tab } from \"./partials\";\n\nconst arrowButtonWidthPx = 30;\nconst arrowButtonWidth = `${arrowButtonWidthPx}px`;\nconst maskWidth = \"30px\";\n\nexport function TabBar<T>({\n  tabs,\n  selectedTabId,\n  onTabSelect,\n  activeColor = \"cl_purple\",\n  color = \"cl_darkGrey\",\n  displayBorder = true,\n  tabPadding = [\"16px 24px\"],\n  tabWidth,\n  tabHeight,\n  tabMaxWidth,\n  labelSx,\n  secondaryTextSx,\n  scrollable = true,\n  containerSx,\n  dontTranslate,\n  tabSx,\n  innerContainerSx,\n}: TabBarProps<T>) {\n  const [xOffset, setXOffset] = useState(0);\n\n  const { ref: containerRef, rect: containerRect } = useBoundingClientRect({\n    listenForResize: true,\n  });\n  const { ref: contentRef, rect: contentRect } = useBoundingClientRect({\n    listenForResize: true,\n  });\n\n  const canScrollLeft =\n    !scrollable && contentRect && containerRect && !!xOffset;\n  const canScrollRight =\n    !scrollable &&\n    contentRect &&\n    containerRect &&\n    xOffset + containerRect.width < contentRect.width;\n\n  const onScrollLeftClick = () => {\n    contentRect &&\n      containerRect &&\n      setXOffset((prev) =>\n        Math.max(0, prev - containerRect.width + 2 * arrowButtonWidthPx)\n      );\n  };\n\n  const onScrollRightClick = () => {\n    contentRect &&\n      containerRect &&\n      setXOffset((prev) =>\n        Math.min(\n          contentRect.width - containerRect.width + arrowButtonWidthPx,\n          prev + containerRect.width - 2 * arrowButtonWidthPx\n        )\n      );\n  };\n\n  return (\n    <Flex\n      sx={{\n        flexDirection: \"column\",\n        position: \"relative\",\n        overflow: \"hidden\",\n        width: \"100%\",\n        ...containerSx,\n      }}\n      className={dontTranslate ? \"no-translate\" : undefined}\n      ref={containerRef}\n      data-testid=\"tabs-bar\"\n    >\n      {canScrollLeft && (\n        <>\n          <ArrowButton\n            width={arrowButtonWidth}\n            onClick={onScrollLeftClick}\n            direction=\"left\"\n          />\n\n          <Mask width={maskWidth} offset={arrowButtonWidth} direction=\"left\" />\n        </>\n      )}\n\n      {canScrollRight && (\n        <>\n          <ArrowButton\n            width={arrowButtonWidth}\n            onClick={onScrollRightClick}\n            direction=\"right\"\n          />\n\n          <Mask width={maskWidth} offset={arrowButtonWidth} direction=\"right\" />\n        </>\n      )}\n\n      <Flex\n        sx={{\n          width: scrollable ? \"auto\" : \"max-content\",\n          ml: canScrollLeft ? arrowButtonWidth : 0,\n          mr: canScrollRight ? arrowButtonWidth : 0,\n          transform: `translateX(${-xOffset}px)`,\n          transition: \"transform 0.2s\",\n          overflowX: scrollable ? \"auto\" : undefined,\n          ...innerContainerSx,\n        }}\n        ref={contentRef}\n      >\n        {tabs.map((t) => (\n          <Tab\n            key={String(t.id)}\n            activeColor={activeColor}\n            color={color}\n            {...t}\n            selected={selectedTabId === t.id}\n            onClick={() => onTabSelect?.(t.id)}\n            tabPadding={tabPadding}\n            width={tabWidth}\n            height={tabHeight}\n            maxWidth={tabMaxWidth}\n            labelSx={labelSx}\n            secondaryTextSx={secondaryTextSx}\n            containerSx={tabSx}\n            data-test={`tab-${t.id}`}\n          />\n        ))}\n      </Flex>\n\n      {displayBorder && <HorizontalDivider height=\"2px\" />}\n    </Flex>\n  );\n}\n"],"names":["arrowButtonWidthPx","arrowButtonWidth","maskWidth","TabBar","tabs","selectedTabId","onTabSelect","activeColor","color","displayBorder","tabPadding","tabWidth","tabHeight","tabMaxWidth","labelSx","secondaryTextSx","scrollable","containerSx","dontTranslate","tabSx","innerContainerSx","xOffset","setXOffset","useState","containerRef","containerRect","useBoundingClientRect","contentRef","contentRect","canScrollLeft","canScrollRight","onScrollLeftClick","prev","onScrollRightClick","jsxs","Flex","Fragment","jsx","ArrowButton","Mask","t","Tab","HorizontalDivider"],"mappings":"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"}
+{"version":3,"file":"sd-component-library127.js","sources":["../src/components/tabs/tab-bar/tab-bar.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { Flex } from \"rebass\";\n\nimport { useBoundingClientRect } from \"../../../core/custom-hooks\";\nimport { HorizontalDivider } from \"../../dividers\";\nimport { TabBarProps } from \"./interfaces\";\nimport { ArrowButton, Mask, Tab } from \"./partials\";\n\nconst arrowButtonWidthPx = 30;\nconst arrowButtonWidth = `${arrowButtonWidthPx}px`;\nconst maskWidth = \"30px\";\n\nexport function TabBar<T>({\n  tabs,\n  selectedTabId,\n  onTabSelect,\n  activeColor = \"cl_purple\",\n  color = \"cl_darkGrey\",\n  displayBorder = true,\n  tabPadding = [\"16px 24px\"],\n  tabWidth,\n  tabHeight,\n  tabMaxWidth,\n  labelSx,\n  secondaryTextSx,\n  scrollable = true,\n  containerSx,\n  dontTranslate,\n  tabSx,\n  innerContainerSx,\n}: TabBarProps<T>) {\n  const [xOffset, setXOffset] = useState(0);\n\n  const { ref: containerRef, rect: containerRect } = useBoundingClientRect({\n    listenForResize: true,\n  });\n  const { ref: contentRef, rect: contentRect } = useBoundingClientRect({\n    listenForResize: true,\n  });\n\n  const canScrollLeft =\n    !scrollable && contentRect && containerRect && !!xOffset;\n  const canScrollRight =\n    !scrollable &&\n    contentRect &&\n    containerRect &&\n    xOffset + containerRect.width < contentRect.width;\n\n  const onScrollLeftClick = () => {\n    contentRect &&\n      containerRect &&\n      setXOffset((prev) =>\n        Math.max(0, prev - containerRect.width + 2 * arrowButtonWidthPx)\n      );\n  };\n\n  const onScrollRightClick = () => {\n    contentRect &&\n      containerRect &&\n      setXOffset((prev) =>\n        Math.min(\n          contentRect.width - containerRect.width + arrowButtonWidthPx,\n          prev + containerRect.width - 2 * arrowButtonWidthPx\n        )\n      );\n  };\n\n  return (\n    <Flex\n      sx={{\n        flexDirection: \"column\",\n        position: \"relative\",\n        overflow: \"hidden\",\n        width: \"100%\",\n        ...containerSx,\n      }}\n      className={dontTranslate ? \"no-translate\" : undefined}\n      ref={containerRef}\n      data-testid=\"tabs-bar\"\n    >\n      {canScrollLeft && (\n        <>\n          <ArrowButton\n            width={arrowButtonWidth}\n            onClick={onScrollLeftClick}\n            direction=\"left\"\n          />\n\n          <Mask width={maskWidth} offset={arrowButtonWidth} direction=\"left\" />\n        </>\n      )}\n\n      {canScrollRight && (\n        <>\n          <ArrowButton\n            width={arrowButtonWidth}\n            onClick={onScrollRightClick}\n            direction=\"right\"\n          />\n\n          <Mask width={maskWidth} offset={arrowButtonWidth} direction=\"right\" />\n        </>\n      )}\n\n      <Flex\n        sx={{\n          width: scrollable ? \"auto\" : \"max-content\",\n          ml: canScrollLeft ? arrowButtonWidth : 0,\n          mr: canScrollRight ? arrowButtonWidth : 0,\n          transform: `translateX(${-xOffset}px)`,\n          transition: \"transform 0.2s\",\n          overflowX: scrollable ? \"auto\" : undefined,\n          ...innerContainerSx,\n        }}\n        ref={contentRef}\n      >\n        {tabs.map((t) => (\n          <Tab\n            key={String(t.id)}\n            activeColor={activeColor}\n            color={color}\n            {...t}\n            selected={selectedTabId === t.id}\n            onClick={() => onTabSelect?.(t.id)}\n            tabPadding={tabPadding}\n            width={tabWidth}\n            height={tabHeight}\n            maxWidth={tabMaxWidth}\n            labelSx={labelSx}\n            secondaryTextSx={secondaryTextSx}\n            containerSx={tabSx}\n            data-test={`tab-${t.id}`}\n          />\n        ))}\n      </Flex>\n\n      {displayBorder && <HorizontalDivider height=\"2px\" />}\n    </Flex>\n  );\n}\n"],"names":["arrowButtonWidthPx","arrowButtonWidth","maskWidth","TabBar","tabs","selectedTabId","onTabSelect","activeColor","color","displayBorder","tabPadding","tabWidth","tabHeight","tabMaxWidth","labelSx","secondaryTextSx","scrollable","containerSx","dontTranslate","tabSx","innerContainerSx","xOffset","setXOffset","useState","containerRef","containerRect","useBoundingClientRect","contentRef","contentRect","canScrollLeft","canScrollRight","onScrollLeftClick","prev","onScrollRightClick","jsxs","Flex","Fragment","jsx","ArrowButton","Mask","t","Tab","HorizontalDivider"],"mappings":"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"}

package/lib/sd-component-library128.js

@@ -1,6 +1,6 @@
-import { j as t } from "./sd-component-library190.js";
+import { j as t } from "./sd-component-library191.js";
 import { Box as w, Flex as s } from "rebass";
-import { TabV2 as T } from "./sd-component-library265.js";
+import { TabV2 as T } from "./sd-component-library270.js";
 import { GridContainerV2 as G } from "./sd-component-library39.js";
 const h = 25, b = ({
   tabs: e,

package/lib/sd-component-library129.js

@@ -1,4 +1,4 @@
-import { j as s } from "./sd-component-library190.js";
+import { j as s } from "./sd-component-library191.js";
 import { Box as d } from "rebass";
 import { TabBarV2 as b } from "./sd-component-library128.js";
 const p = (r) => {

package/lib/sd-component-library13.js

@@ -1,4 +1,4 @@
-import { j as a } from "./sd-component-library190.js";
+import { j as a } from "./sd-component-library191.js";
 import { Breadcrumb as m } from "./sd-component-library15.js";
 const o = (r) => /* @__PURE__ */ a.jsx(m, { ...r, variant: "primary", "data-testid": "primary-breadcrumb" });
 export {