@selfdecode/sd-component-library 4.0.83 → 4.0.85

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

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

@@ -1,123 +1,60 @@
-import { j as t } from "./sd-component-library190.js";
-import { useState as y } from "react";
-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";
-const s = 30, e = `${s}px`, w = "30px";
-function Q({
-  tabs: u,
-  selectedTabId: j,
-  onTabSelect: c,
-  activeColor: g = "cl_purple",
-  color: R = "cl_darkGrey",
-  displayBorder: k = !0,
-  tabPadding: v = ["16px 24px"],
-  tabWidth: C,
-  tabHeight: B,
-  tabMaxWidth: F,
-  labelSx: W,
-  secondaryTextSx: z,
-  scrollable: n = !0,
-  containerSx: M,
-  dontTranslate: S,
-  tabSx: X,
-  innerContainerSx: $
-}) {
-  const [d, a] = y(0), { ref: D, rect: r } = x({
-    listenForResize: !0
-  }), { ref: L, rect: o } = x({
-    listenForResize: !0
-  }), f = !n && o && r && !!d, h = !n && o && r && d + r.width < o.width, O = () => {
-    o && r && a(
-      (i) => Math.max(0, i - r.width + 2 * s)
-    );
-  }, _ = () => {
-    o && r && a(
-      (i) => Math.min(
-        o.width - r.width + s,
-        i + r.width - 2 * s
-      )
-    );
-  };
-  return /* @__PURE__ */ t.jsxs(
-    m,
+import { j as o } from "./sd-component-library195.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-library186.js";
+import { CustomScrollableOptionsBox as h } from "./sd-component-library272.js";
+import { ResponsiveTextV2 as b } from "./sd-component-library149.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,
     {
-      sx: {
-        flexDirection: "column",
-        position: "relative",
-        overflow: "hidden",
-        width: "100%",
-        ...M
-      },
-      className: S ? "no-translate" : void 0,
-      ref: D,
-      "data-testid": "tabs-bar",
+      onClickOutside: p,
+      onClick: a,
+      sx: { width: c, position: "relative", cursor: "pointer" },
       children: [
-        f && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(
-            l,
-            {
-              width: e,
-              onClick: O,
-              direction: "left"
-            }
-          ),
-          /* @__PURE__ */ t.jsx(p, { width: w, offset: e, direction: "left" })
-        ] }),
-        h && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(
-            l,
-            {
-              width: e,
-              onClick: _,
-              direction: "right"
-            }
-          ),
-          /* @__PURE__ */ t.jsx(p, { width: w, offset: e, direction: "right" })
-        ] }),
-        /* @__PURE__ */ t.jsx(
-          m,
+        /* @__PURE__ */ o.jsx(u, { variant: "selectors.primaryV2", label: l }),
+        /* @__PURE__ */ o.jsxs(
+          i,
           {
+            alignItems: "center",
             sx: {
-              width: n ? "auto" : "max-content",
-              ml: f ? e : 0,
-              mr: h ? e : 0,
-              transform: `translateX(${-d}px)`,
-              transition: "transform 0.2s",
-              overflowX: n ? "auto" : void 0,
-              ...$
+              height: "42px",
+              borderRadius: "3px",
+              border: "1px solid",
+              borderColor: "cl_lightGrey",
+              px: "16px"
             },
-            ref: L,
-            children: u.map((i) => /* @__PURE__ */ t.jsx(
-              A,
-              {
-                activeColor: g,
-                color: R,
-                ...i,
-                selected: j === i.id,
-                onClick: () => c == null ? void 0 : c(i.id),
-                tabPadding: v,
-                width: C,
-                height: B,
-                maxWidth: F,
-                labelSx: W,
-                secondaryTextSx: z,
-                containerSx: X,
-                "data-test": `tab-${i.id}`
-              },
-              String(i.id)
-            ))
+            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, {})
+                }
+              )
+            ]
           }
         ),
-        k && /* @__PURE__ */ t.jsx(E, { height: "2px" })
+        /* @__PURE__ */ o.jsx(h, { isVisible: e, ...t })
       ]
     }
   );
-}
+};
 export {
-  Q as TabBar
+  w as PrimaryCustomScrollableSelector
 };
 //# sourceMappingURL=sd-component-library127.js.map

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/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-library128.js

