@selfdecode/sd-component-library 4.0.146 → 4.0.148

package/lib/sd-component-library238.js

@@ -1,46 +1,33 @@
-import { j as M } from "./sd-component-library197.js";
-import { getInnerX as T, getInnerY as W, degToRad as r, getCoordinateForArc as y } from "./sd-component-library91.js";
-import { BaseNeedle as B } from "./sd-component-library299.js";
-function E(p) {
-  const {
-    needleColor: u,
-    options: n,
-    value: h,
-    needleWidth: e,
-    innerCircleRadius: m,
-    innerCircleStrokeWidth: x,
-    diameter: R,
-    arc: a,
-    distanceBetweenRanges: c,
-    distanceFromRange: s,
-    gaugeWidth: i
-  } = p, o = n.findIndex(
-    (F) => h === F.value
-  ), d = R / 2, f = (360 - a) / 2, l = a - (n.length - 1) * c, g = o / n.length, v = (o + 1) / n.length, A = l * (v - g), t = f + c * o + l * g + A / 2, { x: C, y: I } = y(d, t), S = T(
-    C,
-    r(t),
-    s + i + e / 2
-  ), X = W(
-    I,
-    r(t),
-    s + i + e / 2
-  ), Y = e / 2 * Math.cos(r(t)), j = e / 2 * Math.sin(r(t));
-  return /* @__PURE__ */ M.jsx(
-    B,
-    {
-      dx: Y,
-      dy: j,
-      color: u,
-      radius: d,
-      tipX: S,
-      tipY: X,
-      innerCircleStrokeWidth: x,
-      innerCircleRadius: m,
-      needleWidth: e
-    }
-  );
-}
+import { j as r } from "./sd-component-library169.js";
+import { ReactComponent as s } from "./sd-component-library165.js";
+import { FlexItemsCenter as i } from "./sd-component-library30.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 {
-  E as DiscreteMeterNeedle
+  l as ArrowButton
 };
 //# sourceMappingURL=sd-component-library238.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library238.js","sources":["../src/components/meters/multi-option-discrete-outline-meter/partials/discrete-meter-needle/discrete-meter-needle.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport { BaseNeedle } from \"../../../outline-meter/partials/base-needle\";\nimport {\n  degToRad,\n  getCoordinateForArc,\n  getInnerX,\n  getInnerY,\n} from \"../../../outline-meter/utils\";\nimport { DiscreteMeterNeedleProps as Props } from \"./interfaces\";\n\nexport function DiscreteMeterNeedle<T>(props: PropsWithChildren<Props<T>>) {\n  const {\n    needleColor,\n    options,\n    value,\n    needleWidth,\n    innerCircleRadius,\n    innerCircleStrokeWidth,\n    diameter,\n    arc,\n    distanceBetweenRanges,\n    distanceFromRange,\n    gaugeWidth,\n  } = props;\n\n  const matchingRangeIndex = options.findIndex(\n    (option) => value === option.value\n  );\n\n  const radius = diameter / 2;\n\n  const arcStart = (360 - arc) / 2;\n  const arcForRanges = arc - (options.length - 1) * distanceBetweenRanges;\n\n  const start = matchingRangeIndex / options.length;\n  const end = (matchingRangeIndex + 1) / options.length;\n\n  const rangeArc = arcForRanges * (end - start);\n\n  const rangeArcStart =\n    arcStart +\n    distanceBetweenRanges * matchingRangeIndex +\n    arcForRanges * start;\n\n  const valueAlpha = rangeArcStart + rangeArc / 2;\n  const { x: valueX, y: valueY } = getCoordinateForArc(radius, valueAlpha);\n\n  const needleTipX = getInnerX(\n    valueX,\n    degToRad(valueAlpha),\n    distanceFromRange + gaugeWidth + needleWidth / 2\n  );\n  const needleTipY = getInnerY(\n    valueY,\n    degToRad(valueAlpha),\n    distanceFromRange + gaugeWidth + needleWidth / 2\n  );\n\n  const dx = (needleWidth / 2) * Math.cos(degToRad(valueAlpha));\n  const dy = (needleWidth / 2) * Math.sin(degToRad(valueAlpha));\n\n  return (\n    <BaseNeedle\n      dx={dx}\n      dy={dy}\n      color={needleColor}\n      radius={radius}\n      tipX={needleTipX}\n      tipY={needleTipY}\n      innerCircleStrokeWidth={innerCircleStrokeWidth}\n      innerCircleRadius={innerCircleRadius}\n      needleWidth={needleWidth}\n    />\n  );\n}\n"],"names":["DiscreteMeterNeedle","props","needleColor","options","value","needleWidth","innerCircleRadius","innerCircleStrokeWidth","diameter","arc","distanceBetweenRanges","distanceFromRange","gaugeWidth","matchingRangeIndex","option","radius","arcStart","arcForRanges","start","end","rangeArc","valueAlpha","valueX","valueY","getCoordinateForArc","needleTipX","getInnerX","degToRad","needleTipY","getInnerY","dx","dy","jsx","BaseNeedle"],"mappings":";;;AAWO,SAASA,EAAuBC,GAAoC;AACnE,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,KAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,YAAAC;AAAA,EACE,IAAAX,GAEEY,IAAqBV,EAAQ;AAAA,IACjC,CAACW,MAAWV,MAAUU,EAAO;AAAA,EAAA,GAGzBC,IAASP,IAAW,GAEpBQ,KAAY,MAAMP,KAAO,GACzBQ,IAAeR,KAAON,EAAQ,SAAS,KAAKO,GAE5CQ,IAAQL,IAAqBV,EAAQ,QACrCgB,KAAON,IAAqB,KAAKV,EAAQ,QAEzCiB,IAAWH,KAAgBE,IAAMD,IAOjCG,IAJJL,IACAN,IAAwBG,IACxBI,IAAeC,IAEkBE,IAAW,GACxC,EAAE,GAAGE,GAAQ,GAAGC,MAAWC,EAAoBT,GAAQM,CAAU,GAEjEI,IAAaC;AAAA,IACjBJ;AAAA,IACAK,EAASN,CAAU;AAAA,IACnBV,IAAoBC,IAAaP,IAAc;AAAA,EAAA,GAE3CuB,IAAaC;AAAA,IACjBN;AAAA,IACAI,EAASN,CAAU;AAAA,IACnBV,IAAoBC,IAAaP,IAAc;AAAA,EAAA,GAG3CyB,IAAMzB,IAAc,IAAK,KAAK,IAAIsB,EAASN,CAAU,CAAC,GACtDU,IAAM1B,IAAc,IAAK,KAAK,IAAIsB,EAASN,CAAU,CAAC;AAG1D,SAAAW,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAH;AAAA,MACA,IAAAC;AAAA,MACA,OAAO7B;AAAA,MACP,QAAAa;AAAA,MACA,MAAMU;AAAA,MACN,MAAMG;AAAA,MACN,wBAAArB;AAAA,MACA,mBAAAD;AAAA,MACA,aAAAD;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library238.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-library239.js

