@selfdecode/sd-component-library 4.0.121 → 4.0.123

package/lib/sd-component-library316.js

@@ -1,29 +1,96 @@
-import { j as r } from "./sd-component-library198.js";
-import { ResponsiveTextV2 as s } from "./sd-component-library152.js";
-const x = (t) => {
-  const { onClick: e, title: o, height: i } = t;
-  return /* @__PURE__ */ r.jsx(
-    s,
+import { j as a } from "./sd-component-library198.js";
+import { useState as S, useCallback as B } from "react";
+import { Box as Y } from "rebass";
+import { labelPaddingX as c, labelWidth as W } from "./sd-component-library230.js";
+import { getCoordinateForArc as $ } from "./sd-component-library93.js";
+import { ResponsiveTextV2 as z } from "./sd-component-library152.js";
+const D = (j) => {
+  const {
+    label: d,
+    color: p,
+    alpha: e,
+    radius: r,
+    horizontal: v,
+    pointerLength: m,
+    round: y,
+    pointY: i
+  } = j, [h, C] = S(0), [f, R] = S(0), T = B((t) => {
+    if (t) {
+      const { height: o, y: l } = t.getBoundingClientRect();
+      C(o), R(l);
+    }
+  }, []);
+  let { x: b, y: g } = $(
+    r + m,
+    e,
+    r
+  );
+  const s = e === 180, n = e < 180, u = e > 180;
+  if (v) {
+    const { x: t, y: o } = $(
+      r,
+      e,
+      r
+    );
+    b = t + m * (n ? -1 : 1), g = o;
+  }
+  if (!d)
+    return null;
+  let x = y || s ? `${c}px` : void 0;
+  if (!x && i) {
+    const t = f - h, o = f;
+    x = [
+      n || i > t,
+      u || i > t,
+      u || i < o,
+      n || i < o
+    ].map((l) => l ? `${c}px` : "0").join(" ");
+  }
+  return /* @__PURE__ */ a.jsx(
+    Y,
     {
-      fontSizeWeight: [[16, "regular"]],
       sx: {
-        position: "relative",
-        height: `${i}px`,
-        px: "15px",
-        display: "flex",
-        justifyContent: "flex-start",
-        alignItems: "center",
-        opacity: 0.8,
-        ":hover": {
-          opacity: 1
-        }
+        position: "absolute",
+        left: `${b}px`,
+        top: `${g}px`
       },
-      onClick: e,
-      children: o
+      children: /* @__PURE__ */ a.jsx(
+        Y,
+        {
+          sx: {
+            boxSizing: "content-box",
+            position: "relative",
+            top: `calc(-${h}px)`,
+            left: s ? "-50%" : n ? "-100%" : void 0,
+            py: "7px",
+            px: `${c}px`,
+            borderColor: p,
+            borderWidth: "2px",
+            borderStyle: "solid",
+            borderRadius: x,
+            bg: "cl_white",
+            "& > div": {
+              maxWidth: s ? void 0 : `${W}px`
+            }
+          },
+          ref: T,
+          children: /* @__PURE__ */ a.jsx(
+            z,
+            {
+              fontSizeWeight: [[12, "semi-bold"]],
+              width: "max-content",
+              color: p !== "#CCD0DB" ? p : "cl_darkGrey",
+              textTransform: "uppercase",
+              letterSpacing: "1.8px",
+              children: d
+            }
+          )
+        }
+      )
     }
   );
 };
 export {
-  x as SearchAutocompleteRow
+  D as MatchedRangeLabelBox
 };
 //# sourceMappingURL=sd-component-library316.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library316.js","sources":["../src/components/inputs/search-autocomplete-input/partials/search-autocomplete-row/search-autocomplete-row.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts/responsive-text-v2\";\nimport { SearchAutocompleteRowProps as Props } from \"./interfaces\";\n\nexport const SearchAutocompleteRow = <\n  T extends { id: string } = { id: string }\n>(\n  props: Props<T>\n) => {\n  const { onClick, title, height } = props;\n\n  return (\n    <ResponsiveTextV2\n      fontSizeWeight={[[16, \"regular\"]]}\n      sx={{\n        position: \"relative\",\n        height: `${height}px`,\n        px: \"15px\",\n        display: \"flex\",\n        justifyContent: \"flex-start\",\n        alignItems: \"center\",\n        opacity: 0.8,\n        \":hover\": {\n          opacity: 1,\n        },\n      }}\n      onClick={onClick}\n    >\n      {title}\n    </ResponsiveTextV2>\n  );\n};\n"],"names":["SearchAutocompleteRow","props","onClick","title","height","jsx","ResponsiveTextV2"],"mappings":";;AAKa,MAAAA,IAAwB,CAGnCC,MACG;AACH,QAAM,EAAE,SAAAC,GAAS,OAAAC,GAAO,QAAAC,EAAA,IAAWH;AAGjC,SAAAI,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAgB,CAAC,CAAC,IAAI,SAAS,CAAC;AAAA,MAChC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ,GAAGF,CAAM;AAAA,QACjB,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,SAAAF;AAAA,MAEC,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"sd-component-library316.js","sources":["../src/components/meters/common-outline-meter-partials/matched-range-label-box/matched-range-label-box.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ResponsiveTextV2 } from \"../../../texts/responsive-text-v2\";\nimport { labelPaddingX, labelWidth } from \"../../outline-meter/contants\";\nimport { getCoordinateForArc } from \"../../outline-meter/utils\";\nimport { MatchedRangeLabelBoxProps as Props } from \"./interfaces\";\n\nexport const MatchedRangeLabelBox: React.FC<Props> = (props) => {\n  const {\n    label,\n    color,\n    alpha,\n    radius,\n    horizontal,\n    pointerLength,\n    round,\n    pointY,\n  } = props;\n\n  const [textHeight, setTextHeight] = useState(0);\n  const [textY, setTextY] = useState(0);\n\n  const ref = useCallback((node: HTMLElement) => {\n    if (node) {\n      const { height, y } = node.getBoundingClientRect();\n      setTextHeight(height);\n      setTextY(y);\n    }\n  }, []);\n\n  let { x: pointerEndX, y: pointerEndY } = getCoordinateForArc(\n    radius + pointerLength,\n    alpha,\n    radius\n  );\n\n  const isOnTop = alpha === 180;\n  const isOnLeft = alpha < 180;\n  const isOnRight = alpha > 180;\n\n  if (horizontal) {\n    const { x: pointerStartX, y: pointerStartY } = getCoordinateForArc(\n      radius,\n      alpha,\n      radius\n    );\n\n    pointerEndX = pointerStartX + pointerLength * (isOnLeft ? -1 : 1);\n    pointerEndY = pointerStartY;\n  }\n\n  if (!label) return null;\n\n  let borderRadius = round || isOnTop ? `${labelPaddingX}px` : undefined;\n  if (!borderRadius && pointY) {\n    const textTopY = textY - textHeight;\n    const textBottomY = textY;\n\n    borderRadius = [\n      isOnLeft || pointY > textTopY,\n      isOnRight || pointY > textTopY,\n      isOnRight || pointY < textBottomY,\n      isOnLeft || pointY < textBottomY,\n    ]\n      .map((flag) => (flag ? `${labelPaddingX}px` : \"0\"))\n      .join(\" \");\n  }\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        left: `${pointerEndX}px`,\n        top: `${pointerEndY}px`,\n      }}\n    >\n      <Box\n        sx={{\n          boxSizing: \"content-box\",\n          position: \"relative\",\n          top: `calc(-${textHeight}px)`,\n          left: isOnTop ? \"-50%\" : isOnLeft ? \"-100%\" : undefined,\n          py: \"7px\",\n          px: `${labelPaddingX}px`,\n          borderColor: color,\n          borderWidth: \"2px\",\n          borderStyle: \"solid\",\n          borderRadius,\n          bg: \"cl_white\",\n          \"& > div\": {\n            maxWidth: isOnTop ? undefined : `${labelWidth}px`,\n          },\n        }}\n        ref={ref}\n      >\n        <ResponsiveTextV2\n          fontSizeWeight={[[12, \"semi-bold\"]]}\n          width=\"max-content\"\n          color={color !== \"#CCD0DB\" ? color : \"cl_darkGrey\"}\n          textTransform=\"uppercase\"\n          letterSpacing=\"1.8px\"\n        >\n          {label}\n        </ResponsiveTextV2>\n      </Box>\n    </Box>\n  );\n};\n"],"names":["MatchedRangeLabelBox","props","label","color","alpha","radius","horizontal","pointerLength","round","pointY","textHeight","setTextHeight","useState","textY","setTextY","ref","useCallback","node","height","y","pointerEndX","pointerEndY","getCoordinateForArc","isOnTop","isOnLeft","isOnRight","pointerStartX","pointerStartY","borderRadius","labelPaddingX","textTopY","textBottomY","flag","jsx","Box","labelWidth","ResponsiveTextV2"],"mappings":";;;;;;AASa,MAAAA,IAAwC,CAACC,MAAU;AACxD,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,EACE,IAAAR,GAEE,CAACS,GAAYC,CAAa,IAAIC,EAAS,CAAC,GACxC,CAACC,GAAOC,CAAQ,IAAIF,EAAS,CAAC,GAE9BG,IAAMC,EAAY,CAACC,MAAsB;AAC7C,QAAIA,GAAM;AACR,YAAM,EAAE,QAAAC,GAAQ,GAAAC,EAAE,IAAIF,EAAK,sBAAsB;AACjD,MAAAN,EAAcO,CAAM,GACpBJ,EAASK,CAAC;AAAA,IACZ;AAAA,EACF,GAAG,CAAE,CAAA;AAEL,MAAI,EAAE,GAAGC,GAAa,GAAGC,EAAgB,IAAAC;AAAA,IACvCjB,IAASE;AAAA,IACTH;AAAA,IACAC;AAAA,EAAA;AAGF,QAAMkB,IAAUnB,MAAU,KACpBoB,IAAWpB,IAAQ,KACnBqB,IAAYrB,IAAQ;AAE1B,MAAIE,GAAY;AACd,UAAM,EAAE,GAAGoB,GAAe,GAAGC,EAAkB,IAAAL;AAAA,MAC7CjB;AAAA,MACAD;AAAA,MACAC;AAAA,IAAA;AAGY,IAAAe,IAAAM,IAAgBnB,KAAiBiB,IAAW,KAAK,IACjDH,IAAAM;AAAA,EAChB;AAEA,MAAI,CAACzB;AAAc,WAAA;AAEnB,MAAI0B,IAAepB,KAASe,IAAU,GAAGM,CAAa,OAAO;AACzD,MAAA,CAACD,KAAgBnB,GAAQ;AAC3B,UAAMqB,IAAWjB,IAAQH,GACnBqB,IAAclB;AAEL,IAAAe,IAAA;AAAA,MACbJ,KAAYf,IAASqB;AAAA,MACrBL,KAAahB,IAASqB;AAAA,MACtBL,KAAahB,IAASsB;AAAA,MACtBP,KAAYf,IAASsB;AAAA,IACvB,EACG,IAAI,CAACC,MAAUA,IAAO,GAAGH,CAAa,OAAO,GAAI,EACjD,KAAK,GAAG;AAAA,EACb;AAGE,SAAAI,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,MAAM,GAAGd,CAAW;AAAA,QACpB,KAAK,GAAGC,CAAW;AAAA,MACrB;AAAA,MAEA,UAAAY,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,WAAW;AAAA,YACX,UAAU;AAAA,YACV,KAAK,SAASxB,CAAU;AAAA,YACxB,MAAMa,IAAU,SAASC,IAAW,UAAU;AAAA,YAC9C,IAAI;AAAA,YACJ,IAAI,GAAGK,CAAa;AAAA,YACpB,aAAa1B;AAAA,YACb,aAAa;AAAA,YACb,aAAa;AAAA,YACb,cAAAyB;AAAA,YACA,IAAI;AAAA,YACJ,WAAW;AAAA,cACT,UAAUL,IAAU,SAAY,GAAGY,CAAU;AAAA,YAC/C;AAAA,UACF;AAAA,UACA,KAAApB;AAAA,UAEA,UAAAkB,gBAAAA,EAAA;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,CAAC,IAAI,WAAW,CAAC;AAAA,cAClC,OAAM;AAAA,cACN,OAAOjC,MAAU,YAAYA,IAAQ;AAAA,cACrC,eAAc;AAAA,cACd,eAAc;AAAA,cAEb,UAAAD;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library317.js

@@ -2,7 +2,7 @@ import { j as t } from "./sd-component-library198.js";
 import x from "react";
 import u from "./sd-component-library197.js";
 import { getIsHorizontal as j, getRangeProperties as p } from "./sd-component-library232.js";
-import { OutlineMeterRange as M } from "./sd-component-library236.js";
+import { OutlineMeterRange as M } from "./sd-component-library241.js";
 import { LabelPointer as b } from "./sd-component-library327.js";
 const A = x.forwardRef(
   (e, r) => {

package/lib/sd-component-library323.js

@@ -1,5 +1,5 @@
 import { j as e } from "./sd-component-library198.js";
-import { getSelectedRangeText as l } from "./sd-component-library286.js";
+import { getSelectedRangeText as l } from "./sd-component-library284.js";
 import { FourteenRegular as n } from "./sd-component-library146.js";
 import { FourteenSb as p } from "./sd-component-library147.js";
 import { BaseGridContainer as i } from "./sd-component-library37.js";

package/lib/sd-component-library53.js

@@ -1,8 +1,8 @@
 import { j as t } from "./sd-component-library198.js";
-import { BaseBooleanFeedback as m } from "./sd-component-library225.js";
+import { BaseBooleanFeedback as m } from "./sd-component-library212.js";
 import { IconButton as n } from "./sd-component-library23.js";
-import { ReactComponent as c } from "./sd-component-library226.js";
-import { ReactComponent as u } from "./sd-component-library227.js";
+import { ReactComponent as c } from "./sd-component-library213.js";
+import { ReactComponent as u } from "./sd-component-library214.js";
 const f = (i) => {
   const { title: s, onPositiveFeedback: r, onNegativeFeedback: d, optionSelected: e } = i, a = (o) => /* @__PURE__ */ t.jsx(n, { onClick: o, "data-testid": "thumbs-up-button", children: /* @__PURE__ */ t.jsx(
     c,

package/lib/sd-component-library54.js

@@ -1,8 +1,8 @@
 import { j as e } from "./sd-component-library198.js";
 import { useHover as x } from "./sd-component-library3.js";
-import { BaseFeedbackContainer as f } from "./sd-component-library212.js";
+import { BaseFeedbackContainer as f } from "./sd-component-library227.js";
 import { BaseGridContainer as j } from "./sd-component-library37.js";
-import { BaseFeedbackButton as k } from "./sd-component-library213.js";
+import { BaseFeedbackButton as k } from "./sd-component-library228.js";
 const C = ({
   questionText: t,
   options: a,

package/lib/sd-component-library55.js

@@ -2,9 +2,9 @@ import { j as o } from "./sd-component-library198.js";
 import { Box as l } from "rebass";
 import { useHover as k, useBreakPoints as g } from "./sd-component-library3.js";
 import { isTouchScreen as C } from "./sd-component-library4.js";
-import { BaseFeedbackContainer as S } from "./sd-component-library212.js";
+import { BaseFeedbackContainer as S } from "./sd-component-library227.js";
 import { GridContainerV2 as y } from "./sd-component-library40.js";
-import { BaseFeedbackButton as a } from "./sd-component-library213.js";
+import { BaseFeedbackButton as a } from "./sd-component-library228.js";
 import { FrMaxContainer as x } from "./sd-component-library39.js";
 import { ReactComponent as B } from "./sd-component-library178.js";
 const D = ({

package/lib/sd-component-library57.js

@@ -1,44 +1,46 @@
-import { j as n } from "./sd-component-library198.js";
+import { j as i } from "./sd-component-library198.js";
 import { useState as C, useEffect as V, useCallback as y } from "react";
 import { Input as B } from "@rebass/forms";
-import { translatedTextSuffix as x } from "./sd-component-library5.js";
+import { translatedTextSuffix as d } from "./sd-component-library5.js";
 import { InputContainer as I } from "./sd-component-library60.js";
 import { InvalidInputError as E } from "./sd-component-library70.js";
-const W = (s, a, e) => (o) => {
-  const r = o.target.value;
+const W = (a, n, s) => (r) => {
+  const e = r.target.value;
   try {
-    const t = e(r);
-    s(r), t && a(r);
-  } catch (t) {
-    if (!(t instanceof E))
-      throw t;
+    const o = s(e);
+    a(e), o && n(e);
+  } catch (o) {
+    if (!(o instanceof E))
+      throw o;
   }
 }, S = ({
-  value: s,
-  onChange: a,
-  validateValue: e = () => !0,
-  focusInput: o,
-  ...r
+  value: a,
+  onChange: n,
+  validateValue: s = () => !0,
+  focusInput: r,
+  className: e = "",
+  ...o
 }) => {
-  let t = s, i = "";
-  t.endsWith(x) && (t = t.slice(0, -x.length), i = "no-translate");
-  const [m, c] = C(t);
+  let t = a;
+  const c = e;
+  t.endsWith(d) && (t = t.slice(0, -d.length), c.concat("no-translate"));
+  const [p, m] = C(t);
   V(() => {
-    t !== void 0 && c(t);
+    t !== void 0 && m(t);
   }, [t]);
-  const p = y(
+  const f = y(
     (l) => {
-      o && (l == null || l.focus());
+      r && (l == null || l.focus());
     },
-    [o]
+    [r]
   );
-  return /* @__PURE__ */ n.jsx(
+  return /* @__PURE__ */ i.jsx(
     B,
     {
       variant: "_inputs.v2",
-      onChange: W(c, a, e),
-      value: m,
-      ...r,
+      onChange: W(m, n, s),
+      value: p,
+      ...o,
       sx: {
         ":focus": {
           borderBottomStyle: "solid",
@@ -47,72 +49,72 @@ const W = (s, a, e) => (o) => {
           outline: "none"
         }
       },
-      className: i,
-      ref: p
+      className: c,
+      ref: f
     }
   );
-}, d = "16px", L = ({
-  value: s,
-  onChange: a,
-  id: e,
-  disabled: o,
-  validateValue: r,
-  onFocus: t,
-  onBlur: i,
-  placeholder: m,
-  autoFocus: c,
-  onKeyPress: p,
-  focusInput: l,
-  maxLength: h,
+}, h = "16px", A = ({
+  value: a,
+  onChange: n,
+  id: s,
+  disabled: r,
+  validateValue: e,
+  onFocus: o,
+  onBlur: t,
+  placeholder: c,
+  autoFocus: p,
+  onKeyPress: m,
+  focusInput: f,
+  maxLength: l,
   showCheckMark: u,
-  checkmarkRight: f = "0px",
+  checkmarkRight: x = "0px",
   children: v,
   inputPr: g,
   inputMode: w,
   type: b,
   ...j
-}) => /* @__PURE__ */ n.jsxs(
+}) => /* @__PURE__ */ i.jsxs(
   I,
   {
-    id: e,
-    cursor: o ? "not-allowed" : "pointer",
+    id: s,
+    cursor: r ? "not-allowed" : "pointer",
     ...j,
     children: [
-      /* @__PURE__ */ n.jsx(
+      /* @__PURE__ */ i.jsx(
         S,
         {
-          value: s,
-          onChange: a,
-          validateValue: r,
-          id: e,
-          disabled: o,
-          placeholder: m,
-          onFocus: t,
-          onBlur: i,
-          autoFocus: c,
-          onKeyPress: p,
-          focusInput: l,
-          maxLength: h,
+          value: a,
+          onChange: n,
+          validateValue: e,
+          id: s,
+          disabled: r,
+          placeholder: c,
+          onFocus: o,
+          onBlur: t,
+          autoFocus: p,
+          onKeyPress: m,
+          focusInput: f,
+          maxLength: l,
           inputMode: w,
           type: b,
-          pr: g ?? (u ? `calc(${d} + ${f} + 2px)` : void 0)
+          pr: g ?? (u ? `calc(${h} + ${x} + 2px)` : void 0)
         }
       ),
-      u && /* @__PURE__ */ n.jsx(
+      u && /* @__PURE__ */ i.jsx(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
-          width: d,
+          width: h,
           height: "11.931",
           viewBox: "0 0 16 11.931",
           fill: "#3DEB24",
           style: {
             position: "absolute",
-            right: f,
+            right: x,
             bottom: "16px",
             transform: "translateY(-50%)"
           },
-          children: /* @__PURE__ */ n.jsx(
+          children: /* @__PURE__ */ i.jsx(
             "path",
             {
               d: "M5.434,16.274l-5.2-5.2a.8.8,0,0,1,0-1.131L1.366,8.812a.8.8,0,0,1,1.131,0l3.5,3.5,7.5-7.5a.8.8,0,0,1,1.131,0l1.131,1.131a.8.8,0,0,1,0,1.131l-9.2,9.2A.8.8,0,0,1,5.434,16.274Z",
@@ -127,6 +129,6 @@ const W = (s, a, e) => (o) => {
 );
 export {
   S as FormV2Input,
-  L as FormV2InputWithContainer
+  A as FormV2InputWithContainer
 };
 //# sourceMappingURL=sd-component-library57.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library57.js","sources":["../src/components/forms-v2/form-v2-input/form-v2-input.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\n\nimport { Input as RebassInput } from \"@rebass/forms\";\n\nimport { translatedTextSuffix } from \"../../../core/constants\";\nimport { InvalidInputError } from \"../../inputs\";\nimport { InputContainer, InputContainerProps } from \"../input-container\";\nimport { FormV2InputProps as Props } from \"./interfaces\";\n\nconst getOnChangeCallback =\n  (\n    setDisplayedValue: (newValue: string) => void,\n    onChange: Props[\"onChange\"],\n    validateValue: Required<Props>[\"validateValue\"]\n  ) =>\n  (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value;\n    try {\n      const isValid = validateValue(newValue);\n      setDisplayedValue(newValue);\n      isValid && onChange(newValue);\n    } catch (error) {\n      if (!(error instanceof InvalidInputError)) throw error;\n    }\n  };\n\nexport const FormV2Input: React.FC<Props> = ({\n  value,\n  onChange,\n  validateValue = () => true,\n  focusInput,\n  ...props\n}) => {\n  let valueToUse = value;\n  let className: string = \"\";\n\n  if (valueToUse.endsWith(translatedTextSuffix)) {\n    valueToUse = valueToUse.slice(0, -translatedTextSuffix.length);\n    className = \"no-translate\";\n  }\n\n  const [displayedValue, setDisplayedValue] = useState(valueToUse);\n\n  useEffect(() => {\n    valueToUse !== undefined && setDisplayedValue(valueToUse);\n  }, [valueToUse]);\n\n  const ref = useCallback(\n    (input: HTMLInputElement | null) => {\n      focusInput && input?.focus();\n    },\n    [focusInput]\n  );\n\n  return (\n    <RebassInput\n      variant=\"_inputs.v2\"\n      onChange={getOnChangeCallback(setDisplayedValue, onChange, validateValue)}\n      value={displayedValue}\n      {...props}\n      sx={{\n        \":focus\": {\n          borderBottomStyle: \"solid\",\n          borderBottomWidth: \"2px\",\n          borderBottomColor: \"cl_blue\",\n          outline: \"none\",\n        },\n      }}\n      className={className}\n      ref={ref}\n    />\n  );\n};\n\nconst checkMarkWidth = \"16px\";\n\nexport const FormV2InputWithContainer: React.FC<\n  Omit<Props, \"pr\"> &\n    InputContainerProps & {\n      showCheckMark?: boolean;\n      checkmarkRight?: string;\n      inputPr?: Props[\"pr\"];\n    }\n> = ({\n  value,\n  onChange,\n  id,\n  disabled,\n  validateValue,\n  onFocus,\n  onBlur,\n  placeholder,\n  autoFocus,\n  onKeyPress,\n  focusInput,\n  maxLength,\n  showCheckMark,\n  checkmarkRight = \"0px\",\n  children,\n  inputPr,\n  inputMode,\n  type,\n  ...containerProps\n}) => (\n  <InputContainer\n    id={id}\n    cursor={disabled ? \"not-allowed\" : \"pointer\"}\n    {...containerProps}\n  >\n    <FormV2Input\n      {...{\n        value,\n        onChange,\n        validateValue,\n        id,\n        disabled,\n        placeholder,\n        onFocus,\n        onBlur,\n        autoFocus,\n        onKeyPress,\n        focusInput,\n        maxLength,\n        inputMode,\n        type,\n      }}\n      pr={\n        inputPr ??\n        (showCheckMark\n          ? `calc(${checkMarkWidth} + ${checkmarkRight} + 2px)`\n          : undefined)\n      }\n    />\n\n    {showCheckMark && (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={checkMarkWidth}\n        height=\"11.931\"\n        viewBox=\"0 0 16 11.931\"\n        fill=\"#3DEB24\"\n        style={{\n          position: \"absolute\",\n          right: checkmarkRight,\n          bottom: \"16px\",\n          transform: \"translateY(-50%)\",\n        }}\n      >\n        <path\n          d=\"M5.434,16.274l-5.2-5.2a.8.8,0,0,1,0-1.131L1.366,8.812a.8.8,0,0,1,1.131,0l3.5,3.5,7.5-7.5a.8.8,0,0,1,1.131,0l1.131,1.131a.8.8,0,0,1,0,1.131l-9.2,9.2A.8.8,0,0,1,5.434,16.274Z\"\n          transform=\"translate(0 -4.577)\"\n        />\n      </svg>\n    )}\n\n    {children}\n  </InputContainer>\n);\n"],"names":["getOnChangeCallback","setDisplayedValue","onChange","validateValue","event","newValue","isValid","error","InvalidInputError","FormV2Input","value","focusInput","props","valueToUse","className","translatedTextSuffix","displayedValue","useState","useEffect","ref","useCallback","input","jsx","RebassInput","checkMarkWidth","FormV2InputWithContainer","id","disabled","onFocus","onBlur","placeholder","autoFocus","onKeyPress","maxLength","showCheckMark","checkmarkRight","children","inputPr","inputMode","type","containerProps","jsxs","InputContainer"],"mappings":"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"}
+{"version":3,"file":"sd-component-library57.js","sources":["../src/components/forms-v2/form-v2-input/form-v2-input.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\n\nimport { Input as RebassInput } from \"@rebass/forms\";\n\nimport { translatedTextSuffix } from \"../../../core/constants\";\nimport { InvalidInputError } from \"../../inputs\";\nimport { InputContainer, InputContainerProps } from \"../input-container\";\nimport { FormV2InputProps as Props } from \"./interfaces\";\n\nconst getOnChangeCallback =\n  (\n    setDisplayedValue: (newValue: string) => void,\n    onChange: Props[\"onChange\"],\n    validateValue: Required<Props>[\"validateValue\"]\n  ) =>\n  (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value;\n    try {\n      const isValid = validateValue(newValue);\n      setDisplayedValue(newValue);\n      isValid && onChange(newValue);\n    } catch (error) {\n      if (!(error instanceof InvalidInputError)) throw error;\n    }\n  };\n\nexport const FormV2Input: React.FC<Props> = ({\n  value,\n  onChange,\n  validateValue = () => true,\n  focusInput,\n  className = \"\",\n  ...props\n}) => {\n  let valueToUse = value;\n  const finalClassName = className;\n\n  if (valueToUse.endsWith(translatedTextSuffix)) {\n    valueToUse = valueToUse.slice(0, -translatedTextSuffix.length);\n    finalClassName.concat(\"no-translate\");\n  }\n\n  const [displayedValue, setDisplayedValue] = useState(valueToUse);\n\n  useEffect(() => {\n    valueToUse !== undefined && setDisplayedValue(valueToUse);\n  }, [valueToUse]);\n\n  const ref = useCallback(\n    (input: HTMLInputElement | null) => {\n      focusInput && input?.focus();\n    },\n    [focusInput]\n  );\n\n  return (\n    <RebassInput\n      variant=\"_inputs.v2\"\n      onChange={getOnChangeCallback(setDisplayedValue, onChange, validateValue)}\n      value={displayedValue}\n      {...props}\n      sx={{\n        \":focus\": {\n          borderBottomStyle: \"solid\",\n          borderBottomWidth: \"2px\",\n          borderBottomColor: \"cl_blue\",\n          outline: \"none\",\n        },\n      }}\n      className={finalClassName}\n      ref={ref}\n    />\n  );\n};\n\nconst checkMarkWidth = \"16px\";\n\nexport const FormV2InputWithContainer: React.FC<\n  Omit<Props, \"pr\"> &\n    InputContainerProps & {\n      showCheckMark?: boolean;\n      checkmarkRight?: string;\n      inputPr?: Props[\"pr\"];\n    }\n> = ({\n  value,\n  onChange,\n  id,\n  disabled,\n  validateValue,\n  onFocus,\n  onBlur,\n  placeholder,\n  autoFocus,\n  onKeyPress,\n  focusInput,\n  maxLength,\n  showCheckMark,\n  checkmarkRight = \"0px\",\n  children,\n  inputPr,\n  inputMode,\n  type,\n  ...containerProps\n}) => (\n  <InputContainer\n    id={id}\n    cursor={disabled ? \"not-allowed\" : \"pointer\"}\n    {...containerProps}\n  >\n    <FormV2Input\n      {...{\n        value,\n        onChange,\n        validateValue,\n        id,\n        disabled,\n        placeholder,\n        onFocus,\n        onBlur,\n        autoFocus,\n        onKeyPress,\n        focusInput,\n        maxLength,\n        inputMode,\n        type,\n      }}\n      pr={\n        inputPr ??\n        (showCheckMark\n          ? `calc(${checkMarkWidth} + ${checkmarkRight} + 2px)`\n          : undefined)\n      }\n    />\n\n    {showCheckMark && (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={checkMarkWidth}\n        height=\"11.931\"\n        viewBox=\"0 0 16 11.931\"\n        fill=\"#3DEB24\"\n        style={{\n          position: \"absolute\",\n          right: checkmarkRight,\n          bottom: \"16px\",\n          transform: \"translateY(-50%)\",\n        }}\n      >\n        <path\n          d=\"M5.434,16.274l-5.2-5.2a.8.8,0,0,1,0-1.131L1.366,8.812a.8.8,0,0,1,1.131,0l3.5,3.5,7.5-7.5a.8.8,0,0,1,1.131,0l1.131,1.131a.8.8,0,0,1,0,1.131l-9.2,9.2A.8.8,0,0,1,5.434,16.274Z\"\n          transform=\"translate(0 -4.577)\"\n        />\n      </svg>\n    )}\n\n    {children}\n  </InputContainer>\n);\n"],"names":["getOnChangeCallback","setDisplayedValue","onChange","validateValue","event","newValue","isValid","error","InvalidInputError","FormV2Input","value","focusInput","className","props","valueToUse","finalClassName","translatedTextSuffix","displayedValue","useState","useEffect","ref","useCallback","input","jsx","RebassInput","checkMarkWidth","FormV2InputWithContainer","id","disabled","onFocus","onBlur","placeholder","autoFocus","onKeyPress","maxLength","showCheckMark","checkmarkRight","children","inputPr","inputMode","type","containerProps","jsxs","InputContainer"],"mappings":"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"}

package/lib/sd-component-library6.js

@@ -2,7 +2,7 @@ import { j as e } from "./sd-component-library198.js";
 import { useRef as T, useState as q, useCallback as J } from "react";
 import { Box as o } from "rebass";
 import { useResize as K } from "./sd-component-library3.js";
-import { ReactComponent as L } from "./sd-component-library206.js";
+import { ReactComponent as L } from "./sd-component-library202.js";
 const Z = (p) => {
   const {
     width: x = ["100%"],

package/lib/sd-component-library62.js

@@ -3,7 +3,7 @@ import { useState as d, useRef as w, useCallback as I, useMemo as L } from "reac
 import { Box as V } from "rebass";
 import { useOnClickOutside as _ } from "./sd-component-library3.js";
 import { SecondaryTextInput as $ } from "./sd-component-library79.js";
-import { ResultsBox as A } from "./sd-component-library214.js";
+import { ResultsBox as A } from "./sd-component-library215.js";
 function P(i, l, a) {
   const o = (c) => {
     const t = c.toLowerCase().indexOf(a.toLowerCase());

package/lib/sd-component-library63.js

@@ -1,8 +1,8 @@
 import { j as e } from "./sd-component-library198.js";
 import { useCallback as p, useMemo as u } from "react";
 import { Calendar as g } from "react-date-range";
-import "./sd-component-library284.js";
-import "./sd-component-library285.js";
+import "./sd-component-library282.js";
+import "./sd-component-library283.js";
 import { Box as o } from "rebass";
 import { TenSb as b } from "./sd-component-library155.js";
 const B = (a) => {

package/lib/sd-component-library64.js

@@ -1,12 +1,12 @@
 import { j as t } from "./sd-component-library198.js";
 import { useState as v, useRef as w } from "react";
-import "./sd-component-library284.js";
-import "./sd-component-library285.js";
+import "./sd-component-library282.js";
+import "./sd-component-library283.js";
 import { Box as s } from "rebass";
 import { useBreakPoints as M, useDependantState as y } from "./sd-component-library3.js";
-import { getStaticRanges as E } from "./sd-component-library286.js";
-import { BaseDateRangeInputMobile as O } from "./sd-component-library287.js";
-import { BaseDateRangeInputDesktop as P } from "./sd-component-library288.js";
+import { getStaticRanges as E } from "./sd-component-library284.js";
+import { BaseDateRangeInputMobile as O } from "./sd-component-library285.js";
+import { BaseDateRangeInputDesktop as P } from "./sd-component-library286.js";
 const J = (n) => {
   const {
     color: d = "#9E1CB5",

package/lib/sd-component-library65.js

@@ -2,7 +2,7 @@ import { j as t } from "./sd-component-library198.js";
 import { useState as u } from "react";
 import { Flex as g } from "rebass";
 import { BaseDateInput as C } from "./sd-component-library63.js";
-import { ReactComponent as S } from "./sd-component-library283.js";
+import { ReactComponent as S } from "./sd-component-library287.js";
 import { Button as D } from "./sd-component-library26.js";
 import { FrMaxContainer as b } from "./sd-component-library39.js";
 const k = (r) => {

package/lib/sd-component-library66.js

@@ -2,8 +2,8 @@ import { j as e } from "./sd-component-library198.js";
 import { useState as I, useCallback as M, useMemo as v } from "react";
 import { Box as F, Flex as O } from "rebass";
 import { useBreakPoints as W } from "./sd-component-library3.js";
-import { ReactComponent as z } from "./sd-component-library283.js";
-import { BaseLabel as E } from "./sd-component-library228.js";
+import { ReactComponent as z } from "./sd-component-library287.js";
+import { BaseLabel as E } from "./sd-component-library226.js";
 import { OutsideClickBox as J } from "./sd-component-library12.js";
 import { BaseDateRangeInput as L } from "./sd-component-library64.js";
 import { IconButton as X } from "./sd-component-library23.js";

package/lib/sd-component-library67.js

@@ -4,7 +4,7 @@ import { format as k } from "date-fns";
 import { random as G } from "lodash-es";
 import { Box as r } from "rebass";
 import { BaseDateInput as I } from "./sd-component-library63.js";
-import { BaseLabel as M } from "./sd-component-library228.js";
+import { BaseLabel as M } from "./sd-component-library226.js";
 import { ReactComponent as A } from "./sd-component-library189.js";
 import { FrMaxContainer as L } from "./sd-component-library39.js";
 import { ResponsiveText as P } from "./sd-component-library150.js";

package/lib/sd-component-library7.js

@@ -4,7 +4,7 @@ import { Box as i, Flex as b } from "rebass";
 import { isPDFFlow as v } from "./sd-component-library4.js";
 import { SecondaryBadge as C } from "./sd-component-library10.js";
 import { MaxFrContainer as E } from "./sd-component-library41.js";
-import { ReactComponent as S } from "./sd-component-library206.js";
+import { ReactComponent as S } from "./sd-component-library202.js";
 const $ = (d) => {
   const {
     header: s,

package/lib/sd-component-library71.js

@@ -1,6 +1,6 @@
 import { j as w } from "./sd-component-library198.js";
-import { useRef as C, useState as E, useEffect as g } from "react";
-import { Input as K } from "@rebass/forms";
+import { useRef as E, useState as K, useEffect as g } from "react";
+import { Input as N } from "@rebass/forms";
 import { translatedTextSuffix as x } from "./sd-component-library5.js";
 import { InvalidInputError as P } from "./sd-component-library70.js";
 function M(t, s, n) {
@@ -31,11 +31,13 @@ const B = (t) => {
     inputMode: y,
     autoFocus: v = !1,
     errorBackground: I = !1,
-    sx: R
+    sx: C,
+    className: R = ""
   } = t;
-  let e = s, l = "";
-  e.endsWith(x) && (e = e.slice(0, -x.length), l = "no-translate");
-  const u = C(null), [c, m] = E(e);
+  let e = s;
+  const c = R;
+  e.endsWith(x) && (e = e.slice(0, -x.length), c.concat("no-translate"));
+  const u = E(null), [l, m] = K(e);
   g(() => {
     m(e);
   }, [e]), g(() => {
@@ -45,7 +47,7 @@ const B = (t) => {
     d.key in f && f[d.key]();
   };
   return /* @__PURE__ */ w.jsx(
-    K,
+    N,
     {
       "data-testid": "base-input",
       ...t,
@@ -55,16 +57,16 @@ const B = (t) => {
         padding: o,
         width: r,
         backgroundColor: I ? "rgba(255, 0, 0, 0.05)" : "",
-        ...R
+        ...C
       },
-      value: c,
+      value: l,
       autoFocus: v,
       type: i,
-      onChange: M(c, m, a),
+      onChange: M(l, m, a),
       onKeyPress: j,
       ref: u,
       inputMode: y,
-      className: l
+      className: c
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library71.js","sources":["../src/components/inputs/input/input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\n\nimport { Input as RebassInput } from \"@rebass/forms\";\n\nimport { InvalidInputError } from \".\";\nimport { translatedTextSuffix } from \"../../../core/constants\";\nimport { InputProps as Props } from \"./interfaces\";\n\n/**\n * Validate and update the input field's value.\n *\n * @param oldValue The previous input value.\n * @param setValue The new input value.\n * @param callback The callback funciton to run when input changes.\n */\nfunction changeWrapper(\n  oldValue: string,\n  setValue: React.Dispatch<React.SetStateAction<string>>,\n  callback?: (newValue: string, oldValue: string) => void\n): (event: React.ChangeEvent<HTMLInputElement>) => void {\n  return (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value;\n    let exceptionRaised = false;\n    try {\n      callback?.(newValue, oldValue);\n    } catch (error) {\n      exceptionRaised = true;\n      if (!(error instanceof InvalidInputError)) {\n        throw error;\n      }\n    } finally {\n      !exceptionRaised && setValue(newValue);\n      exceptionRaised && setValue(oldValue);\n    }\n  };\n}\n\n/**\n * Base input component. Other input components should be built from this.\n */\nexport const Input: React.FC<Props> = (props) => {\n  const {\n    value = \"\",\n    textAlign,\n    type,\n    padding,\n    width = \"100%\",\n    onChange,\n    onKeyPress = {},\n    focusInput = false,\n    variant,\n    inputMode,\n    autoFocus = false,\n    errorBackground = false,\n    sx,\n  } = props;\n\n  let valueToUse = value;\n  let className: string = \"\";\n\n  if (valueToUse.endsWith(translatedTextSuffix)) {\n    valueToUse = valueToUse.slice(0, -translatedTextSuffix.length);\n    className = \"no-translate\";\n  }\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [mValue, setMValue] = useState(valueToUse);\n\n  useEffect(() => {\n    setMValue(valueToUse);\n  }, [valueToUse]);\n\n  useEffect(() => {\n    if (!focusInput || !inputRef.current) return;\n\n    inputRef.current.focus();\n  }, [inputRef, focusInput]);\n\n  const handleOnKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key in onKeyPress) {\n      onKeyPress[e.key]();\n    }\n  };\n\n  return (\n    <RebassInput\n      data-testid=\"base-input\"\n      {...props}\n      variant={`_inputs.${variant}`}\n      sx={{\n        textAlign,\n        padding,\n        width,\n        backgroundColor: errorBackground ? \"rgba(255, 0, 0, 0.05)\" : \"\",\n        ...sx,\n      }}\n      value={mValue}\n      autoFocus={autoFocus}\n      type={type}\n      onChange={changeWrapper(mValue, setMValue, onChange)}\n      onKeyPress={handleOnKeyPress}\n      ref={inputRef}\n      inputMode={inputMode}\n      className={className}\n    />\n  );\n};\n"],"names":["changeWrapper","oldValue","setValue","callback","event","newValue","exceptionRaised","error","InvalidInputError","Input","props","value","textAlign","type","padding","width","onChange","onKeyPress","focusInput","variant","inputMode","autoFocus","errorBackground","sx","valueToUse","className","translatedTextSuffix","inputRef","useRef","mValue","setMValue","useState","useEffect","handleOnKeyPress","e","jsx","RebassInput"],"mappings":";;;;;AAeA,SAASA,EACPC,GACAC,GACAC,GACsD;AACtD,SAAO,CAACC,MAA+C;AAC/C,UAAAC,IAAWD,EAAM,OAAO;AAC9B,QAAIE,IAAkB;AAClB,QAAA;AACF,MAAAH,KAAA,QAAAA,EAAWE,GAAUJ;AAAA,aACdM,GAAO;AAEV,UADcD,IAAA,IACd,EAAEC,aAAiBC;AACf,cAAAD;AAAA,IACR,UACA;AACC,OAAAD,KAAmBJ,EAASG,CAAQ,GACrCC,KAAmBJ,EAASD,CAAQ;AAAA,IACtC;AAAA,EAAA;AAEJ;AAKa,MAAAQ,IAAyB,CAACC,MAAU;AACzC,QAAA;AAAA,IACJ,OAAAC,IAAQ;AAAA,IACR,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,YAAAC,IAAa,CAAC;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,iBAAAC,IAAkB;AAAA,IAClB,IAAAC;AAAA,EACE,IAAAb;AAEJ,MAAIc,IAAab,GACbc,IAAoB;AAEpB,EAAAD,EAAW,SAASE,CAAoB,MAC1CF,IAAaA,EAAW,MAAM,GAAG,CAACE,EAAqB,MAAM,GACjDD,IAAA;AAGR,QAAAE,IAAWC,EAAyB,IAAI,GAExC,CAACC,GAAQC,CAAS,IAAIC,EAASP,CAAU;AAE/C,EAAAQ,EAAU,MAAM;AACd,IAAAF,EAAUN,CAAU;AAAA,EAAA,GACnB,CAACA,CAAU,CAAC,GAEfQ,EAAU,MAAM;AACV,IAAA,CAACd,KAAc,CAACS,EAAS,WAE7BA,EAAS,QAAQ;EAAM,GACtB,CAACA,GAAUT,CAAU,CAAC;AAEnB,QAAAe,IAAmB,CAACC,MAA6C;AACjE,IAAAA,EAAE,OAAOjB,KACAA,EAAAiB,EAAE,GAAG;EAClB;AAIA,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAG1B;AAAA,MACJ,SAAS,WAAWS,CAAO;AAAA,MAC3B,IAAI;AAAA,QACF,WAAAP;AAAA,QACA,SAAAE;AAAA,QACA,OAAAC;AAAA,QACA,iBAAiBO,IAAkB,0BAA0B;AAAA,QAC7D,GAAGC;AAAA,MACL;AAAA,MACA,OAAOM;AAAA,MACP,WAAAR;AAAA,MACA,MAAAR;AAAA,MACA,UAAUb,EAAc6B,GAAQC,GAAWd,CAAQ;AAAA,MACnD,YAAYiB;AAAA,MACZ,KAAKN;AAAA,MACL,WAAAP;AAAA,MACA,WAAAK;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library71.js","sources":["../src/components/inputs/input/input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\n\nimport { Input as RebassInput } from \"@rebass/forms\";\n\nimport { InvalidInputError } from \".\";\nimport { translatedTextSuffix } from \"../../../core/constants\";\nimport { InputProps as Props } from \"./interfaces\";\n\n/**\n * Validate and update the input field's value.\n *\n * @param oldValue The previous input value.\n * @param setValue The new input value.\n * @param callback The callback funciton to run when input changes.\n */\nfunction changeWrapper(\n  oldValue: string,\n  setValue: React.Dispatch<React.SetStateAction<string>>,\n  callback?: (newValue: string, oldValue: string) => void\n): (event: React.ChangeEvent<HTMLInputElement>) => void {\n  return (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value;\n    let exceptionRaised = false;\n    try {\n      callback?.(newValue, oldValue);\n    } catch (error) {\n      exceptionRaised = true;\n      if (!(error instanceof InvalidInputError)) {\n        throw error;\n      }\n    } finally {\n      !exceptionRaised && setValue(newValue);\n      exceptionRaised && setValue(oldValue);\n    }\n  };\n}\n\n/**\n * Base input component. Other input components should be built from this.\n */\nexport const Input: React.FC<Props> = (props) => {\n  const {\n    value = \"\",\n    textAlign,\n    type,\n    padding,\n    width = \"100%\",\n    onChange,\n    onKeyPress = {},\n    focusInput = false,\n    variant,\n    inputMode,\n    autoFocus = false,\n    errorBackground = false,\n    sx,\n    className = \"\",\n  } = props;\n\n  let valueToUse = value;\n  const finalClassName = className;\n\n  if (valueToUse.endsWith(translatedTextSuffix)) {\n    valueToUse = valueToUse.slice(0, -translatedTextSuffix.length);\n    finalClassName.concat(\"no-translate\");\n  }\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [mValue, setMValue] = useState(valueToUse);\n\n  useEffect(() => {\n    setMValue(valueToUse);\n  }, [valueToUse]);\n\n  useEffect(() => {\n    if (!focusInput || !inputRef.current) return;\n\n    inputRef.current.focus();\n  }, [inputRef, focusInput]);\n\n  const handleOnKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key in onKeyPress) {\n      onKeyPress[e.key]();\n    }\n  };\n\n  return (\n    <RebassInput\n      data-testid=\"base-input\"\n      {...props}\n      variant={`_inputs.${variant}`}\n      sx={{\n        textAlign,\n        padding,\n        width,\n        backgroundColor: errorBackground ? \"rgba(255, 0, 0, 0.05)\" : \"\",\n        ...sx,\n      }}\n      value={mValue}\n      autoFocus={autoFocus}\n      type={type}\n      onChange={changeWrapper(mValue, setMValue, onChange)}\n      onKeyPress={handleOnKeyPress}\n      ref={inputRef}\n      inputMode={inputMode}\n      className={finalClassName}\n    />\n  );\n};\n"],"names":["changeWrapper","oldValue","setValue","callback","event","newValue","exceptionRaised","error","InvalidInputError","Input","props","value","textAlign","type","padding","width","onChange","onKeyPress","focusInput","variant","inputMode","autoFocus","errorBackground","sx","className","valueToUse","finalClassName","translatedTextSuffix","inputRef","useRef","mValue","setMValue","useState","useEffect","handleOnKeyPress","e","jsx","RebassInput"],"mappings":";;;;;AAeA,SAASA,EACPC,GACAC,GACAC,GACsD;AACtD,SAAO,CAACC,MAA+C;AAC/C,UAAAC,IAAWD,EAAM,OAAO;AAC9B,QAAIE,IAAkB;AAClB,QAAA;AACF,MAAAH,KAAA,QAAAA,EAAWE,GAAUJ;AAAA,aACdM,GAAO;AAEV,UADcD,IAAA,IACd,EAAEC,aAAiBC;AACf,cAAAD;AAAA,IACR,UACA;AACC,OAAAD,KAAmBJ,EAASG,CAAQ,GACrCC,KAAmBJ,EAASD,CAAQ;AAAA,IACtC;AAAA,EAAA;AAEJ;AAKa,MAAAQ,IAAyB,CAACC,MAAU;AACzC,QAAA;AAAA,IACJ,OAAAC,IAAQ;AAAA,IACR,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,YAAAC,IAAa,CAAC;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,iBAAAC,IAAkB;AAAA,IAClB,IAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,EACV,IAAAd;AAEJ,MAAIe,IAAad;AACjB,QAAMe,IAAiBF;AAEnB,EAAAC,EAAW,SAASE,CAAoB,MAC1CF,IAAaA,EAAW,MAAM,GAAG,CAACE,EAAqB,MAAM,GAC7DD,EAAe,OAAO,cAAc;AAGhC,QAAAE,IAAWC,EAAyB,IAAI,GAExC,CAACC,GAAQC,CAAS,IAAIC,EAASP,CAAU;AAE/C,EAAAQ,EAAU,MAAM;AACd,IAAAF,EAAUN,CAAU;AAAA,EAAA,GACnB,CAACA,CAAU,CAAC,GAEfQ,EAAU,MAAM;AACV,IAAA,CAACf,KAAc,CAACU,EAAS,WAE7BA,EAAS,QAAQ;EAAM,GACtB,CAACA,GAAUV,CAAU,CAAC;AAEnB,QAAAgB,IAAmB,CAACC,MAA6C;AACjE,IAAAA,EAAE,OAAOlB,KACAA,EAAAkB,EAAE,GAAG;EAClB;AAIA,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAG3B;AAAA,MACJ,SAAS,WAAWS,CAAO;AAAA,MAC3B,IAAI;AAAA,QACF,WAAAP;AAAA,QACA,SAAAE;AAAA,QACA,OAAAC;AAAA,QACA,iBAAiBO,IAAkB,0BAA0B;AAAA,QAC7D,GAAGC;AAAA,MACL;AAAA,MACA,OAAOO;AAAA,MACP,WAAAT;AAAA,MACA,MAAAR;AAAA,MACA,UAAUb,EAAc8B,GAAQC,GAAWf,CAAQ;AAAA,MACnD,YAAYkB;AAAA,MACZ,KAAKN;AAAA,MACL,WAAAR;AAAA,MACA,WAAWM;AAAA,IAAA;AAAA,EAAA;AAGjB;"}

package/lib/sd-component-library72.js

@@ -1,8 +1,8 @@
 import { j as n } from "./sd-component-library198.js";
 import { useState as z } from "react";
-import D from "./sd-component-library222.js";
+import D from "./sd-component-library216.js";
 import u from "./sd-component-library197.js";
-import { escapeWrapper as F, unescapeWrapper as d } from "./sd-component-library223.js";
+import { escapeWrapper as F, unescapeWrapper as d } from "./sd-component-library217.js";
 import { GridContainerV2 as G } from "./sd-component-library40.js";
 import { BaseTextV2 as T } from "./sd-component-library140.js";
 import { HorizontalDivider as B } from "./sd-component-library50.js";