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

package/lib/sd-component-library270.js

@@ -1,18 +1,27 @@
-import { jsx as n } from "./sd-component-library196.js";
-import { Button as a } from "./sd-component-library28.js";
-const c = (r) => {
-  const {
-    borderColor: e,
-    borderStyle: o,
-    borderWidth: i,
-    fill: d,
-    width: l,
-    height: h,
-    disabled: t
-  } = r;
-  return /* @__PURE__ */ n(a, { ...r, width: l || ["30px"], height: h || ["30px"], borderColor: t ? "cl_lightGrey" : e || "#4668F8", borderStyle: o || "solid", borderWidth: i || "2px", fill: t ? "cl_lightGrey" : d || "#4668F8", "data-test": "square-button", variant: "_square", children: r.children });
-};
+import { jsx as r } from "./sd-component-library195.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 {
-  c as SquareButton
+  p as ArrowButton
 };
 //# sourceMappingURL=sd-component-library270.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library270.js","sources":["../src/components/buttons/partials/square-button/square-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Button } from \"../../button\";\nimport { SquareButtonProps } from \"./interfaces\";\n\n/**\n * The circle button.\n */\nexport const SquareButton: React.FunctionComponent<SquareButtonProps> = (\n  props: SquareButtonProps\n): React.ReactElement<SquareButtonProps> => {\n  const {\n    borderColor,\n    borderStyle,\n    borderWidth,\n    fill,\n    width,\n    height,\n    disabled,\n  } = props;\n  return (\n    <Button\n      {...props}\n      width={width || [\"30px\"]}\n      height={height || [\"30px\"]}\n      borderColor={!disabled ? borderColor || \"#4668F8\" : \"cl_lightGrey\"}\n      borderStyle={borderStyle || \"solid\"}\n      borderWidth={borderWidth || \"2px\"}\n      fill={!disabled ? fill || \"#4668F8\" : \"cl_lightGrey\"}\n      data-test=\"square-button\"\n      variant=\"_square\"\n    >\n      {props.children}\n    </Button>\n  );\n};\n"],"names":["SquareButton","props","borderColor","borderStyle","borderWidth","fill","width","height","disabled","Button","children"],"mappings":";;AAQaA,MAAAA,IAA2DA,CACtEC,MAC0C;AACpC,QAAA;AAAA,IACJC,aAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,QAAAA;AAAAA,IACAC,UAAAA;AAAAA,EACEP,IAAAA;AACJ,2BACGQ,GACC,EAAA,GAAIR,GACJ,OAAOK,KAAS,CAAC,MAAM,GACvB,QAAQC,KAAU,CAAC,MAAM,GACzB,aAAcC,IAAsC,iBAA3BN,KAAe,WACxC,aAAaC,KAAe,SAC5B,aAAaC,KAAe,OAC5B,MAAOI,IAA+B,iBAApBH,KAAQ,WAC1B,aAAU,iBACV,SAAQ,WAEPJ,YAAMS,SACT,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library270.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-library271.js

