@selfdecode/sd-component-library 4.0.73-vite11 → 4.0.73-vite13

package/lib/sd-component-library247.js

@@ -1,56 +1,62 @@
-import { j as s } from "./sd-component-library195.js";
-import { useRef as g, useState as $, useEffect as b } from "react";
-import { Box as l } from "rebass";
-import { labelPaddingX as o, labelWidth as u } from "./sd-component-library232.js";
-import { ResponsiveTextV2 as v } from "./sd-component-library147.js";
-const C = (x) => {
+import { jsx as t, jsxs as X, Fragment as M } from "./sd-component-library195.js";
+import { getCoordinateForArc as Y, getInnerX as O, getInnerY as P, degToRad as G } from "./sd-component-library89.js";
+import { getFractionColor as T } from "./sd-component-library246.js";
+import { BaseOutlineArc as v } from "./sd-component-library673.js";
+const I = "#CCD0DB", K = (W) => {
   const {
-    position: t,
-    diameter: r,
-    label: d,
-    distanceFromLabelToRanges: p,
-    isInRange: e,
-    color: n
-  } = x, i = g(), [c, a] = $(0);
-  b(() => {
-    i.current && a(i.current.getBoundingClientRect().height);
-  }, [i]);
-  const h = t === "right" ? `${r + p}px` : t === "top" ? `${r / 2}px` : void 0, m = t === "left" ? `${r + p}px` : void 0, f = t === "left" || t === "right" ? `${r / 2}px` : `${-p}px`;
-  return /* @__PURE__ */ s.jsx(l, { sx: { position: "absolute", left: h, top: f, right: m }, children: /* @__PURE__ */ s.jsx(
-    l,
-    {
-      sx: {
-        position: "relative",
-        top: `-${c}px`,
-        left: t === "top" ? "-50%" : void 0,
-        py: "7px",
-        px: e ? `${o}px` : "0",
-        borderColor: e ? n : "cl_lightGrey",
-        borderWidth: e ? "2px" : "1pt",
-        borderStyle: e ? "solid" : "none",
-        borderBottomStyle: !e && t === "top" ? "none" : "solid",
-        borderRadius: e ? `${o}px ${o}px ${t !== "left" ? `${o}px` : "0"} ${t !== "right" ? `${o}px` : "0"}` : "0",
-        bg: "cl_white",
-        "& > div": {
-          maxWidth: t === "top" ? void 0 : `${u}px`
-        }
-      },
-      ref: i,
-      children: /* @__PURE__ */ s.jsx(
-        v,
-        {
-          width: "max-content",
-          fontSizeWeight: [[12, "semi-bold"]],
-          color: e && n !== "#CCD0DB" ? n : "cl_darkGrey",
-          textTransform: "uppercase",
-          letterSpacing: "1.8px",
-          children: d
-        }
-      )
-    }
-  ) });
+    diameter: $,
+    idx: d,
+    endColor: C,
+    startColor: x,
+    segmented: S,
+    totalRanges: n,
+    value: i,
+    arc: l,
+    innerPointRadius: k,
+    pointStrokeWidth: R,
+    gaugeWidth: e,
+    pointColor: F
+  } = W, c = d / n, g = (d + 1) / n, j = i >= c && i <= g, w = (360 - l) / 2, r = $ / 2, u = w + l * c, m = w + l * g, {
+    x: h,
+    y: p
+  } = Y(r, u), {
+    x: y,
+    y: A
+  } = Y(r, m);
+  if (S || !j)
+    return /* @__PURE__ */ t(v, { startX: h, startY: p, endX: y, endY: A, startAlpha: u, endAlpha: m, color: S || i > g ? `url(#gradient-${x}-${C})` : I, radius: r, width: e });
+  const o = u + (i - c) / (g - c) * l / n, {
+    x: a,
+    y: s
+  } = Y(r, o), B = O(a, G(o), e), D = P(s, G(o), e), z = d >= n / 2, E = d + 1 === n / 2 + 0.5, H = E ? (a - h) / (y - h) : (s - p) / (A - p), f = T(H, x, C);
+  return /* @__PURE__ */ X(M, { children: [
+    /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ X("linearGradient", { id: `value-gradient-${f}`, ...z ? {
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 1
+    } : E ? {
+      x1: 0,
+      y1: 0,
+      x2: 1,
+      y2: 0
+    } : {
+      x1: 0,
+      y1: 1,
+      x2: 0,
+      y2: 0
+    }, children: [
+      /* @__PURE__ */ t("stop", { stopColor: x, offset: "0%" }),
+      /* @__PURE__ */ t("stop", { stopColor: f, offset: "100%" })
+    ] }) }),
+    /* @__PURE__ */ X("g", { children: [
+      /* @__PURE__ */ t(v, { startX: h, startY: p, endX: a, endY: s, startAlpha: u, endAlpha: o, color: `url(#value-gradient-${f})`, radius: r, width: e, roundEnd: !1 }),
+      /* @__PURE__ */ t(v, { startX: a, startY: s, endX: y, endY: A, startAlpha: o, endAlpha: m, color: I, radius: r, width: e, roundStart: !1 }),
+      /* @__PURE__ */ t("circle", { cx: (a + B) / 2, cy: (s + D) / 2, r: R + k, strokeWidth: R, stroke: F || f, fill: "white" })
+    ] })
+  ] });
 };
 export {
-  C as BaseMeterLabelBox
+  K as GradientMeterRange
 };
 //# sourceMappingURL=sd-component-library247.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library247.js","sources":["../src/components/meters/outline-meter/partials/base-meter-label-box/base-meter-label-box.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts/responsive-text-v2\";\nimport { labelPaddingX, labelWidth } from \"../../contants\";\nimport { BaseMeterLabelBoxProps as Props } from \"./interfaces\";\n\nexport const BaseMeterLabelBox: React.FC<Props> = (props) => {\n  const {\n    position,\n    diameter,\n    label,\n    distanceFromLabelToRanges,\n    isInRange,\n    color,\n  } = props;\n  const ref = useRef<HTMLElement>();\n  const [textHeight, setTextHeight] = useState(0);\n\n  useEffect(() => {\n    if (ref.current) setTextHeight(ref.current.getBoundingClientRect().height);\n  }, [ref]);\n\n  const left =\n    position === \"right\"\n      ? `${diameter + distanceFromLabelToRanges}px`\n      : position === \"top\"\n      ? `${diameter / 2}px`\n      : undefined;\n  const right =\n    position === \"left\"\n      ? `${diameter + distanceFromLabelToRanges}px`\n      : undefined;\n  const top =\n    position === \"left\" || position === \"right\"\n      ? `${diameter / 2}px`\n      : `${-distanceFromLabelToRanges}px`;\n\n  return (\n    <Box sx={{ position: \"absolute\", left, top, right }}>\n      <Box\n        sx={{\n          position: \"relative\",\n          top: `-${textHeight}px`,\n          left: position === \"top\" ? \"-50%\" : undefined,\n          py: \"7px\",\n          px: isInRange ? `${labelPaddingX}px` : \"0\",\n          borderColor: isInRange ? color : \"cl_lightGrey\",\n          borderWidth: isInRange ? \"2px\" : \"1pt\",\n          borderStyle: isInRange ? \"solid\" : \"none\",\n          borderBottomStyle:\n            !isInRange && position === \"top\" ? \"none\" : \"solid\",\n          borderRadius: isInRange\n            ? `${labelPaddingX}px ${labelPaddingX}px ${\n                position !== \"left\" ? `${labelPaddingX}px` : \"0\"\n              } ${position !== \"right\" ? `${labelPaddingX}px` : \"0\"}`\n            : \"0\",\n          bg: \"cl_white\",\n          \"& > div\": {\n            maxWidth: position === \"top\" ? undefined : `${labelWidth}px`,\n          },\n        }}\n        ref={ref}\n      >\n        <ResponsiveTextV2\n          width=\"max-content\"\n          fontSizeWeight={[[12, \"semi-bold\"]]}\n          color={isInRange && color !== \"#CCD0DB\" ? color : \"cl_darkGrey\"}\n          textTransform=\"uppercase\"\n          letterSpacing=\"1.8px\"\n        >\n          {label}\n        </ResponsiveTextV2>\n      </Box>\n    </Box>\n  );\n};\n"],"names":["BaseMeterLabelBox","props","position","diameter","label","distanceFromLabelToRanges","isInRange","color","ref","useRef","textHeight","setTextHeight","useState","useEffect","left","right","top","jsx","Box","labelPaddingX","labelWidth","ResponsiveTextV2"],"mappings":";;;;;AAQa,MAAAA,IAAqC,CAACC,MAAU;AACrD,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,2BAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,EACE,IAAAN,GACEO,IAAMC,KACN,CAACC,GAAYC,CAAa,IAAIC,EAAS,CAAC;AAE9C,EAAAC,EAAU,MAAM;AACd,IAAIL,EAAI,WAASG,EAAcH,EAAI,QAAQ,sBAAsB,EAAE,MAAM;AAAA,EAAA,GACxE,CAACA,CAAG,CAAC;AAER,QAAMM,IACJZ,MAAa,UACT,GAAGC,IAAWE,CAAyB,OACvCH,MAAa,QACb,GAAGC,IAAW,CAAC,OACf,QACAY,IACJb,MAAa,SACT,GAAGC,IAAWE,CAAyB,OACvC,QACAW,IACJd,MAAa,UAAUA,MAAa,UAChC,GAAGC,IAAW,CAAC,OACf,GAAG,CAACE,CAAyB;AAGjC,SAAAY,gBAAAA,MAACC,KAAI,IAAI,EAAE,UAAU,YAAY,MAAAJ,GAAM,KAAAE,GAAK,OAAAD,EAC1C,GAAA,UAAAE,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK,IAAIR,CAAU;AAAA,QACnB,MAAMR,MAAa,QAAQ,SAAS;AAAA,QACpC,IAAI;AAAA,QACJ,IAAII,IAAY,GAAGa,CAAa,OAAO;AAAA,QACvC,aAAab,IAAYC,IAAQ;AAAA,QACjC,aAAaD,IAAY,QAAQ;AAAA,QACjC,aAAaA,IAAY,UAAU;AAAA,QACnC,mBACE,CAACA,KAAaJ,MAAa,QAAQ,SAAS;AAAA,QAC9C,cAAcI,IACV,GAAGa,CAAa,MAAMA,CAAa,MACjCjB,MAAa,SAAS,GAAGiB,CAAa,OAAO,GAC/C,IAAIjB,MAAa,UAAU,GAAGiB,CAAa,OAAO,GAAG,KACrD;AAAA,QACJ,IAAI;AAAA,QACJ,WAAW;AAAA,UACT,UAAUjB,MAAa,QAAQ,SAAY,GAAGkB,CAAU;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,KAAAZ;AAAA,MAEA,UAAAS,gBAAAA,EAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,gBAAgB,CAAC,CAAC,IAAI,WAAW,CAAC;AAAA,UAClC,OAAOf,KAAaC,MAAU,YAAYA,IAAQ;AAAA,UAClD,eAAc;AAAA,UACd,eAAc;AAAA,UAEb,UAAAH;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library247.js","sources":["../src/components/meters/gradient-outline-meter/partials/gradient-meter-range/gradient-meter-range.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { BaseOutlineArc } from \"../../../outline-meter/partials/base-outline-arc\";\nimport {\n  degToRad,\n  getCoordinateForArc,\n  getInnerX,\n  getInnerY,\n} from \"../../../outline-meter/utils\";\nimport { getFractionColor } from \"../../utils\";\nimport { GradientMeterRangeProps as Props } from \"./interfaces\";\n\nconst grey = \"#CCD0DB\";\nexport const GradientMeterRange: React.FC<Props> = (props) => {\n  const {\n    diameter,\n    idx,\n    endColor,\n    startColor,\n    segmented,\n    totalRanges,\n    value,\n    arc,\n    innerPointRadius,\n    pointStrokeWidth,\n    gaugeWidth,\n    pointColor,\n  } = props;\n\n  const start = idx / totalRanges;\n  const end = (idx + 1) / totalRanges;\n\n  const valueWithinRange = value >= start && value <= end;\n\n  const arcStart = (360 - arc) / 2; // deg\n\n  const radius = diameter / 2;\n\n  const rangeArcStart = arcStart + arc * start;\n  const rangeArcEnd = arcStart + arc * end;\n\n  const { x: rangeStartX, y: rangeStartY } = getCoordinateForArc(\n    radius,\n    rangeArcStart\n  );\n  const { x: rangeEndX, y: rangeEndY } = getCoordinateForArc(\n    radius,\n    rangeArcEnd\n  );\n\n  if (segmented || !valueWithinRange)\n    return (\n      <BaseOutlineArc\n        startX={rangeStartX}\n        startY={rangeStartY}\n        endX={rangeEndX}\n        endY={rangeEndY}\n        startAlpha={rangeArcStart}\n        endAlpha={rangeArcEnd}\n        color={\n          segmented || value > end\n            ? `url(#gradient-${startColor}-${endColor})`\n            : grey\n        }\n        radius={radius}\n        width={gaugeWidth}\n      />\n    );\n\n  const valueAlpha =\n    rangeArcStart + (((value - start) / (end - start)) * arc) / totalRanges;\n  const { x: valueX, y: valueY } = getCoordinateForArc(radius, valueAlpha);\n  const valueInnerX = getInnerX(valueX, degToRad(valueAlpha), gaugeWidth);\n  const valueInnerY = getInnerY(valueY, degToRad(valueAlpha), gaugeWidth);\n\n  const useVerticalGradient = idx >= totalRanges / 2;\n  const useHorizontalGradient = idx + 1 === totalRanges / 2 + 0.5;\n\n  const fraction = useHorizontalGradient\n    ? (valueX - rangeStartX) / (rangeEndX - rangeStartX)\n    : (valueY - rangeStartY) / (rangeEndY - rangeStartY);\n  const color = getFractionColor(fraction, startColor, endColor);\n\n  return (\n    <>\n      <defs>\n        <linearGradient\n          id={`value-gradient-${color}`}\n          {...(useVerticalGradient\n            ? {\n                x1: 0,\n                y1: 0,\n                x2: 0,\n                y2: 1,\n              }\n            : useHorizontalGradient\n            ? { x1: 0, y1: 0, x2: 1, y2: 0 }\n            : {\n                x1: 0,\n                y1: 1,\n                x2: 0,\n                y2: 0,\n              })}\n        >\n          <stop stopColor={startColor} offset=\"0%\" />\n          <stop stopColor={color} offset=\"100%\" />\n        </linearGradient>\n      </defs>\n      <g>\n        <BaseOutlineArc\n          startX={rangeStartX}\n          startY={rangeStartY}\n          endX={valueX}\n          endY={valueY}\n          startAlpha={rangeArcStart}\n          endAlpha={valueAlpha}\n          color={`url(#value-gradient-${color})`}\n          radius={radius}\n          width={gaugeWidth}\n          roundEnd={false}\n        />\n        <BaseOutlineArc\n          startX={valueX}\n          startY={valueY}\n          endX={rangeEndX}\n          endY={rangeEndY}\n          startAlpha={valueAlpha}\n          endAlpha={rangeArcEnd}\n          color={grey}\n          radius={radius}\n          width={gaugeWidth}\n          roundStart={false}\n        />\n        <circle\n          cx={(valueX + valueInnerX) / 2}\n          cy={(valueY + valueInnerY) / 2}\n          r={pointStrokeWidth + innerPointRadius}\n          strokeWidth={pointStrokeWidth}\n          stroke={pointColor || color}\n          fill=\"white\"\n        />\n      </g>\n    </>\n  );\n};\n"],"names":["grey","GradientMeterRange","props","diameter","idx","endColor","startColor","segmented","totalRanges","value","arc","innerPointRadius","pointStrokeWidth","gaugeWidth","pointColor","start","end","valueWithinRange","arcStart","radius","rangeArcStart","rangeArcEnd","x","rangeStartX","y","rangeStartY","getCoordinateForArc","rangeEndX","rangeEndY","jsx","BaseOutlineArc","valueAlpha","valueX","valueY","valueInnerX","getInnerX","degToRad","valueInnerY","getInnerY","useVerticalGradient","useHorizontalGradient","fraction","color","getFractionColor","jsxs","Fragment","x1","y1","x2","y2"],"mappings":"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"}

