@selfdecode/sd-component-library 4.0.73-vite11 → 4.0.73-vite12

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

@@ -1 +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;"}
+{"version":3,"file":"sd-component-library275.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","mt","transition","Tab","width","height","label","secondaryText","icon","id","onClick","selected","tabPadding","bg","activeBg","activeRibbonColor","borderRadius","tabHeaderComponent","elementId","maxWidth","labelSx","secondaryTextSx","containerSx","activeColorOfRibbon","jsxs","Flex","minWidth","Button","ResponsiveTextV2","letterSpacing","textTransform"],"mappings":";;;;;AAQO,MAAMA,IAASA,CAAC;AAAA,EACrBC,QAAAA,IAAS;AAAA,EACTC,aAAAA,IAAc;AAAA,EACdC,OAAAA,IAAQ;AACV,MACE,gBAAAC,EAACC,GACC,EAAA,QAAQ,GACR,OAAM,QACN,IAAIJ,IAASC,IAAcC,GAC3B,IAAI;AAAA,EACFG,IAAI;AAAA,EACJC,YAAY;AACd,GAEH;AAEM,SAASC,EAAO;AAAA,EACrBC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXd,aAAAA,IAAc;AAAA,EACdC,OAAAA,IAAQ;AAAA,EACRc,YAAAA;AAAAA,EACAC,IAAAA,IAAK;AAAA,EACLC,UAAAA,IAAW;AAAA,EACXC,mBAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,oBAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,aAAAA;AACW,GAAG;AACd,QAAMC,IAAsBN,IACxBN,IACEG,IACAD,IACFE,KAAqBlB;AAEzB,SACG,gBAAA2B,EAAAC,GAAA,EACC,eAAc,UACd,IAAI;AAAA,IACFrB,OAAO;AAAA,IACPe,UAAAA;AAAAA,IACAO,UAAU;AAAA,IACV,GAAGJ;AAAAA,EAGL,GAAA,UAAA;AAAA,IAAC,gBAAAE,EAAAG,GAAA,EACC,IAAIT,GACJ,OAAAd,GACA,QAAAC,GACA,IAAIM,IAAWG,IAAWD,GAC1B,SAAAH,GACA,cAAAM,GACA,aAAY,OAAMP,CAAG,IACrB,SAASG,GACT,UAAUD,GACV,SAAQ,QAEPL,UAAAA;AAAAA,MACCA,KAAA,gBAAAP,EAAC6B,KACC,gBAAgB,CAAC,CAAC,IAAI,MAAM,CAAC,GAC7B,IAAI;AAAA,QACFC,eAAe;AAAA,QACfC,eAAe;AAAA,QACf,GAAGV;AAAAA,MAAAA,GAEL,OAAOT,IAAWd,IAAcC,GAE/BQ,UACHA,GAAA;AAAA,MAGDC,KACE,gBAAAR,EAAA6B,GAAA,EACC,gBAAgB,CAAC,CAAC,IAAI,WAAW,CAAC,GAClC,IAAI;AAAA,QACFC,eAAe;AAAA,QACfC,eAAe;AAAA,QACf,GAAGT;AAAAA,MAAAA,GAEL,OAAOV,IAAWd,IAAcC,GAE/BS,UACHA,GAAA;AAAA,MAGDC,KACE,gBAAAT,EAAA0B,GAAA,EACC,QAAO,QACP,eAAc,UACd,gBAAe,iBACf,IAAG,QAEFjB,UACHA,EAAA,CAAA;AAAA,MAIDS;AAAAA,IAAAA,GACH;AAAA,IAEA,gBAAAlB;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,QAAQgB,KAAY,CAAC,CAACM;AAAAA,QACtB,aAAaM;AAAAA,QACb,OAAOV;AAAAA,MAAAA;AAAAA,IAAG;AAAA,EAEd,EAAA,CAAA;AAEJ;"}