@@ -1,22 +1,24 @@
-import { jsx as t } from "./sd-component-library196.js";
-import { ResponsiveTextV2 as o } from "./sd-component-library147.js";
-const s = (e) => {
-  const {
-    currentPage: r
-  } = e;
-  return /* @__PURE__ */ t(o, { fontSizeWeight: [14, "regular"], sx: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderColor: "cl_lightGrey",
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderRadius: "3px",
-    height: "30px",
-    minWidth: "30px"
-  }, children: r });
+import { jsx as n } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
+import { Box as p } from "./sd-component-library199.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 {
-  s as CurrentPage
+  l as Mask
 };
 //# sourceMappingURL=sd-component-library271.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library271.js","sources":["../src/components/page-selectors/page-selector/partials/current-page/current-page.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { CurrentPageProps as Props } from \"./interfaces\";\n\nexport const CurrentPage: React.FC<Props> = (props) => {\n  const { currentPage } = props;\n\n  return (\n    <ResponsiveTextV2\n      fontSizeWeight={[14, \"regular\"]}\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        borderColor: \"cl_lightGrey\",\n        borderWidth: 1,\n        borderStyle: \"solid\",\n        borderRadius: \"3px\",\n        height: \"30px\",\n        minWidth: \"30px\",\n      }}\n    >\n      {currentPage}\n    </ResponsiveTextV2>\n  );\n};\n"],"names":["CurrentPage","props","currentPage","ResponsiveTextV2","display","alignItems","justifyContent","borderColor","borderWidth","borderStyle","borderRadius","height","minWidth"],"mappings":";;AAKO,MAAMA,IAAgCC,CAAUA,MAAA;AAC/C,QAAA;AAAA,IAAEC,aAAAA;AAAAA,EAAgBD,IAAAA;AAExB,2BACGE,GACC,EAAA,gBAAgB,CAAC,IAAI,SAAS,GAC9B,IAAI;AAAA,IACFC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,aAAa;AAAA,IACbC,aAAa;AAAA,IACbC,aAAa;AAAA,IACbC,cAAc;AAAA,IACdC,QAAQ;AAAA,IACRC,UAAU;AAAA,EAAA,GAGXV,UACHA,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library271.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-library272.js

@@ -1,6 +1,88 @@
-import { r as t } from "./sd-component-library193.js";
-const o = (a) => /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 7, height: 13, viewBox: "0 0 7 13", ...a }, /* @__PURE__ */ t.createElement("path", { id: "Forma_1_copy_3", "data-name": "Forma 1 copy 3", d: "M8105.27,5251.88l5.6-6.08a0.435,0.435,0,0,0,0-.6l-5.6-6.08a0.349,0.349,0,0,0-.27-0.13,0.354,0.354,0,0,0-.28.13l-0.6.65a0.435,0.435,0,0,0,0,.6l4.72,5.13-4.72,5.13a0.423,0.423,0,0,0-.12.3,0.441,0.441,0,0,0,.12.3l0.6,0.65a0.354,0.354,0,0,0,.28.13A0.349,0.349,0,0,0,8105.27,5251.88Z", transform: "translate(-8104 -5239)" }));
+import { jsxs as z, jsx as i } from "./sd-component-library195.js";
+import { useRef as L, useEffect as V } from "react";
+import "./sd-component-library198.js";
+import { Box as r } from "./sd-component-library199.js";
+import { ResponsiveTextV2 as j } from "./sd-component-library147.js";
+const X = ({
+  id: b,
+  label: g,
+  color: a,
+  activeColor: l,
+  borderColor: s,
+  borderWidth: p,
+  borderRadius: o,
+  selectedIndex: e,
+  idx: n,
+  onSelect: S,
+  dashWidth: $ = 20,
+  dashHeight: v = 3,
+  px: y,
+  fontSize: u,
+  totalTabs: w,
+  topAdditionalOffset: B = 8,
+  bottomAdditionalOffset: T = 4,
+  scrollOnChange: x = !0
+}) => {
+  const c = L(null), t = e === n;
+  V(() => {
+    var h;
+    t && x && ((h = c.current) == null || h.scrollIntoView({
+      behavior: "smooth",
+      inline: "center",
+      block: "end"
+    }));
+  }, [t, x]);
+  const f = e === n + 1, m = e !== -1 && e === n - 1, _ = n === w - 1;
+  return /* @__PURE__ */ z(r, { 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(r, { sx: {
+      height: `${o + B}px`,
+      borderWidth: p,
+      borderColor: s,
+      borderStyle: t ? "solid" : "none",
+      borderBottomStyle: "none",
+      borderRadius: t ? `${o}px ${o}px 0 0` : _ ? `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(j, { fontSizeWeight: [u, "bold"], textTransform: "uppercase", color: t ? l : a, sx: {
+      bg: "cl_white",
+      letterSpacing: "1px",
+      px: y
+    }, children: g }) }),
+    /* @__PURE__ */ i(r, { sx: {
+      height: `${o + T}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: `${v}px`,
+      width: `${$}px`,
+      position: "absolute",
+      left: "50%",
+      bottom: 0,
+      transform: "translateX(-50%)",
+      borderRadius: "1px"
+    } })
+  ] });
+};
 export {
-  o as ReactComponent
+  X as TabV2
 };
 //# sourceMappingURL=sd-component-library272.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library272.js","sources":["../src/components/page-selectors/page-selector/assets/next.svg"],"sourcesContent":["export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3IiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgNyAxMyI+CiAgPHBhdGggaWQ9IkZvcm1hXzFfY29weV8zIiBkYXRhLW5hbWU9IkZvcm1hIDEgY29weSAzIiBkPSJNODEwNS4yNyw1MjUxLjg4bDUuNi02LjA4YTAuNDM1LDAuNDM1LDAsMCwwLDAtLjZsLTUuNi02LjA4YTAuMzQ5LDAuMzQ5LDAsMCwwLS4yNy0wLjEzLDAuMzU0LDAuMzU0LDAsMCwwLS4yOC4xM2wtMC42LjY1YTAuNDM1LDAuNDM1LDAsMCwwLDAsLjZsNC43Miw1LjEzLTQuNzIsNS4xM2EwLjQyMywwLjQyMywwLDAsMC0uMTIuMywwLjQ0MSwwLjQ0MSwwLDAsMCwuMTIuM2wwLjYsMC42NWEwLjM1NCwwLjM1NCwwLDAsMCwuMjguMTNBMC4zNDksMC4zNDksMCwwLDAsODEwNS4yNyw1MjUxLjg4WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTgxMDQgLTUyMzkpIi8+Cjwvc3ZnPgo=\""],"names":["SvgNext","props","React.createElement"],"mappings":";AACK,MAACA,IAAU,CAACC,MAA0BC,gBAAAA,EAAmB,cAAC,OAAO,EAAE,OAAO,8BAA8B,OAAO,GAAG,QAAQ,IAAI,SAAS,YAAY,GAAGD,EAAO,GAAkBC,gBAAAA,EAAmB,cAAC,QAAQ,EAAE,IAAI,kBAAkB,aAAa,kBAAkB,GAAG,0RAA0R,WAAW,yBAAwB,CAAE,CAAC;"}
