@selfdecode/sd-component-library 4.0.89 → 4.0.91

package/lib/sd-component-library317.js

@@ -1,54 +1,28 @@
-import { j as t } from "./sd-component-library195.js";
-import x from "react";
-import u from "./sd-component-library194.js";
-import { getIsHorizontal as j, getRangeProperties as p } from "./sd-component-library231.js";
-import { OutlineMeterRange as M } from "./sd-component-library234.js";
-import { LabelPointer as b } from "./sd-component-library325.js";
-const A = x.forwardRef(
-  (e, r) => {
-    const {
-      segmented: o,
-      diameter: n,
-      arc: a,
-      totalRanges: i,
-      distanceBetweenRanges: s,
-      start: m,
-      end: c,
-      idx: d,
-      hideLabels: l,
-      isMatchedRange: g
-    } = e, f = !o, R = n / 2, { rangeArcMiddle: h } = p(
-      a,
-      i,
-      s,
-      d,
-      m,
-      c
-    );
-    return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      /* @__PURE__ */ t.jsx(
-        M,
-        {
-          ...e,
-          hideLabels: !0,
-          connected: f,
-          ref: r
-        }
-      ),
-      !l && !g && /* @__PURE__ */ t.jsx(
-        b,
-        {
-          ...e,
-          radius: R,
-          color: u.colors.cl_lightGrey,
-          alpha: h,
-          horizontal: j(e)
-        }
-      )
-    ] });
-  }
-);
+import { j as x } from "./sd-component-library195.js";
+import { getInnerX as u, degToRad as r, getInnerY as i } from "./sd-component-library91.js";
+const j = (p) => {
+  const {
+    startX: $,
+    startY: e,
+    endX: a,
+    endY: d,
+    radius: n,
+    color: A,
+    width: t,
+    roundStart: l = !0,
+    roundEnd: I = !0,
+    startAlpha: o,
+    endAlpha: s
+  } = p, c = s - o, m = u($, r(o), t), X = i(e, r(o), t), Y = u(a, r(s), t), h = i(d, r(s), t);
+  return /* @__PURE__ */ x.jsx(
+    "path",
+    {
+      d: `M${$},${e} A${n},${n} 0 ${c > 180 ? "1" : "0"},1 ${a},${d} ${I ? `A${t / 2},${t / 2} 0 0,1 ` : "L"}${Y},${h} A${n - t},${n - t} 0 ${c > 180 ? "1" : "0"},0 ${m},${X} ${l ? `A${t / 2},${t / 2} 0 0,1 ` : "L"}${$},${e}`,
+      fill: A
+    }
+  );
+};
 export {
-  A as SmileyMeterRange
+  j as BaseOutlineArc
 };
 //# sourceMappingURL=sd-component-library317.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library317.js","sources":["../src/components/meters/smiley-meter-v2/partials/smiley-meter-range/smiley-meter-range.tsx"],"sourcesContent":["import React from \"react\";\n\nimport theme from \"../../../../../core/theme\";\nimport { LabelPointer } from \"../../../common-outline-meter-partials\";\nimport { OutlineMeterRange } from \"../../../outline-meter/partials/outline-meter-range\";\nimport { getIsHorizontal, getRangeProperties } from \"../../utils\";\nimport { SmileyMeterRangeProps as Props } from \"./interfaces\";\n\nexport const SmileyMeterRange = React.forwardRef<SVGCircleElement, Props>(\n  (props, pointRef) => {\n    const {\n      segmented,\n      diameter,\n      arc,\n      totalRanges,\n      distanceBetweenRanges,\n      start,\n      end,\n      idx,\n      hideLabels,\n      isMatchedRange,\n    } = props;\n\n    const needConnection = !segmented;\n\n    const radius = diameter / 2;\n\n    const { rangeArcMiddle: alpha } = getRangeProperties(\n      arc,\n      totalRanges,\n      distanceBetweenRanges,\n      idx,\n      start,\n      end\n    );\n\n    return (\n      <>\n        <OutlineMeterRange\n          {...props}\n          hideLabels\n          connected={needConnection}\n          ref={pointRef}\n        />\n\n        {!hideLabels && !isMatchedRange && (\n          <LabelPointer\n            {...props}\n            radius={radius}\n            color={theme.colors.cl_lightGrey}\n            alpha={alpha}\n            horizontal={getIsHorizontal(props)}\n          />\n        )}\n      </>\n    );\n  }\n);\n"],"names":["SmileyMeterRange","React","props","pointRef","segmented","diameter","arc","totalRanges","distanceBetweenRanges","start","end","idx","hideLabels","isMatchedRange","needConnection","radius","alpha","getRangeProperties","jsxs","Fragment","jsx","OutlineMeterRange","LabelPointer","theme","getIsHorizontal"],"mappings":";;;;;;AAQO,MAAMA,IAAmBC,EAAM;AAAA,EACpC,CAACC,GAAOC,MAAa;AACb,UAAA;AAAA,MACJ,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,KAAAC;AAAA,MACA,aAAAC;AAAA,MACA,uBAAAC;AAAA,MACA,OAAAC;AAAA,MACA,KAAAC;AAAA,MACA,KAAAC;AAAA,MACA,YAAAC;AAAA,MACA,gBAAAC;AAAA,IACE,IAAAX,GAEEY,IAAiB,CAACV,GAElBW,IAASV,IAAW,GAEpB,EAAE,gBAAgBW,EAAA,IAAUC;AAAA,MAChCX;AAAA,MACAC;AAAA,MACAC;AAAA,MACAG;AAAA,MACAF;AAAA,MACAC;AAAA,IAAA;AAGF,WAEIQ,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,MAAAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACE,GAAGnB;AAAA,UACJ,YAAU;AAAA,UACV,WAAWY;AAAA,UACX,KAAKX;AAAA,QAAA;AAAA,MACP;AAAA,MAEC,CAACS,KAAc,CAACC,KACfO,gBAAAA,EAAA;AAAA,QAACE;AAAA,QAAA;AAAA,UACE,GAAGpB;AAAA,UACJ,QAAAa;AAAA,UACA,OAAOQ,EAAM,OAAO;AAAA,UACpB,OAAAP;AAAA,UACA,YAAYQ,EAAgBtB,CAAK;AAAA,QAAA;AAAA,MACnC;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"sd-component-library317.js","sources":["../src/components/meters/outline-meter/partials/base-outline-arc/base-outline-arc.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { degToRad, getInnerX, getInnerY } from \"../../utils\";\nimport { BaseOutlineArcProps as Props } from \"./interfaces\";\n\nexport const BaseOutlineArc: React.FC<Props> = (props) => {\n  const {\n    startX,\n    startY,\n    endX,\n    endY,\n    radius,\n    color,\n    width,\n    roundStart = true,\n    roundEnd = true,\n    startAlpha,\n    endAlpha,\n  } = props;\n\n  const arc = endAlpha - startAlpha;\n\n  const startInnerX = getInnerX(startX, degToRad(startAlpha), width);\n  const startInnerY = getInnerY(startY, degToRad(startAlpha), width);\n\n  const endInnerX = getInnerX(endX, degToRad(endAlpha), width);\n  const endInnerY = getInnerY(endY, degToRad(endAlpha), width);\n\n  return (\n    <path\n      d={`M${startX},${startY} A${radius},${radius} 0 ${\n        arc > 180 ? \"1\" : \"0\"\n      },1 ${endX},${endY} ${\n        roundEnd ? `A${width / 2},${width / 2} 0 0,1 ` : \"L\"\n      }${endInnerX},${endInnerY} A${radius - width},${radius - width} 0 ${\n        arc > 180 ? \"1\" : \"0\"\n      },0 ${startInnerX},${startInnerY} ${\n        roundStart ? `A${width / 2},${width / 2} 0 0,1 ` : \"L\"\n      }${startX},${startY}`}\n      fill={color}\n    />\n  );\n};\n"],"names":["BaseOutlineArc","props","startX","startY","endX","endY","radius","color","width","roundStart","roundEnd","startAlpha","endAlpha","arc","startInnerX","getInnerX","degToRad","startInnerY","getInnerY","endInnerX","endInnerY","jsx"],"mappings":";;AAKa,MAAAA,IAAkC,CAACC,MAAU;AAClD,QAAA;AAAA,IACJ,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,UAAAC;AAAA,EACE,IAAAX,GAEEY,IAAMD,IAAWD,GAEjBG,IAAcC,EAAUb,GAAQc,EAASL,CAAU,GAAGH,CAAK,GAC3DS,IAAcC,EAAUf,GAAQa,EAASL,CAAU,GAAGH,CAAK,GAE3DW,IAAYJ,EAAUX,GAAMY,EAASJ,CAAQ,GAAGJ,CAAK,GACrDY,IAAYF,EAAUb,GAAMW,EAASJ,CAAQ,GAAGJ,CAAK;AAGzD,SAAAa,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAG,IAAInB,CAAM,IAAIC,CAAM,KAAKG,CAAM,IAAIA,CAAM,MAC1CO,IAAM,MAAM,MAAM,GACpB,MAAMT,CAAI,IAAIC,CAAI,IAChBK,IAAW,IAAIF,IAAQ,CAAC,IAAIA,IAAQ,CAAC,YAAY,GACnD,GAAGW,CAAS,IAAIC,CAAS,KAAKd,IAASE,CAAK,IAAIF,IAASE,CAAK,MAC5DK,IAAM,MAAM,MAAM,GACpB,MAAMC,CAAW,IAAIG,CAAW,IAC9BR,IAAa,IAAID,IAAQ,CAAC,IAAIA,IAAQ,CAAC,YAAY,GACrD,GAAGN,CAAM,IAAIC,CAAM;AAAA,MACnB,MAAMI;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/lib/sd-component-library32.js