package/lib/sd-component-library276.js

@@ -1,24 +1,27 @@
-import { j as e } from "./sd-component-library195.js";
-import { Box as n } from "rebass";
-const g = ({ 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
-      }
-    }
-  );
-};
+import { jsx as r } from "./sd-component-library196.js";
+import { ReactComponent as i } from "./sd-component-library191.js";
+import { FlexItemsCenter as n } from "./sd-component-library37.js";
+const p = ({
+  width: e,
+  direction: t,
+  onClick: o
+}) => /* @__PURE__ */ r(n, { 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(i, { width: "18px", transform: `rotate(${t === "right" ? 180 : 0})` }) });
 export {
-  g as Mask
+  p as ArrowButton
 };
 //# sourceMappingURL=sd-component-library276.js.map

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

@@ -1 +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;AAAA,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;"}
+{"version":3,"file":"sd-component-library276.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","FlexItemsCenter","position","right","top","height","stroke","cursor","bg","zIndex","jsx","ThinArrowLeftIcon"],"mappings":";;;AAMO,MAAMA,IAA+BA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,WAAAA;AAAAA,EAAWC,SAAAA;AAAQ,wBAEpEC,GACC,EAAA,gBAAgBF,MAAc,UAAU,aAAa,cACrD,IAAI;AAAA,EACFG,UAAU;AAAA,EACV,GAAIH,MAAc,UAAU;AAAA,IAAEI,OAAO;AAAA,EAAA,IAAoB;AAAA,EACzDC,KAAK;AAAA,EACLN,OAAAA;AAAAA,EACAO,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,IAAI;AAAA,EACJ,UAAU;AAAA,IAAEF,QAAQ;AAAA,EAAY;AAAA,EAChCG,QAAQ;AAAA,GAEV,SAAAT,GAEA,UAAC,gBAAAU,EAAAC,GAAA,EACC,OAAM,QACN,WAAY,UAASZ,MAAc,UAAU,MAAM,CAAE,KAAG,EAE5D,CAAA;"}

package/lib/sd-component-library277.js

@@ -1,126 +1,24 @@
-import { j as t } from "./sd-component-library195.js";
-import { Flex as f, Box as W } from "rebass";
-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: x,
-  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: p,
-  elementId: g,
-  maxWidth: _,
-  labelSx: R,
-  secondaryTextSx: S,
-  containerSx: w
-}) {
-  const T = p ? i ? c : e : j || o;
-  return /* @__PURE__ */ t.jsxs(
-    f,
-    {
-      flexDirection: "column",
-      sx: {
-        width: "fit-content",
-        maxWidth: _,
-        minWidth: "fit-content",
-        ...w
-      },
-      children: [
-        /* @__PURE__ */ t.jsxs(
-          y,
-          {
-            id: g,
-            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
-                }
-              ),
-              x && /* @__PURE__ */ t.jsx(
-                m,
-                {
-                  fontSizeWeight: [[10, "semi-bold"]],
-                  sx: {
-                    letterSpacing: "1px",
-                    textTransform: "uppercase",
-                    ...S
-                  },
-                  color: i ? o : a,
-                  children: x
-                }
-              ),
-              l && /* @__PURE__ */ t.jsx(
-                f,
-                {
-                  height: "16px",
-                  flexDirection: "column",
-                  justifyContent: "space-between",
-                  ml: "10px",
-                  children: l
-                }
-              ),
-              p
-            ]
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          z,
-          {
-            active: i || !!p,
-            activeColor: T,
-            color: e
-          }
-        )
-      ]
-    }
-  );
-}
+import { jsx as n } from "./sd-component-library196.js";
+import "./sd-component-library197.js";
+import { Box as p } from "./sd-component-library198.js";
+const l = ({
+  width: e,
+  direction: o,
+  offset: t
+}) => {
+  const r = "#000000AA", a = "#00000000";
+  return /* @__PURE__ */ n(p, { sx: {
+    position: "absolute",
+    top: 0,
+    left: o === "left" ? t : void 0,
+    right: o === "right" ? t : void 0,
+    height: "100%",
+    width: e,
+    background: `transparent linear-gradient(-90deg, ${o === "left" ? a : r} 0%, ${o === "right" ? a : r} 100%) 0% 0% no-repeat padding-box`,
+    opacity: 0.05
+  } });
+};
 export {
-  z as Ribbon,
-  E as Tab
+  l as Mask
 };
 //# sourceMappingURL=sd-component-library277.js.map

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

