@selfdecode/sd-component-library 4.0.73-test2 → 4.0.73-vite1

package/lib/sd-component-library271.js

@@ -0,0 +1,55 @@
+import { j as r } from "./sd-component-library195.js";
+import c from "react";
+import "./sd-component-library196.js";
+import { Box as m } from "./sd-component-library197.js";
+import { TriangularPointerIcon as n } from "./sd-component-library189.js";
+import { SecondaryCustomSelectorOptionRow as x } from "./sd-component-library720.js";
+import { HorizontalDivider as i } from "./sd-component-library51.js";
+const g = ({
+  options: t,
+  onSelect: l
+}) => {
+  const s = (o) => () => l(o);
+  return /* @__PURE__ */ r.jsxs(
+    m,
+    {
+      sx: {
+        position: "absolute",
+        right: "-16px",
+        top: "calc(100% - 12px)",
+        minWidth: "calc(100% + 16px)",
+        zIndex: 1
+      },
+      children: [
+        /* @__PURE__ */ r.jsx(n, { direction: "top", mr: "15px", ml: "auto" }),
+        /* @__PURE__ */ r.jsx(i, { height: "2px", color: "cl_purple" }),
+        t.map((o, e) => /* @__PURE__ */ r.jsxs(c.Fragment, { children: [
+          e !== 0 && /* @__PURE__ */ r.jsx(
+            i,
+            {
+              color: "cl_headerLine",
+              sx: {
+                borderStyle: "none solid",
+                borderColor: "cl_lightGrey",
+                borderWidth: "1px"
+              }
+            }
+          ),
+          /* @__PURE__ */ r.jsx(
+            x,
+            {
+              title: o.title,
+              onClick: s(o),
+              isLast: e === t.length - 1
+            },
+            o.id
+          )
+        ] }, o.id))
+      ]
+    }
+  );
+};
+export {
+  g as SecondaryCustomSelectorOptionsBox
+};
+//# sourceMappingURL=sd-component-library271.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library271.js","sources":["../src/components/selectors/secondary-custom-selector/partials/secondary-custom-selector-options-box/secondary-custom-selector-options-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { HorizontalDivider } from \"../../../../dividers\";\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { SelectorOptionV2 } from \"../../../selector-v2\";\nimport { SecondaryCustomSelectorOptionRow } from \"../secondary-custom-selector-option-row\";\nimport { SecondaryCustomSelectorOptionsBoxProps as Props } from \"./interfaces\";\n\nexport const SecondaryCustomSelectorOptionsBox = <T extends string = string>({\n  options,\n  onSelect,\n}: Props<T>) => {\n  const onClick = (option: SelectorOptionV2<T>) => () => onSelect(option);\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        right: \"-16px\",\n        top: \"calc(100% - 12px)\",\n        minWidth: \"calc(100% + 16px)\",\n        zIndex: 1,\n      }}\n    >\n      <TriangularPointerIcon direction=\"top\" mr=\"15px\" ml=\"auto\" />\n\n      <HorizontalDivider height=\"2px\" color=\"cl_purple\" />\n\n      {options.map((option, idx) => (\n        <React.Fragment key={option.id}>\n          {idx !== 0 && (\n            <HorizontalDivider\n              color=\"cl_headerLine\"\n              sx={{\n                borderStyle: \"none solid\",\n                borderColor: \"cl_lightGrey\",\n                borderWidth: \"1px\",\n              }}\n            />\n          )}\n\n          <SecondaryCustomSelectorOptionRow\n            key={option.id}\n            title={option.title}\n            onClick={onClick(option)}\n            isLast={idx === options.length - 1}\n          />\n        </React.Fragment>\n      ))}\n    </Box>\n  );\n};\n"],"names":["SecondaryCustomSelectorOptionsBox","options","onSelect","onClick","option","jsxs","Box","jsx","TriangularPointerIcon","HorizontalDivider","idx","React","SecondaryCustomSelectorOptionRow"],"mappings":";;;;;;;AAUO,MAAMA,IAAoC,CAA4B;AAAA,EAC3E,SAAAC;AAAA,EACA,UAAAC;AACF,MAAgB;AACd,QAAMC,IAAU,CAACC,MAAgC,MAAMF,EAASE,CAAM;AAGpE,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,MAACC,KAAsB,WAAU,OAAM,IAAG,QAAO,IAAG,QAAO;AAAA,QAE1DD,gBAAAA,EAAA,IAAAE,GAAA,EAAkB,QAAO,OAAM,OAAM,aAAY;AAAA,QAEjDR,EAAQ,IAAI,CAACG,GAAQM,MACnBL,gBAAAA,EAAAA,KAAAM,EAAM,UAAN,EACE,UAAA;AAAA,UAAAD,MAAQ,KACPH,gBAAAA,EAAA;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,IAAI;AAAA,gBACF,aAAa;AAAA,gBACb,aAAa;AAAA,gBACb,aAAa;AAAA,cACf;AAAA,YAAA;AAAA,UACF;AAAA,UAGFF,gBAAAA,EAAA;AAAA,YAACK;AAAA,YAAA;AAAA,cAEC,OAAOR,EAAO;AAAA,cACd,SAASD,EAAQC,CAAM;AAAA,cACvB,QAAQM,MAAQT,EAAQ,SAAS;AAAA,YAAA;AAAA,YAH5BG,EAAO;AAAA,UAId;AAAA,QAAA,KAjBmBA,EAAO,EAkB5B,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/lib/sd-component-library272.js

