@selfdecode/sd-component-library 4.0.115 → 4.0.116

package/lib/sd-component-library325.js

@@ -1,35 +1,93 @@
-import { j as t } from "./sd-component-library198.js";
-import { ResponsiveTextV2 as l } from "./sd-component-library152.js";
-const n = ({
-  title: e,
-  onClick: o,
-  isLast: r
-}) => /* @__PURE__ */ t.jsx(
-  l,
-  {
-    fontSizeWeight: [14, "regular"],
-    sx: {
-      height: "48px",
-      px: "15px",
-      display: "flex",
-      justifyContent: "flex-end",
-      alignItems: "center",
-      borderWidth: "1px",
-      borderStyle: "solid",
-      borderTopStyle: "none",
-      borderColor: "cl_lightGrey",
-      ...r ? { borderRadius: "0 0 3px 3px", borderBottomStyle: "solid" } : { borderBottomStyle: "none" },
-      ":hover": {
-        borderLeftColor: "cl_purple",
-        borderLeftWidth: "2px"
-      },
-      bg: "cl_white"
-    },
-    onClick: o,
-    children: e
-  }
-);
+import { j as o } from "./sd-component-library198.js";
+import { useState as L, useCallback as M } from "react";
+import V from "./sd-component-library197.js";
+import { getCoordinateForArc as f } from "./sd-component-library93.js";
+import { GridContainerV2 as X } from "./sd-component-library40.js";
+import { ResponsiveTextV2 as g } from "./sd-component-library152.js";
+const y = "21.5px", w = 10, j = `${w}px`, J = ({
+  segment: $,
+  isHover: r,
+  animationDuration: S,
+  labelOffset: i,
+  labelPointerOffset: k,
+  radius: c,
+  mobile: e,
+  labelOffsetMobile: u
+}) => {
+  const { start: p, end: a, text: R, color: z, secondaryText: C } = $, d = c * 2, t = (p + a) / 2, h = Math.round(t * 360), { x: _, y: x } = f(c, h), [n, A] = L(), G = M((m) => {
+    m && A(m.getBoundingClientRect());
+  }, []), l = `all ${S}ms`, s = t > 0.5 ? "right" : "left", I = d + i, { x: T, y: W } = f(
+    c + u,
+    h,
+    c
+  ), b = t < 0.5, B = t < 0.15 || t > 0.85, F = t > 0.35 || t < 0.65;
+  return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    !e && /* @__PURE__ */ o.jsx(
+      "line",
+      {
+        x1: _ + (s === "left" ? -1 : 1) * k,
+        x2: s === "left" ? -i : d + i,
+        y1: x,
+        y2: x,
+        stroke: V.colors.cl_lightGrey,
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      "foreignObject",
+      {
+        x: e ? T : s === "left" ? -i : I - ((n == null ? void 0 : n.width) ?? 0),
+        y: e ? W : x,
+        width: ((n == null ? void 0 : n.width) ?? 0) + w,
+        height: 50,
+        style: { overflow: "visible" },
+        children: /* @__PURE__ */ o.jsxs(
+          X,
+          {
+            width: "fit-content",
+            justifyItems: "flex-start",
+            gap: r ? "1px" : "4px",
+            sx: {
+              transform: e ? `translate(${b ? -100 : 0}%, calc(${y} * ${B ? 0 : F ? -1 : -0.5}))` : `translateY(calc(${y} / -2)) scale(${r ? 1.3 : 1})`,
+              transition: l,
+              transformOrigin: s,
+              ...e ? {
+                borderRadius: "4px",
+                boxShadow: "0px 3px 6px #00000029",
+                px: "5px",
+                py: "3px"
+              } : s === "left" ? { pr: j } : { pl: j }
+            },
+            bg: "cl_white",
+            children: [
+              /* @__PURE__ */ o.jsx(
+                g,
+                {
+                  width: "fit-content",
+                  fontSizeWeight: [18, "bold"],
+                  color: z,
+                  sx: { transition: l },
+                  ref: G,
+                  children: R
+                }
+              ),
+              /* @__PURE__ */ o.jsx(
+                g,
+                {
+                  fontSizeWeight: [r ? 13 : 14, "bold"],
+                  color: r ? "cl_darkGrey" : "cl_grey",
+                  sx: { transition: l },
+                  children: C ?? `${Math.round((a - p) * 100)}%`
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
 export {
-  n as SecondaryCustomSelectorOptionRow
+  J as SegmentLabel
 };
 //# sourceMappingURL=sd-component-library325.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library325.js","sources":["../src/components/selectors/secondary-custom-selector/partials/secondary-custom-selector-option-row/secondary-custom-selector-option-row.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { SecondaryCustomSelectorOptionRowProps as Props } from \"./interfaces\";\n\nexport const SecondaryCustomSelectorOptionRow: React.FC<Props> = ({\n  title,\n  onClick,\n  isLast,\n}) => {\n  return (\n    <ResponsiveTextV2\n      fontSizeWeight={[14, \"regular\"]}\n      sx={{\n        height: \"48px\",\n        px: \"15px\",\n        display: \"flex\",\n        justifyContent: \"flex-end\",\n        alignItems: \"center\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderTopStyle: \"none\",\n        borderColor: \"cl_lightGrey\",\n        ...(isLast\n          ? { borderRadius: \"0 0 3px 3px\", borderBottomStyle: \"solid\" }\n          : { borderBottomStyle: \"none\" }),\n        \":hover\": {\n          borderLeftColor: \"cl_purple\",\n          borderLeftWidth: \"2px\",\n        },\n        bg: \"cl_white\",\n      }}\n      onClick={onClick}\n    >\n      {title}\n    </ResponsiveTextV2>\n  );\n};\n"],"names":["SecondaryCustomSelectorOptionRow","title","onClick","isLast","jsx","ResponsiveTextV2"],"mappings":";;AAKO,MAAMA,IAAoD,CAAC;AAAA,EAChE,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AACF,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,IAC9B,IAAI;AAAA,MACF,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,GAAIF,IACA,EAAE,cAAc,eAAe,mBAAmB,QAAQ,IAC1D,EAAE,mBAAmB,OAAO;AAAA,MAChC,UAAU;AAAA,QACR,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MACnB;AAAA,MACA,IAAI;AAAA,IACN;AAAA,IACA,SAAAD;AAAA,IAEC,UAAAD;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"sd-component-library325.js","sources":["../src/components/meters/donut-diagram/partials/segment-label/segment-label.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport theme from \"../../../../../core/theme\";\nimport { Grid } from \"../../../../containers\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { getCoordinateForArc } from \"../../../outline-meter/utils\";\nimport { DonutSegmentLabelPosition } from \"../../interfaces\";\nimport { SegmentLabelProps as Props } from \"./interfaces\";\n\nconst rowHeight = \"21.5px\";\nconst maskSize = 10;\nconst maskSizePx = `${maskSize}px`;\n\nexport const SegmentLabel: React.FC<Props> = ({\n  segment,\n  isHover,\n  animationDuration,\n  labelOffset,\n  labelPointerOffset,\n  radius,\n  mobile,\n  labelOffsetMobile,\n}) => {\n  const { start, end, text, color, secondaryText } = segment;\n  const diameter = radius * 2;\n  const middle = (start + end) / 2;\n  const middleAlpha = Math.round(middle * 360);\n  const { x, y } = getCoordinateForArc(radius, middleAlpha);\n\n  const [rect, setRect] = useState<DOMRect>();\n  const ref = useCallback((node: HTMLDivElement) => {\n    if (node) {\n      setRect(node.getBoundingClientRect());\n    }\n  }, []);\n\n  const transition = `all ${animationDuration}ms`;\n\n  const position: DonutSegmentLabelPosition = middle > 0.5 ? \"right\" : \"left\";\n  const maxX = diameter + labelOffset;\n\n  const { x: pointerX, y: pointerY } = getCoordinateForArc(\n    radius + labelOffsetMobile,\n    middleAlpha,\n    radius\n  );\n\n  const isAtLeft = middle < 0.5;\n  const isInBottom = middle < 0.15 || middle > 0.85;\n  const isInTop = middle > 0.35 || middle < 0.65;\n\n  return (\n    <>\n      {!mobile && (\n        <line\n          x1={x + (position === \"left\" ? -1 : 1) * labelPointerOffset}\n          x2={position === \"left\" ? -labelOffset : diameter + labelOffset}\n          y1={y}\n          y2={y}\n          stroke={theme.colors[\"cl_lightGrey\"]}\n          strokeWidth={1}\n        />\n      )}\n\n      <foreignObject\n        x={\n          mobile\n            ? pointerX\n            : position === \"left\"\n            ? -labelOffset\n            : maxX - (rect?.width ?? 0)\n        }\n        y={mobile ? pointerY : y}\n        width={(rect?.width ?? 0) + maskSize}\n        height={50}\n        style={{ overflow: \"visible\" }}\n      >\n        <Grid\n          width=\"fit-content\"\n          justifyItems=\"flex-start\"\n          gap={isHover ? \"1px\" : \"4px\"}\n          sx={{\n            transform: mobile\n              ? `translate(${isAtLeft ? -100 : 0}%, calc(${rowHeight} * ${\n                  isInBottom ? 0 : isInTop ? -1 : -0.5\n                }))`\n              : `translateY(calc(${rowHeight} / -2)) scale(${\n                  isHover ? 1.3 : 1\n                })`,\n            transition,\n            transformOrigin: position,\n            ...(mobile\n              ? {\n                  borderRadius: \"4px\",\n                  boxShadow: \"0px 3px 6px #00000029\",\n                  px: \"5px\",\n                  py: \"3px\",\n                }\n              : position === \"left\"\n              ? { pr: maskSizePx }\n              : { pl: maskSizePx }),\n          }}\n          bg=\"cl_white\"\n        >\n          <ResponsiveTextV2\n            width=\"fit-content\"\n            fontSizeWeight={[18, \"bold\"]}\n            color={color}\n            sx={{ transition }}\n            ref={ref}\n          >\n            {text}\n          </ResponsiveTextV2>\n\n          <ResponsiveTextV2\n            fontSizeWeight={[isHover ? 13 : 14, \"bold\"]}\n            color={isHover ? \"cl_darkGrey\" : \"cl_grey\"}\n            sx={{ transition }}\n          >\n            {secondaryText ?? `${Math.round((end - start) * 100)}%`}\n          </ResponsiveTextV2>\n        </Grid>\n      </foreignObject>\n    </>\n  );\n};\n"],"names":["rowHeight","maskSize","maskSizePx","SegmentLabel","segment","isHover","animationDuration","labelOffset","labelPointerOffset","radius","mobile","labelOffsetMobile","start","end","text","color","secondaryText","diameter","middle","middleAlpha","x","y","getCoordinateForArc","rect","setRect","useState","ref","useCallback","node","transition","position","maxX","pointerX","pointerY","isAtLeft","isInBottom","isInTop","jsxs","Fragment","jsx","theme","Grid","ResponsiveTextV2"],"mappings":"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"}

package/lib/sd-component-library326.js

@@ -1,93 +1,35 @@
-import { j as o } from "./sd-component-library198.js";
-import { useState as L, useCallback as M } from "react";
-import V from "./sd-component-library197.js";
-import { getCoordinateForArc as f } from "./sd-component-library93.js";
-import { GridContainerV2 as X } from "./sd-component-library40.js";
-import { ResponsiveTextV2 as g } from "./sd-component-library152.js";
-const y = "21.5px", w = 10, j = `${w}px`, J = ({
-  segment: $,
-  isHover: r,
-  animationDuration: S,
-  labelOffset: i,
-  labelPointerOffset: k,
-  radius: c,
-  mobile: e,
-  labelOffsetMobile: u
-}) => {
-  const { start: p, end: a, text: R, color: z, secondaryText: C } = $, d = c * 2, t = (p + a) / 2, h = Math.round(t * 360), { x: _, y: x } = f(c, h), [n, A] = L(), G = M((m) => {
-    m && A(m.getBoundingClientRect());
-  }, []), l = `all ${S}ms`, s = t > 0.5 ? "right" : "left", I = d + i, { x: T, y: W } = f(
-    c + u,
-    h,
-    c
-  ), b = t < 0.5, B = t < 0.15 || t > 0.85, F = t > 0.35 || t < 0.65;
-  return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-    !e && /* @__PURE__ */ o.jsx(
-      "line",
-      {
-        x1: _ + (s === "left" ? -1 : 1) * k,
-        x2: s === "left" ? -i : d + i,
-        y1: x,
-        y2: x,
-        stroke: V.colors.cl_lightGrey,
-        strokeWidth: 1
-      }
-    ),
-    /* @__PURE__ */ o.jsx(
-      "foreignObject",
-      {
-        x: e ? T : s === "left" ? -i : I - ((n == null ? void 0 : n.width) ?? 0),
-        y: e ? W : x,
-        width: ((n == null ? void 0 : n.width) ?? 0) + w,
-        height: 50,
-        style: { overflow: "visible" },
-        children: /* @__PURE__ */ o.jsxs(
-          X,
-          {
-            width: "fit-content",
-            justifyItems: "flex-start",
-            gap: r ? "1px" : "4px",
-            sx: {
-              transform: e ? `translate(${b ? -100 : 0}%, calc(${y} * ${B ? 0 : F ? -1 : -0.5}))` : `translateY(calc(${y} / -2)) scale(${r ? 1.3 : 1})`,
-              transition: l,
-              transformOrigin: s,
-              ...e ? {
-                borderRadius: "4px",
-                boxShadow: "0px 3px 6px #00000029",
-                px: "5px",
-                py: "3px"
-              } : s === "left" ? { pr: j } : { pl: j }
-            },
-            bg: "cl_white",
-            children: [
-              /* @__PURE__ */ o.jsx(
-                g,
-                {
-                  width: "fit-content",
-                  fontSizeWeight: [18, "bold"],
-                  color: z,
-                  sx: { transition: l },
-                  ref: G,
-                  children: R
-                }
-              ),
-              /* @__PURE__ */ o.jsx(
-                g,
-                {
-                  fontSizeWeight: [r ? 13 : 14, "bold"],
-                  color: r ? "cl_darkGrey" : "cl_grey",
-                  sx: { transition: l },
-                  children: C ?? `${Math.round((a - p) * 100)}%`
-                }
-              )
-            ]
-          }
-        )
-      }
-    )
-  ] });
-};
+import { j as t } from "./sd-component-library198.js";
+import { ResponsiveTextV2 as l } from "./sd-component-library152.js";
+const n = ({
+  title: e,
+  onClick: o,
+  isLast: r
+}) => /* @__PURE__ */ t.jsx(
+  l,
+  {
+    fontSizeWeight: [14, "regular"],
+    sx: {
+      height: "48px",
+      px: "15px",
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderTopStyle: "none",
+      borderColor: "cl_lightGrey",
+      ...r ? { borderRadius: "0 0 3px 3px", borderBottomStyle: "solid" } : { borderBottomStyle: "none" },
+      ":hover": {
+        borderLeftColor: "cl_purple",
+        borderLeftWidth: "2px"
+      },
+      bg: "cl_white"
+    },
+    onClick: o,
+    children: e
+  }
+);
 export {
-  J as SegmentLabel
+  n as SecondaryCustomSelectorOptionRow
 };
 //# sourceMappingURL=sd-component-library326.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library326.js","sources":["../src/components/meters/donut-diagram/partials/segment-label/segment-label.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport theme from \"../../../../../core/theme\";\nimport { Grid } from \"../../../../containers\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { getCoordinateForArc } from \"../../../outline-meter/utils\";\nimport { DonutSegmentLabelPosition } from \"../../interfaces\";\nimport { SegmentLabelProps as Props } from \"./interfaces\";\n\nconst rowHeight = \"21.5px\";\nconst maskSize = 10;\nconst maskSizePx = `${maskSize}px`;\n\nexport const SegmentLabel: React.FC<Props> = ({\n  segment,\n  isHover,\n  animationDuration,\n  labelOffset,\n  labelPointerOffset,\n  radius,\n  mobile,\n  labelOffsetMobile,\n}) => {\n  const { start, end, text, color, secondaryText } = segment;\n  const diameter = radius * 2;\n  const middle = (start + end) / 2;\n  const middleAlpha = Math.round(middle * 360);\n  const { x, y } = getCoordinateForArc(radius, middleAlpha);\n\n  const [rect, setRect] = useState<DOMRect>();\n  const ref = useCallback((node: HTMLDivElement) => {\n    if (node) {\n      setRect(node.getBoundingClientRect());\n    }\n  }, []);\n\n  const transition = `all ${animationDuration}ms`;\n\n  const position: DonutSegmentLabelPosition = middle > 0.5 ? \"right\" : \"left\";\n  const maxX = diameter + labelOffset;\n\n  const { x: pointerX, y: pointerY } = getCoordinateForArc(\n    radius + labelOffsetMobile,\n    middleAlpha,\n    radius\n  );\n\n  const isAtLeft = middle < 0.5;\n  const isInBottom = middle < 0.15 || middle > 0.85;\n  const isInTop = middle > 0.35 || middle < 0.65;\n\n  return (\n    <>\n      {!mobile && (\n        <line\n          x1={x + (position === \"left\" ? -1 : 1) * labelPointerOffset}\n          x2={position === \"left\" ? -labelOffset : diameter + labelOffset}\n          y1={y}\n          y2={y}\n          stroke={theme.colors[\"cl_lightGrey\"]}\n          strokeWidth={1}\n        />\n      )}\n\n      <foreignObject\n        x={\n          mobile\n            ? pointerX\n            : position === \"left\"\n            ? -labelOffset\n            : maxX - (rect?.width ?? 0)\n        }\n        y={mobile ? pointerY : y}\n        width={(rect?.width ?? 0) + maskSize}\n        height={50}\n        style={{ overflow: \"visible\" }}\n      >\n        <Grid\n          width=\"fit-content\"\n          justifyItems=\"flex-start\"\n          gap={isHover ? \"1px\" : \"4px\"}\n          sx={{\n            transform: mobile\n              ? `translate(${isAtLeft ? -100 : 0}%, calc(${rowHeight} * ${\n                  isInBottom ? 0 : isInTop ? -1 : -0.5\n                }))`\n              : `translateY(calc(${rowHeight} / -2)) scale(${\n                  isHover ? 1.3 : 1\n                })`,\n            transition,\n            transformOrigin: position,\n            ...(mobile\n              ? {\n                  borderRadius: \"4px\",\n                  boxShadow: \"0px 3px 6px #00000029\",\n                  px: \"5px\",\n                  py: \"3px\",\n                }\n              : position === \"left\"\n              ? { pr: maskSizePx }\n              : { pl: maskSizePx }),\n          }}\n          bg=\"cl_white\"\n        >\n          <ResponsiveTextV2\n            width=\"fit-content\"\n            fontSizeWeight={[18, \"bold\"]}\n            color={color}\n            sx={{ transition }}\n            ref={ref}\n          >\n            {text}\n          </ResponsiveTextV2>\n\n          <ResponsiveTextV2\n            fontSizeWeight={[isHover ? 13 : 14, \"bold\"]}\n            color={isHover ? \"cl_darkGrey\" : \"cl_grey\"}\n            sx={{ transition }}\n          >\n            {secondaryText ?? `${Math.round((end - start) * 100)}%`}\n          </ResponsiveTextV2>\n        </Grid>\n      </foreignObject>\n    </>\n  );\n};\n"],"names":["rowHeight","maskSize","maskSizePx","SegmentLabel","segment","isHover","animationDuration","labelOffset","labelPointerOffset","radius","mobile","labelOffsetMobile","start","end","text","color","secondaryText","diameter","middle","middleAlpha","x","y","getCoordinateForArc","rect","setRect","useState","ref","useCallback","node","transition","position","maxX","pointerX","pointerY","isAtLeft","isInBottom","isInTop","jsxs","Fragment","jsx","theme","Grid","ResponsiveTextV2"],"mappings":"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"}
+{"version":3,"file":"sd-component-library326.js","sources":["../src/components/selectors/secondary-custom-selector/partials/secondary-custom-selector-option-row/secondary-custom-selector-option-row.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { SecondaryCustomSelectorOptionRowProps as Props } from \"./interfaces\";\n\nexport const SecondaryCustomSelectorOptionRow: React.FC<Props> = ({\n  title,\n  onClick,\n  isLast,\n}) => {\n  return (\n    <ResponsiveTextV2\n      fontSizeWeight={[14, \"regular\"]}\n      sx={{\n        height: \"48px\",\n        px: \"15px\",\n        display: \"flex\",\n        justifyContent: \"flex-end\",\n        alignItems: \"center\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderTopStyle: \"none\",\n        borderColor: \"cl_lightGrey\",\n        ...(isLast\n          ? { borderRadius: \"0 0 3px 3px\", borderBottomStyle: \"solid\" }\n          : { borderBottomStyle: \"none\" }),\n        \":hover\": {\n          borderLeftColor: \"cl_purple\",\n          borderLeftWidth: \"2px\",\n        },\n        bg: \"cl_white\",\n      }}\n      onClick={onClick}\n    >\n      {title}\n    </ResponsiveTextV2>\n  );\n};\n"],"names":["SecondaryCustomSelectorOptionRow","title","onClick","isLast","jsx","ResponsiveTextV2"],"mappings":";;AAKO,MAAMA,IAAoD,CAAC;AAAA,EAChE,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AACF,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAgB,CAAC,IAAI,SAAS;AAAA,IAC9B,IAAI;AAAA,MACF,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,GAAIF,IACA,EAAE,cAAc,eAAe,mBAAmB,QAAQ,IAC1D,EAAE,mBAAmB,OAAO;AAAA,MAChC,UAAU;AAAA,QACR,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MACnB;AAAA,MACA,IAAI;AAAA,IACN;AAAA,IACA,SAAAD;AAAA,IAEC,UAAAD;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library57.js

@@ -1,19 +1,19 @@
 import { j as n } from "./sd-component-library198.js";
-import { useState as w, useEffect as b, useCallback as j } from "react";
-import { Input as C } from "@rebass/forms";
+import { useState as b, useEffect as j, useCallback as C } from "react";
+import { Input as V } from "@rebass/forms";
 import { translatedTextSuffix as x } from "./sd-component-library5.js";
-import { InputContainer as V } from "./sd-component-library60.js";
-import { InvalidInputError as y } from "./sd-component-library70.js";
-const B = (s, a, e) => (o) => {
+import { InputContainer as y } from "./sd-component-library60.js";
+import { InvalidInputError as B } from "./sd-component-library70.js";
+const I = (s, a, e) => (o) => {
   const r = o.target.value;
   try {
     const t = e(r);
     s(r), t && a(r);
   } catch (t) {
-    if (!(t instanceof y))
+    if (!(t instanceof B))
       throw t;
   }
-}, I = ({
+}, E = ({
   value: s,
   onChange: a,
   validateValue: e = () => !0,
@@ -22,21 +22,21 @@ const B = (s, a, e) => (o) => {
 }) => {
   let t = s, i = "";
   t.endsWith(x) && (t = t.slice(0, -x.length), i = "no-translate");
-  const [m, c] = w(t);
-  b(() => {
+  const [m, c] = b(t);
+  j(() => {
     t !== void 0 && c(t);
   }, [t]);
-  const p = j(
+  const p = C(
     (l) => {
       o && (l == null || l.focus());
     },
     [o]
   );
   return /* @__PURE__ */ n.jsx(
-    C,
+    V,
     {
       variant: "_inputs.v2",
-      onChange: B(c, a, e),
+      onChange: I(c, a, e),
       value: m,
       ...r,
       sx: {
@@ -51,7 +51,7 @@ const B = (s, a, e) => (o) => {
       ref: p
     }
   );
-}, d = "16px", _ = ({
+}, d = "16px", $ = ({
   value: s,
   onChange: a,
   id: e,
@@ -67,16 +67,17 @@ const B = (s, a, e) => (o) => {
   showCheckMark: u,
   checkmarkRight: f = "0px",
   children: v,
-  ...g
+  inputPr: g,
+  ...w
 }) => /* @__PURE__ */ n.jsxs(
-  V,
+  y,
   {
     id: e,
     cursor: o ? "not-allowed" : "pointer",
-    ...g,
+    ...w,
     children: [
       /* @__PURE__ */ n.jsx(
-        I,
+        E,
         {
           value: s,
           onChange: a,
@@ -90,7 +91,7 @@ const B = (s, a, e) => (o) => {
           onKeyPress: p,
           focusInput: l,
           maxLength: h,
-          pr: u ? `calc(${d} + ${f} + 2px)` : void 0
+          pr: g ?? (u ? `calc(${d} + ${f} + 2px)` : void 0)
         }
       ),
       u && /* @__PURE__ */ n.jsx(
@@ -121,7 +122,7 @@ const B = (s, a, e) => (o) => {
   }
 );
 export {
-  I as FormV2Input,
-  _ as FormV2InputWithContainer
+  E as FormV2Input,
+  $ 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 & { showCheckMark?: boolean; checkmarkRight?: string }\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  ...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={\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","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  ...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  ...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={\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","containerProps","jsxs","InputContainer"],"mappings":"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"}

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-library282.js";
 import "./sd-component-library283.js";
-import "./sd-component-library284.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,7 +1,7 @@
 import { j as t } from "./sd-component-library198.js";
 import { useState as v, useRef as w } from "react";
+import "./sd-component-library282.js";
 import "./sd-component-library283.js";
-import "./sd-component-library284.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-library285.js";

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-library282.js";
+import { ReactComponent as S } from "./sd-component-library284.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,7 +2,7 @@ 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-library282.js";
+import { ReactComponent as z } from "./sd-component-library284.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";

package/lib/sd-component-library77.js

@@ -1,11 +1,11 @@
 import { j as s } from "./sd-component-library198.js";
 import { useState as V } from "react";
 import { useDependantState as q } from "./sd-component-library3.js";
-import { SearchBox as z } from "./sd-component-library224.js";
+import { SearchBox as z } from "./sd-component-library223.js";
 import { OutsideClickBox as G } from "./sd-component-library12.js";
 import { PrimaryTextInput as H } from "./sd-component-library75.js";
 import { ReactComponent as J } from "./sd-component-library221.js";
-import { ReactComponent as M } from "./sd-component-library225.js";
+import { ReactComponent as M } from "./sd-component-library224.js";
 function f(i, o, e, t) {
   t == null || t(i, o), e(i);
 }

package/lib/sd-component-library78.js

@@ -1,6 +1,6 @@
 import { j as r } from "./sd-component-library198.js";
 import { Box as I } from "rebass";
-import { SecondaryInputLabels as B } from "./sd-component-library223.js";
+import { SecondaryInputLabels as B } from "./sd-component-library225.js";
 import { NumberInput as A } from "./sd-component-library73.js";
 const k = (n) => {
   const {

package/lib/sd-component-library79.js

@@ -1,6 +1,6 @@
 import { j as t } from "./sd-component-library198.js";
 import { Box as c } from "rebass";
-import { SecondaryInputLabels as u } from "./sd-component-library223.js";
+import { SecondaryInputLabels as u } from "./sd-component-library225.js";
 import { PrimaryTextInput as f } from "./sd-component-library75.js";
 const T = (e) => {
   const { m: r, mb: s, ml: n, mr: o, mt: a, width: m, padding: p, sx: x, inputSx: d, ...i } = e;

package/lib/sd-component-library88.js

@@ -1,13 +1,13 @@
 import { j as e } from "./sd-component-library198.js";
 import { Box as R } from "rebass";
 import { useElementCoordinates as _ } from "./sd-component-library3.js";
-import { defaultPointerWidth as z, defaultTextBottomMargin as X } from "./sd-component-library230.js";
-import { labelWidth as Y, defaultDistanceFromLabelToRanges as W, labelPaddingX as A, defaultWidth as D, defaultHeight as E, defaultArc as G, defaultPointStrokeWidth as H, defaultInnerPointRadius as V, defaultGaugeWidth as q, defaultMaskBorderRadius as N } from "./sd-component-library231.js";
+import { defaultPointerWidth as z, defaultTextBottomMargin as X } from "./sd-component-library231.js";
+import { labelWidth as Y, defaultDistanceFromLabelToRanges as W, labelPaddingX as A, defaultWidth as D, defaultHeight as E, defaultArc as G, defaultPointStrokeWidth as H, defaultInnerPointRadius as V, defaultGaugeWidth as q, defaultMaskBorderRadius as N } from "./sd-component-library232.js";
 import { isValueInRange as J } from "./sd-component-library93.js";
-import { COLOR_TO_ICON_MAP as K, defaultSmileyWidth as Q, defaultDistanceBetweenRanges as U } from "./sd-component-library232.js";
-import { isCorrectSmileyMeterConfig as Z, getIsHorizontal as ee } from "./sd-component-library233.js";
-import { SmileyMeterRanges as te } from "./sd-component-library234.js";
-import { MatchedRangeLabelBox as ie } from "./sd-component-library235.js";
+import { COLOR_TO_ICON_MAP as K, defaultSmileyWidth as Q, defaultDistanceBetweenRanges as U } from "./sd-component-library233.js";
+import { isCorrectSmileyMeterConfig as Z, getIsHorizontal as ee } from "./sd-component-library234.js";
+import { SmileyMeterRanges as te } from "./sd-component-library235.js";
+import { MatchedRangeLabelBox as ie } from "./sd-component-library236.js";
 import { FlexCenter as oe } from "./sd-component-library36.js";
 const xe = ($) => {
   const {

package/lib/sd-component-library89.js

@@ -1,6 +1,6 @@
 import { j as s } from "./sd-component-library198.js";
-import { smallMeterMaskBorderRadius as n } from "./sd-component-library231.js";
-import { smallSmileyMeterWidth as d, smallSmileyMeterHeight as h, smallSmileyGaugeWidth as S, smallSmileyWidth as u, smallSmileyInnerPointRadius as y, smallSmileyInnerPointStrokeWidth as g } from "./sd-component-library232.js";
+import { smallMeterMaskBorderRadius as n } from "./sd-component-library232.js";
+import { smallSmileyMeterWidth as d, smallSmileyMeterHeight as h, smallSmileyGaugeWidth as S, smallSmileyWidth as u, smallSmileyInnerPointRadius as y, smallSmileyInnerPointStrokeWidth as g } from "./sd-component-library233.js";
 import { SmileyMeterV2 as W } from "./sd-component-library88.js";
 const k = (e) => {
   const {

package/lib/sd-component-library90.js

@@ -1,6 +1,6 @@
 import { j as l } from "./sd-component-library198.js";
 import { Box as f } from "rebass";
-import { ReactComponent as d } from "./sd-component-library243.js";
+import { ReactComponent as d } from "./sd-component-library230.js";
 import { BaseGridContainer as h } from "./sd-component-library37.js";
 const F = [
   "#5CA13A",

package/lib/sd-component-library91.js

@@ -1,11 +1,11 @@
 import { j as r } from "./sd-component-library198.js";
 import { Box as H } from "rebass";
-import { labelWidth as I, defaultDistanceFromLabelToRanges as p, labelPaddingX as X, defaultArc as A, defaultWidth as E, defaultHeight as G, defaultDistanceBetweenRanges as Y, defaultGaugeWidth as q, defaultPointStrokeWidth as y, defaultInnerPointRadius as z, defaultDistanceFromRangesToNeedle as J, defaultInnerCircleStrokeWidth as K, defaultInnerCircleRadius as Q, defaultNeedleWidth as U, defaultNumberOfDashes as V, defaultDashHeight as Z, defaultDashWidth as _, defaultDistanceFromRangesToScale as ee, defaultMaskBorderRadius as te } from "./sd-component-library231.js";
+import { labelWidth as I, defaultDistanceFromLabelToRanges as p, labelPaddingX as X, defaultArc as A, defaultWidth as E, defaultHeight as G, defaultDistanceBetweenRanges as Y, defaultGaugeWidth as q, defaultPointStrokeWidth as y, defaultInnerPointRadius as z, defaultDistanceFromRangesToNeedle as J, defaultInnerCircleStrokeWidth as K, defaultInnerCircleRadius as Q, defaultNeedleWidth as U, defaultNumberOfDashes as V, defaultDashHeight as Z, defaultDashWidth as _, defaultDistanceFromRangesToScale as ee, defaultMaskBorderRadius as te } from "./sd-component-library232.js";
 import { isCorrectOutlineMeterConfig as ae } from "./sd-component-library93.js";
-import { OutlineMeterRange as re } from "./sd-component-library236.js";
-import { OutlineMeterScale as ie } from "./sd-component-library237.js";
-import { OutlineMeterNeedle as se } from "./sd-component-library238.js";
-import { OutlineMeterLabelBox as oe } from "./sd-component-library239.js";
+import { OutlineMeterRange as re } from "./sd-component-library237.js";
+import { OutlineMeterScale as ie } from "./sd-component-library238.js";
+import { OutlineMeterNeedle as se } from "./sd-component-library239.js";
+import { OutlineMeterLabelBox as oe } from "./sd-component-library240.js";
 const ge = (R) => {
   const {
     marginTop: x = "50px",

package/lib/sd-component-library92.js

@@ -1,5 +1,5 @@
 import { j as u } from "./sd-component-library198.js";
-import { smallMeterWidth as g, smallMeterHeight as c, smallMeterPointStrokeWidth as R, smallMeterPointRadius as W, smallMeterInnerCircleStrokeWidth as k, smallMeterInnerCircleRadius as S, smallMeterGaugeWidth as p, smallMeterDistanceBetweenRanges as f, smallMeterDistanceFromRangesToNeedle as w, smallMeterNeedleWidth as x, smallMeterMaskBorderRadius as B } from "./sd-component-library231.js";
+import { smallMeterWidth as g, smallMeterHeight as c, smallMeterPointStrokeWidth as R, smallMeterPointRadius as W, smallMeterInnerCircleStrokeWidth as k, smallMeterInnerCircleRadius as S, smallMeterGaugeWidth as p, smallMeterDistanceBetweenRanges as f, smallMeterDistanceFromRangesToNeedle as w, smallMeterNeedleWidth as x, smallMeterMaskBorderRadius as B } from "./sd-component-library232.js";
 import { OutlineMeter as C } from "./sd-component-library91.js";
 const T = (e) => {
   const {

package/lib/sd-component-library94.js

@@ -1,11 +1,11 @@
 import { j as o } from "./sd-component-library198.js";
 import { Box as y } from "rebass";
-import { labelWidth as E, defaultDistanceFromLabelToRanges as R, labelPaddingX as G, defaultArc as P, defaultWidth as X, defaultHeight as Y, defaultDistanceBetweenRanges as A, defaultGaugeWidth as V, defaultDistanceFromRangesToNeedle as _, defaultInnerCircleStrokeWidth as q, defaultInnerCircleRadius as J, defaultNeedleWidth as K, defaultNumberOfDashes as Q, defaultDashHeight as U, defaultDashWidth as Z, defaultDistanceFromRangesToScale as ee, defaultMaskBorderRadius as te } from "./sd-component-library231.js";
-import { defaultPointerWidth as ae } from "./sd-component-library230.js";
-import { DiscreteRange as oe } from "./sd-component-library240.js";
-import { OutlineMeterScale as le } from "./sd-component-library237.js";
-import { DiscreteMeterNeedle as re } from "./sd-component-library241.js";
-import { MatchedRangeLabelBox as ne } from "./sd-component-library242.js";
+import { labelWidth as E, defaultDistanceFromLabelToRanges as R, labelPaddingX as G, defaultArc as P, defaultWidth as X, defaultHeight as Y, defaultDistanceBetweenRanges as A, defaultGaugeWidth as V, defaultDistanceFromRangesToNeedle as _, defaultInnerCircleStrokeWidth as q, defaultInnerCircleRadius as J, defaultNeedleWidth as K, defaultNumberOfDashes as Q, defaultDashHeight as U, defaultDashWidth as Z, defaultDistanceFromRangesToScale as ee, defaultMaskBorderRadius as te } from "./sd-component-library232.js";
+import { defaultPointerWidth as ae } from "./sd-component-library231.js";
+import { DiscreteRange as oe } from "./sd-component-library246.js";
+import { OutlineMeterScale as le } from "./sd-component-library238.js";
+import { DiscreteMeterNeedle as re } from "./sd-component-library247.js";
+import { MatchedRangeLabelBox as ne } from "./sd-component-library248.js";
 function fe(x) {
   const {
     marginTop: b = "50px",