@selfdecode/sd-component-library 4.0.146 → 4.0.148

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library109.js","sources":["../src/components/progress-bars/rounded-progress-bar/rounded-progress-bar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { RoundedProgressBarProps as Props } from \"./interfaces\";\n\nexport const RoundedProgressBar: React.FC<Props> = ({\n  currentStep,\n  totalSteps,\n  height = \"6px\",\n  borderRadius = \"3px\",\n  baseColor = \"cl_lightGrey\",\n  activeColor = \"cl_purple\",\n  containerSx,\n}) => {\n  const displayedStep = Math.max(0, Math.min(currentStep, totalSteps));\n\n  return (\n    <Box\n      sx={{\n        position: \"relative\",\n        height,\n        borderRadius,\n        bg: baseColor,\n        ...containerSx,\n      }}\n      data-test=\"rounded-progress-bar\"\n    >\n      <Box\n        sx={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          width: `${Math.floor((displayedStep / totalSteps) * 100)}%`,\n          minWidth: `calc(${borderRadius} * 2)`,\n          height,\n          borderRadius,\n          bg: activeColor,\n          transition: \"width 1s\",\n        }}\n      />\n    </Box>\n  );\n};\n"],"names":["RoundedProgressBar","currentStep","totalSteps","height","borderRadius","baseColor","activeColor","containerSx","displayedStep","jsx","Box"],"mappings":";;AAMO,MAAMA,IAAsC,CAAC;AAAA,EAClD,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAM;AACE,QAAAC,IAAgB,KAAK,IAAI,GAAG,KAAK,IAAIP,GAAaC,CAAU,CAAC;AAGjE,SAAAO,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAAP;AAAA,QACA,cAAAC;AAAA,QACA,IAAIC;AAAA,QACJ,GAAGE;AAAA,MACL;AAAA,MACA,aAAU;AAAA,MAEV,UAAAE,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,UAAU;AAAA,YACV,MAAM;AAAA,YACN,KAAK;AAAA,YACL,OAAO,GAAG,KAAK,MAAOF,IAAgBN,IAAc,GAAG,CAAC;AAAA,YACxD,UAAU,QAAQE,CAAY;AAAA,YAC9B,QAAAD;AAAA,YACA,cAAAC;AAAA,YACA,IAAIE;AAAA,YACJ,YAAY;AAAA,UACd;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library109.js","sources":["../src/components/selectors/compact-primary-selector/compact-primary-selector.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Selector } from \"../selector\";\nimport { CompactPrimarySelectorProps as Props } from \"./interfaces\";\n\n/**\n * @deprecated is preferred to use V2 or custom selector instead\n */\nexport const CompactPrimarySelector = <T extends string = string>(\n  props: Props<T>\n) => {\n  return (\n    <Selector\n      {...props}\n      variant={\"compact\"}\n      gap={[\"1px\"]}\n      textTransform={props.textTransform || \"none\"}\n      data-test=\"compact-primary-selector\"\n    />\n  );\n};\n"],"names":["CompactPrimarySelector","props","jsx","Selector"],"mappings":";;AAQa,MAAAA,IAAyB,CACpCC,MAGEC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,SAAS;AAAA,IACT,KAAK,CAAC,KAAK;AAAA,IACX,eAAeA,EAAM,iBAAiB;AAAA,IACtC,aAAU;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library11.js

@@ -1,10 +1,7 @@
-import { j as t } from "./sd-component-library197.js";
-import { Box as n } from "rebass";
-const x = (o) => {
-  const { children: r, ...s } = o;
-  return /* @__PURE__ */ t.jsx(n, { className: "no-translate", ...s, children: r });
-};
+import { j as a } from "./sd-component-library169.js";
+import { Breadcrumb as m } from "./sd-component-library13.js";
+const o = (r) => /* @__PURE__ */ a.jsx(m, { ...r, variant: "primary", "data-testid": "primary-breadcrumb" });
 export {
-  x as NoTranslateBox
+  o as PrimaryBreadcrumb
 };
 //# sourceMappingURL=sd-component-library11.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library11.js","sources":["../src/components/boxes/no-translate-box/no-translate-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { NoTranslateBoxProps as Props } from \"./interfaces\";\n\nexport const NoTranslateBox: React.FC<Props> = (props) => {\n  const { children, ...boxProps } = props;\n\n  return (\n    <Box className=\"no-translate\" {...boxProps}>\n      {children}\n    </Box>\n  );\n};\n"],"names":["NoTranslateBox","props","children","boxProps","Box"],"mappings":";;AAMa,MAAAA,IAAkC,CAACC,MAAU;AACxD,QAAM,EAAE,UAAAC,GAAU,GAAGC,EAAA,IAAaF;AAElC,+BACGG,GAAI,EAAA,WAAU,gBAAgB,GAAGD,GAC/B,UAAAD,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library11.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;"}

package/lib/sd-component-library110.js