@@ -0,0 +1,135 @@
+import { j as t } from "./sd-component-library195.js";
+import { Select as A } from "./sd-component-library213.js";
+import "./sd-component-library196.js";
+import { getNoTranslateClass as d } from "./sd-component-library110.js";
+import { Box as T } from "./sd-component-library197.js";
+import { MaxMaxContainer as Z } from "./sd-component-library43.js";
+import { BaseLabel as q } from "./sd-component-library234.js";
+import { ResponsiveTextV2 as D } from "./sd-component-library147.js";
+const Y = ({
+  variant: r,
+  options: u,
+  width: f,
+  m: g,
+  mt: h,
+  mr: C,
+  mb: j,
+  ml: v,
+  gap: $,
+  selectorLabel: i,
+  secondLabel: e,
+  errorMessage: m,
+  disabledTextValue: n,
+  hideDefaultOnSelect: y,
+  labelMargin: b,
+  selectElementHeight: B,
+  defaultOptionColor: x,
+  textTransform: F,
+  onSelect: N,
+  noOptionsToSelect: a,
+  name: o,
+  selection: l,
+  hasDefaultValue: S,
+  onFocus: _,
+  errorBackground: E,
+  labelContainerAlignItems: M,
+  translateSelect: c = !0,
+  translateDefaultOption: p,
+  containerVariant: V,
+  disabled: z,
+  pl: I
+}) => {
+  const R = !r || !["compact", "tertiary", "secondaryV2", "updatedSecondary"].includes(
+    r
+  ), W = navigator.userAgent.toLowerCase().indexOf("firefox") > -1, k = d(
+    p !== !0 && !c || p === !1
+  ), w = d(!c);
+  return /* @__PURE__ */ t.jsxs(
+    T,
+    {
+      variant: `_containers.selectors.${V || r}`,
+      sx: {
+        width: f,
+        m: g,
+        mt: h,
+        mr: C,
+        mb: j,
+        ml: v,
+        position: "relative",
+        ...R ? {
+          svg: {
+            transform: `translate(-2px,${W ? 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: $
+      },
+      "data-testid": "base-selector-v2",
+      children: [
+        i && /* @__PURE__ */ t.jsxs(Z, { gap: "0px", alignItems: M, children: [
+          /* @__PURE__ */ t.jsx(
+            q,
+            {
+              htmlFor: o,
+              variant: `selectors.${r}${m ? "Error" : ""}`,
+              label: i,
+              m: b,
+              "data-test": "selector-label"
+            }
+          ),
+          e && /* @__PURE__ */ t.jsx(
+            D,
+            {
+              letterSpacing: "1px",
+              textTransform: "uppercase",
+              mt: e.mt,
+              ml: e.ml || "3px",
+              color: e.color || "cl_grey",
+              fontSizeWeight: e.fontSizeWeight || [10, "semi-bold"],
+              "data-test": "second-label",
+              children: e.text
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          A,
+          {
+            id: o,
+            name: o,
+            height: B,
+            value: a ? n : l.title.trim(),
+            variant: `_selectors.${r}${m ? "Error" : ""}`,
+            onChange: (s) => N(s.target.value),
+            onFocus: _,
+            backgroundColor: E ? "rgba(255, 0, 0, 0.05)" : "",
+            sx: {
+              textTransform: F,
+              ...x && l.value === null ? { color: x } : {},
+              pl: I
+            },
+            disabled: z || a,
+            children: a ? /* @__PURE__ */ t.jsx("option", { "data-test": "disabled-option", children: n }, "disabledTextValue") : /* @__PURE__ */ t.jsx(t.Fragment, { children: u.slice(
+              // should default option be hidden?
+              S && y && l.value !== null ? 1 : 0
+            ).map((s) => /* @__PURE__ */ t.jsx(
+              "option",
+              {
+                "data-testid": "selector-option",
+                className: s.value === null ? k : w,
+                children: s.title
+              },
+              s.id
+            )) })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Y as BaseSelectorV2
+};
+//# sourceMappingURL=sd-component-library272.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library272.js","sources":["../src/components/selectors/selector-v2/partials/base-selector-v2/base-selector-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Select } from \"@rebass/forms\";\nimport { Box } from \"rebass\";\n\nimport { MaxMaxContainer } from \"../../../../containers\";\nimport { BaseLabel } from \"../../../../labels/base-label\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { getNoTranslateClass } from \"../../../selector/selector\";\nimport { BaseSelectorV2Props as Props } from \"./interfaces\";\n\nexport const BaseSelectorV2 = <T extends string = string>({\n  variant,\n  options,\n  width,\n  m,\n  mt,\n  mr,\n  mb,\n  ml,\n  gap,\n  selectorLabel,\n  secondLabel,\n  errorMessage,\n  disabledTextValue,\n  hideDefaultOnSelect,\n  labelMargin,\n  selectElementHeight,\n  defaultOptionColor,\n  textTransform,\n  onSelect,\n  noOptionsToSelect,\n  name,\n  selection,\n  hasDefaultValue,\n  onFocus,\n  errorBackground,\n  labelContainerAlignItems,\n  translateSelect = true,\n  translateDefaultOption,\n  containerVariant,\n  disabled,\n  pl,\n}: Props<T>) => {\n  const useDefaultIconStyles =\n    !variant ||\n    ![\"compact\", \"tertiary\", \"secondaryV2\", \"updatedSecondary\"].includes(\n      variant\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      variant={`_containers.selectors.${containerVariant || variant}`}\n      sx={{\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-v2\"\n    >\n      {selectorLabel && (\n        <MaxMaxContainer gap=\"0px\" alignItems={labelContainerAlignItems}>\n          <BaseLabel\n            htmlFor={name}\n            variant={`selectors.${variant}${errorMessage ? \"Error\" : \"\"}`}\n            label={selectorLabel}\n            m={labelMargin}\n            data-test=\"selector-label\"\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              data-test=\"second-label\"\n            >\n              {secondLabel.text}\n            </ResponsiveTextV2>\n          )}\n        </MaxMaxContainer>\n      )}\n\n      <Select\n        id={name}\n        name={name}\n        height={selectElementHeight}\n        value={noOptionsToSelect ? disabledTextValue : selection.title.trim()}\n        variant={`_selectors.${variant}${errorMessage ? \"Error\" : \"\"}`}\n        onChange={(event) => onSelect(event.target.value)}\n        onFocus={onFocus}\n        backgroundColor={errorBackground ? \"rgba(255, 0, 0, 0.05)\" : \"\"}\n        sx={{\n          textTransform,\n          ...(defaultOptionColor && selection.value === null\n            ? { color: defaultOptionColor }\n            : {}),\n          pl,\n        }}\n        disabled={disabled || noOptionsToSelect}\n      >\n        {noOptionsToSelect ? (\n          <option key=\"disabledTextValue\" data-test=\"disabled-option\">\n            {disabledTextValue}\n          </option>\n        ) : (\n          <>\n            {options\n              .slice(\n                // should default option be hidden?\n                hasDefaultValue &&\n                  hideDefaultOnSelect &&\n                  selection.value !== null\n                  ? 1\n                  : 0\n              )\n              .map((option) => (\n                <option\n                  key={option.id}\n                  data-testid=\"selector-option\"\n                  className={\n                    option.value === null\n                      ? defaultOptionClassName\n                      : regularOptionClassName\n                  }\n                >\n                  {option.title}\n                </option>\n              ))}\n          </>\n        )}\n      </Select>\n    </Box>\n  );\n};\n"],"names":["BaseSelectorV2","variant","options","width","m","mt","mr","mb","ml","gap","selectorLabel","secondLabel","errorMessage","disabledTextValue","hideDefaultOnSelect","labelMargin","selectElementHeight","defaultOptionColor","textTransform","onSelect","noOptionsToSelect","name","selection","hasDefaultValue","onFocus","errorBackground","labelContainerAlignItems","translateSelect","translateDefaultOption","containerVariant","disabled","pl","useDefaultIconStyles","isFirefox","defaultOptionClassName","getNoTranslateClass","regularOptionClassName","jsxs","Box","MaxMaxContainer","jsx","BaseLabel","ResponsiveTextV2","Select","event","Fragment","option"],"mappings":"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"}

package/lib/sd-component-library273.js

@@ -0,0 +1,78 @@
+import { j as o } from "./sd-component-library195.js";
+import "./sd-component-library196.js";
+import { Box as e } from "./sd-component-library197.js";
+import { CustomScrollbarBox as p } from "./sd-component-library50.js";
+import { HorizontalDivider as s } from "./sd-component-library51.js";
+import { ResponsiveTextV2 as d } from "./sd-component-library147.js";
+const g = ({
+  options: l,
+  onSelect: t
+}) => {
+  const i = {
+    borderColor: "cl_lightGrey",
+    borderWidth: "1px"
+  }, x = (r) => () => t(r);
+  return /* @__PURE__ */ o.jsxs(
+    e,
+    {
+      sx: {
+        position: "absolute",
+        top: "100%",
+        right: 0,
+        zIndex: 1
+      },
+      children: [
+        /* @__PURE__ */ o.jsx(s, { color: "cl_purple", height: "2px" }),
+        /* @__PURE__ */ o.jsx(
+          e,
+          {
+            sx: {
+              bg: "cl_white",
+              borderRadius: "0 0 3px 3px",
+              ...i,
+              borderStyle: "solid",
+              borderTopStyle: "none",
+              boxShadow: "0px 3px 10px #0000001A"
+            },
+            children: /* @__PURE__ */ o.jsx(
+              p,
+              {
+                height: "180px",
+                width: "max-content",
+                scrollbarThumbColor: "cl_purple",
+                scrollbarTrackColor: "cl_headerLine",
+                scrollbarWidth: "5px",
+                hoverScrollbarWidth: "5px",
+                bg: "cl_transparent",
+                p: "5px 7px 5px 0",
+                sx: { pr: "8px" },
+                children: l.map((r) => /* @__PURE__ */ o.jsx(
+                  d,
+                  {
+                    fontSizeWeight: [14, "regular"],
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      height: "36px",
+                      px: "10px",
+                      borderColor: "cl_headerLine",
+                      borderWidth: "1px",
+                      borderBottomStyle: "solid"
+                    },
+                    onClick: x(r),
+                    children: r.title
+                  },
+                  r.id
+                ))
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  g as CustomScrollableOptionsBox
+};
+//# sourceMappingURL=sd-component-library273.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library273.js","sources":["../src/components/selectors/custom-scrollable-selector/partials/custom-scrollable-options-box/custom-scrollable-options-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { CustomScrollbarBox } from \"../../../../custom-scrollbar-box\";\nimport { HorizontalDivider } from \"../../../../dividers\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { SelectorOptionV2 } from \"../../../selector-v2\";\nimport { CustomScrollableOptionsBoxProps as Props } from \"./interfaces\";\n\nexport const CustomScrollableOptionsBox = <T extends string = string>({\n  options,\n  onSelect,\n}: Props<T>) => {\n  const lightGreyThinBorder = {\n    borderColor: \"cl_lightGrey\",\n    borderWidth: \"1px\",\n  };\n\n  const onClick = (option: SelectorOptionV2<T>) => () => onSelect(option);\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        top: \"100%\",\n        right: 0,\n        zIndex: 1,\n      }}\n    >\n      <HorizontalDivider color=\"cl_purple\" height=\"2px\" />\n\n      <Box\n        sx={{\n          bg: \"cl_white\",\n          borderRadius: \"0 0 3px 3px\",\n          ...lightGreyThinBorder,\n          borderStyle: \"solid\",\n          borderTopStyle: \"none\",\n          boxShadow: \"0px 3px 10px #0000001A\",\n        }}\n      >\n        <CustomScrollbarBox\n          height=\"180px\"\n          width=\"max-content\"\n          scrollbarThumbColor=\"cl_purple\"\n          scrollbarTrackColor=\"cl_headerLine\"\n          scrollbarWidth=\"5px\"\n          hoverScrollbarWidth=\"5px\"\n          bg=\"cl_transparent\"\n          p=\"5px 7px 5px 0\"\n          sx={{ pr: \"8px\" }}\n        >\n          {options.map((option) => (\n            <ResponsiveTextV2\n              key={option.id}\n              fontSizeWeight={[14, \"regular\"]}\n              sx={{\n                display: \"flex\",\n                alignItems: \"center\",\n                height: \"36px\",\n                px: \"10px\",\n                borderColor: \"cl_headerLine\",\n                borderWidth: \"1px\",\n                borderBottomStyle: \"solid\",\n              }}\n              onClick={onClick(option)}\n            >\n              {option.title}\n            </ResponsiveTextV2>\n          ))}\n        </CustomScrollbarBox>\n      </Box>\n    </Box>\n  );\n};\n"],"names":["CustomScrollableOptionsBox","options","onSelect","lightGreyThinBorder","onClick","option","jsxs","Box","jsx","HorizontalDivider","CustomScrollbarBox","ResponsiveTextV2"],"mappings":";;;;;;AAUO,MAAMA,IAA6B,CAA4B;AAAA,EACpE,SAAAC;AAAA,EACA,UAAAC;AACF,MAAgB;AACd,QAAMC,IAAsB;AAAA,IAC1B,aAAa;AAAA,IACb,aAAa;AAAA,EAAA,GAGTC,IAAU,CAACC,MAAgC,MAAMH,EAASG,CAAM;AAGpE,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,EAAA,IAACC,GAAkB,EAAA,OAAM,aAAY,QAAO,OAAM;AAAA,QAElDD,gBAAAA,EAAA;AAAA,UAACD;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,IAAI;AAAA,cACJ,cAAc;AAAA,cACd,GAAGJ;AAAA,cACH,aAAa;AAAA,cACb,gBAAgB;AAAA,cAChB,WAAW;AAAA,YACb;AAAA,YAEA,UAAAK,gBAAAA,EAAA;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,QAAO;AAAA,gBACP,OAAM;AAAA,gBACN,qBAAoB;AAAA,gBACpB,qBAAoB;AAAA,gBACpB,gBAAe;AAAA,gBACf,qBAAoB;AAAA,gBACpB,IAAG;AAAA,gBACH,GAAE;AAAA,gBACF,IAAI,EAAE,IAAI,MAAM;AAAA,gBAEf,UAAAT,EAAQ,IAAI,CAACI,MACZG,gBAAAA,EAAA;AAAA,kBAACG;AAAA,kBAAA;AAAA,oBAEC,gBAAgB,CAAC,IAAI,SAAS;AAAA,oBAC9B,IAAI;AAAA,sBACF,SAAS;AAAA,sBACT,YAAY;AAAA,sBACZ,QAAQ;AAAA,sBACR,IAAI;AAAA,sBACJ,aAAa;AAAA,sBACb,aAAa;AAAA,sBACb,mBAAmB;AAAA,oBACrB;AAAA,oBACA,SAASP,EAAQC,CAAM;AAAA,oBAEtB,UAAOA,EAAA;AAAA,kBAAA;AAAA,kBAbHA,EAAO;AAAA,gBAAA,CAef;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library274.js

@@ -0,0 +1,80 @@
+import { j as r } from "./sd-component-library195.js";
+import { createElement as u } from "react";
+import "./sd-component-library196.js";
+import { Box as i } from "./sd-component-library197.js";
+import { TriangularPointerIcon as g } from "./sd-component-library189.js";
+import { HorizontalDivider as f } from "./sd-component-library51.js";
+import { OptionRow as w } from "./sd-component-library670.js";
+const k = 8, e = 5, c = k + 2 * e, l = c / 2, n = "cl_header", s = "cl_lightGrey", C = "46px", S = 4, B = (a) => {
+  const { isVisible: d, options: p, value: t, onChange: b } = a;
+  if (!d)
+    return null;
+  const x = (o) => () => b(o), m = [
+    t,
+    ...p.filter(({ id: o }) => o !== t.id)
+  ], h = `${c}px`;
+  return /* @__PURE__ */ r.jsxs(
+    i,
+    {
+      sx: {
+        minWidth: "100%",
+        position: "absolute",
+        top: "100%",
+        right: 0,
+        zIndex: 1,
+        cursor: "default"
+      },
+      children: [
+        /* @__PURE__ */ r.jsx(g, { direction: "top", mr: "15px", ml: "auto" }),
+        /* @__PURE__ */ r.jsx(f, { color: "cl_purple", height: "2px" }),
+        /* @__PURE__ */ r.jsx(
+          i,
+          {
+            sx: {
+              bg: "cl_white",
+              borderRadius: "0 0 3px 3px",
+              boxShadow: "0px 3px 10px #0000001A",
+              borderWidth: "1px",
+              borderColor: "cl_lightGrey",
+              borderStyle: "solid",
+              borderTopStyle: "none",
+              overflow: "auto",
+              maxHeight: `calc(${C} * ${S})`,
+              scrollbarWidth: "thin",
+              scrollbarColor: `${n} ${s}`,
+              "::-webkit-scrollbar-track": {
+                borderRadius: l,
+                bg: n,
+                border: `${e}px solid transparent`,
+                backgroundClip: "content-box"
+              },
+              "::-webkit-scrollbar": {
+                width: h,
+                bg: "transparent"
+              },
+              "::-webkit-scrollbar-thumb": {
+                borderRadius: l,
+                bg: s,
+                border: `${e}px solid transparent`,
+                backgroundClip: "content-box"
+              }
+            },
+            children: m.map((o) => /* @__PURE__ */ u(
+              w,
+              {
+                onClick: x(o),
+                ...o,
+                key: o.id,
+                currentSelection: t.id === o.id
+              }
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  B as CustomScrollableOptionsBox
+};
+//# sourceMappingURL=sd-component-library274.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library274.js","sources":["../src/components/selectors/primary-custom-scrollable-selector/partials/custom-scrollable-options-box/custom-scrollable-options-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { HorizontalDivider } from \"../../../../dividers/horizontal-divider\";\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { SelectorOptionV2 } from \"../../../selector-v2\";\nimport { OptionRow } from \"../option-row\";\nimport { CustomScrollableOptionsBoxProps as Props } from \"./interfaces\";\n\nconst scrollbarWidth = 8;\nconst offset = 5;\nconst totalWidth = scrollbarWidth + 2 * offset;\nconst borderRadius = totalWidth / 2;\n\nconst trackColor = \"cl_header\";\nconst thumbColor = \"cl_lightGrey\";\nconst rowHeight = \"46px\";\nconst maxRows = 4;\n\nexport const CustomScrollableOptionsBox = <T extends string = string>(\n  props: Props<T>\n) => {\n  const { isVisible, options, value, onChange } = props;\n\n  if (!isVisible) return null;\n\n  const onSelect = (option: SelectorOptionV2<T>) => () => onChange(option);\n  const regroupedOptions = [\n    value,\n    ...options.filter(({ id }) => id !== value.id),\n  ];\n\n  const scrollbarWidthStr = `${totalWidth}px`;\n\n  return (\n    <Box\n      sx={{\n        minWidth: \"100%\",\n        position: \"absolute\",\n        top: \"100%\",\n        right: 0,\n        zIndex: 1,\n        cursor: \"default\",\n      }}\n    >\n      <TriangularPointerIcon direction=\"top\" mr=\"15px\" ml=\"auto\" />\n\n      <HorizontalDivider color=\"cl_purple\" height=\"2px\" />\n\n      <Box\n        sx={{\n          bg: \"cl_white\",\n          borderRadius: \"0 0 3px 3px\",\n          boxShadow: \"0px 3px 10px #0000001A\",\n          borderWidth: \"1px\",\n          borderColor: \"cl_lightGrey\",\n          borderStyle: \"solid\",\n          borderTopStyle: \"none\",\n          overflow: \"auto\",\n          maxHeight: `calc(${rowHeight} * ${maxRows})`,\n          scrollbarWidth: \"thin\",\n          scrollbarColor: `${trackColor} ${thumbColor}`,\n          \"::-webkit-scrollbar-track\": {\n            borderRadius,\n            bg: trackColor,\n            border: `${offset}px solid transparent`,\n            backgroundClip: \"content-box\",\n          },\n          \"::-webkit-scrollbar\": {\n            width: scrollbarWidthStr,\n            bg: \"transparent\",\n          },\n          \"::-webkit-scrollbar-thumb\": {\n            borderRadius,\n            bg: thumbColor,\n            border: `${offset}px solid transparent`,\n            backgroundClip: \"content-box\",\n          },\n        }}\n      >\n        {(regroupedOptions as SelectorOptionV2<T>[]).map((option) => (\n          <OptionRow\n            onClick={onSelect(option)}\n            {...option}\n            key={option.id}\n            currentSelection={value.id === option.id}\n          />\n        ))}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["scrollbarWidth","offset","totalWidth","borderRadius","trackColor","thumbColor","rowHeight","maxRows","CustomScrollableOptionsBox","props","isVisible","options","value","onChange","onSelect","option","regroupedOptions","id","scrollbarWidthStr","jsxs","Box","jsx","TriangularPointerIcon","HorizontalDivider","createElement","OptionRow"],"mappings":";;;;;;;AAUA,MAAMA,IAAiB,GACjBC,IAAS,GACTC,IAAaF,IAAiB,IAAIC,GAClCE,IAAeD,IAAa,GAE5BE,IAAa,aACbC,IAAa,gBACbC,IAAY,QACZC,IAAU,GAEHC,IAA6B,CACxCC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,SAAAC,GAAS,OAAAC,GAAO,UAAAC,MAAaJ;AAEhD,MAAI,CAACC;AAAkB,WAAA;AAEvB,QAAMI,IAAW,CAACC,MAAgC,MAAMF,EAASE,CAAM,GACjEC,IAAmB;AAAA,IACvBJ;AAAA,IACA,GAAGD,EAAQ,OAAO,CAAC,EAAE,IAAAM,EAAG,MAAMA,MAAOL,EAAM,EAAE;AAAA,EAAA,GAGzCM,IAAoB,GAAGhB,CAAU;AAGrC,SAAAiB,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,MAACC,KAAsB,WAAU,OAAM,IAAG,QAAO,IAAG,QAAO;AAAA,QAE1DD,gBAAAA,EAAA,IAAAE,GAAA,EAAkB,OAAM,aAAY,QAAO,OAAM;AAAA,QAElDF,gBAAAA,EAAA;AAAA,UAACD;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,IAAI;AAAA,cACJ,cAAc;AAAA,cACd,WAAW;AAAA,cACX,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,cACb,gBAAgB;AAAA,cAChB,UAAU;AAAA,cACV,WAAW,QAAQd,CAAS,MAAMC,CAAO;AAAA,cACzC,gBAAgB;AAAA,cAChB,gBAAgB,GAAGH,CAAU,IAAIC,CAAU;AAAA,cAC3C,6BAA6B;AAAA,gBAC3B,cAAAF;AAAA,gBACA,IAAIC;AAAA,gBACJ,QAAQ,GAAGH,CAAM;AAAA,gBACjB,gBAAgB;AAAA,cAClB;AAAA,cACA,uBAAuB;AAAA,gBACrB,OAAOiB;AAAA,gBACP,IAAI;AAAA,cACN;AAAA,cACA,6BAA6B;AAAA,gBAC3B,cAAAf;AAAA,gBACA,IAAIE;AAAA,gBACJ,QAAQ,GAAGJ,CAAM;AAAA,gBACjB,gBAAgB;AAAA,cAClB;AAAA,YACF;AAAA,YAEE,UAAAe,EAA2C,IAAI,CAACD,MAChD,gBAAAS;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,SAASX,EAASC,CAAM;AAAA,gBACvB,GAAGA;AAAA,gBACJ,KAAKA,EAAO;AAAA,gBACZ,kBAAkBH,EAAM,OAAOG,EAAO;AAAA,cAAA;AAAA,YAAA,CAEzC;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library275.js

@@ -0,0 +1,33 @@
+import { j as r } from "./sd-component-library195.js";
+import { ReactComponent as s } from "./sd-component-library191.js";
+import { FlexItemsCenter as i } from "./sd-component-library37.js";
+const l = ({ width: e, direction: t, onClick: o }) => /* @__PURE__ */ r.jsx(
+  i,
+  {
+    justifyContent: t === "right" ? "flex-end" : "flex-start",
+    sx: {
+      position: "absolute",
+      ...t === "right" ? { right: 0 } : 0,
+      top: 0,
+      width: e,
+      height: "100%",
+      stroke: "cl_blue",
+      cursor: "pointer",
+      bg: "cl_white",
+      ":hover": { stroke: "cl_purple" },
+      zIndex: 1
+    },
+    onClick: o,
+    children: /* @__PURE__ */ r.jsx(
+      s,
+      {
+        width: "18px",
+        transform: `rotate(${t === "right" ? 180 : 0})`
+      }
+    )
+  }
+);
+export {
+  l as ArrowButton
+};
+//# sourceMappingURL=sd-component-library275.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library275.js","sources":["../src/components/tabs/tab-bar/partials/arrow-button/arrow-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { FlexItemsCenter } from \"../../../../containers\";\nimport { ThinArrowLeftIcon } from \"../../../../icons\";\nimport { ArrowButtonProps as Props } from \"./interfaces\";\n\nexport const ArrowButton: React.FC<Props> = ({ width, direction, onClick }) => {\n  return (\n    <FlexItemsCenter\n      justifyContent={direction === \"right\" ? \"flex-end\" : \"flex-start\"}\n      sx={{\n        position: \"absolute\",\n        ...(direction === \"right\" ? { right: 0 } : { left: 0 } ? 0 : undefined),\n        top: 0,\n        width,\n        height: \"100%\",\n        stroke: \"cl_blue\",\n        cursor: \"pointer\",\n        bg: \"cl_white\",\n        \":hover\": { stroke: \"cl_purple\" },\n        zIndex: 1,\n      }}\n      onClick={onClick}\n    >\n      <ThinArrowLeftIcon\n        width=\"18px\"\n        transform={`rotate(${direction === \"right\" ? 180 : 0})`}\n      />\n    </FlexItemsCenter>\n  );\n};\n"],"names":["ArrowButton","width","direction","onClick","jsx","FlexItemsCenter","ThinArrowLeftIcon"],"mappings":";;;AAMO,MAAMA,IAA+B,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,SAAAC,QAE7DC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAgBH,MAAc,UAAU,aAAa;AAAA,IACrD,IAAI;AAAA,MACF,UAAU;AAAA,MACV,GAAIA,MAAc,UAAU,EAAE,OAAO,EAAE,IAAkB;AAAA,MACzD,KAAK;AAAA,MACL,OAAAD;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,UAAU,EAAE,QAAQ,YAAY;AAAA,MAChC,QAAQ;AAAA,IACV;AAAA,IACA,SAAAE;AAAA,IAEA,UAAAC,gBAAAA,EAAA;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,WAAW,UAAUJ,MAAc,UAAU,MAAM,CAAC;AAAA,MAAA;AAAA,IACtD;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library276.js

@@ -0,0 +1,25 @@
+import { j as e } from "./sd-component-library195.js";
+import "./sd-component-library196.js";
+import { Box as n } from "./sd-component-library197.js";
+const x = ({ width: s, direction: t, offset: o }) => {
+  const r = "#000000AA", a = "#00000000";
+  return /* @__PURE__ */ e.jsx(
+    n,
+    {
+      sx: {
+        position: "absolute",
+        top: 0,
+        left: t === "left" ? o : void 0,
+        right: t === "right" ? o : void 0,
+        height: "100%",
+        width: s,
+        background: `transparent linear-gradient(-90deg, ${t === "left" ? a : r} 0%, ${t === "right" ? a : r} 100%) 0% 0% no-repeat padding-box`,
+        opacity: 0.05
+      }
+    }
+  );
+};
+export {
+  x as Mask
+};
+//# sourceMappingURL=sd-component-library276.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library276.js","sources":["../src/components/tabs/tab-bar/partials/mask/mask.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { MaskProps as Props } from \"./interfaces\";\n\nexport const Mask: React.FC<Props> = ({ width, direction, offset }) => {\n  const startColor = \"#000000AA\";\n  const endColor = \"#00000000\";\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        top: 0,\n        left: direction === \"left\" ? offset : undefined,\n        right: direction === \"right\" ? offset : undefined,\n        height: \"100%\",\n        width,\n        background: `transparent linear-gradient(-90deg, ${\n          direction === \"left\" ? endColor : startColor\n        } 0%, ${\n          direction === \"right\" ? endColor : startColor\n        } 100%) 0% 0% no-repeat padding-box`,\n        opacity: 0.05,\n      }}\n    />\n  );\n};\n"],"names":["Mask","width","direction","offset","startColor","endColor","jsx","Box"],"mappings":";;;AAMO,MAAMA,IAAwB,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,QAAAC,QAAa;AACrE,QAAMC,IAAa,aACbC,IAAW;AAGf,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAML,MAAc,SAASC,IAAS;AAAA,QACtC,OAAOD,MAAc,UAAUC,IAAS;AAAA,QACxC,QAAQ;AAAA,QACR,OAAAF;AAAA,QACA,YAAY,uCACVC,MAAc,SAASG,IAAWD,CACpC,QACEF,MAAc,UAAUG,IAAWD,CACrC;AAAA,QACA,SAAS;AAAA,MACX;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library277.js

@@ -0,0 +1,127 @@
+import { j as t } from "./sd-component-library195.js";
+import "./sd-component-library196.js";
+import { Flex as f, Box as W } from "./sd-component-library197.js";
+import { Button as y } from "./sd-component-library28.js";
+import { ResponsiveTextV2 as m } from "./sd-component-library147.js";
+const z = ({
+  active: n = !1,
+  activeColor: s = "cl_purple",
+  color: r = "transparent"
+}) => /* @__PURE__ */ t.jsx(
+  W,
+  {
+    height: 4,
+    width: "100%",
+    bg: n ? s : r,
+    sx: {
+      mt: "auto",
+      transition: "all 175ms ease"
+    }
+  }
+);
+function E({
+  width: n,
+  height: s,
+  label: r,
+  secondaryText: p,
+  icon: l,
+  id: h,
+  onClick: u,
+  selected: i = !1,
+  activeColor: o = "cl_purple",
+  color: a = "cl_darkGrey",
+  tabPadding: d,
+  bg: e = "cl_transparent",
+  activeBg: c = "cl_transparent",
+  activeRibbonColor: j,
+  borderRadius: b = "4px",
+  tabHeaderComponent: x,
+  elementId: _,
+  maxWidth: g,
+  labelSx: R,
+  secondaryTextSx: S,
+  containerSx: w
+}) {
+  const T = x ? i ? c : e : j || o;
+  return /* @__PURE__ */ t.jsxs(
+    f,
+    {
+      flexDirection: "column",
+      sx: {
+        width: "fit-content",
+        maxWidth: g,
+        minWidth: "fit-content",
+        ...w
+      },
+      children: [
+        /* @__PURE__ */ t.jsxs(
+          y,
+          {
+            id: _,
+            width: n,
+            height: s,
+            bg: i ? c : e,
+            onClick: u,
+            borderRadius: b,
+            "data-test": `tab-${h}`,
+            padding: d,
+            disabled: i,
+            display: "flex",
+            children: [
+              r && /* @__PURE__ */ t.jsx(
+                m,
+                {
+                  fontSizeWeight: [[13, "bold"]],
+                  sx: {
+                    letterSpacing: "1.3px",
+                    textTransform: "uppercase",
+                    ...R
+                  },
+                  color: i ? o : a,
+                  children: r
+                }
+              ),
+              p && /* @__PURE__ */ t.jsx(
+                m,
+                {
+                  fontSizeWeight: [[10, "semi-bold"]],
+                  sx: {
+                    letterSpacing: "1px",
+                    textTransform: "uppercase",
+                    ...S
+                  },
+                  color: i ? o : a,
+                  children: p
+                }
+              ),
+              l && /* @__PURE__ */ t.jsx(
+                f,
+                {
+                  height: "16px",
+                  flexDirection: "column",
+                  justifyContent: "space-between",
+                  ml: "10px",
+                  children: l
+                }
+              ),
+              x
+            ]
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          z,
+          {
+            active: i || !!x,
+            activeColor: T,
+            color: e
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  z as Ribbon,
+  E as Tab
+};
+//# sourceMappingURL=sd-component-library277.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library277.js","sources":["../src/components/tabs/tab-bar/partials/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { Button } from \"../../../../buttons\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TabProps } from \"./interfaces\";\n\nexport const Ribbon = ({\n  active = false,\n  activeColor = \"cl_purple\",\n  color = \"transparent\",\n}) => (\n  <Box\n    height={4}\n    width=\"100%\"\n    bg={active ? activeColor : color}\n    sx={{\n      mt: \"auto\",\n      transition: \"all 175ms ease\",\n    }}\n  />\n);\n\nexport function Tab<T>({\n  width,\n  height,\n  label,\n  secondaryText,\n  icon,\n  id,\n  onClick,\n  selected = false,\n  activeColor = \"cl_purple\",\n  color = \"cl_darkGrey\",\n  tabPadding,\n  bg = \"cl_transparent\",\n  activeBg = \"cl_transparent\",\n  activeRibbonColor,\n  borderRadius = \"4px\",\n  tabHeaderComponent,\n  elementId,\n  maxWidth,\n  labelSx,\n  secondaryTextSx,\n  containerSx,\n}: TabProps<T>) {\n  const activeColorOfRibbon = tabHeaderComponent\n    ? selected\n      ? activeBg\n      : bg\n    : activeRibbonColor || activeColor;\n\n  return (\n    <Flex\n      flexDirection=\"column\"\n      sx={{\n        width: \"fit-content\",\n        maxWidth,\n        minWidth: \"fit-content\",\n        ...containerSx,\n      }}\n    >\n      <Button\n        id={elementId}\n        width={width}\n        height={height}\n        bg={selected ? activeBg : bg}\n        onClick={onClick}\n        borderRadius={borderRadius}\n        data-test={`tab-${id}`}\n        padding={tabPadding}\n        disabled={selected}\n        display=\"flex\"\n      >\n        {label && (\n          <ResponsiveTextV2\n            fontSizeWeight={[[13, \"bold\"]]}\n            sx={{\n              letterSpacing: \"1.3px\",\n              textTransform: \"uppercase\",\n              ...labelSx,\n            }}\n            color={selected ? activeColor : color}\n          >\n            {label}\n          </ResponsiveTextV2>\n        )}\n\n        {secondaryText && (\n          <ResponsiveTextV2\n            fontSizeWeight={[[10, \"semi-bold\"]]}\n            sx={{\n              letterSpacing: \"1px\",\n              textTransform: \"uppercase\",\n              ...secondaryTextSx,\n            }}\n            color={selected ? activeColor : color}\n          >\n            {secondaryText}\n          </ResponsiveTextV2>\n        )}\n\n        {icon && (\n          <Flex\n            height=\"16px\"\n            flexDirection=\"column\"\n            justifyContent=\"space-between\"\n            ml=\"10px\"\n          >\n            {icon}\n          </Flex>\n        )}\n\n        {/* Render custom component, if provided */}\n        {tabHeaderComponent}\n      </Button>\n\n      <Ribbon\n        active={selected || !!tabHeaderComponent} // in tabHeaderComponent mode, it should fill the gap.\n        activeColor={activeColorOfRibbon}\n        color={bg}\n      />\n    </Flex>\n  );\n}\n"],"names":["Ribbon","active","activeColor","color","jsx","Box","Tab","width","height","label","secondaryText","icon","id","onClick","selected","tabPadding","bg","activeBg","activeRibbonColor","borderRadius","tabHeaderComponent","elementId","maxWidth","labelSx","secondaryTextSx","containerSx","activeColorOfRibbon","jsxs","Flex","Button","ResponsiveTextV2"],"mappings":";;;;;AAQO,MAAMA,IAAS,CAAC;AAAA,EACrB,QAAAC,IAAS;AAAA,EACT,aAAAC,IAAc;AAAA,EACd,OAAAC,IAAQ;AACV,MACEC,gBAAAA,EAAA;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,QAAQ;AAAA,IACR,OAAM;AAAA,IACN,IAAIJ,IAASC,IAAcC;AAAA,IAC3B,IAAI;AAAA,MACF,IAAI;AAAA,MACJ,YAAY;AAAA,IACd;AAAA,EAAA;AACF;AAGK,SAASG,EAAO;AAAA,EACrB,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,IAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAZ,IAAc;AAAA,EACd,OAAAC,IAAQ;AAAA,EACR,YAAAY;AAAA,EACA,IAAAC,IAAK;AAAA,EACL,UAAAC,IAAW;AAAA,EACX,mBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AACF,GAAgB;AACd,QAAMC,IAAsBN,IACxBN,IACEG,IACAD,IACFE,KAAqBhB;AAGvB,SAAAyB,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,IAAI;AAAA,QACF,OAAO;AAAA,QACP,UAAAN;AAAA,QACA,UAAU;AAAA,QACV,GAAGG;AAAA,MACL;AAAA,MAEA,UAAA;AAAA,QAAAE,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,IAAIR;AAAA,YACJ,OAAAd;AAAA,YACA,QAAAC;AAAA,YACA,IAAIM,IAAWG,IAAWD;AAAA,YAC1B,SAAAH;AAAA,YACA,cAAAM;AAAA,YACA,aAAW,OAAOP,CAAE;AAAA,YACpB,SAASG;AAAA,YACT,UAAUD;AAAA,YACV,SAAQ;AAAA,YAEP,UAAA;AAAA,cACCL,KAAAL,gBAAAA,EAAA;AAAA,gBAAC0B;AAAA,gBAAA;AAAA,kBACC,gBAAgB,CAAC,CAAC,IAAI,MAAM,CAAC;AAAA,kBAC7B,IAAI;AAAA,oBACF,eAAe;AAAA,oBACf,eAAe;AAAA,oBACf,GAAGP;AAAA,kBACL;AAAA,kBACA,OAAOT,IAAWZ,IAAcC;AAAA,kBAE/B,UAAAM;AAAA,gBAAA;AAAA,cACH;AAAA,cAGDC,KACCN,gBAAAA,EAAA;AAAA,gBAAC0B;AAAA,gBAAA;AAAA,kBACC,gBAAgB,CAAC,CAAC,IAAI,WAAW,CAAC;AAAA,kBAClC,IAAI;AAAA,oBACF,eAAe;AAAA,oBACf,eAAe;AAAA,oBACf,GAAGN;AAAA,kBACL;AAAA,kBACA,OAAOV,IAAWZ,IAAcC;AAAA,kBAE/B,UAAAO;AAAA,gBAAA;AAAA,cACH;AAAA,cAGDC,KACCP,gBAAAA,EAAA;AAAA,gBAACwB;AAAAA,gBAAA;AAAA,kBACC,QAAO;AAAA,kBACP,eAAc;AAAA,kBACd,gBAAe;AAAA,kBACf,IAAG;AAAA,kBAEF,UAAAjB;AAAA,gBAAA;AAAA,cACH;AAAA,cAIDS;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAEAhB,gBAAAA,EAAA;AAAA,UAACJ;AAAA,UAAA;AAAA,YACC,QAAQc,KAAY,CAAC,CAACM;AAAA,YACtB,aAAaM;AAAA,YACb,OAAOV;AAAA,UAAA;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}