+{"version":3,"file":"sd-component-library272.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-library273.js

@@ -1,20 +1,20 @@
-import { jsx as i } from "./sd-component-library196.js";
-import { FlexCenter as l } from "./sd-component-library37.js";
-const d = ({
-  children: t,
-  disabled: o,
-  onClick: e
-}) => {
-  const r = o ? "cl_lightGrey" : "cl_blue";
-  return /* @__PURE__ */ i(l, { height: "100%", sx: {
-    borderWidth: "2px",
-    borderColor: r,
-    borderStyle: "solid",
-    borderRadius: "5px",
-    fill: r
-  }, onClick: o ? void 0 : e, children: t });
+import { jsx as c } from "./sd-component-library195.js";
+import { useRef as f, useEffect as n } from "react";
+import "./sd-component-library198.js";
+import { Box as p } from "./sd-component-library199.js";
+const x = (l) => {
+  const {
+    hash: e,
+    selectedTab: t,
+    autoScrollTabs: o,
+    scrollTabOnSelect: a,
+    children: s
+  } = l, r = f(null);
+  return n(() => {
+    o && t === e && r.current && a(r);
+  }, [t, e, o, r, a]), /* @__PURE__ */ c(p, { "data-test": "scrollable-tab-wrapper", ref: r, children: s });
 };
 export {
-  d as PaginationBarButton
+  x as ScrollableTabWrapper
 };
 //# sourceMappingURL=sd-component-library273.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library273.js","sources":["../src/components/pagination-bars/pagination-bar-mobile/partials/pagination-bar-button/pagination-bar-button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport { FlexCenter } from \"../../../../containers\";\nimport { PaginationBarButtonProps as Props } from \"./interfaces\";\n\nexport const PaginationBarButton: React.FC<PropsWithChildren<Props>> = ({\n  children,\n  disabled,\n  onClick,\n}) => {\n  const color = disabled ? \"cl_lightGrey\" : \"cl_blue\";\n  return (\n    <FlexCenter\n      height=\"100%\"\n      sx={{\n        borderWidth: \"2px\",\n        borderColor: color,\n        borderStyle: \"solid\",\n        borderRadius: \"5px\",\n        fill: color,\n      }}\n      onClick={disabled ? undefined : onClick}\n    >\n      {children}\n    </FlexCenter>\n  );\n};\n"],"names":["PaginationBarButton","children","disabled","onClick","color","jsx","FlexCenter","borderWidth","borderColor","borderStyle","borderRadius","fill","undefined"],"mappings":";;AAKO,MAAMA,IAA0DA,CAAC;AAAA,EACtEC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AACF,MAAM;AACEC,QAAAA,IAAQF,IAAW,iBAAiB;AAC1C,SACG,gBAAAG,EAAAC,GAAA,EACC,QAAO,QACP,IAAI;AAAA,IACFC,aAAa;AAAA,IACbC,aAAaJ;AAAAA,IACbK,aAAa;AAAA,IACbC,cAAc;AAAA,IACdC,MAAMP;AAAAA,EAAAA,GAER,SAASF,IAAWU,SAAYT,GAE/BF,UAAAA,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library273.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,EAAuB,IAAI;AAE1CC,SAAAA,EAAU,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;"}

package/lib/sd-component-library274.js

@@ -1,18 +1,30 @@
-import { jsx as r } from "./sd-component-library196.js";
-import { ResponsiveTextV2 as t } from "./sd-component-library147.js";
-const n = ({
-  children: e
-}) => /* @__PURE__ */ r(t, { fontSizeWeight: [18, "regular"], sx: {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  height: "100%",
-  borderRadius: "5px",
-  borderWidth: "1px",
-  borderColor: "cl_lightGrey",
-  borderStyle: "solid"
-}, children: e });
+import { jsx as r, jsxs as m } from "./sd-component-library195.js";
+import { ThirteenBold as x } from "./sd-component-library151.js";
+import { MaxMaxContainer as f } from "./sd-component-library43.js";
+import { Button as b } from "./sd-component-library28.js";
+const A = (i) => {
+  const {
+    Icon: n,
+    iconHeight: l,
+    title: c,
+    isActive: t,
+    hash: o,
+    onTabSelect: s,
+    enableScroll: a,
+    activeColor: e,
+    history: p
+  } = i, h = a ? {
+    scrollTo: o
+  } : {};
+  return /* @__PURE__ */ r(b, { bg: "transparent", onClick: () => s(o), history: p, "data-test": `tab-${o}`, ...h, children: /* @__PURE__ */ m(f, { gap: ["15px", "20px"], children: [
+    /* @__PURE__ */ r(n, { style: {
+      height: l,
+      fill: t ? e : "#434A54"
+    } }),
+    /* @__PURE__ */ r(x, { textTransform: "uppercase", color: t ? e : "#434A54", cursor: "pointer", children: c })
+  ] }) });
+};
 export {
-  n as PaginationBarCurrentPage
+  A as Tab
 };
 //# sourceMappingURL=sd-component-library274.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library274.js","sources":["../src/components/pagination-bars/pagination-bar-mobile/partials/pagination-bar-current-page/pagination-bar-current-page.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts\";\n\nexport const PaginationBarCurrentPage: React.FC<PropsWithChildren<{}>> = ({\n  children,\n}) => {\n  return (\n    <ResponsiveTextV2\n      fontSizeWeight={[18, \"regular\"]}\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        height: \"100%\",\n        borderRadius: \"5px\",\n        borderWidth: \"1px\",\n        borderColor: \"cl_lightGrey\",\n        borderStyle: \"solid\",\n      }}\n    >\n      {children}\n    </ResponsiveTextV2>\n  );\n};\n"],"names":["PaginationBarCurrentPage","children","ResponsiveTextV2","display","alignItems","justifyContent","height","borderRadius","borderWidth","borderColor","borderStyle"],"mappings":";;AAIO,MAAMA,IAA4DA,CAAC;AAAA,EACxEC,UAAAA;AACF,wBAEKC,GACC,EAAA,gBAAgB,CAAC,IAAI,SAAS,GAC9B,IAAI;AAAA,EACFC,SAAS;AAAA,EACTC,YAAY;AAAA,EACZC,gBAAgB;AAAA,EAChBC,QAAQ;AAAA,EACRC,cAAc;AAAA,EACdC,aAAa;AAAA,EACbC,aAAa;AAAA,EACbC,aAAa;AAAA,GAGdT,UAAAA,EACH,CAAA;"}
+{"version":3,"file":"sd-component-library274.js","sources":["../src/components/tabs/tabs-menu/partials/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Button, MaxMaxContainer, ThirteenBold } from \"../../../../..\";\nimport { TabProps } from \"./interfaces\";\n\n/**\n * Tab component to render a single tab button.\n */\nexport const Tab: React.FC<TabProps> = (props) => {\n  const {\n    Icon,\n    iconHeight,\n    title,\n    isActive,\n    hash,\n    onTabSelect,\n    enableScroll,\n    activeColor,\n    history,\n  } = props;\n\n  const scrollProps = enableScroll\n    ? {\n        scrollTo: hash,\n      }\n    : {};\n\n  return (\n    <Button\n      bg=\"transparent\"\n      onClick={() => onTabSelect(hash)}\n      history={history}\n      data-test={`tab-${hash}`}\n      {...scrollProps}\n    >\n      <MaxMaxContainer gap={[\"15px\", \"20px\"]}>\n        <Icon\n          style={{\n            height: iconHeight,\n            fill: isActive ? activeColor : \"#434A54\",\n          }}\n        />\n        <ThirteenBold\n          textTransform=\"uppercase\"\n          color={isActive ? activeColor : \"#434A54\"}\n          cursor=\"pointer\"\n        >\n          {title}\n        </ThirteenBold>\n      </MaxMaxContainer>\n    </Button>\n  );\n};\n"],"names":["Tab","props","Icon","iconHeight","title","isActive","hash","onTabSelect","enableScroll","activeColor","history","scrollProps","scrollTo","jsx","Button","jsxs","MaxMaxContainer","height","fill","ThirteenBold"],"mappings":";;;;AAQO,MAAMA,IAA2BC,CAAUA,MAAA;AAC1C,QAAA;AAAA,IACJC,MAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,SAAAA;AAAAA,EACET,IAAAA,GAEEU,IAAcH,IAChB;AAAA,IACEI,UAAUN;AAAAA,MAEZ;AAGF,SAAA,gBAAAO,EAACC,KACC,IAAG,eACH,SAAS,MAAMP,EAAYD,CAAI,GAC/B,SAAAI,GACA,aAAY,OAAMJ,CAAK,IACvB,GAAIK,GAEJ,UAAA,gBAAAI,EAACC,KAAgB,KAAK,CAAC,QAAQ,MAAM,GACnC,UAAA;AAAA,IAAA,gBAAAH,EAACX,KACC,OAAO;AAAA,MACLe,QAAQd;AAAAA,MACRe,MAAMb,IAAWI,IAAc;AAAA,IAAA,GAC/B;AAAA,IAEJ,gBAAAI,EAACM,GACC,EAAA,eAAc,aACd,OAAOd,IAAWI,IAAc,WAChC,QAAO,WAENL,UACHA,EAAA,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

package/lib/sd-component-library275.js

@@ -1,72 +1,12 @@
-import { jsxs as f, jsx as i } from "./sd-component-library196.js";
-import "./sd-component-library197.js";
-import { Flex as m, Box as y } from "./sd-component-library198.js";
-import { Button as z } from "./sd-component-library28.js";
-import { ResponsiveTextV2 as h } from "./sd-component-library147.js";
-const B = ({
-  active: n = !1,
-  activeColor: o = "cl_purple",
-  color: r = "transparent"
-}) => /* @__PURE__ */ i(y, { height: 4, width: "100%", bg: n ? o : r, sx: {
-  mt: "auto",
-  transition: "all 175ms ease"
-} });
-function O({
-  width: n,
-  height: o,
-  label: r,
-  secondaryText: s,
-  icon: a,
-  id: u,
-  onClick: d,
-  selected: t = !1,
-  activeColor: e = "cl_purple",
-  color: x = "cl_darkGrey",
-  tabPadding: b,
-  bg: p = "cl_transparent",
-  activeBg: c = "cl_transparent",
-  activeRibbonColor: _,
-  borderRadius: g = "4px",
-  tabHeaderComponent: l,
-  elementId: S,
-  maxWidth: j,
-  labelSx: w,
-  secondaryTextSx: R,
-  containerSx: T
-}) {
-  const W = l ? t ? c : p : _ || e;
-  return /* @__PURE__ */ f(m, { flexDirection: "column", sx: {
-    width: "fit-content",
-    maxWidth: j,
-    minWidth: "fit-content",
-    ...T
-  }, children: [
-    /* @__PURE__ */ f(z, { id: S, width: n, height: o, bg: t ? c : p, onClick: d, borderRadius: g, "data-test": `tab-${u}`, padding: b, disabled: t, display: "flex", children: [
-      r && /* @__PURE__ */ i(h, { fontSizeWeight: [[13, "bold"]], sx: {
-        letterSpacing: "1.3px",
-        textTransform: "uppercase",
-        ...w
-      }, color: t ? e : x, children: r }),
-      s && /* @__PURE__ */ i(h, { fontSizeWeight: [[10, "semi-bold"]], sx: {
-        letterSpacing: "1px",
-        textTransform: "uppercase",
-        ...R
-      }, color: t ? e : x, children: s }),
-      a && /* @__PURE__ */ i(m, { height: "16px", flexDirection: "column", justifyContent: "space-between", ml: "10px", children: a }),
-      l
-    ] }),
-    /* @__PURE__ */ i(
-      B,
-      {
-        active: t || !!l,
-        activeColor: W,
-        color: p
-      }
-    )
-  ] });
-}
+import * as e from "react";
+const t = (n) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 18 18", ...n }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, `
+            .info-icon-a {
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 2px;
+            }
+        `)), /* @__PURE__ */ e.createElement("g", { transform: "translate(1 1)" }, /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M19,11a8,8,0,1,1-8-8A8,8,0,0,1,19,11Z", transform: "translate(-3 -3)" }), /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M18,21.2V18", transform: "translate(-10 -10)" }), /* @__PURE__ */ e.createElement("path", { className: "info-icon-a", d: "M18,12h0", transform: "translate(-10 -7.2)" })));
 export {
-  B as Ribbon,
-  O as Tab
+  t as ReactComponent
 };
 //# sourceMappingURL=sd-component-library275.js.map

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

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"sd-component-library275.js","sources":["../src/components/tooltips/base-info-tooltip/assets/info-icon.svg"],"sourcesContent":["export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxOCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGU+CiAgICAgICAgICAgIC5pbmZvLWljb24tYSB7CiAgICAgICAgICAgIHN0cm9rZS1saW5lY2FwOiByb3VuZDsKICAgICAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICAgICAgc3Ryb2tlLXdpZHRoOiAycHg7CiAgICAgICAgICAgIH0KICAgICAgICA8L3N0eWxlPgogICAgPC9kZWZzPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+CiAgICAgICAgPHBhdGggY2xhc3M9ImluZm8taWNvbi1hIiBkPSJNMTksMTFhOCw4LDAsMSwxLTgtOEE4LDgsMCwwLDEsMTksMTFaIgogICAgICAgICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zIC0zKSIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJpbmZvLWljb24tYSIgZD0iTTE4LDIxLjJWMTgiCiAgICAgICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwIC0xMCkiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iaW5mby1pY29uLWEiIGQ9Ik0xOCwxMmgwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAgLTcuMikiLz4KICAgIDwvZz4KPC9zdmc+Cg==\""],"names":["SvgInfoIcon","props","React"],"mappings":";AACK,MAACA,IAAc,CAACC,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,SAAS,aAAa,GAAGD,EAAO,GAAkB,gBAAAC,EAAM,cAAc,QAAQ,MAAsB,gBAAAA,EAAM,cAAc,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAgK,CAAC,GAAmB,gBAAAA,EAAM,cAAc,KAAK,EAAE,WAAW,iBAAgB,GAAoB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,yCAAyC,WAAW,oBAAoB,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,eAAe,WAAW,qBAAoB,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,eAAe,GAAG,YAAY,WAAW,sBAAuB,CAAA,CAAC,CAAC;"}

package/lib/sd-component-library276.js

@@ -1,27 +1,36 @@
-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,
+import { jsx as i, jsxs as e, Fragment as l } from "./sd-component-library195.js";
+import m from "react";
+import { ResponsiveTextV2 as r } from "./sd-component-library147.js";
+import { HorizontalDivider as c } from "./sd-component-library51.js";
+import { FlexCenter as o } from "./sd-component-library37.js";
+const W = m.forwardRef(({
+  mobileTitle: t,
+  tooltipWidth: h,
+  tooltipText: x,
+  zIndex: n,
+  pointerColor: p
+}, d) => /* @__PURE__ */ i(o, { sx: {
+  position: "fixed",
   top: 0,
-  width: e,
-  height: "100%",
-  stroke: "cl_blue",
-  cursor: "pointer",
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  bg: "#262626AA",
+  zIndex: n
+}, ref: d, children: /* @__PURE__ */ e(o, { flexDirection: "column", sx: {
+  width: h,
+  maxWidth: "min(500px, calc(100vw - 30px))",
   bg: "cl_white",
-  ":hover": {
-    stroke: "cl_purple"
-  },
-  zIndex: 1
-}, onClick: o, children: /* @__PURE__ */ r(i, { width: "18px", transform: `rotate(${t === "right" ? 180 : 0})` }) });
+  p: "20px",
+  borderRadius: "5px"
+}, children: [
+  t && /* @__PURE__ */ e(l, { children: [
+    /* @__PURE__ */ i(r, { maxWidth: "100%", fontSizeWeight: [16, "bold"], children: t }),
+    /* @__PURE__ */ i(c, { width: "min(50px, calc(100% - 40px))", color: p, height: "2px", m: "10px 0" })
+  ] }),
+  /* @__PURE__ */ i(r, { maxWidth: "100%", fontSizeWeight: [14, "regular"], children: x })
+] }) }));
 export {
-  p as ArrowButton
+  W as TooltipWithPointerMobile
 };
 //# 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/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;"}
+{"version":3,"file":"sd-component-library276.js","sources":["../src/components/tooltips/tooltip-with-pointer/partials/tooltip-with-pointer-mobile/tooltip-with-pointer-mobile.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { FlexCenter } from \"../../../../containers\";\nimport { HorizontalDivider } from \"../../../../dividers\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { TooltipWithPointerProps } from \"../../interfaces\";\n\ntype Props = Pick<\n  TooltipWithPointerProps,\n  \"mobileTitle\" | \"tooltipText\" | \"tooltipWidth\" | \"zIndex\" | \"pointerColor\"\n>;\n\nexport const TooltipWithPointerMobile = React.forwardRef<HTMLDivElement, Props>(\n  ({ mobileTitle, tooltipWidth, tooltipText, zIndex, pointerColor }, ref) => {\n    return (\n      <FlexCenter\n        sx={{\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          width: \"100vw\",\n          height: \"100vh\",\n          bg: \"#262626AA\",\n          zIndex,\n        }}\n        ref={ref}\n      >\n        <FlexCenter\n          flexDirection=\"column\"\n          sx={{\n            width: tooltipWidth,\n            maxWidth: \"min(500px, calc(100vw - 30px))\",\n            bg: \"cl_white\",\n            p: \"20px\",\n            borderRadius: \"5px\",\n          }}\n        >\n          {mobileTitle && (\n            <>\n              <ResponsiveTextV2 maxWidth=\"100%\" fontSizeWeight={[16, \"bold\"]}>\n                {mobileTitle}\n              </ResponsiveTextV2>\n\n              <HorizontalDivider\n                width=\"min(50px, calc(100% - 40px))\"\n                color={pointerColor}\n                height=\"2px\"\n                m=\"10px 0\"\n              />\n            </>\n          )}\n\n          <ResponsiveTextV2 maxWidth=\"100%\" fontSizeWeight={[14, \"regular\"]}>\n            {tooltipText}\n          </ResponsiveTextV2>\n        </FlexCenter>\n      </FlexCenter>\n    );\n  }\n);\n"],"names":["TooltipWithPointerMobile","React","forwardRef","mobileTitle","tooltipWidth","tooltipText","zIndex","pointerColor","ref","jsx","FlexCenter","position","top","left","width","height","bg","jsxs","maxWidth","p","borderRadius","Fragment","ResponsiveTextV2","HorizontalDivider"],"mappings":";;;;;AAYaA,MAAAA,IAA2BC,EAAMC,WAC5C,CAAC;AAAA,EAAEC,aAAAA;AAAAA,EAAaC,cAAAA;AAAAA,EAAcC,aAAAA;AAAAA,EAAaC,QAAAA;AAAAA,EAAQC,cAAAA;AAAa,GAAGC,MAE/D,gBAAAC,EAACC,KACC,IAAI;AAAA,EACFC,UAAU;AAAA,EACVC,KAAK;AAAA,EACLC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,IAAI;AAAA,EACJV,QAAAA;AAAAA,GAEF,KAAAE,GAEA,UAAA,gBAAAS,EAACP,GACC,EAAA,eAAc,UACd,IAAI;AAAA,EACFI,OAAOV;AAAAA,EACPc,UAAU;AAAA,EACVF,IAAI;AAAA,EACJG,GAAG;AAAA,EACHC,cAAc;AAGfjB,GAAAA,UAAAA;AAAAA,EAAAA,KAEG,gBAAAc,EAAAI,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAZ,EAAAa,GAAA,EAAiB,UAAS,QAAO,gBAAgB,CAAC,IAAI,MAAM,GAC1DnB,UACHA,EAAA,CAAA;AAAA,IAEA,gBAAAM,EAACc,KACC,OAAM,gCACN,OAAOhB,GACP,QAAO,OACP,GAAE,SAAQ,CAAA;AAAA,EAAA,GAEd;AAAA,EAGF,gBAAAE,EAACa,KAAiB,UAAS,QAAO,gBAAgB,CAAC,IAAI,SAAS,GAC7DjB,UACHA,EAAA,CAAA;AAAA,EACF,CAAA,EACF,CAAA,CAGN;"}