@selfdecode/sd-component-library 4.0.73-vite17-no-postcss → 4.0.73-vite19

package/lib/sd-component-library72.js

@@ -3,7 +3,7 @@ import { useState as T } from "react";
 import { useDependantState as V } from "./sd-component-library3.js";
 import { OutsideClickBox as q } from "./sd-component-library14.js";
 import { PrimaryTextInput as z } from "./sd-component-library70.js";
-import { ReactComponent as G } from "./sd-component-library230.js";
+import { ReactComponent as G } from "./sd-component-library227.js";
 import { ReactComponent as H } from "./sd-component-library309.js";
 import { SearchBox as J } from "./sd-component-library73.js";
 function f(i, s, o, t) {
@@ -40,42 +40,82 @@ function tt(i) {
   } = i, [e, l] = V(c), W = m || (e ? "#4568F9" : "#CCD0DB"), u = t ? "15px" : "40px", X = t && p || u, x = () => {
     e && s && s(e);
   }, [w, h] = T(!1);
-  return /* @__PURE__ */ r.jsxs(q, { onClickOutside: () => h(!1), sx: {
-    position: "relative",
-    bg: "white",
-    width: R,
-    m: d,
-    mt: g,
-    mr: S,
-    mb: C,
-    ml: j,
-    maxWidth: P,
-    ...F
-  }, "data-test": "search-input", children: [
-    /* @__PURE__ */ r.jsx(z, { onChange: (K, L) => f(K, L, l, a), padding: b, textAlign: k, value: c, placeholder: y, focusInput: B, sx: D, id: E, onKeyPress: {
-      Enter: x
-    }, onFocus: () => h(!0) }),
-    /* @__PURE__ */ r.jsx(G, { style: {
-      height: "18px",
-      position: "absolute",
-      right: X,
-      bottom: A,
-      fill: W,
-      cursor: e ? "pointer" : "default",
-      transition: "all .1s"
-    }, onClick: x }),
-    !t && /* @__PURE__ */ r.jsx(H, { style: {
-      height: "16px",
-      position: "absolute",
-      right: "10px",
-      bottom: O,
-      fill: I,
-      cursor: "pointer"
-    }, onClick: () => {
-      o == null || o(), f("", e || "", l, a);
-    } }),
-    !!(n != null && n.length) && w && /* @__PURE__ */ r.jsx(J, { searchResults: n, useRouterLinks: v })
-  ] });
+  return /* @__PURE__ */ r.jsxs(
+    q,
+    {
+      onClickOutside: () => h(!1),
+      sx: {
+        position: "relative",
+        bg: "white",
+        width: R,
+        m: d,
+        mt: g,
+        mr: S,
+        mb: C,
+        ml: j,
+        maxWidth: P,
+        ...F
+      },
+      "data-test": "search-input",
+      children: [
+        /* @__PURE__ */ r.jsx(
+          z,
+          {
+            onChange: (K, L) => f(K, L, l, a),
+            padding: b,
+            textAlign: k,
+            value: c,
+            placeholder: y,
+            focusInput: B,
+            sx: D,
+            id: E,
+            onKeyPress: {
+              Enter: x
+            },
+            onFocus: () => h(!0)
+          }
+        ),
+        /* @__PURE__ */ r.jsx(
+          G,
+          {
+            style: {
+              height: "18px",
+              position: "absolute",
+              right: X,
+              bottom: A,
+              fill: W,
+              cursor: e ? "pointer" : "default",
+              transition: "all .1s"
+            },
+            onClick: x
+          }
+        ),
+        !t && /* @__PURE__ */ r.jsx(
+          H,
+          {
+            style: {
+              height: "16px",
+              position: "absolute",
+              right: "10px",
+              bottom: O,
+              fill: I,
+              cursor: "pointer"
+            },
+            onClick: () => {
+              o == null || o(), f("", e || "", l, a);
+            }
+          }
+        ),
+        !!(n != null && n.length) && w && /* @__PURE__ */ r.jsx(
+          J,
+          {
+            searchResults: n,
+            useRouterLinks: v
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   tt as SearchInput

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library72.js","sources":["../src/components/inputs/search-input/presentational/search-input.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { useDependantState } from \"../../../../core/custom-hooks\";\nimport { OutsideClickBox } from \"../../../boxes/outside-click-box\";\nimport { PrimaryTextInput } from \"../../primary-text-input\";\nimport { SearchBox } from \"../partials/search-box\";\nimport { SearchIcon, XIcon } from \"./assets\";\nimport { SearchInputProps } from \"./interfaces\";\n\nfunction onChangeWrapper(\n  newValue: string,\n  oldValue: string,\n  setCurrentValue: React.Dispatch<React.SetStateAction<string | undefined>>,\n  onChange: undefined | ((newValue: string, oldValue: string) => void)\n) {\n  onChange?.(newValue, oldValue);\n  setCurrentValue(newValue);\n}\n\n/**\n * Search input component.\n */\nexport function SearchInput(\n  props: SearchInputProps\n): React.ReactElement<SearchInputProps> {\n  const {\n    onClickSearch,\n    onClickClose,\n    hideX,\n    m,\n    mt,\n    mr,\n    mb,\n    ml,\n    onChange,\n    padding,\n    textAlign,\n    placeholder = \"Enter your Search\",\n    focusInput,\n    value,\n    width,\n    searchRight,\n    searchColor,\n    searchResults,\n    useRouterLinks = false,\n    sx,\n    id,\n    containerSx,\n    xColor = \"#434A54\",\n    searchBottom = \"15px\",\n    xBottom = \"16px\",\n    maxWidth,\n  } = props;\n\n  const [currentValue, setCurrentValue] = useDependantState(value);\n\n  const fill = searchColor ? searchColor : currentValue ? \"#4568F9\" : \"#CCD0DB\";\n  const defaultRight = hideX ? \"15px\" : \"40px\";\n  const right = hideX\n    ? searchRight\n      ? searchRight\n      : defaultRight\n    : defaultRight;\n\n  const handleSearch = () => {\n    if (currentValue && onClickSearch) {\n      onClickSearch(currentValue);\n    }\n  };\n\n  const [focused, setFocused] = useState(false);\n\n  return (\n    <OutsideClickBox\n      onClickOutside={() => setFocused(false)}\n      sx={{\n        position: \"relative\",\n        bg: \"white\",\n        width,\n        m,\n        mt,\n        mr,\n        mb,\n        ml,\n        maxWidth,\n        ...containerSx,\n      }}\n      data-test=\"search-input\"\n    >\n      <PrimaryTextInput\n        onChange={(newValue, oldValue) =>\n          onChangeWrapper(newValue, oldValue, setCurrentValue, onChange)\n        }\n        {...{ padding, textAlign, value, placeholder, focusInput, sx, id }}\n        onKeyPress={{\n          Enter: handleSearch,\n        }}\n        onFocus={() => setFocused(true)}\n      />\n\n      <SearchIcon\n        style={{\n          height: \"18px\",\n          position: \"absolute\",\n          right: right,\n          bottom: searchBottom,\n          fill: fill,\n          cursor: currentValue ? \"pointer\" : \"default\",\n          transition: \"all .1s\",\n        }}\n        onClick={handleSearch}\n      />\n\n      {!hideX && (\n        <XIcon\n          style={{\n            height: \"16px\",\n            position: \"absolute\",\n            right: \"10px\",\n            bottom: xBottom,\n            fill: xColor,\n            cursor: \"pointer\",\n          }}\n          onClick={() => {\n            onClickClose?.();\n            onChangeWrapper(\"\", currentValue || \"\", setCurrentValue, onChange);\n          }}\n        />\n      )}\n      {!!searchResults?.length && focused && (\n        <SearchBox\n          searchResults={searchResults}\n          useRouterLinks={useRouterLinks}\n        />\n      )}\n    </OutsideClickBox>\n  );\n}\n"],"names":["onChangeWrapper","newValue","oldValue","setCurrentValue","onChange","SearchInput","props","onClickSearch","onClickClose","hideX","m","mt","mr","mb","ml","padding","textAlign","placeholder","focusInput","value","width","searchRight","searchColor","searchResults","useRouterLinks","sx","id","containerSx","xColor","searchBottom","xBottom","maxWidth","currentValue","useDependantState","fill","defaultRight","right","handleSearch","focused","setFocused","useState","OutsideClickBox","position","bg","jsx","PrimaryTextInput","Enter","SearchIcon","height","bottom","cursor","transition","XIcon","length","SearchBox"],"mappings":"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"}
+{"version":3,"file":"sd-component-library72.js","sources":["../src/components/inputs/search-input/presentational/search-input.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { useDependantState } from \"../../../../core/custom-hooks\";\nimport { OutsideClickBox } from \"../../../boxes/outside-click-box\";\nimport { PrimaryTextInput } from \"../../primary-text-input\";\nimport { SearchBox } from \"../partials/search-box\";\nimport { SearchIcon, XIcon } from \"./assets\";\nimport { SearchInputProps } from \"./interfaces\";\n\nfunction onChangeWrapper(\n  newValue: string,\n  oldValue: string,\n  setCurrentValue: React.Dispatch<React.SetStateAction<string | undefined>>,\n  onChange: undefined | ((newValue: string, oldValue: string) => void)\n) {\n  onChange?.(newValue, oldValue);\n  setCurrentValue(newValue);\n}\n\n/**\n * Search input component.\n */\nexport function SearchInput(\n  props: SearchInputProps\n): React.ReactElement<SearchInputProps> {\n  const {\n    onClickSearch,\n    onClickClose,\n    hideX,\n    m,\n    mt,\n    mr,\n    mb,\n    ml,\n    onChange,\n    padding,\n    textAlign,\n    placeholder = \"Enter your Search\",\n    focusInput,\n    value,\n    width,\n    searchRight,\n    searchColor,\n    searchResults,\n    useRouterLinks = false,\n    sx,\n    id,\n    containerSx,\n    xColor = \"#434A54\",\n    searchBottom = \"15px\",\n    xBottom = \"16px\",\n    maxWidth,\n  } = props;\n\n  const [currentValue, setCurrentValue] = useDependantState(value);\n\n  const fill = searchColor ? searchColor : currentValue ? \"#4568F9\" : \"#CCD0DB\";\n  const defaultRight = hideX ? \"15px\" : \"40px\";\n  const right = hideX\n    ? searchRight\n      ? searchRight\n      : defaultRight\n    : defaultRight;\n\n  const handleSearch = () => {\n    if (currentValue && onClickSearch) {\n      onClickSearch(currentValue);\n    }\n  };\n\n  const [focused, setFocused] = useState(false);\n\n  return (\n    <OutsideClickBox\n      onClickOutside={() => setFocused(false)}\n      sx={{\n        position: \"relative\",\n        bg: \"white\",\n        width,\n        m,\n        mt,\n        mr,\n        mb,\n        ml,\n        maxWidth,\n        ...containerSx,\n      }}\n      data-test=\"search-input\"\n    >\n      <PrimaryTextInput\n        onChange={(newValue, oldValue) =>\n          onChangeWrapper(newValue, oldValue, setCurrentValue, onChange)\n        }\n        {...{ padding, textAlign, value, placeholder, focusInput, sx, id }}\n        onKeyPress={{\n          Enter: handleSearch,\n        }}\n        onFocus={() => setFocused(true)}\n      />\n\n      <SearchIcon\n        style={{\n          height: \"18px\",\n          position: \"absolute\",\n          right: right,\n          bottom: searchBottom,\n          fill: fill,\n          cursor: currentValue ? \"pointer\" : \"default\",\n          transition: \"all .1s\",\n        }}\n        onClick={handleSearch}\n      />\n\n      {!hideX && (\n        <XIcon\n          style={{\n            height: \"16px\",\n            position: \"absolute\",\n            right: \"10px\",\n            bottom: xBottom,\n            fill: xColor,\n            cursor: \"pointer\",\n          }}\n          onClick={() => {\n            onClickClose?.();\n            onChangeWrapper(\"\", currentValue || \"\", setCurrentValue, onChange);\n          }}\n        />\n      )}\n      {!!searchResults?.length && focused && (\n        <SearchBox\n          searchResults={searchResults}\n          useRouterLinks={useRouterLinks}\n        />\n      )}\n    </OutsideClickBox>\n  );\n}\n"],"names":["onChangeWrapper","newValue","oldValue","setCurrentValue","onChange","SearchInput","props","onClickSearch","onClickClose","hideX","m","mt","mr","mb","ml","padding","textAlign","placeholder","focusInput","value","width","searchRight","searchColor","searchResults","useRouterLinks","sx","id","containerSx","xColor","searchBottom","xBottom","maxWidth","currentValue","useDependantState","fill","defaultRight","right","handleSearch","focused","setFocused","useState","jsxs","OutsideClickBox","jsx","PrimaryTextInput","SearchIcon","XIcon","SearchBox"],"mappings":"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"}

package/lib/sd-component-library721.js

@@ -1,7 +1,7 @@
-import f from "./sd-component-library634.js";
-import i from "./sd-component-library606.js";
-import g from "./sd-component-library665.js";
-import n from "./sd-component-library633.js";
+import f from "./sd-component-library641.js";
+import i from "./sd-component-library623.js";
+import g from "./sd-component-library669.js";
+import n from "./sd-component-library640.js";
 function C(t, r, o) {
   n(2, arguments);
   var e = i(t), a = f(r), m = g(e, o) - a;

package/lib/sd-component-library722.js

@@ -1,7 +1,7 @@
-import m from "./sd-component-library634.js";
-import f from "./sd-component-library606.js";
-import i from "./sd-component-library663.js";
-import s from "./sd-component-library633.js";
+import m from "./sd-component-library641.js";
+import f from "./sd-component-library623.js";
+import i from "./sd-component-library667.js";
+import s from "./sd-component-library640.js";
 function d(t, r) {
   s(2, arguments);
   var e = f(t), o = m(r), a = i(e) - o;

package/lib/sd-component-library723.js

@@ -1,7 +1,7 @@
-import k from "./sd-component-library606.js";
-import D from "./sd-component-library633.js";
-import m from "./sd-component-library634.js";
-import { getDefaultOptions as S } from "./sd-component-library637.js";
+import k from "./sd-component-library623.js";
+import D from "./sd-component-library640.js";
+import m from "./sd-component-library641.js";
+import { getDefaultOptions as S } from "./sd-component-library644.js";
 function U(O, p, e) {
   var r, o, a, l, n, i, d, v;
   D(2, arguments);

package/lib/sd-component-library724.js

@@ -1,6 +1,6 @@
-import m from "./sd-component-library606.js";
-import v from "./sd-component-library633.js";
-import s from "./sd-component-library634.js";
+import m from "./sd-component-library623.js";
+import v from "./sd-component-library640.js";
+import s from "./sd-component-library641.js";
 function y(t, a) {
   v(2, arguments);
   var r = s(a);

package/lib/sd-component-library725.js

@@ -17,14 +17,15 @@ const D = (Y) => {
   }, []);
   if (!d)
     return null;
-  const {
-    x: c,
-    y: l
-  } = X(x, s);
-  let {
-    x: t,
-    y: n
-  } = X(x + p, s, x);
+  const { x: c, y: l } = X(
+    x,
+    s
+  );
+  let { x: t, y: n } = X(
+    x + p,
+    s,
+    x
+  );
   const f = (o, b) => ({
     transform: `rotateY(${C ? 180 : 0}deg)`,
     transformOrigin: `${o}px ${b}px`
@@ -32,16 +33,50 @@ const D = (Y) => {
   if (Math.round(s) === 180) {
     const o = n - r / 2 - g;
     return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-      /* @__PURE__ */ e.jsx("line", { x1: c, y1: l, x2: t, y2: n, stroke: $, strokeWidth: r }),
-      /* @__PURE__ */ e.jsx("text", { ref: m, x: t - a / 2, y: o, style: f(t, o), children: d })
+      /* @__PURE__ */ e.jsx(
+        "line",
+        {
+          x1: c,
+          y1: l,
+          x2: t,
+          y2: n,
+          stroke: $,
+          strokeWidth: r
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "text",
+        {
+          ref: m,
+          x: t - a / 2,
+          y: o,
+          style: f(t, o),
+          children: d
+        }
+      )
     ] });
   }
   const u = B(s), y = Math.sin(u), h = Math.sign(y);
   k && (t = c + p * -h, n = l);
   const j = r / 2 * Math.cos(u), L = r / 2 * y, i = r / 2 / h, M = t - (s < 180 ? 1 : 0) * a, S = t - a * h, R = M + a / 2, W = n - i - g;
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("path", { d: `M${c + j},${l + L} L${c - j},${l - L} L${t},${n - i} L${S},${n - i} L${S},${n + i} L${t},${n + i} Z`, fill: $ }),
-    /* @__PURE__ */ e.jsx("text", { ref: m, x: M, y: W, style: f(R, W), children: d })
+    /* @__PURE__ */ e.jsx(
+      "path",
+      {
+        d: `M${c + j},${l + L} L${c - j},${l - L} L${t},${n - i} L${S},${n - i} L${S},${n + i} L${t},${n + i} Z`,
+        fill: $
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      "text",
+      {
+        ref: m,
+        x: M,
+        y: W,
+        style: f(R, W),
+        children: d
+      }
+    )
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library725.js","sources":["../src/components/meters/common-outline-meter-partials/label-pointer/label-pointer.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport { degToRad, getCoordinateForArc } from \"../../outline-meter/utils\";\nimport { LabelPointerProps as Props } from \"./interfaces\";\n\nexport const LabelPointer: React.FC<Props> = (props) => {\n  const {\n    pointerLength,\n    pointerWidth,\n    radius,\n    alpha,\n    color,\n    label,\n    textBottomMargin,\n    horizontal,\n    counterClockWise,\n  } = props;\n\n  const [textWidth, setTextWidth] = useState(0);\n  const ref = useCallback((text: SVGTextElement) => {\n    if (text) setTextWidth(text.getBoundingClientRect().width);\n  }, []);\n\n  if (!label) return null;\n\n  const { x: pointerStartX, y: pointerStartY } = getCoordinateForArc(\n    radius,\n    alpha\n  );\n\n  let { x: pointerEndX, y: pointerEndY } = getCoordinateForArc(\n    radius + pointerLength,\n    alpha,\n    radius\n  );\n\n  const getStyle = (x: number, y: number) => ({\n    transform: `rotateY(${counterClockWise ? 180 : 0}deg)`,\n    transformOrigin: `${x}px ${y}px`,\n  });\n\n  if (Math.round(alpha) === 180) {\n    const textY = pointerEndY - pointerWidth / 2 - textBottomMargin;\n\n    return (\n      <>\n        <line\n          x1={pointerStartX}\n          y1={pointerStartY}\n          x2={pointerEndX}\n          y2={pointerEndY}\n          stroke={color}\n          strokeWidth={pointerWidth}\n        />\n\n        <text\n          ref={ref}\n          x={pointerEndX - textWidth / 2}\n          y={textY}\n          style={getStyle(pointerEndX, textY)}\n        >\n          {label}\n        </text>\n      </>\n    );\n  }\n\n  const alphaInRad = degToRad(alpha);\n  const sinAlpha = Math.sin(alphaInRad);\n  const sinAlphaSign = Math.sign(sinAlpha);\n\n  if (horizontal) {\n    pointerEndX = pointerStartX + pointerLength * -sinAlphaSign;\n    pointerEndY = pointerStartY;\n  }\n\n  const dx = (pointerWidth / 2) * Math.cos(alphaInRad);\n  const dy = (pointerWidth / 2) * sinAlpha;\n  const endDy = pointerWidth / 2 / sinAlphaSign;\n  const textStartX = pointerEndX - (alpha < 180 ? 1 : 0) * textWidth;\n  const textEndX = pointerEndX - textWidth * sinAlphaSign;\n  const textMiddleX = textStartX + textWidth / 2;\n  const textY = pointerEndY - endDy - textBottomMargin;\n\n  return (\n    <>\n      <path\n        d={`M${pointerStartX + dx},${pointerStartY + dy} L${\n          pointerStartX - dx\n        },${pointerStartY - dy} L${pointerEndX},${\n          pointerEndY - endDy\n        } L${textEndX},${pointerEndY - endDy} L${textEndX},${\n          pointerEndY + endDy\n        } L${pointerEndX},${pointerEndY + endDy} Z`}\n        fill={color}\n      />\n\n      <text\n        ref={ref}\n        x={textStartX}\n        y={textY}\n        style={getStyle(textMiddleX, textY)}\n      >\n        {label}\n      </text>\n    </>\n  );\n};\n"],"names":["LabelPointer","props","pointerLength","pointerWidth","radius","alpha","color","label","textBottomMargin","horizontal","counterClockWise","textWidth","setTextWidth","useState","ref","useCallback","text","getBoundingClientRect","width","x","pointerStartX","y","pointerStartY","getCoordinateForArc","pointerEndX","pointerEndY","getStyle","transform","transformOrigin","Math","round","textY","jsxs","Fragment","jsx","alphaInRad","degToRad","sinAlpha","sin","sinAlphaSign","sign","dx","cos","dy","endDy","textStartX","textEndX","textMiddleX"],"mappings":";;;AAKO,MAAMA,IAAiCC,CAAUA,MAAA;AAChD,QAAA;AAAA,IACJC,eAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,QAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,kBAAAA;AAAAA,EACET,IAAAA,GAEE,CAACU,GAAWC,CAAY,IAAIC,EAAS,CAAC,GACtCC,IAAMC,EAAY,CAACC,MAAyB;AAC5CA,IAAAA,KAAmBA,EAAAA,EAAKC,sBAAsB,EAAEC,KAAK;AAAA,EAC3D,GAAG,CAAE,CAAA;AAEL,MAAI,CAACX;AAAc,WAAA;AAEb,QAAA;AAAA,IAAEY,GAAGC;AAAAA,IAAeC,GAAGC;AAAAA,EAAAA,IAAkBC,EAC7CnB,GACAC,CACF;AAEI,MAAA;AAAA,IAAEc,GAAGK;AAAAA,IAAaH,GAAGI;AAAAA,EAAgBF,IAAAA,EACvCnB,IAASF,GACTG,GACAD,CACF;AAEMsB,QAAAA,IAAWA,CAACP,GAAWE,OAAe;AAAA,IAC1CM,WAAY,WAAUjB,IAAmB,MAAM,CAAE;AAAA,IACjDkB,iBAAkB,GAAET,CAAE,MAAKE,CAAE;AAAA,EAAA;AAG/B,MAAIQ,KAAKC,MAAMzB,CAAK,MAAM,KAAK;AACvB0B,UAAAA,IAAQN,IAActB,IAAe,IAAIK;AAE/C,WAEIwB,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,MAAAC,gBAAAA,EAAA,IAAC,QACC,EAAA,IAAId,GACJ,IAAIE,GACJ,IAAIE,GACJ,IAAIC,GACJ,QAAQnB,GACR,aAAaH,GAAa;AAAA,MAG3B+B,gBAAAA,EAAA,IAAA,QAAA,EACC,KAAApB,GACA,GAAGU,IAAcb,IAAY,GAC7B,GAAGoB,GACH,OAAOL,EAASF,GAAaO,CAAK,GAEjCxB,UACHA,GAAA;AAAA,IACF,EAAA,CAAA;AAAA,EAEJ;AAEM4B,QAAAA,IAAaC,EAAS/B,CAAK,GAC3BgC,IAAWR,KAAKS,IAAIH,CAAU,GAC9BI,IAAeV,KAAKW,KAAKH,CAAQ;AAEvC,EAAI5B,MACYW,IAAAA,IAAgBlB,IAAgB,CAACqC,GACjCjB,IAAAA;AAGhB,QAAMmB,IAAMtC,IAAe,IAAK0B,KAAKa,IAAIP,CAAU,GAC7CQ,IAAMxC,IAAe,IAAKkC,GAC1BO,IAAQzC,IAAe,IAAIoC,GAC3BM,IAAarB,KAAenB,IAAQ,MAAM,IAAI,KAAKM,GACnDmC,IAAWtB,IAAcb,IAAY4B,GACrCQ,IAAcF,IAAalC,IAAY,GACvCoB,IAAQN,IAAcmB,IAAQpC;AAEpC,SAEIwB,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,IAAAC,gBAAAA,MAAC,UACC,GAAI,IAAGd,IAAgBqB,CAAG,IAAGnB,IAAgBqB,CAAG,KAC9CvB,IAAgBqB,CACjB,IAAGnB,IAAgBqB,CAAG,KAAInB,CAAY,IACrCC,IAAcmB,CACf,KAAIE,CAAS,IAAGrB,IAAcmB,CAAM,KAAIE,CAAS,IAChDrB,IAAcmB,CACf,KAAIpB,CAAY,IAAGC,IAAcmB,CAAM,MACxC,MAAMtC,GAAM;AAAA,IAGb4B,gBAAAA,EAAA,IAAA,QAAA,EACC,KAAApB,GACA,GAAG+B,GACH,GAAGd,GACH,OAAOL,EAASqB,GAAahB,CAAK,GAEjCxB,UACHA,EAAA,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library725.js","sources":["../src/components/meters/common-outline-meter-partials/label-pointer/label-pointer.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport { degToRad, getCoordinateForArc } from \"../../outline-meter/utils\";\nimport { LabelPointerProps as Props } from \"./interfaces\";\n\nexport const LabelPointer: React.FC<Props> = (props) => {\n  const {\n    pointerLength,\n    pointerWidth,\n    radius,\n    alpha,\n    color,\n    label,\n    textBottomMargin,\n    horizontal,\n    counterClockWise,\n  } = props;\n\n  const [textWidth, setTextWidth] = useState(0);\n  const ref = useCallback((text: SVGTextElement) => {\n    if (text) setTextWidth(text.getBoundingClientRect().width);\n  }, []);\n\n  if (!label) return null;\n\n  const { x: pointerStartX, y: pointerStartY } = getCoordinateForArc(\n    radius,\n    alpha\n  );\n\n  let { x: pointerEndX, y: pointerEndY } = getCoordinateForArc(\n    radius + pointerLength,\n    alpha,\n    radius\n  );\n\n  const getStyle = (x: number, y: number) => ({\n    transform: `rotateY(${counterClockWise ? 180 : 0}deg)`,\n    transformOrigin: `${x}px ${y}px`,\n  });\n\n  if (Math.round(alpha) === 180) {\n    const textY = pointerEndY - pointerWidth / 2 - textBottomMargin;\n\n    return (\n      <>\n        <line\n          x1={pointerStartX}\n          y1={pointerStartY}\n          x2={pointerEndX}\n          y2={pointerEndY}\n          stroke={color}\n          strokeWidth={pointerWidth}\n        />\n\n        <text\n          ref={ref}\n          x={pointerEndX - textWidth / 2}\n          y={textY}\n          style={getStyle(pointerEndX, textY)}\n        >\n          {label}\n        </text>\n      </>\n    );\n  }\n\n  const alphaInRad = degToRad(alpha);\n  const sinAlpha = Math.sin(alphaInRad);\n  const sinAlphaSign = Math.sign(sinAlpha);\n\n  if (horizontal) {\n    pointerEndX = pointerStartX + pointerLength * -sinAlphaSign;\n    pointerEndY = pointerStartY;\n  }\n\n  const dx = (pointerWidth / 2) * Math.cos(alphaInRad);\n  const dy = (pointerWidth / 2) * sinAlpha;\n  const endDy = pointerWidth / 2 / sinAlphaSign;\n  const textStartX = pointerEndX - (alpha < 180 ? 1 : 0) * textWidth;\n  const textEndX = pointerEndX - textWidth * sinAlphaSign;\n  const textMiddleX = textStartX + textWidth / 2;\n  const textY = pointerEndY - endDy - textBottomMargin;\n\n  return (\n    <>\n      <path\n        d={`M${pointerStartX + dx},${pointerStartY + dy} L${\n          pointerStartX - dx\n        },${pointerStartY - dy} L${pointerEndX},${\n          pointerEndY - endDy\n        } L${textEndX},${pointerEndY - endDy} L${textEndX},${\n          pointerEndY + endDy\n        } L${pointerEndX},${pointerEndY + endDy} Z`}\n        fill={color}\n      />\n\n      <text\n        ref={ref}\n        x={textStartX}\n        y={textY}\n        style={getStyle(textMiddleX, textY)}\n      >\n        {label}\n      </text>\n    </>\n  );\n};\n"],"names":["LabelPointer","props","pointerLength","pointerWidth","radius","alpha","color","label","textBottomMargin","horizontal","counterClockWise","textWidth","setTextWidth","useState","ref","useCallback","text","pointerStartX","pointerStartY","getCoordinateForArc","pointerEndX","pointerEndY","getStyle","x","y","textY","jsxs","Fragment","jsx","alphaInRad","degToRad","sinAlpha","sinAlphaSign","dx","dy","endDy","textStartX","textEndX","textMiddleX"],"mappings":"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"}

package/lib/sd-component-library73.js

@@ -7,36 +7,62 @@ import { HorizontalDivider as l } from "./sd-component-library51.js";
 import { ResponsiveText as a } from "./sd-component-library145.js";
 import { PrimaryBadge as m } from "./sd-component-library8.js";
 const C = function(x) {
-  const {
-    searchResults: i,
-    useRouterLinks: s
-  } = x, n = (o, r) => /* @__PURE__ */ e.jsx(t, { sx: {
-    p: "10px 16px",
-    cursor: "pointer",
-    ":hover": {
-      bg: "#eff4ff"
+  const { searchResults: i, useRouterLinks: s } = x, n = (o, r) => /* @__PURE__ */ e.jsx(
+    t,
+    {
+      sx: {
+        p: "10px 16px",
+        cursor: "pointer",
+        ":hover": { bg: "#eff4ff" }
+      },
+      onClick: r,
+      children: /* @__PURE__ */ e.jsxs(
+        d,
+        {
+          flexDirection: ["column-reverse", "row"],
+          justifyContent: ["space-between"],
+          children: [
+            /* @__PURE__ */ e.jsx(
+              a,
+              {
+                width: ["max-content"],
+                fontSizeWeight: [[16, "regular"]],
+                color: "cl_darkGrey",
+                cursor: "pointer",
+                children: o.text
+              }
+            ),
+            !!o.type && /* @__PURE__ */ e.jsx(t, { width: "max-content", mb: ["8px", "0"], children: /* @__PURE__ */ e.jsx(m, { children: o.type }) })
+          ]
+        }
+      )
     }
-  }, onClick: r, children: /* @__PURE__ */ e.jsxs(d, { flexDirection: ["column-reverse", "row"], justifyContent: ["space-between"], children: [
-    /* @__PURE__ */ e.jsx(a, { width: ["max-content"], fontSizeWeight: [[16, "regular"]], color: "cl_darkGrey", cursor: "pointer", children: o.text }),
-    !!o.type && /* @__PURE__ */ e.jsx(t, { width: "max-content", mb: ["8px", "0"], children: /* @__PURE__ */ e.jsx(m, { children: o.type }) })
-  ] }) });
-  return /* @__PURE__ */ e.jsx(t, { sx: {
-    position: "absolute",
-    top: "100%",
-    bg: "white",
-    width: "100%",
-    borderRadius: ["0", "0px 0px 3px 3px"],
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderTopStyle: "none",
-    borderColor: "#C8CCE5",
-    boxShadow: "2px 3px 10px rgba(211,223,255,0.25)"
-  }, "data-test": "search-box", children: i.map((o, r) => /* @__PURE__ */ e.jsxs(p.Fragment, { children: [
-    s ? /* @__PURE__ */ e.jsx(c, { to: o.url, style: {
-      textDecoration: "none"
-    }, children: n(o) }) : n(o, () => window.location.href = "https://www.selfdecode.com" + o.url),
-    r + 1 !== i.length && /* @__PURE__ */ e.jsx(l, { color: "cl_lightGrey" })
-  ] }, `${r}-${o.url}`)) });
+  );
+  return /* @__PURE__ */ e.jsx(
+    t,
+    {
+      sx: {
+        position: "absolute",
+        top: "100%",
+        bg: "white",
+        width: "100%",
+        borderRadius: ["0", "0px 0px 3px 3px"],
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderTopStyle: "none",
+        borderColor: "#C8CCE5",
+        boxShadow: "2px 3px 10px rgba(211,223,255,0.25)"
+      },
+      "data-test": "search-box",
+      children: i.map((o, r) => /* @__PURE__ */ e.jsxs(p.Fragment, { children: [
+        s ? /* @__PURE__ */ e.jsx(c, { to: o.url, style: { textDecoration: "none" }, children: n(o) }) : n(
+          o,
+          () => window.location.href = "https://www.selfdecode.com" + o.url
+        ),
+        r + 1 !== i.length && /* @__PURE__ */ e.jsx(l, { color: "cl_lightGrey" })
+      ] }, `${r}-${o.url}`))
+    }
+  );
 };
 export {
   C as SearchBox

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library73.js","sources":["../src/components/inputs/search-input/partials/search-box/search-box.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link } from \"react-router-dom\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { PrimaryBadge } from \"../../../../badges/primary-badge\";\nimport { HorizontalDivider } from \"../../../../dividers/horizontal-divider\";\nimport { ResponsiveText } from \"../../../../texts/responsive-text\";\nimport { SearchBoxProps, SearchResult } from \"./interfaces\";\n\nexport const SearchBox = function (props: SearchBoxProps) {\n  const { searchResults, useRouterLinks } = props;\n\n  const getLinkContent = (result: SearchResult, onClick?: () => void) => (\n    <Box\n      sx={{\n        p: \"10px 16px\",\n        cursor: \"pointer\",\n        \":hover\": { bg: \"#eff4ff\" },\n      }}\n      onClick={onClick}\n    >\n      <Flex\n        flexDirection={[\"column-reverse\", \"row\"]}\n        justifyContent={[\"space-between\"]}\n      >\n        <ResponsiveText\n          width={[\"max-content\"]}\n          fontSizeWeight={[[16, \"regular\"]]}\n          color=\"cl_darkGrey\"\n          cursor=\"pointer\"\n        >\n          {result.text}\n        </ResponsiveText>\n        {!!result.type && (\n          <Box width={\"max-content\"} mb={[\"8px\", \"0\"]}>\n            <PrimaryBadge>{result.type}</PrimaryBadge>\n          </Box>\n        )}\n      </Flex>\n    </Box>\n  );\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        top: \"100%\",\n        bg: \"white\",\n        width: \"100%\",\n        borderRadius: [\"0\", \"0px 0px 3px 3px\"],\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderTopStyle: \"none\",\n        borderColor: \"#C8CCE5\",\n        boxShadow: \"2px 3px 10px rgba(211,223,255,0.25)\",\n      }}\n      data-test=\"search-box\"\n    >\n      {searchResults.map((result, index) => (\n        <React.Fragment key={`${index}-${result.url}`}>\n          {useRouterLinks ? (\n            <Link to={result.url} style={{ textDecoration: \"none\" }}>\n              {getLinkContent(result)}\n            </Link>\n          ) : (\n            getLinkContent(\n              result,\n              () =>\n                (window.location.href =\n                  \"https://www.selfdecode.com\" + result.url)\n            )\n          )}\n          {index + 1 !== searchResults.length && (\n            <HorizontalDivider color=\"cl_lightGrey\" />\n          )}\n        </React.Fragment>\n      ))}\n    </Box>\n  );\n};\n"],"names":["SearchBox","props","searchResults","useRouterLinks","getLinkContent","result","onClick","jsx","Box","p","cursor","bg","jsxs","Flex","ResponsiveText","text","type","PrimaryBadge","position","top","width","borderRadius","borderWidth","borderStyle","borderTopStyle","borderColor","boxShadow","map","index","React","Link","url","textDecoration","window","location","href","length","HorizontalDivider"],"mappings":";;;;;;;;AAUaA,MAAAA,IAAY,SAAUC,GAAuB;AAClD,QAAA;AAAA,IAAEC,eAAAA;AAAAA,IAAeC,gBAAAA;AAAAA,EAAmBF,IAAAA,GAEpCG,IAAiBA,CAACC,GAAsBC,MAC5CC,gBAAAA,EAAAA,IAACC,KACC,IAAI;AAAA,IACFC,GAAG;AAAA,IACHC,QAAQ;AAAA,IACR,UAAU;AAAA,MAAEC,IAAI;AAAA,IAAU;AAAA,EAE5B,GAAA,SAAAL,GAEA,UAACM,gBAAAA,OAAAC,GAAA,EACC,eAAe,CAAC,kBAAkB,KAAK,GACvC,gBAAgB,CAAC,eAAe,GAEhC,UAAA;AAAA,IAAAN,gBAAAA,EAAA,IAACO,KACC,OAAO,CAAC,aAAa,GACrB,gBAAgB,CAAC,CAAC,IAAI,SAAS,CAAC,GAChC,OAAM,eACN,QAAO,WAENT,YAAOU,MACV;AAAA,IACC,CAAC,CAACV,EAAOW,QACRT,gBAAAA,EAAA,IAACC,KAAI,OAAO,eAAe,IAAI,CAAC,OAAO,GAAG,GACxC,gCAACS,GAAcZ,EAAAA,UAAAA,EAAOW,KAAK,CAAA,GAC7B;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAIA,SAAAT,gBAAAA,EAAA,IAACC,KACC,IAAI;AAAA,IACFU,UAAU;AAAA,IACVC,KAAK;AAAA,IACLR,IAAI;AAAA,IACJS,OAAO;AAAA,IACPC,cAAc,CAAC,KAAK,iBAAiB;AAAA,IACrCC,aAAa;AAAA,IACbC,aAAa;AAAA,IACbC,gBAAgB;AAAA,IAChBC,aAAa;AAAA,IACbC,WAAW;AAAA,EACb,GACA,aAAU,cAETxB,UAAcyB,EAAAA,IAAI,CAACtB,GAAQuB,MAC1BhB,gBAAAA,EAAAA,KAACiB,EAAM,UAAN,EACE1B,UAAAA;AAAAA,IAAAA,IACEI,gBAAAA,EAAA,IAAAuB,GAAA,EAAK,IAAIzB,EAAO0B,KAAK,OAAO;AAAA,MAAEC,gBAAgB;AAAA,IAC5C5B,GAAAA,UAAAA,EAAeC,CAAM,EACxB,CAAA,IAEAD,EACEC,GACA,MACG4B,OAAOC,SAASC,OACf,+BAA+B9B,EAAO0B,GAC5C;AAAA,IAEDH,IAAQ,MAAM1B,EAAckC,UAC1B7B,gBAAAA,EAAA,IAAA8B,GAAA,EAAkB,OAAM,gBAC1B;AAAA,EAAA,KAfmB,GAAET,CAAM,IAAGvB,EAAO0B,GAAI,EAgB5C,CACD,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library73.js","sources":["../src/components/inputs/search-input/partials/search-box/search-box.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link } from \"react-router-dom\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { PrimaryBadge } from \"../../../../badges/primary-badge\";\nimport { HorizontalDivider } from \"../../../../dividers/horizontal-divider\";\nimport { ResponsiveText } from \"../../../../texts/responsive-text\";\nimport { SearchBoxProps, SearchResult } from \"./interfaces\";\n\nexport const SearchBox = function (props: SearchBoxProps) {\n  const { searchResults, useRouterLinks } = props;\n\n  const getLinkContent = (result: SearchResult, onClick?: () => void) => (\n    <Box\n      sx={{\n        p: \"10px 16px\",\n        cursor: \"pointer\",\n        \":hover\": { bg: \"#eff4ff\" },\n      }}\n      onClick={onClick}\n    >\n      <Flex\n        flexDirection={[\"column-reverse\", \"row\"]}\n        justifyContent={[\"space-between\"]}\n      >\n        <ResponsiveText\n          width={[\"max-content\"]}\n          fontSizeWeight={[[16, \"regular\"]]}\n          color=\"cl_darkGrey\"\n          cursor=\"pointer\"\n        >\n          {result.text}\n        </ResponsiveText>\n        {!!result.type && (\n          <Box width={\"max-content\"} mb={[\"8px\", \"0\"]}>\n            <PrimaryBadge>{result.type}</PrimaryBadge>\n          </Box>\n        )}\n      </Flex>\n    </Box>\n  );\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        top: \"100%\",\n        bg: \"white\",\n        width: \"100%\",\n        borderRadius: [\"0\", \"0px 0px 3px 3px\"],\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderTopStyle: \"none\",\n        borderColor: \"#C8CCE5\",\n        boxShadow: \"2px 3px 10px rgba(211,223,255,0.25)\",\n      }}\n      data-test=\"search-box\"\n    >\n      {searchResults.map((result, index) => (\n        <React.Fragment key={`${index}-${result.url}`}>\n          {useRouterLinks ? (\n            <Link to={result.url} style={{ textDecoration: \"none\" }}>\n              {getLinkContent(result)}\n            </Link>\n          ) : (\n            getLinkContent(\n              result,\n              () =>\n                (window.location.href =\n                  \"https://www.selfdecode.com\" + result.url)\n            )\n          )}\n          {index + 1 !== searchResults.length && (\n            <HorizontalDivider color=\"cl_lightGrey\" />\n          )}\n        </React.Fragment>\n      ))}\n    </Box>\n  );\n};\n"],"names":["SearchBox","props","searchResults","useRouterLinks","getLinkContent","result","onClick","jsx","Box","jsxs","Flex","ResponsiveText","PrimaryBadge","index","React","Link","HorizontalDivider"],"mappings":";;;;;;;;AAUa,MAAAA,IAAY,SAAUC,GAAuB;AAClD,QAAA,EAAE,eAAAC,GAAe,gBAAAC,EAAmB,IAAAF,GAEpCG,IAAiB,CAACC,GAAsBC,MAC5CC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,UAAU,EAAE,IAAI,UAAU;AAAA,MAC5B;AAAA,MACA,SAAAF;AAAA,MAEA,UAAAG,gBAAAA,EAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,eAAe,CAAC,kBAAkB,KAAK;AAAA,UACvC,gBAAgB,CAAC,eAAe;AAAA,UAEhC,UAAA;AAAA,YAAAH,gBAAAA,EAAA;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,OAAO,CAAC,aAAa;AAAA,gBACrB,gBAAgB,CAAC,CAAC,IAAI,SAAS,CAAC;AAAA,gBAChC,OAAM;AAAA,gBACN,QAAO;AAAA,gBAEN,UAAON,EAAA;AAAA,cAAA;AAAA,YACV;AAAA,YACC,CAAC,CAACA,EAAO,QACRE,gBAAAA,EAAA,IAACC,KAAI,OAAO,eAAe,IAAI,CAAC,OAAO,GAAG,GACxC,gCAACI,GAAc,EAAA,UAAAP,EAAO,KAAK,CAAA,GAC7B;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAKF,SAAAE,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,cAAc,CAAC,KAAK,iBAAiB;AAAA,QACrC,aAAa;AAAA,QACb,aAAa;AAAA,QACb,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,WAAW;AAAA,MACb;AAAA,MACA,aAAU;AAAA,MAET,UAAAN,EAAc,IAAI,CAACG,GAAQQ,MACzBJ,gBAAAA,EAAAA,KAAAK,EAAM,UAAN,EACE,UAAA;AAAA,QAAAX,IACEI,gBAAAA,EAAA,IAAAQ,GAAA,EAAK,IAAIV,EAAO,KAAK,OAAO,EAAE,gBAAgB,OAAO,GACnD,UAAeD,EAAAC,CAAM,EACxB,CAAA,IAEAD;AAAA,UACEC;AAAA,UACA,MACG,OAAO,SAAS,OACf,+BAA+BA,EAAO;AAAA,QAC5C;AAAA,QAEDQ,IAAQ,MAAMX,EAAc,UAC1BK,gBAAAA,EAAA,IAAAS,GAAA,EAAkB,OAAM,gBAAe;AAAA,MAAA,EAAA,GAdvB,GAAGH,CAAK,IAAIR,EAAO,GAAG,EAgB3C,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/lib/sd-component-library74.js

@@ -1,7 +1,7 @@
 import { j as r } from "./sd-component-library195.js";
 import "./sd-component-library198.js";
 import { Box as B } from "./sd-component-library199.js";
-import { SecondaryInputLabels as I } from "./sd-component-library232.js";
+import { SecondaryInputLabels as I } from "./sd-component-library229.js";
 import { NumberInput as A } from "./sd-component-library68.js";
 const w = (n) => {
   const {
@@ -26,18 +26,40 @@ const w = (n) => {
     errorBackground: y,
     onFocus: v
   } = n;
-  return /* @__PURE__ */ r.jsxs(B, { sx: {
-    m,
-    mb: s,
-    ml: i,
-    mr: d,
-    mt: u,
-    width: p,
-    padding: c
-  }, "data-test": "secondary-number-input", children: [
-    /* @__PURE__ */ r.jsx(I, { ...n, "data-test": "secondary-number-input-labels" }),
-    /* @__PURE__ */ r.jsx(A, { variant: `primary${f ? "Error" : ""}`, min: b, max: g, textAlign: l, value: e, placeholder: t, focusInput: a, onChange: o, padding: x, inputMode: h, useAdvancedBehavior: j, errorBackground: y, onFocus: v })
-  ] });
+  return /* @__PURE__ */ r.jsxs(
+    B,
+    {
+      sx: { m, mb: s, ml: i, mr: d, mt: u, width: p, padding: c },
+      "data-test": "secondary-number-input",
+      children: [
+        /* @__PURE__ */ r.jsx(
+          I,
+          {
+            ...n,
+            "data-test": "secondary-number-input-labels"
+          }
+        ),
+        /* @__PURE__ */ r.jsx(
+          A,
+          {
+            variant: `primary${f ? "Error" : ""}`,
+            min: b,
+            max: g,
+            textAlign: l,
+            value: e,
+            placeholder: t,
+            focusInput: a,
+            onChange: o,
+            padding: x,
+            inputMode: h,
+            useAdvancedBehavior: j,
+            errorBackground: y,
+            onFocus: v
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   w as SecondaryNumberInput

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library74.js","sources":["../src/components/inputs/secondary-number-input/secondary-number-input.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { NumberInput } from \"../number-input\";\nimport { SecondaryInputLabels } from \"../secondary-text-input/partials/secondary-input-labels\";\nimport { SecondaryNumberInputProps } from \"./interfaces\";\n\nexport const SecondaryNumberInput: React.FC<SecondaryNumberInputProps> = (\n  props\n) => {\n  const {\n    placeholder,\n    value,\n    onChange,\n    focusInput,\n    m,\n    mb,\n    ml,\n    mr,\n    mt,\n    width,\n    padding,\n    inputPadding = [\"14px 0\"],\n    textAlign,\n    min,\n    max,\n    errorMessage,\n    inputMode,\n    useAdvancedBehavior,\n    errorBackground,\n    onFocus,\n  } = props;\n\n  return (\n    <Box\n      sx={{ m, mb, ml, mr, mt, width, padding }}\n      data-test=\"secondary-number-input\"\n    >\n      <SecondaryInputLabels\n        {...props}\n        data-test=\"secondary-number-input-labels\"\n      />\n\n      <NumberInput\n        variant={`primary${errorMessage ? \"Error\" : \"\"}`}\n        min={min}\n        max={max}\n        textAlign={textAlign}\n        value={value}\n        placeholder={placeholder}\n        focusInput={focusInput}\n        onChange={onChange}\n        padding={inputPadding}\n        inputMode={inputMode}\n        useAdvancedBehavior={useAdvancedBehavior}\n        errorBackground={errorBackground}\n        onFocus={onFocus}\n      />\n    </Box>\n  );\n};\n"],"names":["SecondaryNumberInput","props","placeholder","value","onChange","focusInput","m","mb","ml","mr","mt","width","padding","inputPadding","textAlign","min","max","errorMessage","inputMode","useAdvancedBehavior","errorBackground","onFocus","jsxs","Box","jsx","SecondaryInputLabels","NumberInput"],"mappings":";;;;;AAQO,MAAMA,IACXC,CACGA,MAAA;AACG,QAAA;AAAA,IACJC,aAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC;AAAAA,IACAC,IAAAA;AAAAA,IACAC,IAAAA;AAAAA,IACAC,IAAAA;AAAAA,IACAC,IAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,cAAAA,IAAe,CAAC,QAAQ;AAAA,IACxBC,WAAAA;AAAAA,IACAC,KAAAA;AAAAA,IACAC,KAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,SAAAA;AAAAA,EACEpB,IAAAA;AAGF,SAAAqB,gBAAAA,EAAA,KAACC,KACC,IAAI;AAAA,IAAEjB;AAAAA,IAAGC,IAAAA;AAAAA,IAAIC,IAAAA;AAAAA,IAAIC,IAAAA;AAAAA,IAAIC,IAAAA;AAAAA,IAAIC,OAAAA;AAAAA,IAAOC,SAAAA;AAAAA,EAAAA,GAChC,aAAU,0BAEV,UAAA;AAAA,IAAAY,gBAAAA,EAAA,IAACC,GACC,EAAA,GAAIxB,GACJ,aAAU,gCAA+B,CAAA;AAAA,IAG3CuB,gBAAAA,EAAAA,IAACE,KACC,SAAU,UAAST,IAAe,UAAU,EAAG,IAC/C,KAAAF,GACA,KAAAC,GACA,WAAAF,GACA,OAAAX,GACA,aAAAD,GACA,YAAAG,GACA,UAAAD,GACA,SAASS,GACT,WAAAK,GACA,qBAAAC,GACA,iBAAAC,GACA,SAAAC,GAAiB;AAAA,EAErB,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library74.js","sources":["../src/components/inputs/secondary-number-input/secondary-number-input.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { NumberInput } from \"../number-input\";\nimport { SecondaryInputLabels } from \"../secondary-text-input/partials/secondary-input-labels\";\nimport { SecondaryNumberInputProps } from \"./interfaces\";\n\nexport const SecondaryNumberInput: React.FC<SecondaryNumberInputProps> = (\n  props\n) => {\n  const {\n    placeholder,\n    value,\n    onChange,\n    focusInput,\n    m,\n    mb,\n    ml,\n    mr,\n    mt,\n    width,\n    padding,\n    inputPadding = [\"14px 0\"],\n    textAlign,\n    min,\n    max,\n    errorMessage,\n    inputMode,\n    useAdvancedBehavior,\n    errorBackground,\n    onFocus,\n  } = props;\n\n  return (\n    <Box\n      sx={{ m, mb, ml, mr, mt, width, padding }}\n      data-test=\"secondary-number-input\"\n    >\n      <SecondaryInputLabels\n        {...props}\n        data-test=\"secondary-number-input-labels\"\n      />\n\n      <NumberInput\n        variant={`primary${errorMessage ? \"Error\" : \"\"}`}\n        min={min}\n        max={max}\n        textAlign={textAlign}\n        value={value}\n        placeholder={placeholder}\n        focusInput={focusInput}\n        onChange={onChange}\n        padding={inputPadding}\n        inputMode={inputMode}\n        useAdvancedBehavior={useAdvancedBehavior}\n        errorBackground={errorBackground}\n        onFocus={onFocus}\n      />\n    </Box>\n  );\n};\n"],"names":["SecondaryNumberInput","props","placeholder","value","onChange","focusInput","mb","ml","mr","mt","width","padding","inputPadding","textAlign","min","max","errorMessage","inputMode","useAdvancedBehavior","errorBackground","onFocus","jsxs","Box","jsx","SecondaryInputLabels","NumberInput"],"mappings":";;;;;AAQa,MAAAA,IAA4D,CACvEC,MACG;AACG,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC,IAAe,CAAC,QAAQ;AAAA,IACxB,WAAAC;AAAA,IACA,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAAnB;AAGF,SAAAoB,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,IAAI,EAAE,GAAG,IAAAhB,GAAI,IAAAC,GAAI,IAAAC,GAAI,IAAAC,GAAI,OAAAC,GAAO,SAAAC,EAAQ;AAAA,MACxC,aAAU;AAAA,MAEV,UAAA;AAAA,QAAAY,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGvB;AAAA,YACJ,aAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAEAsB,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,SAAS,UAAUT,IAAe,UAAU,EAAE;AAAA,YAC9C,KAAAF;AAAA,YACA,KAAAC;AAAA,YACA,WAAAF;AAAA,YACA,OAAAV;AAAA,YACA,aAAAD;AAAA,YACA,YAAAG;AAAA,YACA,UAAAD;AAAA,YACA,SAASQ;AAAA,YACT,WAAAK;AAAA,YACA,qBAAAC;AAAA,YACA,iBAAAC;AAAA,YACA,SAAAC;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library75.js

@@ -1,34 +1,35 @@
 import { j as t } from "./sd-component-library195.js";
 import "./sd-component-library198.js";
 import { Box as c } from "./sd-component-library199.js";
-import { SecondaryInputLabels as u } from "./sd-component-library232.js";
+import { SecondaryInputLabels as u } from "./sd-component-library229.js";
 import { PrimaryTextInput as f } from "./sd-component-library70.js";
 const I = (r) => {
-  const {
-    m: e,
-    mb: s,
-    ml: o,
-    mr: n,
-    mt: a,
-    width: m,
-    padding: p,
-    sx: x,
-    inputSx: i,
-    ...d
-  } = r;
-  return /* @__PURE__ */ t.jsxs(c, { sx: {
-    m: e,
-    mb: s,
-    ml: o,
-    mr: n,
-    mt: a,
-    width: m,
-    padding: p,
-    ...x
-  }, "data-test": "secondary-text-input", children: [
-    /* @__PURE__ */ t.jsx(u, { ...r, secondLabelTextTransform: "uppercase", "data-test": "secondary-input-labels" }),
-    /* @__PURE__ */ t.jsx(f, { ...d, sx: i, "data-test": "secondary-text-input-component" })
-  ] });
+  const { m: e, mb: s, ml: o, mr: n, mt: a, width: m, padding: p, sx: x, inputSx: i, ...d } = r;
+  return /* @__PURE__ */ t.jsxs(
+    c,
+    {
+      sx: { m: e, mb: s, ml: o, mr: n, mt: a, width: m, padding: p, ...x },
+      "data-test": "secondary-text-input",
+      children: [
+        /* @__PURE__ */ t.jsx(
+          u,
+          {
+            ...r,
+            secondLabelTextTransform: "uppercase",
+            "data-test": "secondary-input-labels"
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          f,
+          {
+            ...d,
+            sx: i,
+            "data-test": "secondary-text-input-component"
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   I as SecondaryTextInput