@selfdecode/sd-component-library 4.0.95 → 4.0.96

package/lib/sd-component-library109.js

@@ -1,4 +1,4 @@
-import { j as s } from "./sd-component-library196.js";
+import { j as s } from "./sd-component-library197.js";
 import { Flex as i, Box as t } from "rebass";
 const g = ({
   totalSteps: e,

package/lib/sd-component-library11.js

@@ -1,4 +1,4 @@
-import { j as u } from "./sd-component-library196.js";
+import { j as u } from "./sd-component-library197.js";
 import { useRef as a, useEffect as i } from "react";
 import { Box as f } from "rebass";
 const p = ({

package/lib/sd-component-library110.js

@@ -1,4 +1,4 @@
-import { j as s } from "./sd-component-library196.js";
+import { j as s } from "./sd-component-library197.js";
 import { Box as i } from "rebass";
 const c = ({
   currentStep: e,

package/lib/sd-component-library111.js

@@ -1,4 +1,4 @@
-import { j as o } from "./sd-component-library196.js";
+import { j as o } from "./sd-component-library197.js";
 import { Box as n } from "rebass";
 import { ProgressBar as a } from "./sd-component-library109.js";
 const c = (r) => {

package/lib/sd-component-library112.js

@@ -1,6 +1,6 @@
-import { j as i } from "./sd-component-library196.js";
+import { j as i } from "./sd-component-library197.js";
 import { Flex as n } from "rebass";
-import { ProgressStep as x } from "./sd-component-library199.js";
+import { ProgressStep as x } from "./sd-component-library200.js";
 const g = ({
   height: t,
   steps: s,

package/lib/sd-component-library113.js

@@ -1,11 +1,11 @@
-import { j as e } from "./sd-component-library196.js";
+import { j as e } from "./sd-component-library197.js";
 import { useMemo as P } from "react";
 import { Select as Z } from "@rebass/forms";
 import { Box as q } from "rebass";
 import { useDependantState as G } from "./sd-component-library3.js";
-import { BaseLabel as J } from "./sd-component-library226.js";
+import { BaseLabel as J } from "./sd-component-library224.js";
 import { MaxMaxContainer as K } from "./sd-component-library41.js";
-import { ResponsiveTextV2 as Q } from "./sd-component-library150.js";
+import { ResponsiveTextV2 as Q } from "./sd-component-library151.js";
 const U = (s, r, t, d, a, n) => {
   const m = d.find(
     (p) => p[r].trim() === s

package/lib/sd-component-library114.js

@@ -1,4 +1,4 @@
-import { j as t } from "./sd-component-library196.js";
+import { j as t } from "./sd-component-library197.js";
 import { Selector as o } from "./sd-component-library113.js";
 const i = (r) => /* @__PURE__ */ t.jsx(
   o,

package/lib/sd-component-library115.js

@@ -1,4 +1,4 @@
-import { j as t } from "./sd-component-library196.js";
+import { j as t } from "./sd-component-library197.js";
 import { Selector as e } from "./sd-component-library113.js";
 const m = (r) => /* @__PURE__ */ t.jsx(e, { ...r, variant: "primary", "data-test": "primary-selector" });
 export {

package/lib/sd-component-library116.js

@@ -1,4 +1,4 @@
-import { j as o } from "./sd-component-library196.js";
+import { j as o } from "./sd-component-library197.js";
 import { Selector as a } from "./sd-component-library113.js";
 const s = (r) => {
   const { labelMargin: t = ["0px"], gap: e = ["3px"] } = r;

package/lib/sd-component-library117.js

@@ -1,4 +1,4 @@
-import { j as r } from "./sd-component-library196.js";
+import { j as r } from "./sd-component-library197.js";
 import { Selector as o } from "./sd-component-library113.js";
 const m = (t) => /* @__PURE__ */ r.jsx(
   o,

package/lib/sd-component-library118.js

@@ -1,11 +1,11 @@
-import { j as o } from "./sd-component-library196.js";
+import { j as o } from "./sd-component-library197.js";
 import u, { useState as h, useMemo as f } from "react";
 import { Box as g } from "rebass";
 import { OutsideClickBox as b } from "./sd-component-library11.js";
-import { ReactComponent as j } from "./sd-component-library187.js";
+import { ReactComponent as j } from "./sd-component-library188.js";
 import { CustomOptionBox as C } from "./sd-component-library264.js";
 import { GridCenter as S } from "./sd-component-library42.js";
-import { EighteenRegular as d } from "./sd-component-library142.js";
+import { EighteenRegular as d } from "./sd-component-library143.js";
 import { HorizontalDivider as _ } from "./sd-component-library49.js";
 const z = ({
   value: e,

package/lib/sd-component-library119.js

@@ -1,11 +1,11 @@
-import { j as o } from "./sd-component-library196.js";
+import { j as o } from "./sd-component-library197.js";
 import { useState as x } from "react";
-import { BaseLabel as f } from "./sd-component-library226.js";
+import { BaseLabel as f } from "./sd-component-library224.js";
 import { OutsideClickBox as u } from "./sd-component-library11.js";
-import { ReactComponent as h } from "./sd-component-library187.js";
-import { SecondaryCustomSelectorOptionsBox as S } from "./sd-component-library263.js";
+import { ReactComponent as h } from "./sd-component-library188.js";
+import { SecondaryCustomSelectorOptionsBox as S } from "./sd-component-library265.js";
 import { GridContainerV2 as g } from "./sd-component-library39.js";
-import { ResponsiveTextV2 as C } from "./sd-component-library150.js";
+import { ResponsiveTextV2 as C } from "./sd-component-library151.js";
 import { FlexCenter as j } from "./sd-component-library35.js";
 const R = ({
   value: l,

package/lib/sd-component-library12.js

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

package/lib/sd-component-library120.js

@@ -1,4 +1,4 @@
-import { j as t } from "./sd-component-library196.js";
+import { j as t } from "./sd-component-library197.js";
 import { SecondaryCustomSelector as o } from "./sd-component-library119.js";
 const s = (r) => /* @__PURE__ */ t.jsx(o, { ...r, variant: "customTertiary" });
 export {

package/lib/sd-component-library121.js

@@ -1,11 +1,11 @@
-import { j as o } from "./sd-component-library196.js";
+import { j as o } from "./sd-component-library197.js";
 import { useState as d } from "react";
 import { OutsideClickBox as a } from "./sd-component-library11.js";
-import { ReactComponent as x } from "./sd-component-library187.js";
-import { ResponsiveTextV2 as f } from "./sd-component-library150.js";
-import { BaseTextV2 as u } from "./sd-component-library138.js";
+import { ReactComponent as x } from "./sd-component-library188.js";
+import { ResponsiveTextV2 as f } from "./sd-component-library151.js";
+import { BaseTextV2 as u } from "./sd-component-library139.js";
 import { FlexCenter as h } from "./sd-component-library35.js";
-import { SecondaryCustomSelectorOptionsBox as g } from "./sd-component-library263.js";
+import { SecondaryCustomSelectorOptionsBox as g } from "./sd-component-library265.js";
 const k = ({
   width: l,
   options: r,

package/lib/sd-component-library122.js

@@ -1,6 +1,6 @@
-import { j as i } from "./sd-component-library196.js";
+import { j as i } from "./sd-component-library197.js";
 import { useMemo as S, useCallback as p } from "react";
-import { BaseSelectorV2 as u } from "./sd-component-library265.js";
+import { BaseSelectorV2 as u } from "./sd-component-library266.js";
 const g = ({
   value: s,
   onChange: r,

package/lib/sd-component-library123.js

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

package/lib/sd-component-library124.js

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

package/lib/sd-component-library125.js

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

package/lib/sd-component-library126.js

@@ -1,8 +1,8 @@
-import { j as e } from "./sd-component-library196.js";
+import { j as e } from "./sd-component-library197.js";
 import { useState as n, useCallback as c } from "react";
 import { Box as d } from "rebass";
 import { SelectorV2 as m } from "./sd-component-library122.js";
-import { ResponsiveTextV2 as p } from "./sd-component-library150.js";
+import { ResponsiveTextV2 as p } from "./sd-component-library151.js";
 const g = ({
   selectorLabel: o,
   gap: r = 5,

package/lib/sd-component-library127.js

@@ -1,11 +1,11 @@
-import { j as o } from "./sd-component-library196.js";
+import { j as o } from "./sd-component-library197.js";
 import { useState as x } from "react";
-import { BaseLabel as f } from "./sd-component-library226.js";
-import { ReactComponent as u } from "./sd-component-library187.js";
-import { CustomScrollableOptionsBox as h } from "./sd-component-library266.js";
+import { BaseLabel as f } from "./sd-component-library224.js";
+import { ReactComponent as u } from "./sd-component-library188.js";
+import { CustomScrollableOptionsBox as h } from "./sd-component-library267.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-library150.js";
+import { ResponsiveTextV2 as C } from "./sd-component-library151.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);

package/lib/sd-component-library128.js

@@ -1,11 +1,11 @@
-import { j as o } from "./sd-component-library196.js";
+import { j as o } from "./sd-component-library197.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-library226.js";
-import { ReactComponent as f } from "./sd-component-library187.js";
-import { CustomScrollableOptionsBox as h } from "./sd-component-library267.js";
-import { ResponsiveTextV2 as b } from "./sd-component-library150.js";
+import { BaseLabel as u } from "./sd-component-library224.js";
+import { ReactComponent as f } from "./sd-component-library188.js";
+import { CustomScrollableOptionsBox as h } from "./sd-component-library268.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(

package/lib/sd-component-library129.js

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

package/lib/sd-component-library13.js

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

package/lib/sd-component-library130.js

@@ -1,7 +1,7 @@
-import { j as t } from "./sd-component-library196.js";
+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-library254.js";
-import { EighteenBold as p } from "./sd-component-library141.js";
+import { ReactComponent as c } from "./sd-component-library208.js";
+import { EighteenBold as p } from "./sd-component-library142.js";
 import { GridCenter as g } from "./sd-component-library42.js";
 const C = ({
   currentSelection: o,

package/lib/sd-component-library131.js

@@ -1,92 +1,43 @@
-import { j as r } from "./sd-component-library196.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-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"
+}) => {
   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-library131.js.map

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

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

package/lib/sd-component-library132.js

@@ -1,48 +1,92 @@
-import { j as o } from "./sd-component-library196.js";
-import { Box as e } from "rebass";
-import { useDependantState as d } from "./sd-component-library3.js";
-const i = 200, m = (r) => {
-  const { initialState: s = !1, onClick: t } = r, [n, p] = d(s), l = () => {
-    p((a) => !a), setTimeout(() => t == null ? void 0 : t(), i);
-  };
-  return /* @__PURE__ */ o.jsx(
-    e,
+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]);
+  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,
     {
-      width: "35px",
-      height: "14px",
+      ...t,
+      width: t.width || "280px",
       sx: {
         position: "relative",
-        borderRadius: "7px",
-        borderWidth: "1px",
-        borderStyle: "solid",
-        borderColor: "cl_headerLine",
-        bg: "cl_white",
         cursor: "pointer"
       },
-      onClick: l,
-      children: /* @__PURE__ */ o.jsx(
-        e,
-        {
-          sx: {
-            height: "14px",
-            position: "absolute",
-            borderRadius: "7px",
-            outline: "1px solid white",
-            bg: "cl_purple",
-            textTransform: "uppercase",
-            overflow: "hidden",
-            width: "20px",
-            top: "-1px",
-            left: "-1px",
-            transform: `translateX(${n ? "15px" : 0})`,
-            transition: `all ${i}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"
           }
-        }
-      )
+        ),
+        /* @__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 {
-  m as ToggleSwitch
+  R as TextSwitch
 };
 //# sourceMappingURL=sd-component-library132.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library132.js","sources":["../src/components/switches/toggle-switch/toggle-switch.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { useDependantState } from \"../../../core/custom-hooks\";\nimport { ToggleSwitchProps as Props } from \"./interfaces\";\n\nconst animationDuration = 200;\n\nexport const ToggleSwitch: React.FC<Props> = (props) => {\n  const { initialState = false, onClick } = props;\n  const [isToggled, setIsToggled] = useDependantState(initialState);\n\n  const onBadgeClick = () => {\n    setIsToggled((prev) => !prev);\n    setTimeout(() => onClick?.(), animationDuration);\n  };\n\n  return (\n    <Box\n      width=\"35px\"\n      height=\"14px\"\n      sx={{\n        position: \"relative\",\n        borderRadius: \"7px\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderColor: \"cl_headerLine\",\n        bg: \"cl_white\",\n        cursor: \"pointer\",\n      }}\n      onClick={onBadgeClick}\n    >\n      <Box\n        sx={{\n          height: \"14px\",\n          position: \"absolute\",\n          borderRadius: \"7px\",\n          outline: \"1px solid white\",\n          bg: \"cl_purple\",\n          textTransform: \"uppercase\",\n          overflow: \"hidden\",\n          width: \"20px\",\n          top: \"-1px\",\n          left: \"-1px\",\n          transform: `translateX(${isToggled ? \"15px\" : 0})`,\n          transition: `all ${animationDuration}ms`,\n        }}\n      />\n    </Box>\n  );\n};\n"],"names":["animationDuration","ToggleSwitch","props","initialState","onClick","isToggled","setIsToggled","useDependantState","onBadgeClick","prev","jsx","Box"],"mappings":";;;AAOA,MAAMA,IAAoB,KAEbC,IAAgC,CAACC,MAAU;AACtD,QAAM,EAAE,cAAAC,IAAe,IAAO,SAAAC,EAAA,IAAYF,GACpC,CAACG,GAAWC,CAAY,IAAIC,EAAkBJ,CAAY,GAE1DK,IAAe,MAAM;AACZ,IAAAF,EAAA,CAACG,MAAS,CAACA,CAAI,GACjB,WAAA,MAAML,KAAA,gBAAAA,KAAaJ,CAAiB;AAAA,EAAA;AAI/C,SAAAU,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,IAAI;AAAA,QACF,UAAU;AAAA,QACV,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,IAAI;AAAA,QACJ,QAAQ;AAAA,MACV;AAAA,MACA,SAASH;AAAA,MAET,UAAAE,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,cAAc;AAAA,YACd,SAAS;AAAA,YACT,IAAI;AAAA,YACJ,eAAe;AAAA,YACf,UAAU;AAAA,YACV,OAAO;AAAA,YACP,KAAK;AAAA,YACL,MAAM;AAAA,YACN,WAAW,cAAcN,IAAY,SAAS,CAAC;AAAA,YAC/C,YAAY,OAAOL,CAAiB;AAAA,UACtC;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library132.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;"}