@selfdecode/sd-component-library 4.0.106 → 4.0.108

package/lib/sd-component-library128.js

@@ -1,60 +1,63 @@
-import { j as o } from "./sd-component-library197.js";
+import { j as o } from "./sd-component-library198.js";
 import { useState as x } from "react";
-import { Flex as i } from "rebass";
-import { OutsideClickBox as d } from "./sd-component-library11.js";
-import { BaseLabel as u } from "./sd-component-library222.js";
-import { ReactComponent as f } from "./sd-component-library188.js";
+import { BaseLabel as f } from "./sd-component-library228.js";
+import { ReactComponent as u } from "./sd-component-library189.js";
 import { CustomScrollableOptionsBox as h } from "./sd-component-library267.js";
-import { ResponsiveTextV2 as b } from "./sd-component-library151.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);
-  return /* @__PURE__ */ o.jsxs(
-    d,
+import { GridContainerV2 as S } from "./sd-component-library40.js";
+import { OutsideClickBox as b } from "./sd-component-library12.js";
+import { ResponsiveTextV2 as C } from "./sd-component-library152.js";
+import { FlexCenter as g } from "./sd-component-library36.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(
+    S,
     {
-      onClickOutside: p,
-      onClick: a,
-      sx: { width: c, position: "relative", cursor: "pointer" },
+      width: p,
+      variant: "_containers.selectors.customScrollable",
+      sx: { cursor: "default", ...m },
       children: [
-        /* @__PURE__ */ o.jsx(u, { variant: "selectors.primaryV2", label: l }),
+        /* @__PURE__ */ o.jsx(f, { variant: "selectors.customScrollable", label: a }),
         /* @__PURE__ */ o.jsxs(
-          i,
+          b,
           {
-            alignItems: "center",
+            onClickOutside: d,
+            onClick: () => i((t) => !t),
             sx: {
-              height: "42px",
-              borderRadius: "3px",
-              border: "1px solid",
+              position: "relative",
+              display: "grid",
+              gridTemplateColumns: "1fr max-content",
+              gap: "5px",
+              alignItems: "center",
+              cursor: "pointer",
+              pb: "2px",
+              borderBottom: "2px solid",
               borderColor: "cl_lightGrey",
-              px: "16px"
+              borderWidth: "2px"
             },
             children: [
-              s,
-              /* @__PURE__ */ o.jsx(b, { fontSizeWeight: [[16, "regular"]], color: "cl_purple", children: n.title }),
+              /* @__PURE__ */ o.jsx(C, { fontSizeWeight: [[24, "bold"]], color: "cl_purple", children: s.title }),
               /* @__PURE__ */ o.jsx(
-                i,
+                g,
                 {
                   width: "10px",
                   height: "10px",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  ml: "auto",
                   sx: {
                     transform: `rotate3d(${e ? 1 : 0}, 0, 0, 180deg)`,
                     transition: "all 0.2s",
-                    fill: e ? "cl_purple" : "cl_blue"
+                    fill: "cl_purple"
                   },
-                  children: /* @__PURE__ */ o.jsx(f, {})
+                  children: /* @__PURE__ */ o.jsx(u, {})
                 }
-              )
+              ),
+              e && /* @__PURE__ */ o.jsx(h, { options: r, onSelect: c })
             ]
           }
-        ),
-        /* @__PURE__ */ o.jsx(h, { isVisible: e, ...t })
+        )
       ]
     }
-  );
+  ) : null;
 };
 export {
-  w as PrimaryCustomScrollableSelector
+  G as CustomScrollableSelector
 };
 //# sourceMappingURL=sd-component-library128.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library128.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-library128.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-library129.js