@@ -1,27 +1,111 @@
-import { j as o } from "./sd-component-library197.js";
-import { Box as n } from "rebass";
-import { ProgressBar as a } from "./sd-component-library108.js";
-const c = (r) => {
-  const {
-    firstStripeColor: t = "#F0C8FE",
-    secondStripeColor: e = "#FAEFFF",
-    remainingBarColor: i = "#713580"
-  } = r;
-  return /* @__PURE__ */ o.jsx(n, { children: /* @__PURE__ */ o.jsx(
-    a,
+import { j as o } from "./sd-component-library169.js";
+import u, { useState as f, useMemo as h } from "react";
+import { Box as g } from "rebass";
+import { OutsideClickBox as S } from "./sd-component-library9.js";
+import { ReactComponent as b } from "./sd-component-library160.js";
+import { CustomOptionBox as j } from "./sd-component-library229.js";
+import { GridCenter as C } from "./sd-component-library37.js";
+import { RegularText as d } from "./sd-component-library136.js";
+import { HorizontalDivider as _ } from "./sd-component-library44.js";
+const $ = ({
+  value: e,
+  onChange: x,
+  options: n,
+  width: p = ["100%"],
+  textTransform: c = "capitalize"
+}) => {
+  const [r, i] = f(!1), s = h(() => n.filter(({ title: t }) => t !== e.title), [n, e]), l = !s.length, m = () => !l && i((t) => !t);
+  return /* @__PURE__ */ o.jsx(
+    S,
     {
-      variant: "stripedLine",
-      ...r,
-      withBackgroundProps: !0,
-      completedBackground: `repeating-linear-gradient(45deg, ${t}, ${t} 4px, ${e} 4px, ${e} 8px)`,
-      remainsBackground: i,
-      totalSteps: r.totalSteps,
-      currentStep: r.currentStep,
-      "data-test": "striped-line-progress-bar"
+      "data-testid": "custom-selector",
+      onClickOutside: () => i(!1),
+      children: /* @__PURE__ */ o.jsxs(
+        C,
+        {
+          width: p,
+          gap: "5px",
+          onClick: m,
+          sx: {
+            position: "relative",
+            gridTemplateColumns: "1fr max-content",
+            gap: "5px",
+            cursor: l ? "default" : "pointer",
+            pb: "10px",
+            borderBottom: "2px solid",
+            borderColor: r ? "cl_blue" : "cl_lightGrey",
+            userSelect: "none"
+          },
+          "data-testid": "current-value",
+          children: [
+            l ? /* @__PURE__ */ o.jsx(d, { fontSize: 18, color: "cl_grey", children: "No options" }) : /* @__PURE__ */ o.jsx(
+              d,
+              {
+                fontSize: 18,
+                sx: { cursor: "pointer" },
+                textTransform: c,
+                children: e.title
+              }
+            ),
+            /* @__PURE__ */ o.jsx(
+              b,
+              {
+                width: "10px",
+                style: {
+                  transform: `rotate(${r ? "180deg" : "0deg"})`,
+                  transition: "all 0.3s"
+                }
+              }
+            ),
+            r && /* @__PURE__ */ o.jsx(
+              g,
+              {
+                width: p,
+                sx: {
+                  position: "absolute",
+                  left: "0",
+                  top: "calc(100% + 2px)",
+                  border: "1px solid",
+                  borderRadius: "0 0 4px 4px",
+                  borderColor: "cl_lightGrey",
+                  borderTopStyle: "none",
+                  overflow: "hidden",
+                  boxShadow: "2px 3px 10px #0000001A",
+                  userSelect: "none",
+                  bg: "cl_white"
+                },
+                "data-testid": "options-list",
+                children: s.map((t, a) => /* @__PURE__ */ o.jsxs(u.Fragment, { children: [
+                  /* @__PURE__ */ o.jsx(
+                    j,
+                    {
+                      ...t,
+                      onClick: () => {
+                        x(t), i(!1);
+                      },
+                      textTransform: c,
+                      "data-testid": "selector-option"
+                    }
+                  ),
+                  a !== s.length - 1 && /* @__PURE__ */ o.jsx(
+                    _,
+                    {
+                      height: "1px",
+                      color: "cl_lightGrey",
+                      opacity: "0.5",
+                      sx: { mx: "2px" }
+                    }
+                  )
+                ] }, `${a}-${t.title}`))
+              }
+            )
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 export {
-  c as StripedLineProgressBar
+  $ as CustomSelector
 };
 //# sourceMappingURL=sd-component-library110.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library110.js","sources":["../src/components/progress-bars/striped-line-progress-bar/striped-line-progress-bar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ProgressBar } from \"../progress-bar\";\nimport { StripedLineProgressBarProps } from \"./interfaces\";\n\n/**\n * The StripedLineProgressBar component.\n */\nexport const StripedLineProgressBar: React.FunctionComponent<\n  StripedLineProgressBarProps\n> = (\n  props: StripedLineProgressBarProps\n): React.ReactElement<StripedLineProgressBarProps> => {\n  const {\n    firstStripeColor = \"#F0C8FE\",\n    secondStripeColor = \"#FAEFFF\",\n    remainingBarColor = \"#713580\",\n  } = props;\n\n  return (\n    <Box>\n      <ProgressBar\n        variant=\"stripedLine\"\n        {...props}\n        withBackgroundProps={true}\n        completedBackground={\n          `repeating-linear-gradient(45deg, ${firstStripeColor}, ${firstStripeColor} 4px,` +\n          ` ${secondStripeColor} 4px, ${secondStripeColor} 8px)`\n        }\n        remainsBackground={remainingBarColor}\n        totalSteps={props.totalSteps}\n        currentStep={props.currentStep}\n        data-test=\"striped-line-progress-bar\"\n      />\n    </Box>\n  );\n};\n"],"names":["StripedLineProgressBar","props","firstStripeColor","secondStripeColor","remainingBarColor","Box","jsx","ProgressBar"],"mappings":";;;AAUa,MAAAA,IAET,CACFC,MACoD;AAC9C,QAAA;AAAA,IACJ,kBAAAC,IAAmB;AAAA,IACnB,mBAAAC,IAAoB;AAAA,IACpB,mBAAAC,IAAoB;AAAA,EAClB,IAAAH;AAEJ,+BACGI,GACC,EAAA,UAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACP,GAAGN;AAAA,MACJ,qBAAqB;AAAA,MACrB,qBACE,oCAAoCC,CAAgB,KAAKA,CAAgB,SACrEC,CAAiB,SAASA,CAAiB;AAAA,MAEjD,mBAAmBC;AAAA,MACnB,YAAYH,EAAM;AAAA,MAClB,aAAaA,EAAM;AAAA,MACnB,aAAU;AAAA,IAAA;AAAA,EAEd,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library110.js","sources":["../src/components/selectors/custom-selector/custom-selector.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { OutsideClickBox } from \"../../boxes\";\nimport { GridCenter } from \"../../containers\";\nimport { HorizontalDivider } from \"../../dividers\";\nimport { ShortDownArrowIcon } from \"../../icons/short-dropdown-arrow-icon\";\nimport { RegularText } from \"../../texts\";\nimport { CustomSelectorProps as Props } from \"./interfaces\";\nimport { CustomOptionBox } from \"./partials\";\n\nexport const CustomSelector: React.FC<Props> = ({\n  value,\n  onChange,\n  options,\n  width = [\"100%\"],\n  textTransform = \"capitalize\",\n}) => {\n  const [showOptions, setShowOptions] = useState(false);\n\n  /* List of options to be displayed below */\n  const notSelectedOptions = useMemo(() => {\n    return options.filter(({ title }) => title !== value.title);\n  }, [options, value]);\n\n  const noOptions = !notSelectedOptions.length;\n\n  const onClick = () => !noOptions && setShowOptions((prev) => !prev);\n\n  return (\n    <OutsideClickBox\n      data-testid=\"custom-selector\"\n      onClickOutside={() => setShowOptions(false)}\n    >\n      <GridCenter\n        width={width}\n        gap=\"5px\"\n        onClick={onClick}\n        sx={{\n          position: \"relative\",\n          gridTemplateColumns: \"1fr max-content\",\n          gap: \"5px\",\n          cursor: noOptions ? \"default\" : \"pointer\",\n          pb: \"10px\",\n          borderBottom: \"2px solid\",\n          borderColor: showOptions ? \"cl_blue\" : \"cl_lightGrey\",\n          userSelect: \"none\",\n        }}\n        data-testid=\"current-value\"\n      >\n        {noOptions ? (\n          <RegularText fontSize={18} color=\"cl_grey\">\n            No options\n          </RegularText>\n        ) : (\n          <RegularText\n            fontSize={18}\n            sx={{ cursor: \"pointer\" }}\n            textTransform={textTransform}\n          >\n            {value.title}\n          </RegularText>\n        )}\n\n        <ShortDownArrowIcon\n          width=\"10px\"\n          style={{\n            transform: `rotate(${showOptions ? \"180deg\" : \"0deg\"})`,\n            transition: \"all 0.3s\",\n          }}\n        />\n\n        {showOptions && (\n          <Box\n            width={width}\n            sx={{\n              position: \"absolute\",\n              left: \"0\",\n              top: \"calc(100% + 2px)\",\n              border: \"1px solid\",\n              borderRadius: \"0 0 4px 4px\",\n              borderColor: \"cl_lightGrey\",\n              borderTopStyle: \"none\",\n              overflow: \"hidden\",\n              boxShadow: \"2px 3px 10px #0000001A\",\n              userSelect: \"none\",\n              bg: \"cl_white\",\n            }}\n            data-testid=\"options-list\"\n          >\n            {notSelectedOptions.map((option, idx) => (\n              <React.Fragment key={`${idx}-${option.title}`}>\n                <CustomOptionBox\n                  {...option}\n                  onClick={() => {\n                    onChange(option);\n                    setShowOptions(false);\n                  }}\n                  textTransform={textTransform}\n                  data-testid=\"selector-option\"\n                />\n\n                {idx !== notSelectedOptions.length - 1 && (\n                  <HorizontalDivider\n                    height=\"1px\"\n                    color=\"cl_lightGrey\"\n                    opacity=\"0.5\"\n                    sx={{ mx: \"2px\" }}\n                  />\n                )}\n              </React.Fragment>\n            ))}\n          </Box>\n        )}\n      </GridCenter>\n    </OutsideClickBox>\n  );\n};\n"],"names":["CustomSelector","value","onChange","options","width","textTransform","showOptions","setShowOptions","useState","notSelectedOptions","useMemo","title","noOptions","onClick","prev","jsx","OutsideClickBox","jsxs","GridCenter","RegularText","ShortDownArrowIcon","Box","option","idx","React","CustomOptionBox","HorizontalDivider"],"mappings":"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"}

package/lib/sd-component-library111.js

@@ -1,39 +1,83 @@
-import { j as i } from "./sd-component-library197.js";
-import { Flex as n } from "rebass";
-import { ProgressStep as x } from "./sd-component-library200.js";
-const g = ({
-  height: t,
-  steps: s,
-  step: p,
-  onStepClick: o,
-  ...m
+import { j as o } from "./sd-component-library169.js";
+import { useState as x } from "react";
+import { BaseLabel as f } from "./sd-component-library198.js";
+import { OutsideClickBox as u } from "./sd-component-library9.js";
+import { ReactComponent as h } from "./sd-component-library160.js";
+import { SecondaryCustomSelectorOptionsBox as S } from "./sd-component-library230.js";
+import { GridContainerV2 as g } from "./sd-component-library34.js";
+import { ResponsiveTextV2 as C } from "./sd-component-library135.js";
+import { FlexCenter as j } from "./sd-component-library30.js";
+const R = ({
+  value: l,
+  onChange: c,
+  options: t,
+  width: p,
+  label: m,
+  variant: s = "customSecondary",
+  containerSx: a
 }) => {
-  const a = (e) => o ? () => o(e + 1) : void 0;
-  return /* @__PURE__ */ i.jsx(
-    n,
+  const [r, i] = x(!1), n = t.find((e) => e.id === l.id), d = () => i(!1);
+  return n ? /* @__PURE__ */ o.jsxs(
+    g,
     {
-      ...m,
-      sx: {
-        position: "relative",
-        pl: t || 16,
-        "> *": {
-          width: [100 / (s - 1) + "%"]
-        }
-      },
-      "data-testid": "progress-steps",
-      children: [...Array(s)].map((e, r) => /* @__PURE__ */ i.jsx(
-        x,
-        {
-          active: r < p,
-          height: t || 16,
-          onClick: a(r)
-        },
-        r
-      ))
+      width: p,
+      variant: `_containers.selectors.${s}`,
+      sx: { cursor: "default", ...a },
+      children: [
+        /* @__PURE__ */ o.jsx(f, { variant: `selectors.${s}`, label: m }),
+        /* @__PURE__ */ o.jsxs(
+          u,
+          {
+            onClickOutside: d,
+            onClick: () => i((e) => !e),
+            sx: {
+              position: "relative",
+              display: "grid",
+              gridTemplateColumns: "1fr max-content",
+              gap: "5px",
+              alignItems: "center",
+              cursor: "pointer",
+              pb: "12px",
+              borderBottom: "2px solid",
+              borderColor: "cl_lightGrey"
+            },
+            children: [
+              /* @__PURE__ */ o.jsx(
+                C,
+                {
+                  fontSizeWeight: [18, "regular"],
+                  color: r ? "cl_purple" : "cl_darkGrey",
+                  children: n.title
+                }
+              ),
+              /* @__PURE__ */ o.jsx(
+                j,
+                {
+                  width: "10px",
+                  height: "10px",
+                  sx: {
+                    transform: `rotate3d(${r ? 1 : 0}, 0, 0, 180deg)`,
+                    transition: "all 0.2s",
+                    fill: r ? "cl_purple" : "cl_blue"
+                  },
+                  children: /* @__PURE__ */ o.jsx(h, {})
+                }
+              ),
+              r && /* @__PURE__ */ o.jsx(
+                S,
+                {
+                  options: t,
+                  onSelect: c
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
-  );
+  ) : null;
 };
 export {
-  g as ProgressSteps
+  R as SecondaryCustomSelector
 };
 //# sourceMappingURL=sd-component-library111.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library111.js","sources":["../src/components/progress-steps/progress-steps.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Flex } from \"rebass\";\n\nimport { ProgressStepsProps } from \"./interfaces\";\nimport { ProgressStep } from \"./progress-step\";\n\n/**\n * Progress bar component. Accept step and steps attributes.\n */\nexport const ProgressSteps: React.FC<ProgressStepsProps> = ({\n  height,\n  steps,\n  step,\n  onStepClick,\n  ...props\n}) => {\n  const getOnStepClick = (idx: number) =>\n    onStepClick ? () => onStepClick(idx + 1) : undefined;\n  return (\n    <Flex\n      {...props}\n      sx={{\n        position: \"relative\",\n        pl: height || 16,\n        \"> *\": {\n          width: [100 / (steps - 1) + \"%\"],\n        },\n      }}\n      data-testid=\"progress-steps\"\n    >\n      {[...Array(steps)].map((_, i) => (\n        <ProgressStep\n          key={i}\n          active={i < step}\n          height={height || 16}\n          onClick={getOnStepClick(i)}\n        />\n      ))}\n    </Flex>\n  );\n};\n"],"names":["ProgressSteps","height","steps","step","onStepClick","props","getOnStepClick","idx","jsx","Flex","_","i","ProgressStep"],"mappings":";;;AAUO,MAAMA,IAA8C,CAAC;AAAA,EAC1D,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAAC,IAAiB,CAACC,MACtBH,IAAc,MAAMA,EAAYG,IAAM,CAAC,IAAI;AAE3C,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,IAAI;AAAA,QACF,UAAU;AAAA,QACV,IAAIJ,KAAU;AAAA,QACd,OAAO;AAAA,UACL,OAAO,CAAC,OAAOC,IAAQ,KAAK,GAAG;AAAA,QACjC;AAAA,MACF;AAAA,MACA,eAAY;AAAA,MAEX,UAAA,CAAC,GAAG,MAAMA,CAAK,CAAC,EAAE,IAAI,CAACQ,GAAGC,MACzBH,gBAAAA,EAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UAEC,QAAQD,IAAIR;AAAA,UACZ,QAAQF,KAAU;AAAA,UAClB,SAASK,EAAeK,CAAC;AAAA,QAAA;AAAA,QAHpBA;AAAA,MAAA,CAKR;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"sd-component-library111.js","sources":["../src/components/selectors/secondary-custom-selector/secondary-custom-selector.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { FlexCenter, Grid, OutsideClickBox } from \"../../../index\";\nimport { ShortDownArrowIcon } from \"../../icons/short-dropdown-arrow-icon\";\nimport { BaseLabel } from \"../../labels/base-label\";\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport { SecondaryCustomSelectorProps as Props } from \"./interfaces\";\nimport { SecondaryCustomSelectorOptionsBox } from \"./partials\";\n\nexport const SecondaryCustomSelector = <T extends string = string>({\n  value,\n  onChange,\n  options,\n  width,\n  label,\n  variant = \"customSecondary\",\n  containerSx,\n}: Props<T>) => {\n  const [showOptions, setShowOptions] = useState(false);\n\n  const selectedOption = options.find((option) => option.id === value.id);\n\n  const hideOptions = () => setShowOptions(false);\n\n  if (!selectedOption) return null;\n\n  return (\n    <Grid\n      width={width}\n      variant={`_containers.selectors.${variant}`}\n      sx={{ cursor: \"default\", ...containerSx }}\n    >\n      <BaseLabel variant={`selectors.${variant}`} label={label} />\n\n      <OutsideClickBox\n        onClickOutside={hideOptions}\n        onClick={() => setShowOptions((prev) => !prev)}\n        sx={{\n          position: \"relative\",\n          display: \"grid\",\n          gridTemplateColumns: \"1fr max-content\",\n          gap: \"5px\",\n          alignItems: \"center\",\n          cursor: \"pointer\",\n          pb: \"12px\",\n          borderBottom: \"2px solid\",\n          borderColor: \"cl_lightGrey\",\n        }}\n      >\n        <ResponsiveTextV2\n          fontSizeWeight={[18, \"regular\"]}\n          color={showOptions ? \"cl_purple\" : \"cl_darkGrey\"}\n        >\n          {selectedOption.title}\n        </ResponsiveTextV2>\n\n        <FlexCenter\n          width=\"10px\"\n          height=\"10px\"\n          sx={{\n            transform: `rotate3d(${showOptions ? 1 : 0}, 0, 0, 180deg)`,\n            transition: \"all 0.2s\",\n            fill: showOptions ? \"cl_purple\" : \"cl_blue\",\n          }}\n        >\n          <ShortDownArrowIcon />\n        </FlexCenter>\n\n        {showOptions && (\n          <SecondaryCustomSelectorOptionsBox\n            options={options}\n            onSelect={onChange}\n          />\n        )}\n      </OutsideClickBox>\n    </Grid>\n  );\n};\n"],"names":["SecondaryCustomSelector","value","onChange","options","width","label","variant","containerSx","showOptions","setShowOptions","useState","selectedOption","option","hideOptions","jsxs","Grid","jsx","BaseLabel","OutsideClickBox","prev","ResponsiveTextV2","FlexCenter","ShortDownArrowIcon","SecondaryCustomSelectorOptionsBox"],"mappings":";;;;;;;;;AASO,MAAMA,IAA0B,CAA4B;AAAA,EACjE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC;AACF,MAAgB;AACd,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9CC,IAAiBR,EAAQ,KAAK,CAACS,MAAWA,EAAO,OAAOX,EAAM,EAAE,GAEhEY,IAAc,MAAMJ,EAAe,EAAK;AAE9C,SAAKE,IAGHG,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAX;AAAA,MACA,SAAS,yBAAyBE,CAAO;AAAA,MACzC,IAAI,EAAE,QAAQ,WAAW,GAAGC,EAAY;AAAA,MAExC,UAAA;AAAA,QAAAS,gBAAAA,MAACC,GAAU,EAAA,SAAS,aAAaX,CAAO,IAAI,OAAAD,GAAc;AAAA,QAE1DS,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,gBAAgBL;AAAA,YAChB,SAAS,MAAMJ,EAAe,CAACU,MAAS,CAACA,CAAI;AAAA,YAC7C,IAAI;AAAA,cACF,UAAU;AAAA,cACV,SAAS;AAAA,cACT,qBAAqB;AAAA,cACrB,KAAK;AAAA,cACL,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,IAAI;AAAA,cACJ,cAAc;AAAA,cACd,aAAa;AAAA,YACf;AAAA,YAEA,UAAA;AAAA,cAAAH,gBAAAA,EAAA;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,kBAC9B,OAAOZ,IAAc,cAAc;AAAA,kBAElC,UAAeG,EAAA;AAAA,gBAAA;AAAA,cAClB;AAAA,cAEAK,gBAAAA,EAAA;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,IAAI;AAAA,oBACF,WAAW,YAAYb,IAAc,IAAI,CAAC;AAAA,oBAC1C,YAAY;AAAA,oBACZ,MAAMA,IAAc,cAAc;AAAA,kBACpC;AAAA,kBAEA,gCAACc,GAAmB,EAAA;AAAA,gBAAA;AAAA,cACtB;AAAA,cAECd,KACCQ,gBAAAA,EAAA;AAAA,gBAACO;AAAA,gBAAA;AAAA,kBACC,SAAApB;AAAA,kBACA,UAAUD;AAAA,gBAAA;AAAA,cACZ;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAlDwB;AAqD9B;"}

package/lib/sd-component-library112.js

@@ -1,158 +1,7 @@
-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-library224.js";
-import { MaxMaxContainer as K } from "./sd-component-library40.js";
-import { ResponsiveTextV2 as Q } from "./sd-component-library150.js";
-const U = (s, r, t, d, a, n) => {
-  const m = d.find(
-    (p) => p[r].trim() === s
-  );
-  a == null || a(m, t), n(m);
-}, j = (s) => s ? "no-translate" : void 0, ae = (s) => {
-  const {
-    defaultValue: r,
-    variant: t,
-    selectorLabel: d,
-    name: a,
-    options: n,
-    onChange: m,
-    width: p,
-    m: S,
-    mt: O,
-    mr: T,
-    mb: V,
-    ml: L,
-    gap: M = ["20px"],
-    disabledTextValue: x = "No Options",
-    textTransform: N = "Capitalize",
-    hideDefaultOnSelect: $,
-    labelMargin: D,
-    secondLabel: l,
-    selectElementHeight: E,
-    errorMessage: f,
-    defaultOptionColor: g,
-    selectedOptionColor: h,
-    errorBackground: F,
-    useValueInsteadOfTitle: w = !1,
-    id: y,
-    translateSelect: C = !0,
-    translateDefaultOption: v,
-    ...z
-  } = s, i = w ? "value" : "title", b = P(
-    () => n.find((o) => o[i] === r),
-    [n, r, i]
-  ), [c, B] = G(b), u = n.length === 0, W = !t || !["compact", "tertiary"].includes(t), _ = g && !c ? { color: g } : h ? { color: h } : {}, A = navigator.userAgent.toLowerCase().indexOf("firefox") > -1, I = j(
-    v !== !0 && !C || v === !1
-  ), R = j(!C);
-  return /* @__PURE__ */ e.jsxs(
-    q,
-    {
-      id: y,
-      variant: `_containers.selectors.${t}`,
-      sx: {
-        pt: "1px",
-        width: p,
-        m: S,
-        mt: O,
-        mr: T,
-        mb: V,
-        ml: L,
-        position: "relative",
-        ...W ? {
-          svg: {
-            transform: `translate(-2px,${A ? 0 : 5}px) scale(.78)`,
-            fill: "#4568F8"
-          }
-        } : {},
-        path: {
-          d: "path('M12,8.6L6.72,3.29C6.32,2.9,5.68,2.9,5.29,3.29C4.90,3.69,4.9,4.33,5.29,4.73L11.23,10.7C11.44,10.91,11.72,11.01,12,11C12.27,11.01,12.55,10.91,12.76,10.7L18.7,4.73C19.09,4.33,19.09,3.69,18.7,3.29C18.31,2.9,17.67,2.9,17.27,3.29Z M12,8.6')"
-        },
-        gap: M
-      },
-      "data-testid": "base-selector",
-      children: [
-        d && /* @__PURE__ */ e.jsxs(K, { gap: ["0px"], children: [
-          /* @__PURE__ */ e.jsx(
-            J,
-            {
-              htmlFor: a,
-              variant: `selectors.${t}${f ? "Error" : ""}`,
-              label: d,
-              m: D
-            }
-          ),
-          l && /* @__PURE__ */ e.jsx(
-            Q,
-            {
-              letterSpacing: ["1px"],
-              textTransform: "uppercase",
-              mt: l.mt,
-              ml: l.ml || ["3px"],
-              color: l.color || "cl_grey",
-              fontSizeWeight: l.fontSizeWeight || [[10, "semi-bold"]],
-              children: l.text
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e.jsx(
-          Z,
-          {
-            id: a,
-            height: E,
-            value: u ? x : c && c[i].trim() || r,
-            backgroundColor: F ? "rgba(255, 0, 0, 0.05)" : "",
-            variant: `_selectors.${t}${f ? "Error" : ""}`,
-            onChange: (o) => U(
-              o.target.value,
-              i,
-              c,
-              n,
-              m,
-              (H) => B(H)
-            ),
-            sx: {
-              textTransform: N,
-              ..._
-            },
-            disabled: u,
-            "data-testid": "select-element",
-            ...z,
-            children: u ? /* @__PURE__ */ e.jsxs("option", { "data-testid": "disabled-option", children: [
-              x,
-              " "
-            ] }, "disabledTextValue") : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-              b === void 0 && // When defaultValue is not in the options list
-              (!c || !$) && /* @__PURE__ */ e.jsx(
-                "option",
-                {
-                  "data-testid": "selector-option",
-                  className: I,
-                  children: r
-                },
-                "defaultValue"
-              ),
-              s.options.map((o) => /* @__PURE__ */ e.jsx(
-                "option",
-                {
-                  value: o[i],
-                  "data-testid": "selector-option",
-                  className: R,
-                  children: o.title
-                },
-                o.id
-              ))
-            ] })
-          }
-        )
-      ]
-    }
-  );
-};
+import { j as t } from "./sd-component-library169.js";
+import { SecondaryCustomSelector as o } from "./sd-component-library111.js";
+const s = (r) => /* @__PURE__ */ t.jsx(o, { ...r, variant: "customTertiary" });
 export {
-  ae as Selector,
-  j as getNoTranslateClass
+  s as TertiaryCustomSelector
 };
 //# sourceMappingURL=sd-component-library112.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library112.js","sources":["../src/components/selectors/selector/selector.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\n\nimport { Select } from \"@rebass/forms\";\nimport { Box } from \"rebass\";\n\nimport { useDependantState } from \"../../../core/custom-hooks\";\nimport { MaxMaxContainer } from \"../../containers\";\nimport { BaseLabel } from \"../../labels/base-label\";\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport {\n  CurrentSelection,\n  SelectorProps as Props,\n  SelectorOption,\n} from \"./interfaces\";\n\nconst onChangeWrapper = <T extends string = string>(\n  selectionString: string,\n  conditionAttribute: \"value\" | \"title\",\n  oldValue: SelectorOption<T> | undefined,\n  options: SelectorOption<T>[],\n  callback: (\n    newValue: SelectorOption<T>,\n    oldValue: SelectorOption<T> | undefined\n  ) => void,\n  setNewSelection: (option: SelectorOption<T>) => void\n) => {\n  const newValue: SelectorOption<T> = options.find(\n    (option) => option[conditionAttribute].trim() === selectionString\n  )!;\n\n  callback?.(newValue, oldValue);\n\n  setNewSelection(newValue);\n};\n\nexport const getNoTranslateClass = (flag: boolean) =>\n  flag ? \"no-translate\" : undefined;\n\n/**\n * @deprecated use SelectorV2 instead\n */\nexport const Selector = <T extends string = string>(props: Props<T>) => {\n  const {\n    defaultValue,\n    variant,\n    selectorLabel,\n    name,\n    options,\n    onChange,\n    width,\n    m,\n    mt,\n    mr,\n    mb,\n    ml,\n    gap = [\"20px\"],\n    disabledTextValue = \"No Options\",\n    textTransform = \"Capitalize\",\n    hideDefaultOnSelect,\n    labelMargin,\n    secondLabel,\n    selectElementHeight,\n    errorMessage,\n    defaultOptionColor,\n    selectedOptionColor,\n    errorBackground,\n    useValueInsteadOfTitle = false,\n    id,\n    translateSelect = true,\n    translateDefaultOption,\n    ...selectorProps\n  } = props;\n\n  const conditionAttribute = useValueInsteadOfTitle ? \"value\" : \"title\";\n\n  const defaultValueObject: CurrentSelection<T> = useMemo(\n    () => options.find((option) => option[conditionAttribute] === defaultValue),\n    [options, defaultValue, conditionAttribute]\n  );\n  //`options` needs to be a stable reference. Other wise Selector value reset to default.\n\n  const [selection, setSelection] = useDependantState(defaultValueObject);\n\n  const noOptionsToSelect = options.length === 0;\n\n  const useDefaultIconStyles =\n    !variant || ![\"compact\", \"tertiary\"].includes(variant);\n\n  const colorSx: { color: string } | {} =\n    defaultOptionColor && !selection\n      ? { color: defaultOptionColor }\n      : selectedOptionColor\n      ? { color: selectedOptionColor }\n      : {};\n  const isFirefox = navigator.userAgent.toLowerCase().indexOf(\"firefox\") > -1;\n\n  const defaultOptionClassName = getNoTranslateClass(\n    (translateDefaultOption !== true && !translateSelect) ||\n      translateDefaultOption === false\n  );\n  const regularOptionClassName = getNoTranslateClass(!translateSelect);\n\n  return (\n    <Box\n      id={id}\n      variant={`_containers.selectors.${variant}`}\n      sx={{\n        pt: \"1px\",\n        width,\n        m,\n        mt,\n        mr,\n        mb,\n        ml,\n        position: \"relative\",\n        ...(useDefaultIconStyles\n          ? {\n              svg: {\n                transform: `translate(-2px,${isFirefox ? 0 : 5}px) scale(.78)`,\n                fill: \"#4568F8\",\n              },\n            }\n          : {}),\n        path: {\n          d: \"path('M12,8.6L6.72,3.29C6.32,2.9,5.68,2.9,5.29,3.29C4.90,3.69,4.9,4.33,5.29,4.73L11.23,10.7C11.44,10.91,11.72,11.01,12,11C12.27,11.01,12.55,10.91,12.76,10.7L18.7,4.73C19.09,4.33,19.09,3.69,18.7,3.29C18.31,2.9,17.67,2.9,17.27,3.29Z M12,8.6')\",\n        },\n        gap,\n      }}\n      data-testid=\"base-selector\"\n    >\n      {selectorLabel && (\n        <MaxMaxContainer gap={[\"0px\"]}>\n          <BaseLabel\n            htmlFor={name}\n            variant={`selectors.${variant}${errorMessage ? \"Error\" : \"\"}`}\n            label={selectorLabel}\n            m={labelMargin}\n          />\n\n          {secondLabel && (\n            <ResponsiveTextV2\n              letterSpacing={[\"1px\"]}\n              textTransform=\"uppercase\"\n              mt={secondLabel.mt}\n              ml={secondLabel.ml || [\"3px\"]}\n              color={secondLabel.color || \"cl_grey\"}\n              fontSizeWeight={secondLabel.fontSizeWeight || [[10, \"semi-bold\"]]}\n            >\n              {secondLabel.text}\n            </ResponsiveTextV2>\n          )}\n        </MaxMaxContainer>\n      )}\n\n      <Select\n        id={name}\n        height={selectElementHeight}\n        value={\n          noOptionsToSelect\n            ? disabledTextValue\n            : (selection && selection[conditionAttribute].trim()) ||\n              defaultValue\n        }\n        backgroundColor={errorBackground ? \"rgba(255, 0, 0, 0.05)\" : \"\"}\n        variant={`_selectors.${variant}${errorMessage ? \"Error\" : \"\"}`}\n        onChange={(event) =>\n          onChangeWrapper(\n            event.target.value,\n            conditionAttribute,\n            selection,\n            options,\n            onChange,\n            (option) => setSelection(option)\n          )\n        }\n        sx={{\n          textTransform,\n          ...colorSx,\n        }}\n        disabled={noOptionsToSelect}\n        data-testid=\"select-element\"\n        {...selectorProps}\n      >\n        {noOptionsToSelect ? (\n          <option key=\"disabledTextValue\" data-testid=\"disabled-option\">\n            {disabledTextValue}{\" \"}\n            {/* appending space because sometimes last letter gets cropped. */}\n          </option>\n        ) : (\n          <>\n            {defaultValueObject === undefined &&\n              // When defaultValue is not in the options list\n              (!selection || !hideDefaultOnSelect) && (\n                <option\n                  key=\"defaultValue\"\n                  data-testid=\"selector-option\"\n                  className={defaultOptionClassName}\n                >\n                  {defaultValue}\n                </option>\n              )}\n\n            {props.options.map((option) => (\n              <option\n                key={option.id}\n                value={option[conditionAttribute]}\n                data-testid=\"selector-option\"\n                className={regularOptionClassName}\n              >\n                {option.title}\n              </option>\n            ))}\n          </>\n        )}\n      </Select>\n    </Box>\n  );\n};\n"],"names":["onChangeWrapper","selectionString","conditionAttribute","oldValue","options","callback","setNewSelection","newValue","option","getNoTranslateClass","flag","Selector","props","defaultValue","variant","selectorLabel","name","onChange","width","m","mt","mr","mb","ml","gap","disabledTextValue","textTransform","hideDefaultOnSelect","labelMargin","secondLabel","selectElementHeight","errorMessage","defaultOptionColor","selectedOptionColor","errorBackground","useValueInsteadOfTitle","id","translateSelect","translateDefaultOption","selectorProps","defaultValueObject","useMemo","selection","setSelection","useDependantState","noOptionsToSelect","useDefaultIconStyles","colorSx","isFirefox","defaultOptionClassName","regularOptionClassName","jsxs","Box","MaxMaxContainer","jsx","BaseLabel","ResponsiveTextV2","Select","event","Fragment"],"mappings":"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"}
+{"version":3,"file":"sd-component-library112.js","sources":["../src/components/selectors/tertiary-custom-selector/tertiary-custom-selector.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { SecondaryCustomSelector } from \"../secondary-custom-selector\";\nimport { TertiaryCustomSelectorProps as Props } from \"./interfaces\";\n\nexport const TertiaryCustomSelector: React.FC<Props> = (props) => {\n  return <SecondaryCustomSelector {...props} variant=\"customTertiary\" />;\n};\n"],"names":["TertiaryCustomSelector","props","jsx","SecondaryCustomSelector"],"mappings":";;AAKa,MAAAA,IAA0C,CAACC,MAC9CC,gBAAAA,EAAAA,IAAAC,GAAA,EAAyB,GAAGF,GAAO,SAAQ,iBAAiB,CAAA;"}

package/lib/sd-component-library113.js

@@ -1,15 +1,75 @@
-import { j as t } from "./sd-component-library197.js";
-import { Selector as o } from "./sd-component-library112.js";
-const i = (r) => /* @__PURE__ */ t.jsx(
-  o,
-  {
-    ...r,
-    defaultOptionColor: r.defaultOptionColor || "cl_grey",
-    variant: "tertiary",
-    gap: ["0"]
-  }
-);
+import { j as o } from "./sd-component-library169.js";
+import { useState as d } from "react";
+import { OutsideClickBox as a } from "./sd-component-library9.js";
+import { ReactComponent as x } from "./sd-component-library160.js";
+import { ResponsiveTextV2 as f } from "./sd-component-library135.js";
+import { BaseTextV2 as u } from "./sd-component-library129.js";
+import { FlexCenter as h } from "./sd-component-library30.js";
+import { SecondaryCustomSelectorOptionsBox as g } from "./sd-component-library230.js";
+const k = ({
+  width: l,
+  options: r,
+  value: n,
+  onChange: p,
+  label: c
+}) => {
+  const [e, i] = d(!1), s = r.find((t) => t.id === n.id), m = () => i(!1);
+  return s ? /* @__PURE__ */ o.jsxs(
+    a,
+    {
+      onClickOutside: m,
+      onClick: () => i((t) => !t),
+      sx: {
+        width: l,
+        position: "relative",
+        display: "grid",
+        gridTemplateColumns: "1fr max-content",
+        gap: "5px",
+        alignItems: "center",
+        cursor: "pointer",
+        pb: "12px",
+        borderBottom: "2px solid",
+        borderColor: "cl_lightGrey"
+      },
+      children: [
+        /* @__PURE__ */ o.jsxs(f, { fontSizeWeight: [18, "regular"], color: "cl_grey", children: [
+          c,
+          " ",
+          /* @__PURE__ */ o.jsx(
+            u,
+            {
+              color: e ? "cl_purple" : "cl_darkGrey",
+              fontWeight: "700",
+              display: "inline",
+              children: s.title
+            }
+          )
+        ] }),
+        /* @__PURE__ */ o.jsx(
+          h,
+          {
+            width: "10px",
+            height: "10px",
+            sx: {
+              transform: `rotate3d(${e ? 1 : 0}, 0, 0, 180deg)`,
+              transition: "all 0.2s",
+              fill: e ? "cl_purple" : "cl_blue"
+            },
+            children: /* @__PURE__ */ o.jsx(x, {})
+          }
+        ),
+        e && /* @__PURE__ */ o.jsx(
+          g,
+          {
+            options: r,
+            onSelect: p
+          }
+        )
+      ]
+    }
+  ) : null;
+};
 export {
-  i as TertiarySelector
+  k as CombinedSecondaryCustomSelector
 };
 //# sourceMappingURL=sd-component-library113.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library113.js","sources":["../src/components/selectors/tertiary-selector/tertiary-selector.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Selector } from \"../selector\";\nimport { TertiarySelectorProps as Props } from \"./interfaces\";\n\n/**\n * The TertiarySelector.\n * @deprecated use TertiarySelectorV2 instead\n */\nexport const TertiarySelector = <T extends string = string>(\n  props: Props<T>\n) => {\n  return (\n    <Selector\n      {...props}\n      defaultOptionColor={props.defaultOptionColor || \"cl_grey\"}\n      variant=\"tertiary\"\n      gap={[\"0\"]}\n    />\n  );\n};\n"],"names":["TertiarySelector","props","jsx","Selector"],"mappings":";;AASa,MAAAA,IAAmB,CAC9BC,MAGEC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,oBAAoBA,EAAM,sBAAsB;AAAA,IAChD,SAAQ;AAAA,IACR,KAAK,CAAC,GAAG;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"sd-component-library113.js","sources":["../src/components/selectors/combined-secondary-custom-selector/combined-secondary-custom-selector.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { OutsideClickBox } from \"../../boxes\";\nimport { FlexCenter } from \"../../containers\";\nimport { ShortDownArrowIcon } from \"../../icons/short-dropdown-arrow-icon\";\nimport { BaseTextV2 } from \"../../texts\";\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport { SecondaryCustomSelectorOptionsBox } from \"../secondary-custom-selector/partials\";\nimport { CombinedSecondaryCustomSelectorProps as Props } from \"./interfaces\";\n\nexport const CombinedSecondaryCustomSelector: React.FC<Props> = ({\n  width,\n  options,\n  value,\n  onChange,\n  label,\n}) => {\n  const [showOptions, setShowOptions] = useState(false);\n\n  const selectedOption = options.find((option) => option.id === value.id);\n\n  const hideOptions = () => setShowOptions(false);\n\n  if (!selectedOption) return null;\n\n  return (\n    <OutsideClickBox\n      onClickOutside={hideOptions}\n      onClick={() => setShowOptions((prev) => !prev)}\n      sx={{\n        width,\n        position: \"relative\",\n        display: \"grid\",\n        gridTemplateColumns: \"1fr max-content\",\n        gap: \"5px\",\n        alignItems: \"center\",\n        cursor: \"pointer\",\n        pb: \"12px\",\n        borderBottom: \"2px solid\",\n        borderColor: \"cl_lightGrey\",\n      }}\n    >\n      <ResponsiveTextV2 fontSizeWeight={[18, \"regular\"]} color=\"cl_grey\">\n        {label}{\" \"}\n        <BaseTextV2\n          color={showOptions ? \"cl_purple\" : \"cl_darkGrey\"}\n          fontWeight=\"700\"\n          display=\"inline\"\n        >\n          {selectedOption.title}\n        </BaseTextV2>\n      </ResponsiveTextV2>\n\n      <FlexCenter\n        width=\"10px\"\n        height=\"10px\"\n        sx={{\n          transform: `rotate3d(${showOptions ? 1 : 0}, 0, 0, 180deg)`,\n          transition: \"all 0.2s\",\n          fill: showOptions ? \"cl_purple\" : \"cl_blue\",\n        }}\n      >\n        <ShortDownArrowIcon />\n      </FlexCenter>\n\n      {showOptions && (\n        <SecondaryCustomSelectorOptionsBox\n          options={options}\n          onSelect={onChange}\n        />\n      )}\n    </OutsideClickBox>\n  );\n};\n"],"names":["CombinedSecondaryCustomSelector","width","options","value","onChange","label","showOptions","setShowOptions","useState","selectedOption","option","hideOptions","jsxs","OutsideClickBox","prev","ResponsiveTextV2","jsx","BaseTextV2","FlexCenter","ShortDownArrowIcon","SecondaryCustomSelectorOptionsBox"],"mappings":";;;;;;;;AAUO,MAAMA,IAAmD,CAAC;AAAA,EAC/D,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9CC,IAAiBP,EAAQ,KAAK,CAACQ,MAAWA,EAAO,OAAOP,EAAM,EAAE,GAEhEQ,IAAc,MAAMJ,EAAe,EAAK;AAE9C,SAAKE,IAGHG,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAgBF;AAAA,MAChB,SAAS,MAAMJ,EAAe,CAACO,MAAS,CAACA,CAAI;AAAA,MAC7C,IAAI;AAAA,QACF,OAAAb;AAAA,QACA,UAAU;AAAA,QACV,SAAS;AAAA,QACT,qBAAqB;AAAA,QACrB,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,cAAc;AAAA,QACd,aAAa;AAAA,MACf;AAAA,MAEA,UAAA;AAAA,QAAAW,gBAAAA,OAACG,KAAiB,gBAAgB,CAAC,IAAI,SAAS,GAAG,OAAM,WACtD,UAAA;AAAA,UAAAV;AAAA,UAAO;AAAA,UACRW,gBAAAA,EAAA;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAOX,IAAc,cAAc;AAAA,cACnC,YAAW;AAAA,cACX,SAAQ;AAAA,cAEP,UAAeG,EAAA;AAAA,YAAA;AAAA,UAClB;AAAA,QAAA,GACF;AAAA,QAEAO,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAI;AAAA,cACF,WAAW,YAAYZ,IAAc,IAAI,CAAC;AAAA,cAC1C,YAAY;AAAA,cACZ,MAAMA,IAAc,cAAc;AAAA,YACpC;AAAA,YAEA,gCAACa,GAAmB,EAAA;AAAA,UAAA;AAAA,QACtB;AAAA,QAECb,KACCU,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,SAAAlB;AAAA,YACA,UAAUE;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IA9CsB;AAkD9B;"}