@@ -1,5 +1,5 @@
 import { j as c } from "./sd-component-library195.js";
-import { CheckboxV2Container as e } from "./sd-component-library208.js";
+import { CheckboxV2Container as e } from "./sd-component-library200.js";
 const m = ({
   onChange: r,
   value: o,

package/lib/sd-component-library33.js

@@ -1,5 +1,5 @@
 import { j as i } from "./sd-component-library195.js";
-import { CheckboxV2Container as x } from "./sd-component-library208.js";
+import { CheckboxV2Container as x } from "./sd-component-library200.js";
 const d = ({
   value: o,
   onChange: r,

package/lib/sd-component-library49.js

@@ -1,5 +1,5 @@
 import { j as o } from "./sd-component-library195.js";
-import { Divider as e } from "./sd-component-library209.js";
+import { Divider as e } from "./sd-component-library253.js";
 const d = ({
   width: r = "100%",
   height: t = "1px",

package/lib/sd-component-library5.js

@@ -2,7 +2,7 @@ import { j as e } from "./sd-component-library195.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-library202.js";
+import { ReactComponent as L } from "./sd-component-library207.js";
 const Z = (p) => {
   const {
     width: x = ["100%"],

package/lib/sd-component-library50.js

@@ -1,5 +1,5 @@
 import { j as e } from "./sd-component-library195.js";
-import { Divider as o } from "./sd-component-library209.js";
+import { Divider as o } from "./sd-component-library253.js";
 const x = ({
   width: r = "1px",
   height: t = "41px",

package/lib/sd-component-library52.js

@@ -1,8 +1,8 @@
 import { j as t } from "./sd-component-library195.js";
-import { BaseBooleanFeedback as m } from "./sd-component-library213.js";
+import { BaseBooleanFeedback as m } from "./sd-component-library204.js";
 import { IconButton as n } from "./sd-component-library22.js";
-import { ReactComponent as c } from "./sd-component-library214.js";
-import { ReactComponent as u } from "./sd-component-library215.js";
+import { ReactComponent as c } from "./sd-component-library205.js";
+import { ReactComponent as u } from "./sd-component-library206.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-library53.js

@@ -1,8 +1,8 @@
 import { j as e } from "./sd-component-library195.js";
 import { useHover as x } from "./sd-component-library3.js";
-import { BaseFeedbackContainer as f } from "./sd-component-library210.js";
+import { BaseFeedbackContainer as f } from "./sd-component-library208.js";
 import { BaseGridContainer as j } from "./sd-component-library36.js";
-import { BaseFeedbackButton as k } from "./sd-component-library211.js";
+import { BaseFeedbackButton as k } from "./sd-component-library209.js";
 const C = ({
   questionText: t,
   options: a,

package/lib/sd-component-library54.js

@@ -2,9 +2,9 @@ import { j as o } from "./sd-component-library195.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-library210.js";
+import { BaseFeedbackContainer as S } from "./sd-component-library208.js";
 import { GridContainerV2 as y } from "./sd-component-library39.js";
-import { BaseFeedbackButton as a } from "./sd-component-library211.js";
+import { BaseFeedbackButton as a } from "./sd-component-library209.js";
 import { FrMaxContainer as x } from "./sd-component-library38.js";
 import { ReactComponent as B } from "./sd-component-library175.js";
 const D = ({

package/lib/sd-component-library55.js

@@ -1,90 +1,97 @@
-import { j as i } from "./sd-component-library195.js";
-import { useState as d, useEffect as g, useCallback as w } from "react";
-import { Input as j } from "@rebass/forms";
-import { InputContainer as v } from "./sd-component-library58.js";
-import { InvalidInputError as I } from "./sd-component-library68.js";
-const V = (t, a, s) => (o) => {
-  const n = o.target.value;
+import { j as l } from "./sd-component-library195.js";
+import { useState as u, useEffect as g, useCallback as w } from "react";
+import { Input as b } from "@rebass/forms";
+import { InputContainer as j } from "./sd-component-library58.js";
+import { InvalidInputError as v } from "./sd-component-library68.js";
+const C = (t, n, s) => (r) => {
+  const e = r.target.value;
   try {
-    const r = s(n);
-    t(n), r && a(n);
-  } catch (r) {
-    if (!(r instanceof I))
-      throw r;
+    const o = s(e);
+    t(e), o && n(e);
+  } catch (o) {
+    if (!(o instanceof v))
+      throw o;
   }
-}, y = ({
+}, V = ({
   value: t,
-  onChange: a,
+  onChange: n,
   validateValue: s = () => !0,
-  focusInput: o,
-  ...n
+  focusInput: r,
+  ...e
 }) => {
-  const [r, l] = d(t);
+  const [o, i] = u(t);
   g(() => {
-    t !== void 0 && l(t);
+    t !== void 0 && i(t);
   }, [t]);
-  const p = w(
-    (e) => {
-      o && (e == null || e.focus());
+  const c = w(
+    (a) => {
+      r && (a == null || a.focus());
     },
-    [o]
+    [r]
   );
-  return /* @__PURE__ */ i.jsx(
-    j,
+  return /* @__PURE__ */ l.jsx(
+    b,
     {
-      variant: "_inputs.textInput.primary",
-      p: "14px 0",
-      onChange: V(l, a, s),
-      value: r,
-      ...n,
-      ref: p
+      variant: "_inputs.v2",
+      onChange: C(i, n, s),
+      value: o,
+      ...e,
+      sx: {
+        ":focus": {
+          borderBottomStyle: "solid",
+          borderBottomWidth: "2px",
+          borderBottomColor: "cl_blue",
+          outline: "none"
+        }
+      },
+      ref: c
     }
   );
-}, m = "16px", D = ({
+}, p = "16px", k = ({
   value: t,
-  onChange: a,
+  onChange: n,
   id: s,
-  disabled: o,
-  validateValue: n,
-  onFocus: r,
-  onBlur: l,
-  placeholder: p,
-  autoFocus: e,
-  onKeyPress: x,
-  focusInput: f,
-  maxLength: h,
-  showCheckMark: c,
-  ...u
-}) => /* @__PURE__ */ i.jsxs(
-  v,
+  disabled: r,
+  validateValue: e,
+  onFocus: o,
+  onBlur: i,
+  placeholder: c,
+  autoFocus: a,
+  onKeyPress: d,
+  focusInput: x,
+  maxLength: f,
+  showCheckMark: m,
+  ...h
+}) => /* @__PURE__ */ l.jsxs(
+  j,
   {
     id: s,
-    cursor: o ? "not-allowed" : "pointer",
-    ...u,
+    cursor: r ? "not-allowed" : "pointer",
+    ...h,
     children: [
-      /* @__PURE__ */ i.jsx(
-        y,
+      /* @__PURE__ */ l.jsx(
+        V,
         {
           value: t,
-          onChange: a,
-          validateValue: n,
+          onChange: n,
+          validateValue: e,
           id: s,
-          disabled: o,
-          placeholder: p,
-          onFocus: r,
-          onBlur: l,
-          autoFocus: e,
-          onKeyPress: x,
-          focusInput: f,
-          maxLength: h,
-          pr: c ? m : void 0
+          disabled: r,
+          placeholder: c,
+          onFocus: o,
+          onBlur: i,
+          autoFocus: a,
+          onKeyPress: d,
+          focusInput: x,
+          maxLength: f,
+          pr: m ? `calc(${p} + 2px)` : void 0
         }
       ),
-      c && /* @__PURE__ */ i.jsx(
+      m && /* @__PURE__ */ l.jsx(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
-          width: m,
+          width: p,
           height: "11.931",
           viewBox: "0 0 16 11.931",
           fill: "#3DEB24",
@@ -94,7 +101,7 @@ const V = (t, a, s) => (o) => {
             bottom: "16px",
             transform: "translateY(-50%)"
           },
-          children: /* @__PURE__ */ i.jsx(
+          children: /* @__PURE__ */ l.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",
@@ -107,7 +114,7 @@ const V = (t, a, s) => (o) => {
   }
 );
 export {
-  y as FormV2Input,
-  D as FormV2InputWithContainer
+  V as FormV2Input,
+  k as FormV2InputWithContainer
 };
 //# sourceMappingURL=sd-component-library55.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library55.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 { 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  const [displayedValue, setDisplayedValue] = useState(value);\n\n  useEffect(() => {\n    value !== undefined && setDisplayedValue(value);\n  }, [value]);\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.textInput.primary\"\n      p=\"14px 0\"\n      onChange={getOnChangeCallback(setDisplayedValue, onChange, validateValue)}\n      value={displayedValue}\n      {...props}\n      ref={ref}\n    />\n  );\n};\n\nconst checkMarkWidth = \"16px\";\n\nexport const FormV2InputWithContainer: React.FC<\n  Omit<Props, \"pr\"> & InputContainerProps & { showCheckMark?: boolean }\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  ...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      }}\n      pr={showCheckMark ? checkMarkWidth : undefined}\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: 0,\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  </InputContainer>\n);\n"],"names":["getOnChangeCallback","setDisplayedValue","onChange","validateValue","event","newValue","isValid","error","InvalidInputError","FormV2Input","value","focusInput","props","displayedValue","useState","useEffect","ref","useCallback","input","jsx","RebassInput","checkMarkWidth","FormV2InputWithContainer","id","disabled","onFocus","onBlur","placeholder","autoFocus","onKeyPress","maxLength","showCheckMark","containerProps","jsxs","InputContainer"],"mappings":";;;;;AAQA,MAAMA,IACJ,CACEC,GACAC,GACAC,MAEF,CAACC,MAA+C;AACxC,QAAAC,IAAWD,EAAM,OAAO;AAC1B,MAAA;AACI,UAAAE,IAAUH,EAAcE,CAAQ;AACtC,IAAAJ,EAAkBI,CAAQ,GAC1BC,KAAWJ,EAASG,CAAQ;AAAA,WACrBE,GAAO;AACd,QAAI,EAAEA,aAAiBC;AAA0B,YAAAD;AAAA,EACnD;AACF,GAEWE,IAA+B,CAAC;AAAA,EAC3C,OAAAC;AAAA,EACA,UAAAR;AAAA,EACA,eAAAC,IAAgB,MAAM;AAAA,EACtB,YAAAQ;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAgBZ,CAAiB,IAAIa,EAASJ,CAAK;AAE1D,EAAAK,EAAU,MAAM;AACJ,IAAAL,MAAA,UAAaT,EAAkBS,CAAK;AAAA,EAAA,GAC7C,CAACA,CAAK,CAAC;AAEV,QAAMM,IAAMC;AAAA,IACV,CAACC,MAAmC;AAClC,MAAAP,MAAcO,KAAA,QAAAA,EAAO;AAAA,IACvB;AAAA,IACA,CAACP,CAAU;AAAA,EAAA;AAIX,SAAAQ,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,GAAE;AAAA,MACF,UAAUpB,EAAoBC,GAAmBC,GAAUC,CAAa;AAAA,MACxE,OAAOU;AAAA,MACN,GAAGD;AAAA,MACJ,KAAAI;AAAA,IAAA;AAAA,EAAA;AAGN,GAEMK,IAAiB,QAEVC,IAET,CAAC;AAAA,EACH,OAAAZ;AAAA,EACA,UAAAR;AAAA,EACA,IAAAqB;AAAA,EACA,UAAAC;AAAA,EACA,eAAArB;AAAA,EACA,SAAAsB;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAlB;AAAA,EACA,WAAAmB;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MACEC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,IAAAX;AAAA,IACA,QAAQC,IAAW,gBAAgB;AAAA,IAClC,GAAGQ;AAAA,IAEJ,UAAA;AAAA,MAAAb,gBAAAA,EAAA;AAAA,QAACV;AAAA,QAAA;AAAA,UAEG,OAAAC;AAAA,UACA,UAAAR;AAAA,UACA,eAAAC;AAAA,UACA,IAAAoB;AAAA,UACA,UAAAC;AAAA,UACA,aAAAG;AAAA,UACA,SAAAF;AAAA,UACA,QAAAC;AAAA,UACA,WAAAE;AAAA,UACA,YAAAC;AAAA,UACA,YAAAlB;AAAA,UACA,WAAAmB;AAAA,UAEF,IAAIC,IAAgBV,IAAiB;AAAA,QAAA;AAAA,MACvC;AAAA,MAECU,KACCZ,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAOE;AAAA,UACP,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAO;AAAA,YACL,UAAU;AAAA,YACV,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW;AAAA,UACb;AAAA,UAEA,UAAAF,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,WAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library55.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 { 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  const [displayedValue, setDisplayedValue] = useState(value);\n\n  useEffect(() => {\n    value !== undefined && setDisplayedValue(value);\n  }, [value]);\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      ref={ref}\n    />\n  );\n};\n\nconst checkMarkWidth = \"16px\";\n\nexport const FormV2InputWithContainer: React.FC<\n  Omit<Props, \"pr\"> & InputContainerProps & { showCheckMark?: boolean }\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  ...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      }}\n      pr={showCheckMark ? `calc(${checkMarkWidth} + 2px)` : undefined}\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: 0,\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  </InputContainer>\n);\n"],"names":["getOnChangeCallback","setDisplayedValue","onChange","validateValue","event","newValue","isValid","error","InvalidInputError","FormV2Input","value","focusInput","props","displayedValue","useState","useEffect","ref","useCallback","input","jsx","RebassInput","checkMarkWidth","FormV2InputWithContainer","id","disabled","onFocus","onBlur","placeholder","autoFocus","onKeyPress","maxLength","showCheckMark","containerProps","jsxs","InputContainer"],"mappings":";;;;;AAQA,MAAMA,IACJ,CACEC,GACAC,GACAC,MAEF,CAACC,MAA+C;AACxC,QAAAC,IAAWD,EAAM,OAAO;AAC1B,MAAA;AACI,UAAAE,IAAUH,EAAcE,CAAQ;AACtC,IAAAJ,EAAkBI,CAAQ,GAC1BC,KAAWJ,EAASG,CAAQ;AAAA,WACrBE,GAAO;AACd,QAAI,EAAEA,aAAiBC;AAA0B,YAAAD;AAAA,EACnD;AACF,GAEWE,IAA+B,CAAC;AAAA,EAC3C,OAAAC;AAAA,EACA,UAAAR;AAAA,EACA,eAAAC,IAAgB,MAAM;AAAA,EACtB,YAAAQ;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAgBZ,CAAiB,IAAIa,EAASJ,CAAK;AAE1D,EAAAK,EAAU,MAAM;AACJ,IAAAL,MAAA,UAAaT,EAAkBS,CAAK;AAAA,EAAA,GAC7C,CAACA,CAAK,CAAC;AAEV,QAAMM,IAAMC;AAAA,IACV,CAACC,MAAmC;AAClC,MAAAP,MAAcO,KAAA,QAAAA,EAAO;AAAA,IACvB;AAAA,IACA,CAACP,CAAU;AAAA,EAAA;AAIX,SAAAQ,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAUpB,EAAoBC,GAAmBC,GAAUC,CAAa;AAAA,MACxE,OAAOU;AAAA,MACN,GAAGD;AAAA,MACJ,IAAI;AAAA,QACF,UAAU;AAAA,UACR,mBAAmB;AAAA,UACnB,mBAAmB;AAAA,UACnB,mBAAmB;AAAA,UACnB,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,KAAAI;AAAA,IAAA;AAAA,EAAA;AAGN,GAEMK,IAAiB,QAEVC,IAET,CAAC;AAAA,EACH,OAAAZ;AAAA,EACA,UAAAR;AAAA,EACA,IAAAqB;AAAA,EACA,UAAAC;AAAA,EACA,eAAArB;AAAA,EACA,SAAAsB;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAlB;AAAA,EACA,WAAAmB;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MACEC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,IAAAX;AAAA,IACA,QAAQC,IAAW,gBAAgB;AAAA,IAClC,GAAGQ;AAAA,IAEJ,UAAA;AAAA,MAAAb,gBAAAA,EAAA;AAAA,QAACV;AAAA,QAAA;AAAA,UAEG,OAAAC;AAAA,UACA,UAAAR;AAAA,UACA,eAAAC;AAAA,UACA,IAAAoB;AAAA,UACA,UAAAC;AAAA,UACA,aAAAG;AAAA,UACA,SAAAF;AAAA,UACA,QAAAC;AAAA,UACA,WAAAE;AAAA,UACA,YAAAC;AAAA,UACA,YAAAlB;AAAA,UACA,WAAAmB;AAAA,UAEF,IAAIC,IAAgB,QAAQV,CAAc,YAAY;AAAA,QAAA;AAAA,MACxD;AAAA,MAECU,KACCZ,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAOE;AAAA,UACP,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAO;AAAA,YACL,UAAU;AAAA,YACV,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW;AAAA,UACb;AAAA,UAEA,UAAAF,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,WAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAEJ;"}

package/lib/sd-component-library57.js

@@ -1,27 +1,27 @@
 import { j as s } from "./sd-component-library195.js";
-import { useMemo as y, useCallback as F } from "react";
-import { Select as M } from "@rebass/forms";
-import { getNoTranslateClass as g } from "./sd-component-library112.js";
-import { InputContainer as V } from "./sd-component-library58.js";
-const _ = ({
+import { useMemo as F, useCallback as M } from "react";
+import { Select as V } from "@rebass/forms";
+import { getNoTranslateClass as d } from "./sd-component-library112.js";
+import { InputContainer as _ } from "./sd-component-library58.js";
+const k = ({
   defaultOptionObject: r,
   hideDefaultOnSelect: x,
   options: t,
   value: o,
   onChange: a,
   disabled: n,
-  disabledTextValue: c,
-  translateSelect: i = !0,
+  disabledTextValue: i,
+  translateSelect: c = !0,
   translateDefaultOption: m,
   onFocus: C,
   id: u,
   textTransform: f = "none",
   defaultOptionColor: p = "cl_grey"
 }) => {
-  const l = y(
+  const l = F(
     () => (r ? [r] : []).concat(t),
     [t, r]
-  ), h = F(
+  ), g = M(
     (e) => {
       const N = l.find(
         ({ title: w }) => w.trim().replaceAll(/\s{2,}/g, " ") === e
@@ -29,16 +29,17 @@ const _ = ({
       a(N);
     },
     [a, l]
-  ), d = !t.length, v = !!r, S = g(
-    m !== !0 && !i || m === !1
-  ), j = g(!i), L = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+  ), v = !t.length, h = !!r, S = d(
+    m !== !0 && !c || m === !1
+  ), j = d(!c), L = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
   return /* @__PURE__ */ s.jsx(
-    M,
+    V,
     {
-      value: d ? c : o.title.trim(),
-      onChange: (e) => h(e.target.value),
-      variant: "_selectors.tertiary",
+      value: v ? i : o.title.trim(),
+      onChange: (e) => g(e.target.value),
+      variant: "_inputs.v2",
       sx: {
+        pr: "16px",
         textTransform: f,
         ...p && o.value === null ? { color: p } : {},
         // to override default styles for selector arrow
@@ -53,9 +54,9 @@ const _ = ({
       id: u,
       disabled: n,
       onFocus: C,
-      children: d ? /* @__PURE__ */ s.jsx("option", { "data-test": "disabled-option", children: c }, "disabledTextValue") : l.slice(
+      children: v ? /* @__PURE__ */ s.jsx("option", { "data-test": "disabled-option", children: i }, "disabledTextValue") : l.slice(
         // should default option be hidden?
-        v && x && o.value !== null ? 1 : 0
+        h && x && o.value !== null ? 1 : 0
       ).map((e) => /* @__PURE__ */ s.jsx(
         "option",
         {
@@ -74,8 +75,8 @@ const _ = ({
   value: o,
   onChange: a,
   disabled: n,
-  disabledTextValue: c,
-  translateSelect: i,
+  disabledTextValue: i,
+  translateSelect: c,
   translateDefaultOption: m,
   onFocus: C,
   id: u,
@@ -83,13 +84,13 @@ const _ = ({
   defaultOptionColor: p,
   ...l
 }) => /* @__PURE__ */ s.jsx(
-  V,
+  _,
   {
     id: u,
     cursor: n ? "not-allowed" : "pointer",
     ...l,
     children: /* @__PURE__ */ s.jsx(
-      _,
+      k,
       {
         defaultOptionObject: r,
         hideDefaultOnSelect: x,
@@ -97,8 +98,8 @@ const _ = ({
         value: o,
         onChange: a,
         disabled: n,
-        disabledTextValue: c,
-        translateSelect: i,
+        disabledTextValue: i,
+        translateSelect: c,
         translateDefaultOption: m,
         onFocus: C,
         id: u,
@@ -109,7 +110,7 @@ const _ = ({
   }
 );
 export {
-  _ as FormV2Selector,
+  k as FormV2Selector,
   I as FormV2SelectorWithContainer
 };
 //# 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-selector/form-v2-selector.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\n\nimport { Select } from \"@rebass/forms\";\nimport { SxProps } from \"rebass\";\n\nimport { SelectorOptionV2 } from \"../../selectors\";\nimport { getNoTranslateClass } from \"../../selectors/selector/selector\";\nimport { InputContainer, InputContainerProps } from \"../input-container\";\nimport { FormV2SelectorProps as Props } from \"./interfaces\";\n\nexport const FormV2Selector = <T extends string = string>({\n  defaultOptionObject,\n  hideDefaultOnSelect,\n  options,\n  value: selection,\n  onChange,\n  disabled,\n  disabledTextValue,\n  translateSelect = true,\n  translateDefaultOption,\n  onFocus,\n  id,\n  textTransform = \"none\",\n  defaultOptionColor = \"cl_grey\",\n}: Props<T>) => {\n  const allOptions = useMemo<SelectorOptionV2<T | null>[]>(\n    () =>\n      (\n        (defaultOptionObject\n          ? [defaultOptionObject]\n          : []) as SelectorOptionV2<T | null>[]\n      ).concat(options),\n    [options, defaultOptionObject]\n  );\n\n  const onSelect = useCallback(\n    (selectionString: string) => {\n      const newSelection = allOptions.find(\n        ({ title }) =>\n          title.trim().replaceAll(/\\s{2,}/g, \" \") === selectionString\n      )!;\n      onChange(newSelection);\n    },\n    [onChange, allOptions]\n  );\n\n  const noOptionsToSelect = !options.length;\n  const hasDefaultValue = !!defaultOptionObject;\n\n  const defaultOptionClassName = getNoTranslateClass(\n    (translateDefaultOption !== true && !translateSelect) ||\n      translateDefaultOption === false\n  );\n  const regularOptionClassName = getNoTranslateClass(!translateSelect);\n\n  const isFirefox = navigator.userAgent.toLowerCase().indexOf(\"firefox\") > -1;\n\n  return (\n    <Select\n      value={noOptionsToSelect ? disabledTextValue : selection.title.trim()}\n      onChange={(event) => onSelect(event.target.value)}\n      variant=\"_selectors.tertiary\"\n      sx={\n        {\n          textTransform,\n          ...(defaultOptionColor && selection.value === null\n            ? { color: defaultOptionColor }\n            : {}),\n          // to override default styles for selector arrow\n          \"& + svg\": {\n            fill: \"cl_darkGrey\",\n            transform: `translate(10px, ${isFirefox ? 0 : 5}px) scale(.78)`,\n            path: {\n              d: \"path('M12,8.6L6.72,3.29C6.32,2.9,5.68,2.9,5.29,3.29C4.90,3.69,4.9,4.33,5.29,4.73L11.23,10.7C11.44,10.91,11.72,11.01,12,11C12.27,11.01,12.55,10.91,12.76,10.7L18.7,4.73C19.09,4.33,19.09,3.69,18.7,3.29C18.31,2.9,17.67,2.9,17.27,3.29Z M12,8.6')\",\n            },\n          },\n        } as SxProps[\"sx\"]\n      }\n      {...{ id, disabled, onFocus }}\n    >\n      {noOptionsToSelect ? (\n        <option key=\"disabledTextValue\" data-test=\"disabled-option\">\n          {disabledTextValue}\n        </option>\n      ) : (\n        allOptions\n          .slice(\n            // should default option be hidden?\n            hasDefaultValue && hideDefaultOnSelect && selection.value !== null\n              ? 1\n              : 0\n          )\n          .map((option) => (\n            <option\n              key={option.id}\n              data-testid=\"selector-option\"\n              className={\n                option.value === null\n                  ? defaultOptionClassName\n                  : regularOptionClassName\n              }\n            >\n              {option.title}\n            </option>\n          ))\n      )}\n    </Select>\n  );\n};\n\nexport const FormV2SelectorWithContainer = <T extends string = string>({\n  defaultOptionObject,\n  hideDefaultOnSelect,\n  options,\n  value,\n  onChange,\n  disabled,\n  disabledTextValue,\n  translateSelect,\n  translateDefaultOption,\n  onFocus,\n  id,\n  textTransform,\n  defaultOptionColor,\n  ...containerProps\n}: Props<T> & InputContainerProps) => (\n  <InputContainer\n    id={id}\n    cursor={disabled ? \"not-allowed\" : \"pointer\"}\n    {...containerProps}\n  >\n    <FormV2Selector\n      {...{\n        defaultOptionObject,\n        hideDefaultOnSelect,\n        options,\n        value,\n        onChange,\n        disabled,\n        disabledTextValue,\n        translateSelect,\n        translateDefaultOption,\n        onFocus,\n        id,\n        textTransform,\n        defaultOptionColor,\n      }}\n    />\n  </InputContainer>\n);\n"],"names":["FormV2Selector","defaultOptionObject","hideDefaultOnSelect","options","selection","onChange","disabled","disabledTextValue","translateSelect","translateDefaultOption","onFocus","id","textTransform","defaultOptionColor","allOptions","useMemo","onSelect","useCallback","selectionString","newSelection","title","noOptionsToSelect","hasDefaultValue","defaultOptionClassName","getNoTranslateClass","regularOptionClassName","isFirefox","jsx","Select","event","option","FormV2SelectorWithContainer","value","containerProps","InputContainer"],"mappings":"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"}
+{"version":3,"file":"sd-component-library57.js","sources":["../src/components/forms-v2/form-v2-selector/form-v2-selector.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\n\nimport { Select } from \"@rebass/forms\";\nimport { SxProps } from \"rebass\";\n\nimport { SelectorOptionV2 } from \"../../selectors\";\nimport { getNoTranslateClass } from \"../../selectors/selector/selector\";\nimport { InputContainer, InputContainerProps } from \"../input-container\";\nimport { FormV2SelectorProps as Props } from \"./interfaces\";\n\nexport const FormV2Selector = <T extends string = string>({\n  defaultOptionObject,\n  hideDefaultOnSelect,\n  options,\n  value: selection,\n  onChange,\n  disabled,\n  disabledTextValue,\n  translateSelect = true,\n  translateDefaultOption,\n  onFocus,\n  id,\n  textTransform = \"none\",\n  defaultOptionColor = \"cl_grey\",\n}: Props<T>) => {\n  const allOptions = useMemo<SelectorOptionV2<T | null>[]>(\n    () =>\n      (\n        (defaultOptionObject\n          ? [defaultOptionObject]\n          : []) as SelectorOptionV2<T | null>[]\n      ).concat(options),\n    [options, defaultOptionObject]\n  );\n\n  const onSelect = useCallback(\n    (selectionString: string) => {\n      const newSelection = allOptions.find(\n        ({ title }) =>\n          title.trim().replaceAll(/\\s{2,}/g, \" \") === selectionString\n      )!;\n      onChange(newSelection);\n    },\n    [onChange, allOptions]\n  );\n\n  const noOptionsToSelect = !options.length;\n  const hasDefaultValue = !!defaultOptionObject;\n\n  const defaultOptionClassName = getNoTranslateClass(\n    (translateDefaultOption !== true && !translateSelect) ||\n      translateDefaultOption === false\n  );\n  const regularOptionClassName = getNoTranslateClass(!translateSelect);\n\n  const isFirefox = navigator.userAgent.toLowerCase().indexOf(\"firefox\") > -1;\n\n  return (\n    <Select\n      value={noOptionsToSelect ? disabledTextValue : selection.title.trim()}\n      onChange={(event) => onSelect(event.target.value)}\n      variant=\"_inputs.v2\"\n      sx={\n        {\n          pr: \"16px\",\n          textTransform,\n          ...(defaultOptionColor && selection.value === null\n            ? { color: defaultOptionColor }\n            : {}),\n          // to override default styles for selector arrow\n          \"& + svg\": {\n            fill: \"cl_darkGrey\",\n            transform: `translate(10px, ${isFirefox ? 0 : 5}px) scale(.78)`,\n            path: {\n              d: \"path('M12,8.6L6.72,3.29C6.32,2.9,5.68,2.9,5.29,3.29C4.90,3.69,4.9,4.33,5.29,4.73L11.23,10.7C11.44,10.91,11.72,11.01,12,11C12.27,11.01,12.55,10.91,12.76,10.7L18.7,4.73C19.09,4.33,19.09,3.69,18.7,3.29C18.31,2.9,17.67,2.9,17.27,3.29Z M12,8.6')\",\n            },\n          },\n        } as SxProps[\"sx\"]\n      }\n      {...{ id, disabled, onFocus }}\n    >\n      {noOptionsToSelect ? (\n        <option key=\"disabledTextValue\" data-test=\"disabled-option\">\n          {disabledTextValue}\n        </option>\n      ) : (\n        allOptions\n          .slice(\n            // should default option be hidden?\n            hasDefaultValue && hideDefaultOnSelect && selection.value !== null\n              ? 1\n              : 0\n          )\n          .map((option) => (\n            <option\n              key={option.id}\n              data-testid=\"selector-option\"\n              className={\n                option.value === null\n                  ? defaultOptionClassName\n                  : regularOptionClassName\n              }\n            >\n              {option.title}\n            </option>\n          ))\n      )}\n    </Select>\n  );\n};\n\nexport const FormV2SelectorWithContainer = <T extends string = string>({\n  defaultOptionObject,\n  hideDefaultOnSelect,\n  options,\n  value,\n  onChange,\n  disabled,\n  disabledTextValue,\n  translateSelect,\n  translateDefaultOption,\n  onFocus,\n  id,\n  textTransform,\n  defaultOptionColor,\n  ...containerProps\n}: Props<T> & InputContainerProps) => (\n  <InputContainer\n    id={id}\n    cursor={disabled ? \"not-allowed\" : \"pointer\"}\n    {...containerProps}\n  >\n    <FormV2Selector\n      {...{\n        defaultOptionObject,\n        hideDefaultOnSelect,\n        options,\n        value,\n        onChange,\n        disabled,\n        disabledTextValue,\n        translateSelect,\n        translateDefaultOption,\n        onFocus,\n        id,\n        textTransform,\n        defaultOptionColor,\n      }}\n    />\n  </InputContainer>\n);\n"],"names":["FormV2Selector","defaultOptionObject","hideDefaultOnSelect","options","selection","onChange","disabled","disabledTextValue","translateSelect","translateDefaultOption","onFocus","id","textTransform","defaultOptionColor","allOptions","useMemo","onSelect","useCallback","selectionString","newSelection","title","noOptionsToSelect","hasDefaultValue","defaultOptionClassName","getNoTranslateClass","regularOptionClassName","isFirefox","jsx","Select","event","option","FormV2SelectorWithContainer","value","containerProps","InputContainer"],"mappings":"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"}

package/lib/sd-component-library58.js

@@ -1,37 +1,38 @@
 import { j as x } from "./sd-component-library195.js";
-import { InputLabel as S } from "./sd-component-library59.js";
-import { GridContainerV2 as _ } from "./sd-component-library39.js";
+import { InputLabel as _ } from "./sd-component-library59.js";
+import { GridContainerV2 as v } from "./sd-component-library39.js";
 import { BaseTextV2 as l } from "./sd-component-library137.js";
-const W = ({
+const k = ({
   gap: m = "0px",
   cursor: f = "pointer",
   sx: e,
   required: o = !1,
   textAlign: h = "left",
-  width: v = "240px",
+  width: d = "240px",
   label: p,
   labelProps: t,
   secondaryLabel: c = o ? "*" : void 0,
-  secondaryLabelProps: d = o ? { color: "cl_purple", fontSize: 16, lineHeight: "12px" } : void 0,
+  secondaryLabelProps: j = o ? { color: "cl_purple", fontSize: 16, lineHeight: "12px" } : void 0,
   errorMessage: n,
   errorMessageProps: i,
-  bg: j = n ? "rgba(255, 0, 0, 0.05)" : "white",
-  id: u,
-  children: a,
-  ...r
+  bg: u = n ? "rgba(255, 0, 0, 0.05)" : "white",
+  id: a,
+  children: r,
+  ...S
 }) => /* @__PURE__ */ x.jsxs(
-  _,
+  v,
   {
+    width: d,
     gap: m,
-    bg: j,
+    bg: u,
     textAlign: h,
-    ...r,
+    ...S,
     sx: { position: "relative", cursor: f, flexGrow: 1, ...e },
     children: [
       p && /* @__PURE__ */ x.jsxs(
-        S,
+        _,
         {
-          htmlFor: u,
+          htmlFor: a,
           maxWidth: "100%",
           color: "cl_darkGrey",
           fontSize: 10,
@@ -52,14 +53,14 @@ const W = ({
                 letterSpacing: "1px",
                 color: "cl_grey",
                 ml: "3px",
-                ...d,
+                ...j,
                 children: c
               }
             )
           ]
         }
       ),
-      a,
+      r,
       n && /* @__PURE__ */ x.jsx(
         l,
         {
@@ -81,6 +82,6 @@ const W = ({
   }
 );
 export {
-  W as InputContainer
+  k as InputContainer
 };
 //# sourceMappingURL=sd-component-library58.js.map