@@ -1,16 +1,60 @@
-import { j as e } from "./sd-component-library197.js";
-import { SelectorV2 as r } from "./sd-component-library122.js";
-const d = (t) => /* @__PURE__ */ e.jsx(
-  r,
-  {
-    variant: "updatedSecondary",
-    gap: ["0"],
-    defaultOptionColor: t.defaultOptionColor || "cl_grey",
-    ...t,
-    "data-test": "tertiary-selector-v2"
-  }
-);
+import { j as o } from "./sd-component-library198.js";
+import { useState as x } from "react";
+import { Flex as i } from "rebass";
+import { OutsideClickBox as d } from "./sd-component-library12.js";
+import { BaseLabel as u } from "./sd-component-library228.js";
+import { ReactComponent as f } from "./sd-component-library189.js";
+import { CustomScrollableOptionsBox as h } from "./sd-component-library268.js";
+import { ResponsiveTextV2 as b } from "./sd-component-library152.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);
+  return /* @__PURE__ */ o.jsxs(
+    d,
+    {
+      onClickOutside: p,
+      onClick: a,
+      sx: { width: c, position: "relative", cursor: "pointer" },
+      children: [
+        /* @__PURE__ */ o.jsx(u, { variant: "selectors.primaryV2", label: l }),
+        /* @__PURE__ */ o.jsxs(
+          i,
+          {
+            alignItems: "center",
+            sx: {
+              height: "42px",
+              borderRadius: "3px",
+              border: "1px solid",
+              borderColor: "cl_lightGrey",
+              px: "16px"
+            },
+            children: [
+              s,
+              /* @__PURE__ */ o.jsx(b, { fontSizeWeight: [[16, "regular"]], color: "cl_purple", children: n.title }),
+              /* @__PURE__ */ o.jsx(
+                i,
+                {
+                  width: "10px",
+                  height: "10px",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  ml: "auto",
+                  sx: {
+                    transform: `rotate3d(${e ? 1 : 0}, 0, 0, 180deg)`,
+                    transition: "all 0.2s",
+                    fill: e ? "cl_purple" : "cl_blue"
+                  },
+                  children: /* @__PURE__ */ o.jsx(f, {})
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ o.jsx(h, { isVisible: e, ...t })
+      ]
+    }
+  );
+};
 export {
-  d as UpdatedSecondarySelectorV2
+  w as PrimaryCustomScrollableSelector
 };
 //# sourceMappingURL=sd-component-library129.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library129.js","sources":["../src/components/selectors/updated-secondary-selector-v2/updated-secondary-selector-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { SelectorV2 } from \"../selector-v2\";\nimport { UpdatedSecondarySelectorV2Props as Props } from \"./interfaces\";\n\nexport const UpdatedSecondarySelectorV2: React.FC<Props> = (props) => {\n  return (\n    <SelectorV2\n      variant=\"updatedSecondary\"\n      gap={[\"0\"]}\n      defaultOptionColor={props.defaultOptionColor || \"cl_grey\"}\n      {...props}\n      data-test=\"tertiary-selector-v2\"\n    />\n  );\n};\n"],"names":["UpdatedSecondarySelectorV2","props","jsx","SelectorV2"],"mappings":";;AAKa,MAAAA,IAA8C,CAACC,MAExDC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,SAAQ;AAAA,IACR,KAAK,CAAC,GAAG;AAAA,IACT,oBAAoBF,EAAM,sBAAsB;AAAA,IAC/C,GAAGA;AAAA,IACJ,aAAU;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"sd-component-library129.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;"}

package/lib/sd-component-library13.js

@@ -1,7 +1,25 @@
-import { j as a } from "./sd-component-library197.js";
-import { Breadcrumb as m } from "./sd-component-library15.js";
-const o = (r) => /* @__PURE__ */ a.jsx(m, { ...r, variant: "primary", "data-testid": "primary-breadcrumb" });
+import { j as m } from "./sd-component-library198.js";
+import { Box as n } from "rebass";
+const c = ({
+  url: o,
+  backgroundPosition: e = "center",
+  backgroundSize: t = "cover",
+  backgroundRepeat: x = "no-repeat",
+  ...r
+}) => /* @__PURE__ */ m.jsx(
+  n,
+  {
+    ...r,
+    sx: {
+      backgroundImage: `url(${o})`,
+      backgroundSize: t,
+      backgroundRepeat: x,
+      backgroundPosition: e,
+      ...r.sx
+    }
+  }
+);
 export {
-  o as PrimaryBreadcrumb
+  c as BgImageBox
 };
 //# sourceMappingURL=sd-component-library13.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library13.js","sources":["../src/components/breadcrumbs/primary-breadcrumb/primary-breadcrumb.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Breadcrumb } from \"../breadcrumb\";\nimport { PrimaryBreadCrumbProps } from \"./interfaces\";\n\nexport const PrimaryBreadcrumb: React.FC<PrimaryBreadCrumbProps> = (props) => (\n  <Breadcrumb {...props} variant=\"primary\" data-testid=\"primary-breadcrumb\" />\n);\n"],"names":["PrimaryBreadcrumb","props","jsx","Breadcrumb"],"mappings":";;AAKa,MAAAA,IAAsD,CAACC,MACjEC,gBAAAA,EAAA,IAAAC,GAAA,EAAY,GAAGF,GAAO,SAAQ,WAAU,eAAY,qBAAqB,CAAA;"}
+{"version":3,"file":"sd-component-library13.js","sources":["../src/components/boxes/bg-image-box/bg-image-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { BgImageBoxProps as Props } from \"./interfaces\";\n\nexport const BgImageBox: React.FC<Props> = ({\n  url,\n  backgroundPosition = \"center\",\n  backgroundSize = \"cover\",\n  backgroundRepeat = \"no-repeat\",\n  ...props\n}) => {\n  return (\n    <Box\n      {...props}\n      sx={{\n        backgroundImage: `url(${url})`,\n        backgroundSize,\n        backgroundRepeat,\n        backgroundPosition,\n        ...props.sx,\n      }}\n    />\n  );\n};\n"],"names":["BgImageBox","url","backgroundPosition","backgroundSize","backgroundRepeat","props","jsx","Box"],"mappings":";;AAMO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,KAAAC;AAAA,EACA,oBAAAC,IAAqB;AAAA,EACrB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,GAAGC;AACL,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,IAAI;AAAA,MACF,iBAAiB,OAAOJ,CAAG;AAAA,MAC3B,gBAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,oBAAAF;AAAA,MACA,GAAGG,EAAM;AAAA,IACX;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library130.js

@@ -1,71 +1,16 @@
-import { j as t } from "./sd-component-library197.js";
-import { IconButton as s } from "./sd-component-library22.js";
-import { ReactComponent as c } from "./sd-component-library209.js";
-import { EighteenBold as p } from "./sd-component-library142.js";
-import { GridCenter as g } from "./sd-component-library42.js";
-const C = ({
-  currentSelection: o,
-  selectionOptions: e,
-  onSelect: i,
-  width: a = ["180px"],
-  m: l
-}) => {
-  const r = e.findIndex(
-    ({ id: m }) => m === o.id
-  ), n = r === 0, d = r === e.length - 1, x = () => i(e[r - 1]), h = () => i(e[r + 1]);
-  return /* @__PURE__ */ t.jsxs(
-    g,
-    {
-      width: a,
-      gridTemplateColumns: "max-content 1fr max-content",
-      gap: "5px",
-      m: l,
-      "data-testid": "carousel-switch",
-      children: [
-        /* @__PURE__ */ t.jsx(
-          s,
-          {
-            width: "100%",
-            height: "6px",
-            disabled: n,
-            onClick: x,
-            color: n ? "cl_grey" : "cl_blue",
-            sx: {
-              transform: "rotate(-90deg)"
-            },
-            "data-testid": "switch-previous-icon",
-            children: /* @__PURE__ */ t.jsx(c, {})
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          p,
-          {
-            textAlign: "center",
-            color: "cl_purple",
-            "data-testid": "current-selection",
-            children: o.title
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          s,
-          {
-            width: "100%",
-            height: "6px",
-            disabled: d,
-            color: d ? "cl_grey" : "cl_blue",
-            onClick: h,
-            sx: {
-              transform: "rotate(90deg)"
-            },
-            "data-testid": "switch-next-icon",
-            children: /* @__PURE__ */ t.jsx(c, {})
-          }
-        )
-      ]
-    }
-  );
-};
+import { j as e } from "./sd-component-library198.js";
+import { SelectorV2 as r } from "./sd-component-library123.js";
+const d = (t) => /* @__PURE__ */ e.jsx(
+  r,
+  {
+    variant: "updatedSecondary",
+    gap: ["0"],
+    defaultOptionColor: t.defaultOptionColor || "cl_grey",
+    ...t,
+    "data-test": "tertiary-selector-v2"
+  }
+);
 export {
-  C as CarouselSwitch
+  d as UpdatedSecondarySelectorV2
 };
 //# sourceMappingURL=sd-component-library130.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library130.js","sources":["../src/components/switches/carousel-switch/carousel-switch.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { DropdownArrowIcon } from \"../../accordions/base-accordion/assets\";\nimport { IconButton } from \"../../buttons\";\nimport { GridCenter } from \"../../containers\";\nimport { EighteenBold } from \"../../texts\";\nimport { CarouselSwitchProps } from \"./interfaces\";\n\nexport const CarouselSwitch: React.FC<CarouselSwitchProps> = ({\n  currentSelection,\n  selectionOptions,\n  onSelect,\n  width = [\"180px\"],\n  m,\n}) => {\n  const currentSelectionIndex = selectionOptions.findIndex(\n    ({ id }) => id === currentSelection.id\n  );\n\n  const leftDisabled = currentSelectionIndex === 0;\n  const rightDisabled = currentSelectionIndex === selectionOptions.length - 1;\n\n  const handleSwapLeft = () =>\n    onSelect(selectionOptions[currentSelectionIndex - 1]);\n\n  const handleSwapRight = () =>\n    onSelect(selectionOptions[currentSelectionIndex + 1]);\n\n  return (\n    <GridCenter\n      width={width}\n      gridTemplateColumns={\"max-content 1fr max-content\"}\n      gap={\"5px\"}\n      m={m}\n      data-testid=\"carousel-switch\"\n    >\n      <IconButton\n        width={\"100%\"}\n        height={\"6px\"}\n        disabled={leftDisabled}\n        onClick={handleSwapLeft}\n        color={leftDisabled ? \"cl_grey\" : \"cl_blue\"}\n        sx={{\n          transform: \"rotate(-90deg)\",\n        }}\n        data-testid=\"switch-previous-icon\"\n      >\n        <DropdownArrowIcon />\n      </IconButton>\n\n      <EighteenBold\n        textAlign=\"center\"\n        color=\"cl_purple\"\n        data-testid=\"current-selection\"\n      >\n        {currentSelection.title}\n      </EighteenBold>\n\n      <IconButton\n        width={\"100%\"}\n        height={\"6px\"}\n        disabled={rightDisabled}\n        color={rightDisabled ? \"cl_grey\" : \"cl_blue\"}\n        onClick={handleSwapRight}\n        sx={{\n          transform: \"rotate(90deg)\",\n        }}\n        data-testid=\"switch-next-icon\"\n      >\n        <DropdownArrowIcon />\n      </IconButton>\n    </GridCenter>\n  );\n};\n"],"names":["CarouselSwitch","currentSelection","selectionOptions","onSelect","width","m","currentSelectionIndex","id","leftDisabled","rightDisabled","handleSwapLeft","handleSwapRight","jsxs","GridCenter","jsx","IconButton","DropdownArrowIcon","EighteenBold"],"mappings":";;;;;AAQO,MAAMA,IAAgD,CAAC;AAAA,EAC5D,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ,CAAC,OAAO;AAAA,EAChB,GAAAC;AACF,MAAM;AACJ,QAAMC,IAAwBJ,EAAiB;AAAA,IAC7C,CAAC,EAAE,IAAAK,EAAG,MAAMA,MAAON,EAAiB;AAAA,EAAA,GAGhCO,IAAeF,MAA0B,GACzCG,IAAgBH,MAA0BJ,EAAiB,SAAS,GAEpEQ,IAAiB,MACrBP,EAASD,EAAiBI,IAAwB,CAAC,CAAC,GAEhDK,IAAkB,MACtBR,EAASD,EAAiBI,IAAwB,CAAC,CAAC;AAGpD,SAAAM,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAT;AAAA,MACA,qBAAqB;AAAA,MACrB,KAAK;AAAA,MACL,GAAAC;AAAA,MACA,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAAS,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAUP;AAAA,YACV,SAASE;AAAA,YACT,OAAOF,IAAe,YAAY;AAAA,YAClC,IAAI;AAAA,cACF,WAAW;AAAA,YACb;AAAA,YACA,eAAY;AAAA,YAEZ,gCAACQ,GAAkB,EAAA;AAAA,UAAA;AAAA,QACrB;AAAA,QAEAF,gBAAAA,EAAA;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAM;AAAA,YACN,eAAY;AAAA,YAEX,UAAiBhB,EAAA;AAAA,UAAA;AAAA,QACpB;AAAA,QAEAa,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAUN;AAAA,YACV,OAAOA,IAAgB,YAAY;AAAA,YACnC,SAASE;AAAA,YACT,IAAI;AAAA,cACF,WAAW;AAAA,YACb;AAAA,YACA,eAAY;AAAA,YAEZ,gCAACK,GAAkB,EAAA;AAAA,UAAA;AAAA,QACrB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library130.js","sources":["../src/components/selectors/updated-secondary-selector-v2/updated-secondary-selector-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { SelectorV2 } from \"../selector-v2\";\nimport { UpdatedSecondarySelectorV2Props as Props } from \"./interfaces\";\n\nexport const UpdatedSecondarySelectorV2: React.FC<Props> = (props) => {\n  return (\n    <SelectorV2\n      variant=\"updatedSecondary\"\n      gap={[\"0\"]}\n      defaultOptionColor={props.defaultOptionColor || \"cl_grey\"}\n      {...props}\n      data-test=\"tertiary-selector-v2\"\n    />\n  );\n};\n"],"names":["UpdatedSecondarySelectorV2","props","jsx","SelectorV2"],"mappings":";;AAKa,MAAAA,IAA8C,CAACC,MAExDC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,SAAQ;AAAA,IACR,KAAK,CAAC,GAAG;AAAA,IACT,oBAAoBF,EAAM,sBAAsB;AAAA,IAC/C,GAAGA;AAAA,IACJ,aAAU;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library131.js

@@ -1,43 +1,71 @@
-import { j as n } from "./sd-component-library197.js";
-import { Box as t } from "rebass";
-const s = 200, c = "40px", i = "3px", p = "20px", a = `calc(${p} - 2 * ${i})`, e = ({
-  value: r,
-  setValue: o,
-  inactiveColor: x = "cl_lightGrey",
-  activeColor: m = "cl_purple"
+import { j as t } from "./sd-component-library198.js";
+import { IconButton as s } from "./sd-component-library23.js";
+import { ReactComponent as c } from "./sd-component-library202.js";
+import { EighteenBold as p } from "./sd-component-library143.js";
+import { GridCenter as g } from "./sd-component-library43.js";
+const C = ({
+  currentSelection: o,
+  selectionOptions: e,
+  onSelect: i,
+  width: a = ["180px"],
+  m: l
 }) => {
-  const l = () => {
-    o == null || o(!r);
-  };
-  return /* @__PURE__ */ n.jsx(
-    t,
+  const r = e.findIndex(
+    ({ id: m }) => m === o.id
+  ), n = r === 0, d = r === e.length - 1, x = () => i(e[r - 1]), h = () => i(e[r + 1]);
+  return /* @__PURE__ */ t.jsxs(
+    g,
     {
-      bg: r ? m : x,
-      sx: {
-        borderRadius: 100,
-        cursor: "pointer",
-        transition: `all ${s}ms`
-      },
-      width: c,
-      p: i,
-      height: p,
-      onClick: l,
-      children: /* @__PURE__ */ n.jsx(
-        t,
-        {
-          size: a,
-          bg: "white",
-          sx: {
-            borderRadius: "50%",
-            transform: `translateX(${r ? `calc(${c} - 2 * ${i} - ${a})` : 0})`,
-            transition: `all ${s}ms`
+      width: a,
+      gridTemplateColumns: "max-content 1fr max-content",
+      gap: "5px",
+      m: l,
+      "data-testid": "carousel-switch",
+      children: [
+        /* @__PURE__ */ t.jsx(
+          s,
+          {
+            width: "100%",
+            height: "6px",
+            disabled: n,
+            onClick: x,
+            color: n ? "cl_grey" : "cl_blue",
+            sx: {
+              transform: "rotate(-90deg)"
+            },
+            "data-testid": "switch-previous-icon",
+            children: /* @__PURE__ */ t.jsx(c, {})
           }
-        }
-      )
+        ),
+        /* @__PURE__ */ t.jsx(
+          p,
+          {
+            textAlign: "center",
+            color: "cl_purple",
+            "data-testid": "current-selection",
+            children: o.title
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          s,
+          {
+            width: "100%",
+            height: "6px",
+            disabled: d,
+            color: d ? "cl_grey" : "cl_blue",
+            onClick: h,
+            sx: {
+              transform: "rotate(90deg)"
+            },
+            "data-testid": "switch-next-icon",
+            children: /* @__PURE__ */ t.jsx(c, {})
+          }
+        )
+      ]
     }
   );
 };
 export {
-  e as PrimaryToggleSwitch
+  C as CarouselSwitch
 };
 //# sourceMappingURL=sd-component-library131.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library131.js","sources":["../src/components/switches/primary-toggle-switch/primary-toggle-switch.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { PrimaryToggleSwitchProps as Props } from \"./interfaces\";\n\nconst animationDuration = 200;\nconst width = \"40px\";\nconst p = \"3px\";\nconst height = \"20px\";\nconst innerSize = `calc(${height} - 2 * ${p})`;\n\nexport const PrimaryToggleSwitch: React.FC<Props> = ({\n  value,\n  setValue,\n  inactiveColor = \"cl_lightGrey\",\n  activeColor = \"cl_purple\",\n}) => {\n  const onBadgeClick = () => {\n    setValue?.(!value);\n  };\n\n  return (\n    <Box\n      bg={value ? activeColor : inactiveColor}\n      sx={{\n        borderRadius: 100,\n        cursor: \"pointer\",\n        transition: `all ${animationDuration}ms`,\n      }}\n      {...{ width, p, height }}\n      onClick={onBadgeClick}\n    >\n      <Box\n        size={innerSize}\n        bg=\"white\"\n        sx={{\n          borderRadius: \"50%\",\n          transform: `translateX(${\n            value ? `calc(${width} - 2 * ${p} - ${innerSize})` : 0\n          })`,\n          transition: `all ${animationDuration}ms`,\n        }}\n      />\n    </Box>\n  );\n};\n"],"names":["animationDuration","width","p","height","innerSize","PrimaryToggleSwitch","value","setValue","inactiveColor","activeColor","onBadgeClick","jsx","Box"],"mappings":";;AAMA,MAAMA,IAAoB,KACpBC,IAAQ,QACRC,IAAI,OACJC,IAAS,QACTC,IAAY,QAAQD,CAAM,UAAUD,CAAC,KAE9BG,IAAuC,CAAC;AAAA,EACnD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAChB,MAAM;AACJ,QAAMC,IAAe,MAAM;AACzB,IAAAH,KAAA,QAAAA,EAAW,CAACD;AAAA,EAAK;AAIjB,SAAAK,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAIN,IAAQG,IAAcD;AAAA,MAC1B,IAAI;AAAA,QACF,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,YAAY,OAAOR,CAAiB;AAAA,MACtC;AAAA,MACM,OAAAC;AAAA,MAAO,GAAAC;AAAA,MAAG,QAAAC;AAAA,MAChB,SAASO;AAAA,MAET,UAAAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAMR;AAAA,UACN,IAAG;AAAA,UACH,IAAI;AAAA,YACF,cAAc;AAAA,YACd,WAAW,cACTE,IAAQ,QAAQL,CAAK,UAAUC,CAAC,MAAME,CAAS,MAAM,CACvD;AAAA,YACA,YAAY,OAAOJ,CAAiB;AAAA,UACtC;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library131.js","sources":["../src/components/switches/carousel-switch/carousel-switch.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { DropdownArrowIcon } from \"../../accordions/base-accordion/assets\";\nimport { IconButton } from \"../../buttons\";\nimport { GridCenter } from \"../../containers\";\nimport { EighteenBold } from \"../../texts\";\nimport { CarouselSwitchProps } from \"./interfaces\";\n\nexport const CarouselSwitch: React.FC<CarouselSwitchProps> = ({\n  currentSelection,\n  selectionOptions,\n  onSelect,\n  width = [\"180px\"],\n  m,\n}) => {\n  const currentSelectionIndex = selectionOptions.findIndex(\n    ({ id }) => id === currentSelection.id\n  );\n\n  const leftDisabled = currentSelectionIndex === 0;\n  const rightDisabled = currentSelectionIndex === selectionOptions.length - 1;\n\n  const handleSwapLeft = () =>\n    onSelect(selectionOptions[currentSelectionIndex - 1]);\n\n  const handleSwapRight = () =>\n    onSelect(selectionOptions[currentSelectionIndex + 1]);\n\n  return (\n    <GridCenter\n      width={width}\n      gridTemplateColumns={\"max-content 1fr max-content\"}\n      gap={\"5px\"}\n      m={m}\n      data-testid=\"carousel-switch\"\n    >\n      <IconButton\n        width={\"100%\"}\n        height={\"6px\"}\n        disabled={leftDisabled}\n        onClick={handleSwapLeft}\n        color={leftDisabled ? \"cl_grey\" : \"cl_blue\"}\n        sx={{\n          transform: \"rotate(-90deg)\",\n        }}\n        data-testid=\"switch-previous-icon\"\n      >\n        <DropdownArrowIcon />\n      </IconButton>\n\n      <EighteenBold\n        textAlign=\"center\"\n        color=\"cl_purple\"\n        data-testid=\"current-selection\"\n      >\n        {currentSelection.title}\n      </EighteenBold>\n\n      <IconButton\n        width={\"100%\"}\n        height={\"6px\"}\n        disabled={rightDisabled}\n        color={rightDisabled ? \"cl_grey\" : \"cl_blue\"}\n        onClick={handleSwapRight}\n        sx={{\n          transform: \"rotate(90deg)\",\n        }}\n        data-testid=\"switch-next-icon\"\n      >\n        <DropdownArrowIcon />\n      </IconButton>\n    </GridCenter>\n  );\n};\n"],"names":["CarouselSwitch","currentSelection","selectionOptions","onSelect","width","m","currentSelectionIndex","id","leftDisabled","rightDisabled","handleSwapLeft","handleSwapRight","jsxs","GridCenter","jsx","IconButton","DropdownArrowIcon","EighteenBold"],"mappings":";;;;;AAQO,MAAMA,IAAgD,CAAC;AAAA,EAC5D,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ,CAAC,OAAO;AAAA,EAChB,GAAAC;AACF,MAAM;AACJ,QAAMC,IAAwBJ,EAAiB;AAAA,IAC7C,CAAC,EAAE,IAAAK,EAAG,MAAMA,MAAON,EAAiB;AAAA,EAAA,GAGhCO,IAAeF,MAA0B,GACzCG,IAAgBH,MAA0BJ,EAAiB,SAAS,GAEpEQ,IAAiB,MACrBP,EAASD,EAAiBI,IAAwB,CAAC,CAAC,GAEhDK,IAAkB,MACtBR,EAASD,EAAiBI,IAAwB,CAAC,CAAC;AAGpD,SAAAM,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAT;AAAA,MACA,qBAAqB;AAAA,MACrB,KAAK;AAAA,MACL,GAAAC;AAAA,MACA,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAAS,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAUP;AAAA,YACV,SAASE;AAAA,YACT,OAAOF,IAAe,YAAY;AAAA,YAClC,IAAI;AAAA,cACF,WAAW;AAAA,YACb;AAAA,YACA,eAAY;AAAA,YAEZ,gCAACQ,GAAkB,EAAA;AAAA,UAAA;AAAA,QACrB;AAAA,QAEAF,gBAAAA,EAAA;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAM;AAAA,YACN,eAAY;AAAA,YAEX,UAAiBhB,EAAA;AAAA,UAAA;AAAA,QACpB;AAAA,QAEAa,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAUN;AAAA,YACV,OAAOA,IAAgB,YAAY;AAAA,YACnC,SAASE;AAAA,YACT,IAAI;AAAA,cACF,WAAW;AAAA,YACb;AAAA,YACA,eAAY;AAAA,YAEZ,gCAACK,GAAkB,EAAA;AAAA,UAAA;AAAA,QACrB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library132.js

@@ -1,92 +1,43 @@
-import { j as r } from "./sd-component-library197.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(() => {
-    e && n(e);
-  }, [e]);
+import { j as n } from "./sd-component-library198.js";
+import { Box as t } from "rebass";
+const s = 200, c = "40px", i = "3px", p = "20px", a = `calc(${p} - 2 * ${i})`, e = ({
+  value: r,
+  setValue: o,
+  inactiveColor: x = "cl_lightGrey",
+  activeColor: m = "cl_purple"
+}) => {
   const l = () => {
-    n("left"), t.leftActive();
-  }, x = () => {
-    n("right"), t.rightActive();
-  }, u = {
-    color: t.activeTextColor || "#fff",
-    border: "none",
-    backgroundColor: "transparent"
-  }, h = {
-    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`;
-  return /* @__PURE__ */ r.jsxs(
-    b,
+    o == null || o(!r);
+  };
+  return /* @__PURE__ */ n.jsx(
+    t,
     {
-      ...t,
-      width: t.width || "280px",
+      bg: r ? m : x,
       sx: {
-        position: "relative",
-        cursor: "pointer"
+        borderRadius: 100,
+        cursor: "pointer",
+        transition: `all ${s}ms`
       },
-      "data-testid": "text-switch",
-      children: [
-        /* @__PURE__ */ r.jsx(
-          a,
-          {
-            sx: {
-              backgroundColor: t.activeBGColor,
-              height: "100%",
-              width: "50%",
-              position: "absolute",
-              transform: o === "left" ? "translateX(0)" : "translateX(100%)",
-              transitionProperty: "transform",
-              transitionTimingFunction: "ease-out",
-              transitionDuration: "0.1s",
-              borderRadius: o === "left" ? s : c
-            },
-            "data-testid": "toggle"
+      width: c,
+      p: i,
+      height: p,
+      onClick: l,
+      children: /* @__PURE__ */ n.jsx(
+        t,
+        {
+          size: a,
+          bg: "white",
+          sx: {
+            borderRadius: "50%",
+            transform: `translateX(${r ? `calc(${c} - 2 * ${i} - ${a})` : 0})`,
+            transition: `all ${s}ms`
           }
-        ),
-        /* @__PURE__ */ r.jsx(
-          a,
-          {
-            onClick: l,
-            width: "50%",
-            variant: "_switches.textSwitch.side",
-            py: t.sidePy,
-            px: t.sidePx,
-            sx: {
-              borderRadius: s,
-              ...d("left"),
-              borderRight: "none !important"
-            },
-            "data-testid": "left",
-            children: t.leftText
-          }
-        ),
-        /* @__PURE__ */ r.jsx(
-          a,
-          {
-            onClick: x,
-            width: "50%",
-            variant: "_switches.textSwitch.side",
-            py: t.sidePy,
-            px: t.sidePx,
-            sx: {
-              borderRadius: c,
-              ...d("right"),
-              borderLeft: "none !important"
-            },
-            "data-testid": "right",
-            children: t.rightText
-          }
-        )
-      ]
+        }
+      )
     }
   );
 };
 export {
-  R as TextSwitch
+  e as PrimaryToggleSwitch
 };
 //# sourceMappingURL=sd-component-library132.js.map