@@ -1,16 +1,24 @@
-import { j as g } from "./sd-component-library197.js";
-import { getRangeProperties as d } from "./sd-component-library305.js";
-import { MatchedRangeLabelBox as x } from "./sd-component-library296.js";
-const h = (e) => {
-  const { idx: t, totalRanges: a, distanceBetweenRanges: r, arc: n } = e, { rangeArcStart: o, rangeArcEnd: s } = d(
+import { j as e } from "./sd-component-library169.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,
-    a,
-    r,
-    t
-  ), c = Math.round((o + s) / 2);
-  return /* @__PURE__ */ g.jsx(x, { ...e, alpha: c, round: !0 });
+    {
+      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 {
-  h as MatchedRangeLabelBox
+  g as Mask
 };
 //# sourceMappingURL=sd-component-library239.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library239.js","sources":["../src/components/meters/multi-option-discrete-outline-meter/partials/matched-range-label-box/matched-range-label-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { MatchedRangeLabelBox as LabelBox } from \"../../../common-outline-meter-partials\";\nimport { getRangeProperties } from \"../../utils\";\nimport { MatchedRangeLabelBoxProps as Props } from \"./interfaces\";\n\nexport const MatchedRangeLabelBox: React.FC<Props> = (props) => {\n  const { idx, totalRanges, distanceBetweenRanges, arc } = props;\n\n  const { rangeArcStart, rangeArcEnd } = getRangeProperties(\n    arc,\n    totalRanges,\n    distanceBetweenRanges,\n    idx\n  );\n\n  const alpha = Math.round((rangeArcStart + rangeArcEnd) / 2);\n\n  return <LabelBox {...props} alpha={alpha} round />;\n};\n"],"names":["MatchedRangeLabelBox","props","idx","totalRanges","distanceBetweenRanges","arc","rangeArcStart","rangeArcEnd","getRangeProperties","alpha","LabelBox"],"mappings":";;;AAMa,MAAAA,IAAwC,CAACC,MAAU;AAC9D,QAAM,EAAE,KAAAC,GAAK,aAAAC,GAAa,uBAAAC,GAAuB,KAAAC,MAAQJ,GAEnD,EAAE,eAAAK,GAAe,aAAAC,EAAA,IAAgBC;AAAA,IACrCH;AAAA,IACAF;AAAA,IACAC;AAAA,IACAF;AAAA,EAAA,GAGIO,IAAQ,KAAK,OAAOH,IAAgBC,KAAe,CAAC;AAE1D,+BAAQG,GAAU,EAAA,GAAGT,GAAO,OAAAQ,GAAc,OAAK,GAAC,CAAA;AAClD;"}
+{"version":3,"file":"sd-component-library239.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;"}

package/lib/sd-component-library24.js

@@ -1,204 +1,59 @@
-import { j as r } from "./sd-component-library197.js";
-import { Link as V } from "react-router-dom";
-import { Button as X, Flex as Y } from "rebass";
-import { generateTestLocator as Z } from "./sd-component-library4.js";
-import { LoadingSpinner as tt } from "./sd-component-library205.js";
-function ot(t, o, e) {
-  return (n) => {
-    t == null || t(n), o && (`#${o}` !== window.location.hash && (e != null && e.replace(
-      `${window.location.pathname.split("#")[0]}#${o}`
-    ) || window.history.replaceState(
-      void 0,
-      "",
-      `${window.location.pathname.split("#")[0]}#${o}`
-    )), window.dispatchEvent(new HashChangeEvent("hashchange")));
-  };
-}
-const et = ({
-  link: t,
-  isInternal: o = !0,
-  children: e,
-  target: n = "_self",
-  rel: l = "noopener noreferrer",
-  onLinkClick: d
-}) => {
-  const i = {
-    display: "grid",
-    color: "inherit",
-    textDecoration: "none"
-  };
-  return t === void 0 ? /* @__PURE__ */ r.jsx(r.Fragment, { children: e }) : o ? /* @__PURE__ */ r.jsx(
-    V,
-    {
-      to: t,
-      style: i,
-      "data-testid": "react-router-link",
-      onClick: d,
-      children: e
-    }
-  ) : /* @__PURE__ */ r.jsx(
-    "a",
-    {
-      href: t,
-      target: n,
-      rel: l,
-      style: i,
-      onClick: d,
-      "data-testid": "anchor-tag",
-      children: e
-    }
-  );
-}, dt = (t) => {
-  const {
-    link: o,
-    isInternal: e = !0,
-    scrollTo: n,
-    onClick: l,
-    children: d,
-    disabled: i,
-    variant: c,
-    padding: h,
-    fontSize: x,
-    fontWeight: m,
-    letterSpacing: f,
-    textDecoration: b,
-    textTransform: u,
-    hoverFontWeight: g,
-    hoverTextDecoration: v,
-    borderRadius: w,
-    width: S,
-    height: y,
-    borderStyle: j,
-    borderWidth: k,
-    borderColor: B,
-    fill: C,
-    color: W,
-    bg: $,
-    stroke: E,
-    hoverBorderStyle: I,
-    hoverBorderWidth: z,
-    hoverBorderColor: F,
-    hoverFill: D,
-    hoverColor: L,
-    hoverBg: T,
-    hoverStroke: H,
-    display: P,
-    transition: R,
-    history: _,
-    zIndex: A,
-    cursor: G = "pointer",
-    rel: M,
-    target: q,
-    onLinkClick: J,
-    testLocatorId: K,
-    tooltipText: s,
-    tooltipPlacement: a = "bottom"
-  } = t, {
-    loading: p = !1,
-    loadingIconProps: N = {},
-    onHover: O,
-    sx: Q,
-    ...U
-  } = t;
-  if (o !== void 0 && l !== void 0)
-    throw new Error("Cannot have link and onClick at the same time");
-  return /* @__PURE__ */ r.jsx(
-    et,
-    {
-      link: o,
-      isInternal: e,
-      rel: M,
-      target: q,
-      onLinkClick: J,
-      children: /* @__PURE__ */ r.jsx(
-        X,
-        {
-          "data-testid": "button",
-          ...Z(K),
-          ...U,
-          variant: c,
-          sx: {
-            position: "relative",
-            display: P,
-            padding: h,
-            fontFamily: "proxima-nova",
-            fontSize: x,
-            fontWeight: m,
-            letterSpacing: f,
-            textDecoration: b,
-            textTransform: u,
-            width: S,
-            height: y,
-            borderRadius: w,
-            borderStyle: j,
-            borderWidth: k,
-            borderColor: B,
-            fill: C,
-            stroke: E,
-            color: W,
-            bg: $,
-            outline: "none !important",
-            transition: R,
-            ...s ? {
-              "::after": {
-                position: "absolute",
-                opacity: 0,
-                pointerEvents: "none",
-                content: `"${s}"`,
-                color: "cl_darkGrey",
-                textTransform: "none",
-                letterSpacing: 0,
-                left: "50%",
-                top: a === "bottom" ? "calc(100% + 10px)" : "-10px",
-                borderRadius: a === "bottom" ? "0 0 3px 3px" : "3px 3px 0 0",
-                boxShadow: "0 0 5px 2px #0000001A",
-                [a === "bottom" ? "borderTop" : "borderBottom"]: "2px solid",
-                borderColor: "cl_purple",
-                bg: "white",
-                zIndex: 10,
-                padding: "8px",
-                width: "max-content",
-                maxWidth: "100%",
-                transform: `translate(-50%, ${a === "bottom" ? "-20px" : "-50%"})`,
-                transition: "all 150ms cubic-bezier(.25, .8, .25, 1)",
-                fontSize: "14px",
-                fontWeight: 400,
-                lineHeight: "17px"
-              }
-            } : {},
-            ":hover": {
-              cursor: i ? "default" : G,
-              borderStyle: I,
-              borderWidth: z,
-              borderColor: F,
-              fill: D,
-              stroke: H,
-              color: L,
-              bg: T,
-              hoverFontWeight: g,
-              hoverTextDecoration: v,
-              ...s ? {
-                "::after": {
-                  opacity: 1,
-                  transform: `translate(-50%, ${a === "bottom" ? 0 : "-100%"})`,
-                  transitionDuration: "300ms"
-                }
-              } : {}
-            },
-            zIndex: A,
-            ...Q
-          },
-          onClick: o === void 0 ? ot(l, n, _) : () => {
-          },
-          onMouseEnter: O,
-          disabled: i || p,
-          children: p ? /* @__PURE__ */ r.jsx(Y, { height: "100%", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ r.jsx(tt, { ...N }) }) : d
+import { j as t } from "./sd-component-library169.js";
+import { Box as i } from "rebass";
+import { generateTestLocator as a } from "./sd-component-library4.js";
+import { ReactComponent as x } from "./sd-component-library160.js";
+import { ReactComponent as C } from "./sd-component-library159.js";
+import { ReactComponent as I } from "./sd-component-library149.js";
+import { ReactComponent as g } from "./sd-component-library151.js";
+const n = ({
+  sx: o,
+  onClick: r,
+  fill: c,
+  iconHeight: s,
+  IconComponent: m,
+  disabled: e,
+  testLocatorId: p
+}) => /* @__PURE__ */ t.jsx(
+  i,
+  {
+    onClick: e ? void 0 : r,
+    sx: {
+      bg: "transparent",
+      cursor: "pointer",
+      width: "min-content",
+      ...o
+    },
+    ...a(p),
+    children: /* @__PURE__ */ t.jsx(
+      m,
+      {
+        style: {
+          height: s || "18px",
+          fill: e ? "#CCD0DB" : c || "#4568F9"
         }
-      )
+      }
+    )
+  }
+), R = ({
+  rotationDegree: o,
+  iconHeight: r,
+  ...c
+}) => /* @__PURE__ */ t.jsx(
+  n,
+  {
+    ...c,
+    iconHeight: r || "12px",
+    IconComponent: x,
+    sx: {
+      transform: `rotate(${o}deg)`
     }
-  );
-};
+  }
+), l = (o) => /* @__PURE__ */ t.jsx(n, { ...o, IconComponent: C }), w = (o) => /* @__PURE__ */ t.jsx(n, { ...o, IconComponent: I, iconHeight: "16px" }), H = (o) => /* @__PURE__ */ t.jsx(n, { ...o, IconComponent: g });
 export {
-  dt as Button
+  w as CrossIconButton,
+  H as HamburgerIconButton,
+  n as IconButton,
+  l as SearchIconButton,
+  R as ShortArrowIconButton
 };
 //# sourceMappingURL=sd-component-library24.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library24.js","sources":["../src/components/buttons/button/button.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link } from \"react-router-dom\";\n\nimport { History } from \"history\";\nimport { Flex, Button as RebassButton } from \"rebass\";\n\nimport { generateTestLocator } from \"../../../core/functions\";\nimport { LoadingSpinner } from \"../../animations/loading-spinner\";\nimport { ButtonProps } from \"./interfaces\";\n\n/**\n * A wrapper to handle various click behaviours for buttons.\n *\n * @param history The history object for navigation.\n * @param onClick The call back to run on button click.\n * @param link The location to navigate to if the button is a link.\n * @param scrollTo The section of the page to scroll to.\n *\n * @returns The on click call back.\n */\nfunction clickWrapper(\n  onClick?: ButtonProps[\"onClick\"],\n  scrollTo?: string,\n  history?: History\n): (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void {\n  return (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {\n    onClick?.(_event);\n\n    if (scrollTo) {\n      // If current hash is not same as new hash, update the hash\n      if (`#${scrollTo}` !== window.location.hash)\n        history?.replace(\n          `${window.location.pathname.split(\"#\")[0]}#${scrollTo}`\n        ) ||\n          window.history.replaceState(\n            undefined,\n            \"\",\n            `${window.location.pathname.split(\"#\")[0]}#${scrollTo}`\n          );\n      // Otherwise forcefully dispatch a `hashchange` event to scroll.\n      window.dispatchEvent(new HashChangeEvent(\"hashchange\"));\n    }\n  };\n}\n\nconst ButtonWrapper: React.FC<\n  Pick<\n    ButtonProps,\n    \"link\" | \"isInternal\" | \"children\" | \"target\" | \"rel\" | \"onLinkClick\"\n  >\n> = ({\n  link,\n  isInternal = true,\n  children,\n  target = \"_self\",\n  rel = \"noopener noreferrer\",\n  onLinkClick,\n}) => {\n  const linkStyle: React.CSSProperties = {\n    display: \"grid\",\n    color: \"inherit\",\n    textDecoration: \"none\",\n  };\n\n  return link === undefined ? (\n    <>{children}</>\n  ) : isInternal ? (\n    <Link\n      to={link}\n      style={linkStyle}\n      data-testid=\"react-router-link\"\n      onClick={onLinkClick}\n    >\n      {children}\n    </Link>\n  ) : (\n    <a\n      href={link}\n      target={target}\n      rel={rel}\n      style={linkStyle}\n      onClick={onLinkClick}\n      data-testid=\"anchor-tag\"\n    >\n      {children}\n    </a>\n  );\n};\n\n/**\n * Base button component. Other button components should be built from this.\n */\nexport const Button: React.FC<ButtonProps> = (props) => {\n  const {\n    link,\n    isInternal = true,\n    scrollTo,\n    onClick,\n    children,\n    disabled,\n    variant,\n    padding,\n    fontSize,\n    fontWeight,\n    letterSpacing,\n    textDecoration,\n    textTransform,\n    hoverFontWeight,\n    hoverTextDecoration,\n    borderRadius,\n    width,\n    height,\n    borderStyle,\n    borderWidth,\n    borderColor,\n    fill,\n    color,\n    bg,\n    stroke,\n    hoverBorderStyle,\n    hoverBorderWidth,\n    hoverBorderColor,\n    hoverFill,\n    hoverColor,\n    hoverBg,\n    hoverStroke,\n    display,\n    transition,\n    history,\n    zIndex,\n    cursor = \"pointer\",\n    rel,\n    target,\n    onLinkClick,\n    testLocatorId,\n    tooltipText,\n    tooltipPlacement = \"bottom\",\n  } = props;\n\n  const {\n    loading = false,\n    loadingIconProps = {},\n    onHover,\n    sx,\n    ...actualProps\n  } = props;\n\n  if (link !== undefined && onClick !== undefined) {\n    throw new Error(\"Cannot have link and onClick at the same time\");\n  }\n\n  return (\n    <ButtonWrapper\n      link={link}\n      isInternal={isInternal}\n      rel={rel}\n      target={target}\n      onLinkClick={onLinkClick}\n    >\n      <RebassButton\n        data-testid=\"button\"\n        {...generateTestLocator(testLocatorId)}\n        {...actualProps}\n        variant={variant}\n        sx={{\n          position: \"relative\",\n          display,\n          padding,\n          fontFamily: \"proxima-nova\",\n          fontSize,\n          fontWeight,\n          letterSpacing,\n          textDecoration,\n          textTransform,\n          width,\n          height,\n          borderRadius,\n          borderStyle,\n          borderWidth,\n          borderColor,\n          fill,\n          stroke,\n          color,\n          bg,\n          outline: \"none !important\",\n          transition,\n          ...(!!tooltipText\n            ? {\n                \"::after\": {\n                  position: \"absolute\",\n                  opacity: 0,\n                  pointerEvents: \"none\",\n                  content: `\"${tooltipText}\"`,\n                  color: \"cl_darkGrey\",\n                  textTransform: \"none\",\n                  letterSpacing: 0,\n                  left: \"50%\",\n                  top:\n                    tooltipPlacement === \"bottom\"\n                      ? \"calc(100% + 10px)\"\n                      : \"-10px\",\n                  borderRadius:\n                    tooltipPlacement === \"bottom\"\n                      ? \"0 0 3px 3px\"\n                      : \"3px 3px 0 0\",\n                  boxShadow: \"0 0 5px 2px #0000001A\",\n                  [tooltipPlacement === \"bottom\"\n                    ? \"borderTop\"\n                    : \"borderBottom\"]: \"2px solid\",\n                  borderColor: \"cl_purple\",\n                  bg: \"white\",\n                  zIndex: 10,\n                  padding: \"8px\",\n                  width: \"max-content\",\n                  maxWidth: \"100%\",\n                  transform: `translate(-50%, ${\n                    tooltipPlacement === \"bottom\" ? \"-20px\" : \"-50%\"\n                  })`,\n                  transition: \"all 150ms cubic-bezier(.25, .8, .25, 1)\",\n                  fontSize: \"14px\",\n                  fontWeight: 400,\n                  lineHeight: \"17px\",\n                },\n              }\n            : {}),\n          \":hover\": {\n            cursor: disabled ? \"default\" : cursor,\n            borderStyle: hoverBorderStyle,\n            borderWidth: hoverBorderWidth,\n            borderColor: hoverBorderColor,\n            fill: hoverFill,\n            stroke: hoverStroke,\n            color: hoverColor,\n            bg: hoverBg,\n            hoverFontWeight,\n            hoverTextDecoration,\n            ...(!!tooltipText\n              ? {\n                  \"::after\": {\n                    opacity: 1,\n                    transform: `translate(-50%, ${\n                      tooltipPlacement === \"bottom\" ? 0 : \"-100%\"\n                    })`,\n                    transitionDuration: \"300ms\",\n                  },\n                }\n              : {}),\n          },\n          zIndex,\n          ...sx,\n        }}\n        onClick={\n          link === undefined\n            ? clickWrapper(onClick, scrollTo, history)\n            : () => {}\n        }\n        onMouseEnter={onHover}\n        disabled={disabled || loading}\n      >\n        {!loading ? (\n          children\n        ) : (\n          <Flex height=\"100%\" justifyContent=\"center\" alignItems=\"center\">\n            <LoadingSpinner {...loadingIconProps} />\n          </Flex>\n        )}\n      </RebassButton>\n    </ButtonWrapper>\n  );\n};\n"],"names":["clickWrapper","onClick","scrollTo","history","_event","ButtonWrapper","link","isInternal","children","target","rel","onLinkClick","linkStyle","jsx","Fragment","Link","Button","props","disabled","variant","padding","fontSize","fontWeight","letterSpacing","textDecoration","textTransform","hoverFontWeight","hoverTextDecoration","borderRadius","width","height","borderStyle","borderWidth","borderColor","fill","color","bg","stroke","hoverBorderStyle","hoverBorderWidth","hoverBorderColor","hoverFill","hoverColor","hoverBg","hoverStroke","display","transition","zIndex","cursor","testLocatorId","tooltipText","tooltipPlacement","loading","loadingIconProps","onHover","sx","actualProps","RebassButton","generateTestLocator","Flex","LoadingSpinner"],"mappings":"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"}
+{"version":3,"file":"sd-component-library24.js","sources":["../src/components/buttons/partials/icon-buttons/icon-buttons.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { generateTestLocator } from \"../../../../core/functions\";\nimport {\n  CrossIcon,\n  HamburgerIcon,\n  SearchIcon,\n  ShortDownArrowIcon,\n} from \"../../../icons\";\nimport { IconButtonProps, ShortArrowIconButtonProps } from \"./interfaces\";\n\nexport const IconButton: React.FC<IconButtonProps> = ({\n  sx,\n  onClick,\n  fill,\n  iconHeight,\n  IconComponent,\n  disabled,\n  testLocatorId,\n}) => (\n  <Box\n    onClick={disabled ? undefined : onClick}\n    sx={{\n      bg: \"transparent\",\n      cursor: \"pointer\",\n      width: \"min-content\",\n      ...sx,\n    }}\n    {...generateTestLocator(testLocatorId)}\n  >\n    <IconComponent\n      style={{\n        height: iconHeight || \"18px\",\n        fill: disabled ? \"#CCD0DB\" : fill || \"#4568F9\",\n      }}\n    />\n  </Box>\n);\n\nexport const ShortArrowIconButton: React.FC<ShortArrowIconButtonProps> = ({\n  rotationDegree,\n  iconHeight,\n  ...rest\n}) => (\n  <IconButton\n    {...rest}\n    iconHeight={iconHeight || \"12px\"}\n    IconComponent={ShortDownArrowIcon}\n    sx={{\n      transform: `rotate(${rotationDegree}deg)`,\n    }}\n  />\n);\n\nexport const SearchIconButton: React.FC<\n  Omit<IconButtonProps, \"IconComponent\">\n> = (props) => <IconButton {...props} IconComponent={SearchIcon} />;\n\nexport const CrossIconButton: React.FC<\n  Omit<IconButtonProps, \"IconComponent\" | \"iconHeight\">\n> = (props) => (\n  <IconButton {...props} IconComponent={CrossIcon} iconHeight=\"16px\" />\n);\n\nexport const HamburgerIconButton: React.FC<\n  Omit<IconButtonProps, \"IconComponent\">\n> = (props) => <IconButton {...props} IconComponent={HamburgerIcon} />;\n"],"names":["IconButton","sx","onClick","fill","iconHeight","IconComponent","disabled","testLocatorId","jsx","Box","generateTestLocator","ShortArrowIconButton","rotationDegree","rest","ShortDownArrowIcon","SearchIconButton","props","SearchIcon","CrossIconButton","CrossIcon","HamburgerIconButton","HamburgerIcon"],"mappings":";;;;;;;AAaO,MAAMA,IAAwC,CAAC;AAAA,EACpD,IAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AACF,MACEC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,SAASH,IAAW,SAAYJ;AAAA,IAChC,IAAI;AAAA,MACF,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,GAAGD;AAAA,IACL;AAAA,IACC,GAAGS,EAAoBH,CAAa;AAAA,IAErC,UAAAC,gBAAAA,EAAA;AAAA,MAACH;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,QAAQD,KAAc;AAAA,UACtB,MAAME,IAAW,YAAYH,KAAQ;AAAA,QACvC;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AACF,GAGWQ,IAA4D,CAAC;AAAA,EACxE,gBAAAC;AAAA,EACA,YAAAR;AAAA,EACA,GAAGS;AACL,MACEL,gBAAAA,EAAA;AAAA,EAACR;AAAA,EAAA;AAAA,IACE,GAAGa;AAAA,IACJ,YAAYT,KAAc;AAAA,IAC1B,eAAeU;AAAAA,IACf,IAAI;AAAA,MACF,WAAW,UAAUF,CAAc;AAAA,IACrC;AAAA,EAAA;AACF,GAGWG,IAET,CAACC,MAAUR,gBAAAA,MAACR,KAAY,GAAGgB,GAAO,eAAeC,GAAY,GAEpDC,IAET,CAACF,MACFR,gBAAAA,EAAA,IAAAR,GAAA,EAAY,GAAGgB,GAAO,eAAeG,GAAW,YAAW,OAAO,CAAA,GAGxDC,IAET,CAACJ,MAAUR,gBAAAA,MAACR,KAAY,GAAGgB,GAAO,eAAeK,EAAe,CAAA;"}

package/lib/sd-component-library240.js

@@ -1,24 +1,128 @@
-const i = (t, n) => [t, n], T = function* (t = []) {
-  for (; t.length > 1; )
-    yield i(t[0], t[1]), t = t.slice(1);
-}, I = (t, n, e) => {
-  if (n && !e)
-    return n;
-  if (!n && e)
-    return e;
-  if (n && e) {
-    const s = a(n), r = a(e), c = s.map((B, f) => Math.round(B * (1 - t) + r[f] * t));
-    return c ? u(c[0], c[1], c[2]) : "";
+import { j as t } from "./sd-component-library169.js";
+import { Flex as f, Box as W } from "rebass";
+import { Button as y } from "./sd-component-library21.js";
+import { ResponsiveTextV2 as m } from "./sd-component-library135.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"
+    },
+    "data-testid": "tab-ribbon"
   }
-  return "";
-}, u = (t, n, e) => "#" + (16777216 + (t << 16) + (n << 8) + e).toString(16).slice(1), a = (t) => {
-  const n = t.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
-  return n ? n.slice(1).map((e) => parseInt(e, 16)) : null;
-}, h = (t, n, e) => Math.floor(t * n) === (e === "left" ? 0 : e === "right" ? n - 1 : 1), _ = (t) => t === "left" ? "right" : t === "top" ? "top" : "left";
+);
+function E({
+  width: n,
+  height: s,
+  label: r,
+  secondaryText: x,
+  icon: p,
+  id: d,
+  onClick: h,
+  selected: i = !1,
+  activeColor: e = "cl_purple",
+  color: l = "cl_darkGrey",
+  tabPadding: u,
+  bg: o = "cl_transparent",
+  activeBg: c = "cl_transparent",
+  activeRibbonColor: b,
+  borderRadius: j = "4px",
+  tabHeaderComponent: a,
+  elementId: g,
+  maxWidth: _,
+  labelSx: R,
+  secondaryTextSx: S,
+  containerSx: w
+}) {
+  const T = a ? i ? c : o : b || e;
+  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 : o,
+            onClick: h,
+            borderRadius: j,
+            "data-testid": `tab-${d}`,
+            padding: u,
+            disabled: i,
+            display: "flex",
+            children: [
+              r && /* @__PURE__ */ t.jsx(
+                m,
+                {
+                  fontSizeWeight: [[13, "bold"]],
+                  sx: {
+                    letterSpacing: "1.3px",
+                    textTransform: "uppercase",
+                    ...R
+                  },
+                  "data-testid": "tab-text",
+                  color: i ? e : l,
+                  children: r
+                }
+              ),
+              x && /* @__PURE__ */ t.jsx(
+                m,
+                {
+                  fontSizeWeight: [[10, "semi-bold"]],
+                  sx: {
+                    letterSpacing: "1px",
+                    textTransform: "uppercase",
+                    ...S
+                  },
+                  color: i ? e : l,
+                  children: x
+                }
+              ),
+              p && /* @__PURE__ */ t.jsx(
+                f,
+                {
+                  height: "16px",
+                  flexDirection: "column",
+                  justifyContent: "space-between",
+                  ml: "10px",
+                  children: p
+                }
+              ),
+              a
+            ]
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          z,
+          {
+            active: i || !!a,
+            activeColor: T,
+            color: o
+          }
+        )
+      ]
+    }
+  );
+}
 export {
-  _ as flipPosition,
-  I as getFractionColor,
-  h as isLabelActive,
-  T as mapAdjacent
+  z as Ribbon,
+  E as Tab
 };
 //# sourceMappingURL=sd-component-library240.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library240.js","sources":["../src/components/meters/gradient-outline-meter/utils.ts"],"sourcesContent":["import { OutlineMeterLabelPosition } from \"../outline-meter\";\n\nconst pair = <T>(a: T, b: T): [T, T] => [a, b];\n\n/**\n * Returns an array of mapped adjacent elements into pairs.\n */\nexport const mapAdjacent = function* <T>(iter: T[] = []) {\n  while (iter.length > 1) {\n    yield pair<T>(iter[0], iter[1]);\n    iter = iter.slice(1);\n  }\n};\n\n/**\n * @param fraction numerical value from 0 to 1.\n * @param lowColor initial color of the gradient.\n * @param topColor final color of the gradient.\n * @returns color of gradient at specified fraction point or empty string\n */\nexport const getFractionColor = (\n  fraction: number,\n  lowColor?: string,\n  topColor?: string\n): string => {\n  if (lowColor && !topColor) return lowColor;\n  if (!lowColor && topColor) return topColor;\n  if (lowColor && topColor) {\n    const lowRGB = hexToRGB(lowColor);\n    const topRGB = hexToRGB(topColor);\n    const resultRGB = lowRGB!.map((component, i) => {\n      return Math.round(component * (1 - fraction) + topRGB![i] * fraction);\n    });\n    return resultRGB ? rgbToHex(resultRGB[0], resultRGB[1], resultRGB[2]) : \"\";\n  }\n  return \"\";\n};\n\n/**\n * Converts rgb color representation into hex representation.\n * @param red component of color.\n * @param green component of color.\n * @param blue component of color.\n */\nconst rgbToHex = (red: number, green: number, blue: number): string => {\n  const BITS_IN_BYTE = 8;\n  return (\n    \"#\" +\n    (\n      (1 << (3 * BITS_IN_BYTE)) +\n      (red << (2 * BITS_IN_BYTE)) +\n      (green << BITS_IN_BYTE) +\n      blue\n    )\n      .toString(16)\n      .slice(1)\n  );\n};\n\n/**\n * Converts hex representation of color into rgb.\n * @param hex complete and correct representation of color\n */\nconst hexToRGB = (hex: string) => {\n  const normal = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);\n  return normal ? normal.slice(1).map((e) => parseInt(e, 16)) : null;\n};\n\nexport const isLabelActive = (\n  value: number,\n  totalColors: number,\n  position: OutlineMeterLabelPosition\n) =>\n  Math.floor(value * totalColors) ===\n  (position === \"left\" ? 0 : position === \"right\" ? totalColors - 1 : 1);\n\n/**\n * Mirrors entered position for outline meter label.\n */\nexport const flipPosition = (position: OutlineMeterLabelPosition) =>\n  position === \"left\" ? \"right\" : position === \"top\" ? \"top\" : \"left\";\n"],"names":["pair","a","b","mapAdjacent","iter","getFractionColor","fraction","lowColor","topColor","lowRGB","hexToRGB","topRGB","resultRGB","component","i","rgbToHex","red","green","blue","hex","normal","isLabelActive","value","totalColors","position","flipPosition"],"mappings":"AAEA,MAAMA,IAAO,CAAIC,GAAMC,MAAiB,CAACD,GAAGC,CAAC,GAKhCC,IAAc,WAAcC,IAAY,IAAI;AAChD,SAAAA,EAAK,SAAS;AACnB,UAAMJ,EAAQI,EAAK,CAAC,GAAGA,EAAK,CAAC,CAAC,GACvBA,IAAAA,EAAK,MAAM,CAAC;AAEvB,GAQaC,IAAmB,CAC9BC,GACAC,GACAC,MACW;AACX,MAAID,KAAY,CAACC;AAAiB,WAAAD;AAClC,MAAI,CAACA,KAAYC;AAAiB,WAAAA;AAClC,MAAID,KAAYC,GAAU;AAClB,UAAAC,IAASC,EAASH,CAAQ,GAC1BI,IAASD,EAASF,CAAQ,GAC1BI,IAAYH,EAAQ,IAAI,CAACI,GAAWC,MACjC,KAAK,MAAMD,KAAa,IAAIP,KAAYK,EAAQG,CAAC,IAAIR,CAAQ,CACrE;AACM,WAAAM,IAAYG,EAASH,EAAU,CAAC,GAAGA,EAAU,CAAC,GAAGA,EAAU,CAAC,CAAC,IAAI;AAAA,EAC1E;AACO,SAAA;AACT,GAQMG,IAAW,CAACC,GAAaC,GAAeC,MAG1C,OAEG,YACAF,KAAQ,OACRC,KAAS,KACVC,GAEC,SAAS,EAAE,EACX,MAAM,CAAC,GAQRR,IAAW,CAACS,MAAgB;AAC1B,QAAAC,IAASD,EAAI,MAAM,6CAA6C;AACtE,SAAOC,IAASA,EAAO,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,SAAS,GAAG,EAAE,CAAC,IAAI;AAChE,GAEaC,IAAgB,CAC3BC,GACAC,GACAC,MAEA,KAAK,MAAMF,IAAQC,CAAW,OAC7BC,MAAa,SAAS,IAAIA,MAAa,UAAUD,IAAc,IAAI,IAKzDE,IAAe,CAACD,MAC3BA,MAAa,SAAS,UAAUA,MAAa,QAAQ,QAAQ;"}
+{"version":3,"file":"sd-component-library240.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    data-testid=\"tab-ribbon\"\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-testid={`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            data-testid=\"tab-text\"\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,IACA,eAAY;AAAA,EAAA;AACd;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,eAAa,OAAOP,CAAE;AAAA,YACtB,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,eAAY;AAAA,kBACZ,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;"}