package/lib/sd-component-library248.js

@@ -1,51 +1,39 @@
-import { getCoordinateForArc as s } from "./sd-component-library89.js";
-const v = (r) => {
-  const a = `Received ${r.map(
-    ({ start: e, end: t }) => `(${e},${t})`
-  )}`, n = (e) => console.error(e, a);
-  if (r.some(
-    ({ start: e, end: t }) => [e, t].some((o) => o < 0 || o > 1)
-  ))
-    return n("Segment values should be between 0 and 1"), !1;
-  if (r.reduce(
-    (e, { start: t }) => e + (t === 0 ? 1 : 0),
-    0
-  ) !== 1)
-    return n("One segment should start from 0"), !1;
-  if (r.reduce((e, { end: t }) => e + (t === 1 ? 1 : 0), 0) !== 1)
-    return n("One segment should end by 1"), !1;
-  if (r.some(({ start: e, end: t }) => e >= t))
-    return n("Segment start should be smaller than end"), !1;
-  for (let e = 1; e < r.length; e++) {
-    const t = r[e];
-    if (r[e - 1].end !== t.start)
-      return n("Previous segment end should be equal to next segment start"), !1;
-  }
-  return !0;
-}, x = ({ start: r, end: a }, n, e) => {
-  const t = n - e, o = Math.round(r * 360), c = Math.round(a * 360), d = c - o, { x: l, y: u } = s(n, o), { x: f, y: m } = s(
-    t,
-    o,
-    n
-  ), { x: h, y: i } = s(n, c), { x: g, y: S } = s(
-    t,
-    c,
-    n
-  );
-  return {
-    startX: l,
-    startY: u,
-    endX: h,
-    endY: i,
-    startInnerX: f,
-    startInnerY: m,
-    endInnerX: g,
-    endInnerY: S,
-    arc: d
+import { jsx as l } from "./sd-component-library195.js";
+const c = (a) => {
+  const {
+    position: s,
+    diameter: t,
+    rangeY: e,
+    rangeX: n,
+    distanceFromRanges: r,
+    isInRange: o
+  } = a;
+  if (o)
+    return null;
+  const {
+    startX: d,
+    startY: i,
+    endX: X,
+    endY: Y
+  } = s === "left" ? {
+    startX: n || 0,
+    startY: e || t / 2 - 0.5,
+    endX: -r,
+    endY: t / 2 - 0.5
+  } : s === "top" ? {
+    startX: n || t / 2,
+    startY: e || 0,
+    endX: t / 2,
+    endY: -r
+  } : {
+    startX: n || t,
+    startY: e || t / 2 - 0.5,
+    endX: t + r,
+    endY: t / 2 - 0.5
   };
+  return /* @__PURE__ */ l("path", { d: `M${d},${i} L${X},${Y}`, stroke: "#CCD0DB" });
 };
 export {
-  v as areSegmentsValid,
-  x as getSegmentCoordinates
+  c as OutlineMeterLabelPointer
 };
 //# sourceMappingURL=sd-component-library248.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library248.js","sources":["../src/components/meters/donut-diagram/utils.ts"],"sourcesContent":["import { getCoordinateForArc } from \"../outline-meter/utils\";\nimport { DonutSegment } from \"./interfaces\";\n\nexport const areSegmentsValid = (\n  segments: Pick<DonutSegment, \"start\" | \"end\">[]\n): boolean => {\n  const receivedSegments = `Received ${segments.map(\n    ({ start, end }) => `(${start},${end})`\n  )}`;\n  const showError = (text: string) => console.error(text, receivedSegments);\n\n  if (\n    segments.some(({ start, end }) =>\n      [start, end].some((point) => point < 0 || point > 1)\n    )\n  ) {\n    showError(\"Segment values should be between 0 and 1\");\n    return false;\n  }\n\n  if (\n    segments.reduce<number>(\n      (acc, { start }) => acc + (start === 0 ? 1 : 0),\n      0\n    ) !== 1\n  ) {\n    showError(\"One segment should start from 0\");\n    return false;\n  }\n\n  if (\n    segments.reduce<number>((acc, { end }) => acc + (end === 1 ? 1 : 0), 0) !==\n    1\n  ) {\n    showError(\"One segment should end by 1\");\n    return false;\n  }\n\n  if (segments.some(({ start, end }) => start >= end)) {\n    showError(\"Segment start should be smaller than end\");\n    return false;\n  }\n\n  for (let i = 1; i < segments.length; i++) {\n    const currentSegment = segments[i];\n    const prevSegment = segments[i - 1];\n    if (prevSegment.end !== currentSegment.start) {\n      showError(\"Previous segment end should be equal to next segment start\");\n      return false;\n    }\n  }\n\n  return true;\n};\n\nexport const getSegmentCoordinates = (\n  { start, end }: Pick<DonutSegment, \"start\" | \"end\">,\n  radius: number,\n  segmentWidth: number\n) => {\n  const innerRadius = radius - segmentWidth;\n\n  const startAlpha = Math.round(start * 360);\n  const endAlpha = Math.round(end * 360);\n  const arc = endAlpha - startAlpha;\n\n  const { x: startX, y: startY } = getCoordinateForArc(radius, startAlpha);\n  const { x: startInnerX, y: startInnerY } = getCoordinateForArc(\n    innerRadius,\n    startAlpha,\n    radius\n  );\n\n  const { x: endX, y: endY } = getCoordinateForArc(radius, endAlpha);\n  const { x: endInnerX, y: endInnerY } = getCoordinateForArc(\n    innerRadius,\n    endAlpha,\n    radius\n  );\n  return {\n    startX,\n    startY,\n    endX,\n    endY,\n    startInnerX,\n    startInnerY,\n    endInnerX,\n    endInnerY,\n    arc,\n  };\n};\n"],"names":["areSegmentsValid","segments","receivedSegments","start","end","showError","text","point","acc","i","currentSegment","getSegmentCoordinates","radius","segmentWidth","innerRadius","startAlpha","endAlpha","arc","startX","startY","getCoordinateForArc","startInnerX","startInnerY","endX","endY","endInnerX","endInnerY"],"mappings":";AAGa,MAAAA,IAAmB,CAC9BC,MACY;AACN,QAAAC,IAAmB,YAAYD,EAAS;AAAA,IAC5C,CAAC,EAAE,OAAAE,GAAO,KAAAC,QAAU,IAAID,CAAK,IAAIC,CAAG;AAAA,EACrC,CAAA,IACKC,IAAY,CAACC,MAAiB,QAAQ,MAAMA,GAAMJ,CAAgB;AAExE,MACED,EAAS;AAAA,IAAK,CAAC,EAAE,OAAAE,GAAO,KAAAC,QACtB,CAACD,GAAOC,CAAG,EAAE,KAAK,CAACG,MAAUA,IAAQ,KAAKA,IAAQ,CAAC;AAAA,EAAA;AAGrD,WAAAF,EAAU,0CAA0C,GAC7C;AAGT,MACEJ,EAAS;AAAA,IACP,CAACO,GAAK,EAAE,OAAAL,QAAYK,KAAOL,MAAU,IAAI,IAAI;AAAA,IAC7C;AAAA,QACI;AAEN,WAAAE,EAAU,iCAAiC,GACpC;AAGT,MACEJ,EAAS,OAAe,CAACO,GAAK,EAAE,KAAAJ,EAAI,MAAMI,KAAOJ,MAAQ,IAAI,IAAI,IAAI,CAAC,MACtE;AAEA,WAAAC,EAAU,6BAA6B,GAChC;AAGL,MAAAJ,EAAS,KAAK,CAAC,EAAE,OAAAE,GAAO,KAAAC,QAAUD,KAASC,CAAG;AAChD,WAAAC,EAAU,0CAA0C,GAC7C;AAGT,WAASI,IAAI,GAAGA,IAAIR,EAAS,QAAQQ,KAAK;AAClC,UAAAC,IAAiBT,EAASQ,CAAC;AAE7B,QADgBR,EAASQ,IAAI,CAAC,EAClB,QAAQC,EAAe;AACrC,aAAAL,EAAU,4DAA4D,GAC/D;AAAA,EAEX;AAEO,SAAA;AACT,GAEaM,IAAwB,CACnC,EAAE,OAAAR,GAAO,KAAAC,EAAI,GACbQ,GACAC,MACG;AACH,QAAMC,IAAcF,IAASC,GAEvBE,IAAa,KAAK,MAAMZ,IAAQ,GAAG,GACnCa,IAAW,KAAK,MAAMZ,IAAM,GAAG,GAC/Ba,IAAMD,IAAWD,GAEjB,EAAE,GAAGG,GAAQ,GAAGC,MAAWC,EAAoBR,GAAQG,CAAU,GACjE,EAAE,GAAGM,GAAa,GAAGC,EAAgB,IAAAF;AAAA,IACzCN;AAAA,IACAC;AAAA,IACAH;AAAA,EAAA,GAGI,EAAE,GAAGW,GAAM,GAAGC,MAASJ,EAAoBR,GAAQI,CAAQ,GAC3D,EAAE,GAAGS,GAAW,GAAGC,EAAc,IAAAN;AAAA,IACrCN;AAAA,IACAE;AAAA,IACAJ;AAAA,EAAA;AAEK,SAAA;AAAA,IACL,QAAAM;AAAA,IACA,QAAAC;AAAA,IACA,MAAAI;AAAA,IACA,MAAAC;AAAA,IACA,aAAAH;AAAA,IACA,aAAAC;AAAA,IACA,WAAAG;AAAA,IACA,WAAAC;AAAA,IACA,KAAAT;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library248.js","sources":["../src/components/meters/outline-meter/partials/outline-meter-label-pointer/outline-meter-label-pointer.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { OutlineMeterLabelPointerProps as Props } from \"./interfaces\";\n\nexport const OutlineMeterLabelPointer: React.FC<Props> = (props) => {\n  const { position, diameter, rangeY, rangeX, distanceFromRanges, isInRange } =\n    props;\n\n  if (isInRange) return null;\n\n  const { startX, startY, endX, endY } =\n    position === \"left\"\n      ? {\n          startX: rangeX || 0,\n          startY: rangeY || diameter / 2 - 0.5,\n          endX: -distanceFromRanges,\n          endY: diameter / 2 - 0.5,\n        }\n      : position === \"top\"\n      ? {\n          startX: rangeX || diameter / 2,\n          startY: rangeY || 0,\n          endX: diameter / 2,\n          endY: -distanceFromRanges,\n        }\n      : {\n          startX: rangeX || diameter,\n          startY: rangeY || diameter / 2 - 0.5,\n          endX: diameter + distanceFromRanges,\n          endY: diameter / 2 - 0.5,\n        };\n\n  return (\n    <path d={`M${startX},${startY} L${endX},${endY}`} stroke={\"#CCD0DB\"} />\n  );\n};\n"],"names":["OutlineMeterLabelPointer","props","position","diameter","rangeY","rangeX","distanceFromRanges","isInRange","startX","startY","endX","endY","jsx"],"mappings":";AAIO,MAAMA,IAA6CC,CAAUA,MAAA;AAC5D,QAAA;AAAA,IAAEC,UAAAA;AAAAA,IAAUC,UAAAA;AAAAA,IAAUC,QAAAA;AAAAA,IAAQC,QAAAA;AAAAA,IAAQC,oBAAAA;AAAAA,IAAoBC,WAAAA;AAAAA,EAC9DN,IAAAA;AAEEM,MAAAA;AAAkB,WAAA;AAEhB,QAAA;AAAA,IAAEC,QAAAA;AAAAA,IAAQC,QAAAA;AAAAA,IAAQC,MAAAA;AAAAA,IAAMC,MAAAA;AAAAA,EAAAA,IAC5BT,MAAa,SACT;AAAA,IACEM,QAAQH,KAAU;AAAA,IAClBI,QAAQL,KAAUD,IAAW,IAAI;AAAA,IACjCO,MAAM,CAACJ;AAAAA,IACPK,MAAMR,IAAW,IAAI;AAAA,EAAA,IAEvBD,MAAa,QACb;AAAA,IACEM,QAAQH,KAAUF,IAAW;AAAA,IAC7BM,QAAQL,KAAU;AAAA,IAClBM,MAAMP,IAAW;AAAA,IACjBQ,MAAM,CAACL;AAAAA,EAAAA,IAET;AAAA,IACEE,QAAQH,KAAUF;AAAAA,IAClBM,QAAQL,KAAUD,IAAW,IAAI;AAAA,IACjCO,MAAMP,IAAWG;AAAAA,IACjBK,MAAMR,IAAW,IAAI;AAAA,EAAA;AAG7B,SACG,gBAAAS,EAAA,QAAA,EAAK,GAAI,IAAGJ,CAAO,IAAGC,CAAO,KAAIC,CAAK,IAAGC,CAAK,IAAG,QAAQ,UAAa,CAAA;AAE3E;"}

package/lib/sd-component-library249.js

@@ -1,78 +1,45 @@
-import { j as n } from "./sd-component-library195.js";
-import { useHover as Z } from "./sd-component-library3.js";
-import { getCoordinateForArc as l } from "./sd-component-library89.js";
-import { getSegmentCoordinates as O } from "./sd-component-library248.js";
-import { SegmentLabel as q } from "./sd-component-library679.js";
-const h = 300, G = ({
-  segment: o,
-  segmentWidth: $,
-  outlineWidth: f,
-  size: i,
-  mobile: a,
-  ...c
-}) => {
-  const { start: p, end: x, color: u } = o, { labelOffset: j } = c, t = i / 2, d = t - $, {
-    startInnerX: k,
-    startInnerY: A,
-    endInnerX: M,
-    endInnerY: X,
-    endX: Y,
-    endY: v,
-    startY: S,
-    startX: g,
-    arc: e
-  } = O(o, t, $), r = i / 2, H = Math.round(p * 360), I = Math.round(x * 360), { isHover: L, hoverCallbacks: w } = Z(), m = L && !a, s = Math.sqrt(2) * (t + j), { x: y, y: C } = l(
-    s,
-    H,
-    t
-  ), { x: E, y: R } = l(
-    s,
-    I,
-    t
-  );
-  return /* @__PURE__ */ n.jsxs("g", { ...a ? {} : w, children: [
-    /* @__PURE__ */ n.jsx(
-      "path",
-      {
-        d: `M${r},${r} L${y},${C} A${s},${s} 0 ${e > 180 ? "1" : "0"},1 ${E},${R}Z`,
-        fill: "transparent"
-      }
-    ),
-    /* @__PURE__ */ n.jsx(
-      "path",
-      {
-        d: `M${r},${r} L${g},${S} A${t},${t} 0 ${e > 180 ? "1" : "0"},1 ${Y},${v}Z`,
-        fill: u,
-        strokeWidth: f,
-        stroke: "white"
-      }
-    ),
-    /* @__PURE__ */ n.jsx(
-      "path",
-      {
-        d: `M${r},${r} L${k},${A} A${d},${d} 0 ${e > 180 ? "1" : "0"},1 ${M},${X}Z`,
-        fill: "white",
-        style: {
-          transform: `scale(${m ? 0.8 : 1}`,
-          transformOrigin: "center",
-          transition: `all ${h}ms`
-        }
-      }
-    ),
-    /* @__PURE__ */ n.jsx(
-      q,
-      {
-        segment: o,
-        radius: t,
-        animationDuration: h,
-        isHover: m,
-        mobile: a,
-        ...c
-      }
-    )
-  ] });
+import { jsx as l } from "./sd-component-library195.js";
+import { useRef as g, useState as $, useEffect as b } from "react";
+import "./sd-component-library198.js";
+import { labelPaddingX as o, labelWidth as u } from "./sd-component-library236.js";
+import { Box as s } from "./sd-component-library199.js";
+import { ResponsiveTextV2 as v } from "./sd-component-library147.js";
+const W = (x) => {
+  const {
+    position: t,
+    diameter: r,
+    label: d,
+    distanceFromLabelToRanges: p,
+    isInRange: e,
+    color: n
+  } = x, i = g(), [c, a] = $(0);
+  b(() => {
+    i.current && a(i.current.getBoundingClientRect().height);
+  }, [i]);
+  const h = t === "right" ? `${r + p}px` : t === "top" ? `${r / 2}px` : void 0, m = t === "left" ? `${r + p}px` : void 0, f = t === "left" || t === "right" ? `${r / 2}px` : `${-p}px`;
+  return /* @__PURE__ */ l(s, { sx: {
+    position: "absolute",
+    left: h,
+    top: f,
+    right: m
+  }, children: /* @__PURE__ */ l(s, { sx: {
+    position: "relative",
+    top: `-${c}px`,
+    left: t === "top" ? "-50%" : void 0,
+    py: "7px",
+    px: e ? `${o}px` : "0",
+    borderColor: e ? n : "cl_lightGrey",
+    borderWidth: e ? "2px" : "1pt",
+    borderStyle: e ? "solid" : "none",
+    borderBottomStyle: !e && t === "top" ? "none" : "solid",
+    borderRadius: e ? `${o}px ${o}px ${t !== "left" ? `${o}px` : "0"} ${t !== "right" ? `${o}px` : "0"}` : "0",
+    bg: "cl_white",
+    "& > div": {
+      maxWidth: t === "top" ? void 0 : `${u}px`
+    }
+  }, ref: i, children: /* @__PURE__ */ l(v, { width: "max-content", fontSizeWeight: [[12, "semi-bold"]], color: e && n !== "#CCD0DB" ? n : "cl_darkGrey", textTransform: "uppercase", letterSpacing: "1.8px", children: d }) }) });
 };
 export {
-  G as Segment
+  W as BaseMeterLabelBox
 };
 //# sourceMappingURL=sd-component-library249.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library249.js","sources":["../src/components/meters/donut-diagram/partials/segment/segment.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useHover } from \"../../../../../core/custom-hooks\";\nimport { getCoordinateForArc } from \"../../../outline-meter/utils\";\nimport { getSegmentCoordinates } from \"../../utils\";\nimport { SegmentLabel } from \"../segment-label\";\nimport { SegmentProps as Props } from \"./interfaces\";\n\nconst animationDuration = 300;\n\nexport const Segment: React.FC<Props> = ({\n  segment,\n  segmentWidth,\n  outlineWidth,\n  size: diameter,\n  mobile,\n  ...labelProps\n}) => {\n  const { start, end, color } = segment;\n  const { labelOffset } = labelProps;\n\n  const radius = diameter / 2;\n  const innerRadius = radius - segmentWidth;\n\n  const {\n    startInnerX,\n    startInnerY,\n    endInnerX,\n    endInnerY,\n    endX,\n    endY,\n    startY,\n    startX,\n    arc,\n  } = getSegmentCoordinates(segment, radius, segmentWidth);\n\n  const center = diameter / 2;\n\n  const startAlpha = Math.round(start * 360);\n  const endAlpha = Math.round(end * 360);\n\n  const { isHover, hoverCallbacks } = useHover();\n  const showHover = isHover && !mobile;\n\n  const maxRadius = Math.sqrt(2) * (radius + labelOffset);\n\n  const { x: maskStartX, y: maskStartY } = getCoordinateForArc(\n    maxRadius,\n    startAlpha,\n    radius\n  );\n\n  const { x: maskEndX, y: maskEndY } = getCoordinateForArc(\n    maxRadius,\n    endAlpha,\n    radius\n  );\n\n  return (\n    <g {...(mobile ? {} : hoverCallbacks)}>\n      {/* mask */}\n      <path\n        d={`M${center},${center} L${maskStartX},${maskStartY} A${maxRadius},${maxRadius} 0 ${\n          arc > 180 ? \"1\" : \"0\"\n        },1 ${maskEndX},${maskEndY}Z`}\n        fill=\"transparent\"\n      />\n\n      {/* colored sector */}\n      <path\n        d={`M${center},${center} L${startX},${startY} A${radius},${radius} 0 ${\n          arc > 180 ? \"1\" : \"0\"\n        },1 ${endX},${endY}Z`}\n        fill={color}\n        strokeWidth={outlineWidth}\n        stroke=\"white\"\n      />\n\n      {/* white inner sector */}\n      <path\n        d={`M${center},${center} L${startInnerX},${startInnerY} A${innerRadius},${innerRadius} 0 ${\n          arc > 180 ? \"1\" : \"0\"\n        },1 ${endInnerX},${endInnerY}Z`}\n        fill=\"white\"\n        style={{\n          transform: `scale(${showHover ? 0.8 : 1}`,\n          transformOrigin: \"center\",\n          transition: `all ${animationDuration}ms`,\n        }}\n      />\n\n      <SegmentLabel\n        segment={segment}\n        radius={radius}\n        animationDuration={animationDuration}\n        isHover={showHover}\n        mobile={mobile}\n        {...labelProps}\n      />\n    </g>\n  );\n};\n"],"names":["animationDuration","Segment","segment","segmentWidth","outlineWidth","diameter","mobile","labelProps","start","end","color","labelOffset","radius","innerRadius","startInnerX","startInnerY","endInnerX","endInnerY","endX","endY","startY","startX","arc","getSegmentCoordinates","center","startAlpha","endAlpha","isHover","hoverCallbacks","useHover","showHover","maxRadius","maskStartX","maskStartY","getCoordinateForArc","maskEndX","maskEndY","jsx","SegmentLabel"],"mappings":";;;;;AAQA,MAAMA,IAAoB,KAEbC,IAA2B,CAAC;AAAA,EACvC,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAMC;AAAA,EACN,QAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,OAAAC,GAAO,KAAAC,GAAK,OAAAC,EAAA,IAAUR,GACxB,EAAE,aAAAS,EAAgB,IAAAJ,GAElBK,IAASP,IAAW,GACpBQ,IAAcD,IAAST,GAEvB;AAAA,IACJ,aAAAW;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,KAAAC;AAAA,EACE,IAAAC,EAAsBrB,GAASU,GAAQT,CAAY,GAEjDqB,IAASnB,IAAW,GAEpBoB,IAAa,KAAK,MAAMjB,IAAQ,GAAG,GACnCkB,IAAW,KAAK,MAAMjB,IAAM,GAAG,GAE/B,EAAE,SAAAkB,GAAS,gBAAAC,EAAe,IAAIC,EAAS,GACvCC,IAAYH,KAAW,CAACrB,GAExByB,IAAY,KAAK,KAAK,CAAC,KAAKnB,IAASD,IAErC,EAAE,GAAGqB,GAAY,GAAGC,EAAe,IAAAC;AAAA,IACvCH;AAAA,IACAN;AAAA,IACAb;AAAA,EAAA,GAGI,EAAE,GAAGuB,GAAU,GAAGC,EAAa,IAAAF;AAAA,IACnCH;AAAA,IACAL;AAAA,IACAd;AAAA,EAAA;AAGF,gCACG,KAAG,EAAA,GAAIN,IAAS,KAAKsB,GAEpB,UAAA;AAAA,IAAAS,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAG,IAAIb,CAAM,IAAIA,CAAM,KAAKQ,CAAU,IAAIC,CAAU,KAAKF,CAAS,IAAIA,CAAS,MAC7ET,IAAM,MAAM,MAAM,GACpB,MAAMa,CAAQ,IAAIC,CAAQ;AAAA,QAC1B,MAAK;AAAA,MAAA;AAAA,IACP;AAAA,IAGAC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAG,IAAIb,CAAM,IAAIA,CAAM,KAAKH,CAAM,IAAID,CAAM,KAAKR,CAAM,IAAIA,CAAM,MAC/DU,IAAM,MAAM,MAAM,GACpB,MAAMJ,CAAI,IAAIC,CAAI;AAAA,QAClB,MAAMT;AAAA,QACN,aAAaN;AAAA,QACb,QAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAGAiC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAG,IAAIb,CAAM,IAAIA,CAAM,KAAKV,CAAW,IAAIC,CAAW,KAAKF,CAAW,IAAIA,CAAW,MACnFS,IAAM,MAAM,MAAM,GACpB,MAAMN,CAAS,IAAIC,CAAS;AAAA,QAC5B,MAAK;AAAA,QACL,OAAO;AAAA,UACL,WAAW,SAASa,IAAY,MAAM,CAAC;AAAA,UACvC,iBAAiB;AAAA,UACjB,YAAY,OAAO9B,CAAiB;AAAA,QACtC;AAAA,MAAA;AAAA,IACF;AAAA,IAEAqC,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAApC;AAAA,QACA,QAAAU;AAAA,QACA,mBAAAZ;AAAA,QACA,SAAS8B;AAAA,QACT,QAAAxB;AAAA,QACC,GAAGC;AAAA,MAAA;AAAA,IACN;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library249.js","sources":["../src/components/meters/outline-meter/partials/base-meter-label-box/base-meter-label-box.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ResponsiveTextV2 } from \"../../../../texts/responsive-text-v2\";\nimport { labelPaddingX, labelWidth } from \"../../contants\";\nimport { BaseMeterLabelBoxProps as Props } from \"./interfaces\";\n\nexport const BaseMeterLabelBox: React.FC<Props> = (props) => {\n  const {\n    position,\n    diameter,\n    label,\n    distanceFromLabelToRanges,\n    isInRange,\n    color,\n  } = props;\n  const ref = useRef<HTMLElement>();\n  const [textHeight, setTextHeight] = useState(0);\n\n  useEffect(() => {\n    if (ref.current) setTextHeight(ref.current.getBoundingClientRect().height);\n  }, [ref]);\n\n  const left =\n    position === \"right\"\n      ? `${diameter + distanceFromLabelToRanges}px`\n      : position === \"top\"\n      ? `${diameter / 2}px`\n      : undefined;\n  const right =\n    position === \"left\"\n      ? `${diameter + distanceFromLabelToRanges}px`\n      : undefined;\n  const top =\n    position === \"left\" || position === \"right\"\n      ? `${diameter / 2}px`\n      : `${-distanceFromLabelToRanges}px`;\n\n  return (\n    <Box sx={{ position: \"absolute\", left, top, right }}>\n      <Box\n        sx={{\n          position: \"relative\",\n          top: `-${textHeight}px`,\n          left: position === \"top\" ? \"-50%\" : undefined,\n          py: \"7px\",\n          px: isInRange ? `${labelPaddingX}px` : \"0\",\n          borderColor: isInRange ? color : \"cl_lightGrey\",\n          borderWidth: isInRange ? \"2px\" : \"1pt\",\n          borderStyle: isInRange ? \"solid\" : \"none\",\n          borderBottomStyle:\n            !isInRange && position === \"top\" ? \"none\" : \"solid\",\n          borderRadius: isInRange\n            ? `${labelPaddingX}px ${labelPaddingX}px ${\n                position !== \"left\" ? `${labelPaddingX}px` : \"0\"\n              } ${position !== \"right\" ? `${labelPaddingX}px` : \"0\"}`\n            : \"0\",\n          bg: \"cl_white\",\n          \"& > div\": {\n            maxWidth: position === \"top\" ? undefined : `${labelWidth}px`,\n          },\n        }}\n        ref={ref}\n      >\n        <ResponsiveTextV2\n          width=\"max-content\"\n          fontSizeWeight={[[12, \"semi-bold\"]]}\n          color={isInRange && color !== \"#CCD0DB\" ? color : \"cl_darkGrey\"}\n          textTransform=\"uppercase\"\n          letterSpacing=\"1.8px\"\n        >\n          {label}\n        </ResponsiveTextV2>\n      </Box>\n    </Box>\n  );\n};\n"],"names":["BaseMeterLabelBox","props","position","diameter","label","distanceFromLabelToRanges","isInRange","color","ref","useRef","textHeight","setTextHeight","useState","useEffect","current","getBoundingClientRect","height","left","undefined","right","top","jsx","Box","py","px","labelPaddingX","borderColor","borderWidth","borderStyle","borderBottomStyle","borderRadius","bg","maxWidth","labelWidth","ResponsiveTextV2"],"mappings":";;;;;;AAQO,MAAMA,IAAsCC,CAAUA,MAAA;AACrD,QAAA;AAAA,IACJC,UAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,2BAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,OAAAA;AAAAA,EACEN,IAAAA,GACEO,IAAMC,KACN,CAACC,GAAYC,CAAa,IAAIC,EAAS,CAAC;AAE9CC,EAAAA,EAAU,MAAM;AACd,IAAIL,EAAIM,WAASH,EAAcH,EAAIM,QAAQC,sBAAsB,EAAEC,MAAM;AAAA,EAAA,GACxE,CAACR,CAAG,CAAC;AAER,QAAMS,IACJf,MAAa,UACR,GAAEC,IAAWE,CAA0B,OACxCH,MAAa,QACZ,GAAEC,IAAW,CAAE,OAChBe,QACAC,IACJjB,MAAa,SACR,GAAEC,IAAWE,CAA0B,OACxCa,QACAE,IACJlB,MAAa,UAAUA,MAAa,UAC/B,GAAEC,IAAW,CAAE,OACf,GAAE,CAACE,CAA0B;AAGlC,SAAA,gBAAAgB,EAACC,KAAI,IAAI;AAAA,IAAEpB,UAAU;AAAA,IAAYe,MAAAA;AAAAA,IAAMG,KAAAA;AAAAA,IAAKD,OAAAA;AAAAA,EAAM,GAChD,UAAC,gBAAAE,EAAAC,GAAA,EACC,IAAI;AAAA,IACFpB,UAAU;AAAA,IACVkB,KAAM,IAAGV,CAAW;AAAA,IACpBO,MAAMf,MAAa,QAAQ,SAASgB;AAAAA,IACpCK,IAAI;AAAA,IACJC,IAAIlB,IAAa,GAAEmB,CAAc,OAAM;AAAA,IACvCC,aAAapB,IAAYC,IAAQ;AAAA,IACjCoB,aAAarB,IAAY,QAAQ;AAAA,IACjCsB,aAAatB,IAAY,UAAU;AAAA,IACnCuB,mBACE,CAACvB,KAAaJ,MAAa,QAAQ,SAAS;AAAA,IAC9C4B,cAAcxB,IACT,GAAEmB,CAAc,MAAKA,CAAc,MAClCvB,MAAa,SAAU,GAAEuB,CAAc,OAAM,GAC9C,IAAGvB,MAAa,UAAW,GAAEuB,CAAc,OAAM,GAAI,KACtD;AAAA,IACJM,IAAI;AAAA,IACJ,WAAW;AAAA,MACTC,UAAU9B,MAAa,QAAQgB,SAAa,GAAEe,CAAW;AAAA,IAC3D;AAAA,EACF,GACA,KAAAzB,GAEA,UAAA,gBAAAa,EAACa,GACC,EAAA,OAAM,eACN,gBAAgB,CAAC,CAAC,IAAI,WAAW,CAAC,GAClC,OAAO5B,KAAaC,MAAU,YAAYA,IAAQ,eAClD,eAAc,aACd,eAAc,SAEbH,UACHA,EAAA,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

package/lib/sd-component-library25.js

@@ -1,58 +1,30 @@
-import { j as e } from "./sd-component-library195.js";
-import { Label as m } from "@rebass/forms";
-import { Box as p } from "rebass";
-import { Button as x } from "./sd-component-library28.js";
-import { ThirteenBold as b } from "./sd-component-library151.js";
-const v = (t) => {
+import { jsxs as s, jsx as r } from "./sd-component-library195.js";
+import { Label as d } from "./sd-component-library213.js";
+import "./sd-component-library198.js";
+import { Button as c } from "./sd-component-library28.js";
+import { ThirteenBold as m } from "./sd-component-library151.js";
+import { Box as p } from "./sd-component-library199.js";
+const g = (i) => {
   const {
-    children: i,
-    label: n,
-    color: r = "cl_blue",
-    reverseOrder: o,
+    children: n,
+    label: o,
+    color: e = "cl_blue",
+    reverseOrder: t,
     hideLabelOnMobile: l,
-    disabled: s
-  } = t, a = o ? 1 : 0, c = l ? "none" : "inline", d = o ? "10px" : "0";
-  return /* @__PURE__ */ e.jsxs(
-    x,
-    {
-      ...t,
-      variant: "_icon",
-      color: r,
-      fill: r,
-      "data-test": "icon-button",
-      children: [
-        n && /* @__PURE__ */ e.jsx(
-          p,
-          {
-            sx: {
-              order: a,
-              marginLeft: d,
-              display: [c, "inline"]
-            },
-            children: /* @__PURE__ */ e.jsx(
-              b,
-              {
-                color: r,
-                textTransform: "uppercase",
-                letterSpacing: ["1.3px"],
-                children: /* @__PURE__ */ e.jsx(
-                  m,
-                  {
-                    variant: "_labels.iconButton",
-                    sx: { cursor: s ? "default" : "pointer" },
-                    children: n
-                  }
-                )
-              }
-            )
-          }
-        ),
-        i
-      ]
-    }
-  );
+    disabled: a
+  } = i;
+  return /* @__PURE__ */ s(c, { ...i, variant: "_icon", color: e, fill: e, "data-test": "icon-button", children: [
+    o && /* @__PURE__ */ r(p, { sx: {
+      order: t ? 1 : 0,
+      marginLeft: t ? "10px" : "0",
+      display: [l ? "none" : "inline", "inline"]
+    }, children: /* @__PURE__ */ r(m, { color: e, textTransform: "uppercase", letterSpacing: ["1.3px"], children: /* @__PURE__ */ r(d, { variant: "_labels.iconButton", sx: {
+      cursor: a ? "default" : "pointer"
+    }, children: o }) }) }),
+    n
+  ] });
 };
 export {
-  v as IconButton
+  g as IconButton
 };
 //# sourceMappingURL=sd-component-library25.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library25.js","sources":["../src/components/buttons/partials/icon-button/icon-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Label } from \"@rebass/forms\";\nimport { Box } from \"rebass\";\n\nimport { ThirteenBold } from \"../../../texts/thirteen-bold\";\nimport { Button } from \"../../button\";\nimport { IconButtonProps } from \"./interfaces\";\n\n/**\n * The icon button.\n */\nexport const IconButton: React.FC<IconButtonProps> = (props) => {\n  const {\n    children,\n    label,\n    color = \"cl_blue\",\n    reverseOrder,\n    hideLabelOnMobile,\n    disabled,\n  } = props;\n\n  const itemsOrder = reverseOrder ? 1 : 0;\n  const labelMobileDisplay = hideLabelOnMobile ? \"none\" : \"inline\";\n\n  // margin between icon and label disappears when order is reversed\n  const reversedOrderMargin = reverseOrder ? \"10px\" : \"0\";\n  return (\n    <Button\n      {...props}\n      variant=\"_icon\"\n      color={color}\n      fill={color}\n      data-test=\"icon-button\"\n    >\n      {label && (\n        <Box\n          sx={{\n            order: itemsOrder,\n            marginLeft: reversedOrderMargin,\n            display: [labelMobileDisplay, \"inline\"],\n          }}\n        >\n          <ThirteenBold\n            color={color}\n            textTransform=\"uppercase\"\n            letterSpacing={[\"1.3px\"]}\n          >\n            <Label\n              variant={\"_labels.iconButton\"}\n              sx={{ cursor: disabled ? \"default\" : \"pointer\" }}\n            >\n              {label}\n            </Label>\n          </ThirteenBold>\n        </Box>\n      )}\n      {children}\n    </Button>\n  );\n};\n"],"names":["IconButton","props","children","label","color","reverseOrder","hideLabelOnMobile","disabled","itemsOrder","labelMobileDisplay","reversedOrderMargin","jsxs","Button","jsx","Box","ThirteenBold","Label"],"mappings":";;;;;AAYa,MAAAA,IAAwC,CAACC,MAAU;AACxD,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,UAAAC;AAAA,EACE,IAAAN,GAEEO,IAAaH,IAAe,IAAI,GAChCI,IAAqBH,IAAoB,SAAS,UAGlDI,IAAsBL,IAAe,SAAS;AAElD,SAAAM,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGX;AAAA,MACJ,SAAQ;AAAA,MACR,OAAAG;AAAA,MACA,MAAMA;AAAA,MACN,aAAU;AAAA,MAET,UAAA;AAAA,QACCD,KAAAU,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,OAAON;AAAA,cACP,YAAYE;AAAA,cACZ,SAAS,CAACD,GAAoB,QAAQ;AAAA,YACxC;AAAA,YAEA,UAAAI,gBAAAA,EAAA;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,OAAAX;AAAA,gBACA,eAAc;AAAA,gBACd,eAAe,CAAC,OAAO;AAAA,gBAEvB,UAAAS,gBAAAA,EAAA;AAAA,kBAACG;AAAA,kBAAA;AAAA,oBACC,SAAS;AAAA,oBACT,IAAI,EAAE,QAAQT,IAAW,YAAY,UAAU;AAAA,oBAE9C,UAAAJ;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,QAEDD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"sd-component-library25.js","sources":["../src/components/buttons/partials/icon-button/icon-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Label } from \"@rebass/forms\";\nimport { Box } from \"rebass\";\n\nimport { ThirteenBold } from \"../../../texts/thirteen-bold\";\nimport { Button } from \"../../button\";\nimport { IconButtonProps } from \"./interfaces\";\n\n/**\n * The icon button.\n */\nexport const IconButton: React.FC<IconButtonProps> = (props) => {\n  const {\n    children,\n    label,\n    color = \"cl_blue\",\n    reverseOrder,\n    hideLabelOnMobile,\n    disabled,\n  } = props;\n\n  const itemsOrder = reverseOrder ? 1 : 0;\n  const labelMobileDisplay = hideLabelOnMobile ? \"none\" : \"inline\";\n\n  // margin between icon and label disappears when order is reversed\n  const reversedOrderMargin = reverseOrder ? \"10px\" : \"0\";\n  return (\n    <Button\n      {...props}\n      variant=\"_icon\"\n      color={color}\n      fill={color}\n      data-test=\"icon-button\"\n    >\n      {label && (\n        <Box\n          sx={{\n            order: itemsOrder,\n            marginLeft: reversedOrderMargin,\n            display: [labelMobileDisplay, \"inline\"],\n          }}\n        >\n          <ThirteenBold\n            color={color}\n            textTransform=\"uppercase\"\n            letterSpacing={[\"1.3px\"]}\n          >\n            <Label\n              variant={\"_labels.iconButton\"}\n              sx={{ cursor: disabled ? \"default\" : \"pointer\" }}\n            >\n              {label}\n            </Label>\n          </ThirteenBold>\n        </Box>\n      )}\n      {children}\n    </Button>\n  );\n};\n"],"names":["IconButton","props","children","label","color","reverseOrder","hideLabelOnMobile","disabled","jsxs","Button","jsx","Box","order","marginLeft","display","ThirteenBold","Label","cursor"],"mappings":";;;;;;AAYO,MAAMA,IAAyCC,CAAUA,MAAA;AACxD,QAAA;AAAA,IACJC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,OAAAA,IAAQ;AAAA,IACRC,cAAAA;AAAAA,IACAC,mBAAAA;AAAAA,IACAC,UAAAA;AAAAA,EACEN,IAAAA;AAQF,SAAA,gBAAAO,EAACC,GACKR,EAAAA,GAAAA,GACJ,SAAQ,SACR,OAAAG,GACA,MAAMA,GACN,aAAU,eAETD,UAAAA;AAAAA,IACCA,KAAA,gBAAAO,EAACC,KACC,IAAI;AAAA,MACFC,OAhBSP,IAAe,IAAI;AAAA,MAiB5BQ,YAbkBR,IAAe,SAAS;AAAA,MAc1CS,SAAS,CAjBQR,IAAoB,SAAS,UAiBhB,QAAQ;AAAA,IAAA,GAGxC,UAAA,gBAAAI,EAACK,GACC,EAAA,OAAAX,GACA,eAAc,aACd,eAAe,CAAC,OAAO,GAEvB,UAAA,gBAAAM,EAACM,GACC,EAAA,SAAS,sBACT,IAAI;AAAA,MAAEC,QAAQV,IAAW,YAAY;AAAA,IAAU,GAE9CJ,UACHA,GAAA,EAAA,CACF,EACF,CAAA;AAAA,IAEDD;AAAAA,EACH,EAAA,CAAA;AAEJ;"}