@@ -1,119 +1,16 @@
-import { j as t } from "./sd-component-library190.js";
-import { Box as w, Flex as s } from "rebass";
-import { TabV2 as T } from "./sd-component-library265.js";
-import { GridContainerV2 as G } from "./sd-component-library39.js";
-const h = 25, b = ({
-  tabs: e,
-  selectedTabId: c,
-  onSelect: m,
-  borderWidth: l = "1px",
-  color: f = "cl_blue",
-  activeColor: a = "cl_purple",
-  borderColor: i = "cl_lightGrey",
-  borderRadius: n = 12,
-  tabPx: g = "30px",
-  fontSize: S = 13,
-  tabTopAdditionalOffset: u = 8,
-  tabBottomAdditionalOffset: r = 4,
-  maxWidth: y = "1170px",
-  scrollOnChange: j = !0
-}) => {
-  const x = e.findIndex(({ id: o }) => o === c);
-  if (!e.length)
-    return null;
-  const d = x === 0, p = x === e.length - 1;
-  return /* @__PURE__ */ t.jsx(
-    w,
-    {
-      sx: {
-        width: "100%",
-        overflowX: "auto",
-        scrollbarWidth: "none",
-        "::-webkit-scrollbar": {
-          height: 0
-        }
-      },
-      children: /* @__PURE__ */ t.jsxs(
-        s,
-        {
-          sx: {
-            width: "fit-content",
-            minWidth: "100%",
-            overflow: "hidden"
-          },
-          children: [
-            /* @__PURE__ */ t.jsx(
-              s,
-              {
-                sx: {
-                  width: `calc((100% - ${y}) / 2)`,
-                  minWidth: `${h}px`,
-                  height: `${n + r}px`,
-                  mt: "auto",
-                  borderWidth: l,
-                  borderColor: i,
-                  borderRadius: `0 0 ${d ? n : 0}px 0`,
-                  borderBottomStyle: "solid",
-                  borderTopStyle: "none",
-                  borderLeftStyle: "none",
-                  borderRightStyle: d ? "solid" : "none"
-                }
-              }
-            ),
-            /* @__PURE__ */ t.jsx(
-              G,
-              {
-                gridTemplateColumns: `repeat(${e.length}, max-content)`,
-                minWidth: "fit-content",
-                children: e.map((o, $) => /* @__PURE__ */ t.jsx(
-                  T,
-                  {
-                    ...o,
-                    idx: $,
-                    selectedIndex: x,
-                    borderWidth: l,
-                    borderColor: i,
-                    color: f,
-                    activeColor: a,
-                    borderRadius: n,
-                    onSelect: m,
-                    px: g,
-                    fontSize: S,
-                    totalTabs: e.length,
-                    topAdditionalOffset: u,
-                    bottomAdditionalOffset: r,
-                    scrollOnChange: j
-                  },
-                  o.id
-                ))
-              }
-            ),
-            /* @__PURE__ */ t.jsx(
-              s,
-              {
-                sx: {
-                  flexGrow: 1,
-                  minWidth: `${h}px`,
-                  transform: "translateX(-2px)",
-                  height: `${n + r}px`,
-                  mt: "auto",
-                  borderWidth: l,
-                  borderColor: i,
-                  borderBottomStyle: "solid",
-                  borderTopStyle: "none",
-                  borderRightStyle: "none",
-                  borderLeftStyle: p ? "solid" : "none",
-                  borderRadius: `0 0 0 ${p ? n : 0}px`
-                }
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
+import { j as e } from "./sd-component-library195.js";
+import { SelectorV2 as r } from "./sd-component-library121.js";
+const d = (t) => /* @__PURE__ */ e.jsx(
+  r,
+  {
+    variant: "updatedSecondary",
+    gap: ["0"],
+    defaultOptionColor: t.defaultOptionColor || "cl_grey",
+    ...t,
+    "data-test": "tertiary-selector-v2"
+  }
+);
 export {
-  b as TabBarV2
+  d as UpdatedSecondarySelectorV2
 };
 //# 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/tabs/tab-bar-v2/tab-bar-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { Grid } from \"../../containers\";\nimport { TabBarV2Props as Props } from \"./interfaces\";\nimport { TabV2 } from \"./partials\";\n\nconst sideOffset = 25; // px\n\nexport const TabBarV2: React.FC<Props> = ({\n  tabs,\n  selectedTabId,\n  onSelect,\n  borderWidth = \"1px\",\n  color = \"cl_blue\",\n  activeColor = \"cl_purple\",\n  borderColor = \"cl_lightGrey\",\n  borderRadius = 12,\n  tabPx = \"30px\",\n  fontSize = 13,\n  tabTopAdditionalOffset = 8,\n  tabBottomAdditionalOffset = 4,\n  maxWidth = \"1170px\",\n  scrollOnChange = true,\n}) => {\n  const selectedIndex = tabs.findIndex(({ id }) => id === selectedTabId);\n\n  if (!tabs.length) return null;\n\n  const isFirstSelected = selectedIndex === 0;\n  const isLastSelected = selectedIndex === tabs.length - 1;\n\n  return (\n    <Box\n      sx={{\n        width: \"100%\",\n        overflowX: \"auto\",\n        scrollbarWidth: \"none\",\n        \"::-webkit-scrollbar\": {\n          height: 0,\n        },\n      }}\n    >\n      <Flex\n        sx={{\n          width: \"fit-content\",\n          minWidth: \"100%\",\n          overflow: \"hidden\",\n        }}\n      >\n        <Flex\n          sx={{\n            width: `calc((100% - ${maxWidth}) / 2)`,\n            minWidth: `${sideOffset}px`,\n            height: `${borderRadius + tabBottomAdditionalOffset}px`,\n            mt: \"auto\",\n            borderWidth,\n            borderColor,\n            borderRadius: `0 0 ${isFirstSelected ? borderRadius : 0}px 0`,\n            borderBottomStyle: \"solid\",\n            borderTopStyle: \"none\",\n            borderLeftStyle: \"none\",\n            borderRightStyle: isFirstSelected ? \"solid\" : \"none\",\n          }}\n        />\n\n        <Grid\n          gridTemplateColumns={`repeat(${tabs.length}, max-content)`}\n          minWidth=\"fit-content\"\n        >\n          {tabs.map((tab, idx) => (\n            <TabV2\n              key={tab.id}\n              {...tab}\n              idx={idx}\n              selectedIndex={selectedIndex}\n              borderWidth={borderWidth}\n              borderColor={borderColor}\n              color={color}\n              activeColor={activeColor}\n              borderRadius={borderRadius}\n              onSelect={onSelect}\n              px={tabPx}\n              fontSize={fontSize}\n              totalTabs={tabs.length}\n              topAdditionalOffset={tabTopAdditionalOffset}\n              bottomAdditionalOffset={tabBottomAdditionalOffset}\n              scrollOnChange={scrollOnChange}\n            />\n          ))}\n        </Grid>\n\n        <Flex\n          sx={{\n            flexGrow: 1,\n            minWidth: `${sideOffset}px`,\n            transform: \"translateX(-2px)\",\n            height: `${borderRadius + tabBottomAdditionalOffset}px`,\n            mt: \"auto\",\n            borderWidth,\n            borderColor,\n            borderBottomStyle: \"solid\",\n            borderTopStyle: \"none\",\n            borderRightStyle: \"none\",\n            borderLeftStyle: isLastSelected ? \"solid\" : \"none\",\n            borderRadius: `0 0 0 ${isLastSelected ? borderRadius : 0}px`,\n          }}\n        />\n      </Flex>\n    </Box>\n  );\n};\n"],"names":["sideOffset","TabBarV2","tabs","selectedTabId","onSelect","borderWidth","color","activeColor","borderColor","borderRadius","tabPx","fontSize","tabTopAdditionalOffset","tabBottomAdditionalOffset","maxWidth","scrollOnChange","selectedIndex","id","isFirstSelected","isLastSelected","jsx","Box","jsxs","Flex","Grid","tab","idx","TabV2"],"mappings":"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"}
+{"version":3,"file":"sd-component-library128.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-library129.js

@@ -1,14 +1,71 @@
-import { j as s } from "./sd-component-library190.js";
-import { Box as d } from "rebass";
-import { TabBarV2 as b } from "./sd-component-library128.js";
-const p = (r) => {
-  const { tabs: e, selectedTabId: t, ...n } = r, a = e.findIndex(({ id: c }) => c === t), o = e[a];
-  return o ? /* @__PURE__ */ s.jsxs(d, { children: [
-    /* @__PURE__ */ s.jsx(b, { tabs: e, selectedTabId: t, ...n }),
-    o.component
-  ] }) : null;
+import { j as t } from "./sd-component-library195.js";
+import { IconButton as s } from "./sd-component-library22.js";
+import { ReactComponent as c } from "./sd-component-library199.js";
+import { EighteenBold as p } from "./sd-component-library140.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, {})
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  p as TabbedViewV2
+  C as CarouselSwitch
 };
 //# 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/tabs/tabbed-view-v2/tabbed-view-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { TabBarV2 } from \"../tab-bar-v2\";\nimport { TabbedViewV2Props as Props } from \"./interfaces\";\n\nexport const TabbedViewV2: React.FC<Props> = (props) => {\n  const { tabs, selectedTabId, ...tabsProps } = props;\n\n  const selectedTabIndex = tabs.findIndex(({ id }) => id === selectedTabId);\n  const selectedTab = tabs[selectedTabIndex];\n\n  if (!selectedTab) return null;\n\n  return (\n    <Box>\n      <TabBarV2 tabs={tabs} selectedTabId={selectedTabId} {...tabsProps} />\n      {selectedTab.component}\n    </Box>\n  );\n};\n"],"names":["TabbedViewV2","props","tabs","selectedTabId","tabsProps","selectedTabIndex","id","selectedTab","Box","jsx","TabBarV2"],"mappings":";;;AAOa,MAAAA,IAAgC,CAACC,MAAU;AACtD,QAAM,EAAE,MAAAC,GAAM,eAAAC,GAAe,GAAGC,MAAcH,GAExCI,IAAmBH,EAAK,UAAU,CAAC,EAAE,IAAAI,QAASA,MAAOH,CAAa,GAClEI,IAAcL,EAAKG,CAAgB;AAEzC,SAAKE,2BAGFC,GACC,EAAA,UAAA;AAAA,IAAAC,gBAAAA,EAAA,IAACC,GAAS,EAAA,MAAAR,GAAY,eAAAC,GAA+B,GAAGC,EAAW,CAAA;AAAA,IAClEG,EAAY;AAAA,EACf,EAAA,CAAA,IANuB;AAQ3B;"}
+{"version":3,"file":"sd-component-library129.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-library13.js

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