@@ -1 +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;AAAA,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;AAAA,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;AAAA,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;"}
+{"version":3,"file":"sd-component-library277.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","position","top","left","undefined","right","height","background","opacity"],"mappings":";;;AAMO,MAAMA,IAAwBA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,WAAAA;AAAAA,EAAWC,QAAAA;AAAO,MAAM;AACrE,QAAMC,IAAa,aACbC,IAAW;AAGf,SAAA,gBAAAC,EAACC,KACC,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,MAAMR,MAAc,SAASC,IAASQ;AAAAA,IACtCC,OAAOV,MAAc,UAAUC,IAASQ;AAAAA,IACxCE,QAAQ;AAAA,IACRZ,OAAAA;AAAAA,IACAa,YAAa,uCACXZ,MAAc,SAASG,IAAWD,CACnC,QACCF,MAAc,UAAUG,IAAWD,CACpC;AAAA,IACDW,SAAS;AAAA,EAEX,EAAA,CAAA;AAEN;"}

package/lib/sd-component-library278.js

@@ -1,123 +1,86 @@
-import { j as i } from "./sd-component-library195.js";
-import { useRef as B, useEffect as L } from "react";
-import { Box as s } from "rebass";
+import { jsxs as L, jsx as i } from "./sd-component-library196.js";
+import { r as a } from "./sd-component-library193.js";
+import "./sd-component-library197.js";
+import { Box as r } from "./sd-component-library198.js";
 import { ResponsiveTextV2 as V } from "./sd-component-library147.js";
 const R = ({
   id: b,
   label: g,
-  color: a,
-  activeColor: x,
-  borderColor: r,
+  color: S,
+  activeColor: l,
+  borderColor: s,
   borderWidth: p,
   borderRadius: o,
   selectedIndex: e,
   idx: n,
-  onSelect: S,
-  dashWidth: $ = 20,
-  dashHeight: j = 3,
+  onSelect: $,
+  dashWidth: v = 20,
+  dashHeight: y = 3,
   px: u,
-  fontSize: v,
-  totalTabs: y,
-  topAdditionalOffset: w = 8,
-  bottomAdditionalOffset: T = 4,
-  scrollOnChange: l = !0
+  fontSize: w,
+  totalTabs: B,
+  topAdditionalOffset: T = 8,
+  bottomAdditionalOffset: _ = 4,
+  scrollOnChange: x = !0
 }) => {
-  const c = B(null), t = e === n;
-  L(() => {
+  const c = a.useRef(null), t = e === n;
+  a.useEffect(() => {
     var h;
-    t && l && ((h = c.current) == null || h.scrollIntoView({
+    t && x && ((h = c.current) == null || h.scrollIntoView({
       behavior: "smooth",
       inline: "center",
       block: "end"
     }));
-  }, [t, l]);
-  const f = e === n + 1, m = e !== -1 && e === n - 1, z = n === y - 1;
-  return /* @__PURE__ */ i.jsxs(
-    s,
-    {
-      onClick: () => S(b),
-      sx: {
-        cursor: "pointer",
-        position: "relative",
-        left: `-${n > e ? 2 : n == e ? 1 : 0}px`,
-        zIndex: t ? 1 : 0
-      },
-      ref: c,
-      children: [
-        /* @__PURE__ */ i.jsx(
-          s,
-          {
-            sx: {
-              height: `${o + w}px`,
-              borderWidth: p,
-              borderColor: r,
-              borderStyle: t ? "solid" : "none",
-              borderBottomStyle: "none",
-              borderRadius: t ? `${o}px ${o}px 0 0` : z ? `0 ${o}px 0 0` : void 0,
-              bg: "cl_white"
-            }
-          }
-        ),
-        /* @__PURE__ */ i.jsx(
-          s,
-          {
-            sx: {
-              borderWidth: p,
-              borderColor: r,
-              borderStyle: t ? "none solid" : "none",
-              boxSizing: "content-box"
-            },
-            children: /* @__PURE__ */ i.jsx(
-              V,
-              {
-                fontSizeWeight: [v, "bold"],
-                textTransform: "uppercase",
-                color: t ? x : a,
-                sx: {
-                  bg: "cl_white",
-                  letterSpacing: "1px",
-                  px: u
-                },
-                children: g
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ i.jsx(
-          s,
-          {
-            sx: {
-              height: `${o + T}px`,
-              borderWidth: p,
-              borderColor: r,
-              borderBottomStyle: t ? "none" : "solid",
-              borderLeftStyle: m ? "solid" : "none",
-              borderRightStyle: f ? "solid" : "none",
-              borderTopStyle: "none",
-              borderRadius: `0 0 ${f ? o : 0}px ${m ? o : 0}px`,
-              bg: "cl_white",
-              mx: t ? "1px" : void 0
-            }
-          }
-        ),
-        t && /* @__PURE__ */ i.jsx(
-          s,
-          {
-            sx: {
-              bg: x,
-              height: `${j}px`,
-              width: `${$}px`,
-              position: "absolute",
-              left: "50%",
-              bottom: 0,
-              transform: "translateX(-50%)",
-              borderRadius: "1px"
-            }
-          }
-        )
-      ]
-    }
-  );
+  }, [t, x]);
+  const f = e === n + 1, m = e !== -1 && e === n - 1, z = n === B - 1;
+  return /* @__PURE__ */ L(r, { onClick: () => $(b), sx: {
+    cursor: "pointer",
+    position: "relative",
+    left: `-${n > e ? 2 : n == e ? 1 : 0}px`,
+    zIndex: t ? 1 : 0
+  }, ref: c, children: [
+    /* @__PURE__ */ i(r, { sx: {
+      height: `${o + T}px`,
+      borderWidth: p,
+      borderColor: s,
+      borderStyle: t ? "solid" : "none",
+      borderBottomStyle: "none",
+      borderRadius: t ? `${o}px ${o}px 0 0` : z ? `0 ${o}px 0 0` : void 0,
+      bg: "cl_white"
+    } }),
+    /* @__PURE__ */ i(r, { sx: {
+      borderWidth: p,
+      borderColor: s,
+      borderStyle: t ? "none solid" : "none",
+      boxSizing: "content-box"
+    }, children: /* @__PURE__ */ i(V, { fontSizeWeight: [w, "bold"], textTransform: "uppercase", color: t ? l : S, sx: {
+      bg: "cl_white",
+      letterSpacing: "1px",
+      px: u
+    }, children: g }) }),
+    /* @__PURE__ */ i(r, { sx: {
+      height: `${o + _}px`,
+      borderWidth: p,
+      borderColor: s,
+      borderBottomStyle: t ? "none" : "solid",
+      borderLeftStyle: m ? "solid" : "none",
+      borderRightStyle: f ? "solid" : "none",
+      borderTopStyle: "none",
+      borderRadius: `0 0 ${f ? o : 0}px ${m ? o : 0}px`,
+      bg: "cl_white",
+      mx: t ? "1px" : void 0
+    } }),
+    t && /* @__PURE__ */ i(r, { sx: {
+      bg: l,
+      height: `${y}px`,
+      width: `${v}px`,
+      position: "absolute",
+      left: "50%",
+      bottom: 0,
+      transform: "translateX(-50%)",
+      borderRadius: "1px"
+    } })
+  ] });
 };
 export {
   R as TabV2

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library278.js","sources":["../src/components/tabs/tab-bar-v2/partials/tab-v2/tab-v2.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TabV2Props as Props } from \"./interfaces\";\n\nexport const TabV2: React.FC<Props> = ({\n  id,\n  label,\n  color,\n  activeColor,\n  borderColor,\n  borderWidth,\n  borderRadius,\n  selectedIndex,\n  idx,\n  onSelect,\n  dashWidth = 20,\n  dashHeight = 3,\n  px,\n  fontSize,\n  totalTabs,\n  topAdditionalOffset = 8,\n  bottomAdditionalOffset = 4,\n  scrollOnChange = true,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const active = selectedIndex === idx;\n\n  useEffect(() => {\n    if (active && scrollOnChange)\n      ref.current?.scrollIntoView({\n        behavior: \"smooth\",\n        inline: \"center\",\n        block: \"end\",\n      });\n  }, [active, scrollOnChange]);\n\n  const atLeftOfActive = selectedIndex === idx + 1;\n  const atRightOfActive = selectedIndex !== -1 && selectedIndex === idx - 1;\n  const isLast = idx === totalTabs - 1;\n\n  return (\n    <Box\n      onClick={() => onSelect(id)}\n      sx={{\n        cursor: \"pointer\",\n        position: \"relative\",\n        left: `-${idx > selectedIndex ? 2 : idx == selectedIndex ? 1 : 0}px`,\n        zIndex: active ? 1 : 0,\n      }}\n      ref={ref}\n    >\n      <Box\n        sx={{\n          height: `${borderRadius + topAdditionalOffset}px`,\n          borderWidth,\n          borderColor,\n          borderStyle: active ? \"solid\" : \"none\",\n          borderBottomStyle: \"none\",\n          borderRadius: active\n            ? `${borderRadius}px ${borderRadius}px 0 0`\n            : isLast\n            ? `0 ${borderRadius}px 0 0`\n            : undefined,\n          bg: \"cl_white\",\n        }}\n      />\n\n      <Box\n        sx={{\n          borderWidth,\n          borderColor,\n          borderStyle: active ? \"none solid\" : \"none\",\n          boxSizing: \"content-box\",\n        }}\n      >\n        <ResponsiveTextV2\n          fontSizeWeight={[fontSize, \"bold\"]}\n          textTransform=\"uppercase\"\n          color={active ? activeColor : color}\n          sx={{\n            bg: \"cl_white\",\n            letterSpacing: \"1px\",\n            px,\n          }}\n        >\n          {label}\n        </ResponsiveTextV2>\n      </Box>\n\n      <Box\n        sx={{\n          height: `${borderRadius + bottomAdditionalOffset}px`,\n          borderWidth,\n          borderColor,\n          borderBottomStyle: active ? \"none\" : \"solid\",\n          borderLeftStyle: atRightOfActive ? \"solid\" : \"none\",\n          borderRightStyle: atLeftOfActive ? \"solid\" : \"none\",\n          borderTopStyle: \"none\",\n          borderRadius: `0 0 ${atLeftOfActive ? borderRadius : 0}px ${\n            atRightOfActive ? borderRadius : 0\n          }px`,\n          bg: \"cl_white\",\n          mx: active ? \"1px\" : undefined,\n        }}\n      />\n\n      {active && (\n        <Box\n          sx={{\n            bg: activeColor,\n            height: `${dashHeight}px`,\n            width: `${dashWidth}px`,\n            position: \"absolute\",\n            left: \"50%\",\n            bottom: 0,\n            transform: \"translateX(-50%)\",\n            borderRadius: \"1px\",\n          }}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":["TabV2","id","label","color","activeColor","borderColor","borderWidth","borderRadius","selectedIndex","idx","onSelect","dashWidth","dashHeight","px","fontSize","totalTabs","topAdditionalOffset","bottomAdditionalOffset","scrollOnChange","ref","useRef","active","useEffect","_a","atLeftOfActive","atRightOfActive","isLast","jsxs","Box","jsx","ResponsiveTextV2"],"mappings":"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"}
+{"version":3,"file":"sd-component-library278.js","sources":["../src/components/tabs/tab-bar-v2/partials/tab-v2/tab-v2.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TabV2Props as Props } from \"./interfaces\";\n\nexport const TabV2: React.FC<Props> = ({\n  id,\n  label,\n  color,\n  activeColor,\n  borderColor,\n  borderWidth,\n  borderRadius,\n  selectedIndex,\n  idx,\n  onSelect,\n  dashWidth = 20,\n  dashHeight = 3,\n  px,\n  fontSize,\n  totalTabs,\n  topAdditionalOffset = 8,\n  bottomAdditionalOffset = 4,\n  scrollOnChange = true,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const active = selectedIndex === idx;\n\n  useEffect(() => {\n    if (active && scrollOnChange)\n      ref.current?.scrollIntoView({\n        behavior: \"smooth\",\n        inline: \"center\",\n        block: \"end\",\n      });\n  }, [active, scrollOnChange]);\n\n  const atLeftOfActive = selectedIndex === idx + 1;\n  const atRightOfActive = selectedIndex !== -1 && selectedIndex === idx - 1;\n  const isLast = idx === totalTabs - 1;\n\n  return (\n    <Box\n      onClick={() => onSelect(id)}\n      sx={{\n        cursor: \"pointer\",\n        position: \"relative\",\n        left: `-${idx > selectedIndex ? 2 : idx == selectedIndex ? 1 : 0}px`,\n        zIndex: active ? 1 : 0,\n      }}\n      ref={ref}\n    >\n      <Box\n        sx={{\n          height: `${borderRadius + topAdditionalOffset}px`,\n          borderWidth,\n          borderColor,\n          borderStyle: active ? \"solid\" : \"none\",\n          borderBottomStyle: \"none\",\n          borderRadius: active\n            ? `${borderRadius}px ${borderRadius}px 0 0`\n            : isLast\n            ? `0 ${borderRadius}px 0 0`\n            : undefined,\n          bg: \"cl_white\",\n        }}\n      />\n\n      <Box\n        sx={{\n          borderWidth,\n          borderColor,\n          borderStyle: active ? \"none solid\" : \"none\",\n          boxSizing: \"content-box\",\n        }}\n      >\n        <ResponsiveTextV2\n          fontSizeWeight={[fontSize, \"bold\"]}\n          textTransform=\"uppercase\"\n          color={active ? activeColor : color}\n          sx={{\n            bg: \"cl_white\",\n            letterSpacing: \"1px\",\n            px,\n          }}\n        >\n          {label}\n        </ResponsiveTextV2>\n      </Box>\n\n      <Box\n        sx={{\n          height: `${borderRadius + bottomAdditionalOffset}px`,\n          borderWidth,\n          borderColor,\n          borderBottomStyle: active ? \"none\" : \"solid\",\n          borderLeftStyle: atRightOfActive ? \"solid\" : \"none\",\n          borderRightStyle: atLeftOfActive ? \"solid\" : \"none\",\n          borderTopStyle: \"none\",\n          borderRadius: `0 0 ${atLeftOfActive ? borderRadius : 0}px ${\n            atRightOfActive ? borderRadius : 0\n          }px`,\n          bg: \"cl_white\",\n          mx: active ? \"1px\" : undefined,\n        }}\n      />\n\n      {active && (\n        <Box\n          sx={{\n            bg: activeColor,\n            height: `${dashHeight}px`,\n            width: `${dashWidth}px`,\n            position: \"absolute\",\n            left: \"50%\",\n            bottom: 0,\n            transform: \"translateX(-50%)\",\n            borderRadius: \"1px\",\n          }}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":["TabV2","id","label","color","activeColor","borderColor","borderWidth","borderRadius","selectedIndex","idx","onSelect","dashWidth","dashHeight","px","fontSize","totalTabs","topAdditionalOffset","bottomAdditionalOffset","scrollOnChange","ref","useRef","active","useEffect","current","scrollIntoView","behavior","inline","block","atLeftOfActive","atRightOfActive","isLast","Box","cursor","position","left","zIndex","jsx","height","borderStyle","borderBottomStyle","undefined","bg","boxSizing","ResponsiveTextV2","letterSpacing","borderLeftStyle","borderRightStyle","borderTopStyle","mx","width","bottom","transform"],"mappings":"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"}

package/lib/sd-component-library279.js

@@ -1,5 +1,20 @@
-var r = {};
+import { jsx as f } from "./sd-component-library196.js";
+import { r as l } from "./sd-component-library193.js";
+import "./sd-component-library197.js";
+import { Box as p } from "./sd-component-library198.js";
+const u = (s) => {
+  const {
+    hash: e,
+    selectedTab: t,
+    autoScrollTabs: o,
+    scrollTabOnSelect: a,
+    children: c
+  } = s, r = l.useRef(null);
+  return l.useEffect(() => {
+    o && t === e && r.current && a(r);
+  }, [t, e, o, r, a]), /* @__PURE__ */ f(p, { "data-test": "scrollable-tab-wrapper", ref: r, children: c });
+};
 export {
-  r as __exports
+  u as ScrollableTabWrapper
 };
 //# sourceMappingURL=sd-component-library279.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library279.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"sd-component-library279.js","sources":["../src/components/tabs/tabs-menu/partials/scrollable-tab-wrapper/scrollable-tab-wrapper.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ScrollableTabWrapperProps as Props } from \"./interfaces\";\n\nexport const ScrollableTabWrapper: React.FC<Props> = (props) => {\n  const { hash, selectedTab, autoScrollTabs, scrollTabOnSelect, children } =\n    props;\n\n  const tabRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!autoScrollTabs) return;\n\n    /**\n     * If current tab is the selected one, call the callback to scroll the tab.\n     */\n    if (selectedTab === hash && tabRef.current) {\n      scrollTabOnSelect(tabRef);\n    }\n  }, [selectedTab, hash, autoScrollTabs, tabRef, scrollTabOnSelect]);\n\n  return (\n    <Box data-test=\"scrollable-tab-wrapper\" ref={tabRef}>\n      {children}\n    </Box>\n  );\n};\n"],"names":["ScrollableTabWrapper","props","hash","selectedTab","autoScrollTabs","scrollTabOnSelect","children","tabRef","useRef","useEffect","current","Box"],"mappings":";;;;AAMO,MAAMA,IAAyCC,CAAUA,MAAA;AACxD,QAAA;AAAA,IAAEC,MAAAA;AAAAA,IAAMC,aAAAA;AAAAA,IAAaC,gBAAAA;AAAAA,IAAgBC,mBAAAA;AAAAA,IAAmBC,UAAAA;AAAAA,EAC5DL,IAAAA,GAEIM,IAASC,SAAuB,IAAI;AAE1CC,SAAAA,EAAAA,UAAU,MAAM;AACd,IAAKL,KAKDD,MAAgBD,KAAQK,EAAOG,WACjCL,EAAkBE,CAAM;AAAA,EAC1B,GACC,CAACJ,GAAaD,GAAME,GAAgBG,GAAQF,CAAiB,CAAC,qBAG9DM,GAAI,EAAA,aAAU,0BAAyB,KAAKJ,GAC1CD,UAAAA,EACH,CAAA;AAEJ;"}