@selfdecode/sd-component-library 4.0.106 → 4.0.108

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library323.js","sources":["../src/components/inputs/date-inputs/base-date-range-input/partials/apply-button/apply-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { endOfDay } from \"date-fns\";\n\nimport { SecondaryBlueButton } from \"../../../../../buttons\";\nimport { ApplyButtonProps as Props } from \"./interfaces\";\n\nexport const ApplyButton: React.FC<Props> = (props) => {\n  const { onClose, onSelect, selectedRange } = props;\n\n  const handleApply = () => {\n    selectedRange &&\n      onSelect({\n        startDate: selectedRange.startDate ?? new Date(),\n        endDate: endOfDay(selectedRange.endDate ?? new Date()),\n      });\n    onClose();\n  };\n\n  return (\n    <SecondaryBlueButton\n      width=\"140px\"\n      onClick={handleApply}\n      disabled={\n        !selectedRange || !selectedRange.startDate || !selectedRange.endDate\n      }\n    >\n      Apply\n    </SecondaryBlueButton>\n  );\n};\n"],"names":["ApplyButton","props","onClose","onSelect","selectedRange","handleApply","endOfDay","jsx","SecondaryBlueButton"],"mappings":";;;AAOa,MAAAA,IAA+B,CAACC,MAAU;AACrD,QAAM,EAAE,SAAAC,GAAS,UAAAC,GAAU,eAAAC,EAAA,IAAkBH,GAEvCI,IAAc,MAAM;AACxB,IAAAD,KACED,EAAS;AAAA,MACP,WAAWC,EAAc,aAAa,oBAAI,KAAK;AAAA,MAC/C,SAASE,EAASF,EAAc,WAAW,oBAAI,MAAM;AAAA,IAAA,CACtD,GACKF;EAAA;AAIR,SAAAK,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,SAASH;AAAA,MACT,UACE,CAACD,KAAiB,CAACA,EAAc,aAAa,CAACA,EAAc;AAAA,MAEhE,UAAA;AAAA,IAAA;AAAA,EAAA;AAIL;"}
+{"version":3,"file":"sd-component-library323.js","sources":["../src/components/inputs/date-inputs/base-date-range-input/partials/selected-range-text/selected-range-text.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { BaseGridContainer } from \"../../../../../containers\";\nimport { FourteenRegular } from \"../../../../../texts/fourteen-regular\";\nimport { FourteenSb } from \"../../../../../texts/fourteen-sb\";\nimport { getSelectedRangeText } from \"../../utils\";\nimport { SelectedRangeTextProps as Props } from \"./interfaces\";\n\nexport const SelectedRangeText: React.FC<Props> = (props) => {\n  const { isMobile, selectedRange } = props;\n\n  return (\n    <BaseGridContainer\n      {...(isMobile\n        ? {\n            p: \"10px 20px\",\n            gap: \"3px\",\n            borderWidth: \"1px 0\",\n            borderStyle: \"solid\",\n            borderColor: \"#CCD0DB\",\n          }\n        : {\n            gap: \"10px\",\n            m: \"auto 0\",\n            justifyContent: \"flex-end\",\n          })}\n    >\n      <FourteenRegular color=\"cl_grey\">Selected:</FourteenRegular>\n\n      <FourteenSb color=\"cl_purple\">\n        {getSelectedRangeText(selectedRange)}\n      </FourteenSb>\n    </BaseGridContainer>\n  );\n};\n"],"names":["SelectedRangeText","props","isMobile","selectedRange","jsxs","BaseGridContainer","jsx","FourteenRegular","FourteenSb","getSelectedRangeText"],"mappings":";;;;;AAQa,MAAAA,IAAqC,CAACC,MAAU;AACrD,QAAA,EAAE,UAAAC,GAAU,eAAAC,EAAkB,IAAAF;AAGlC,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAIH,IACD;AAAA,QACE,GAAG;AAAA,QACH,KAAK;AAAA,QACL,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,MAAA,IAEf;AAAA,QACE,KAAK;AAAA,QACL,GAAG;AAAA,QACH,gBAAgB;AAAA,MAClB;AAAA,MAEJ,UAAA;AAAA,QAACI,gBAAAA,EAAA,IAAAC,GAAA,EAAgB,OAAM,WAAU,UAAS,aAAA;AAAA,8BAEzCC,GAAW,EAAA,OAAM,aACf,UAAAC,EAAqBN,CAAa,GACrC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library324.js

@@ -1,93 +1,24 @@
-import { j as o } from "./sd-component-library197.js";
-import { useState as L, useCallback as M } from "react";
-import V from "./sd-component-library196.js";
-import { getCoordinateForArc as f } from "./sd-component-library92.js";
-import { GridContainerV2 as X } from "./sd-component-library39.js";
-import { ResponsiveTextV2 as g } from "./sd-component-library151.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 r } from "./sd-component-library198.js";
+import { endOfDay as s } from "date-fns";
+import { SecondaryBlueButton as p } from "./sd-component-library20.js";
+const c = (e) => {
+  const { onClose: n, onSelect: o, selectedRange: t } = e, a = () => {
+    t && o({
+      startDate: t.startDate ?? /* @__PURE__ */ new Date(),
+      endDate: s(t.endDate ?? /* @__PURE__ */ new Date())
+    }), n();
+  };
+  return /* @__PURE__ */ r.jsx(
+    p,
+    {
+      width: "140px",
+      onClick: a,
+      disabled: !t || !t.startDate || !t.endDate,
+      children: "Apply"
+    }
+  );
 };
 export {
-  J as SegmentLabel
+  c as ApplyButton
 };
 //# sourceMappingURL=sd-component-library324.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library324.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-library324.js","sources":["../src/components/inputs/date-inputs/base-date-range-input/partials/apply-button/apply-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { endOfDay } from \"date-fns\";\n\nimport { SecondaryBlueButton } from \"../../../../../buttons\";\nimport { ApplyButtonProps as Props } from \"./interfaces\";\n\nexport const ApplyButton: React.FC<Props> = (props) => {\n  const { onClose, onSelect, selectedRange } = props;\n\n  const handleApply = () => {\n    selectedRange &&\n      onSelect({\n        startDate: selectedRange.startDate ?? new Date(),\n        endDate: endOfDay(selectedRange.endDate ?? new Date()),\n      });\n    onClose();\n  };\n\n  return (\n    <SecondaryBlueButton\n      width=\"140px\"\n      onClick={handleApply}\n      disabled={\n        !selectedRange || !selectedRange.startDate || !selectedRange.endDate\n      }\n    >\n      Apply\n    </SecondaryBlueButton>\n  );\n};\n"],"names":["ApplyButton","props","onClose","onSelect","selectedRange","handleApply","endOfDay","jsx","SecondaryBlueButton"],"mappings":";;;AAOa,MAAAA,IAA+B,CAACC,MAAU;AACrD,QAAM,EAAE,SAAAC,GAAS,UAAAC,GAAU,eAAAC,EAAA,IAAkBH,GAEvCI,IAAc,MAAM;AACxB,IAAAD,KACED,EAAS;AAAA,MACP,WAAWC,EAAc,aAAa,oBAAI,KAAK;AAAA,MAC/C,SAASE,EAASF,EAAc,WAAW,oBAAI,MAAM;AAAA,IAAA,CACtD,GACKF;EAAA;AAIR,SAAAK,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,SAASH;AAAA,MACT,UACE,CAACD,KAAiB,CAACA,EAAc,aAAa,CAACA,EAAc;AAAA,MAEhE,UAAA;AAAA,IAAA;AAAA,EAAA;AAIL;"}

package/lib/sd-component-library325.js

@@ -1,5 +1,5 @@
-import { j as t } from "./sd-component-library197.js";
-import { ResponsiveTextV2 as l } from "./sd-component-library151.js";
+import { j as t } from "./sd-component-library198.js";
+import { ResponsiveTextV2 as l } from "./sd-component-library152.js";
 const n = ({
   title: e,
   onClick: o,

package/lib/sd-component-library326.js

@@ -1,85 +1,93 @@
-import { j as e } from "./sd-component-library197.js";
-import { useState as A, useCallback as F } from "react";
-import { getCoordinateForArc as X, degToRad as B } from "./sd-component-library92.js";
-const D = (Y) => {
-  const {
-    pointerLength: p,
-    pointerWidth: r,
-    radius: x,
-    alpha: s,
-    color: $,
-    label: d,
-    textBottomMargin: g,
-    horizontal: k,
-    counterClockWise: C
-  } = Y, [a, E] = A(0), m = F((o) => {
-    o && E(o.getBoundingClientRect().width);
-  }, []);
-  if (!d)
-    return null;
-  const { x: c, y: l } = X(
-    x,
-    s
-  );
-  let { x: t, y: n } = X(
-    x + p,
-    s,
-    x
-  );
-  const f = (o, b) => ({
-    transform: `rotateY(${C ? 180 : 0}deg)`,
-    transformOrigin: `${o}px ${b}px`
-  });
-  if (Math.round(s) === 180) {
-    const o = n - r / 2 - g;
-    return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-      /* @__PURE__ */ e.jsx(
-        "line",
-        {
-          x1: c,
-          y1: l,
-          x2: t,
-          y2: n,
-          stroke: $,
-          strokeWidth: r
-        }
-      ),
-      /* @__PURE__ */ e.jsx(
-        "text",
-        {
-          ref: m,
-          x: t - a / 2,
-          y: o,
-          style: f(t, o),
-          children: d
-        }
-      )
-    ] });
-  }
-  const u = B(s), y = Math.sin(u), h = Math.sign(y);
-  k && (t = c + p * -h, n = l);
-  const j = r / 2 * Math.cos(u), L = r / 2 * y, i = r / 2 / h, M = t - (s < 180 ? 1 : 0) * a, S = t - a * h, R = M + a / 2, W = n - i - g;
-  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(
-      "path",
+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",
       {
-        d: `M${c + j},${l + L} L${c - j},${l - L} L${t},${n - i} L${S},${n - i} L${S},${n + i} L${t},${n + i} Z`,
-        fill: $
+        x1: _ + (s === "left" ? -1 : 1) * k,
+        x2: s === "left" ? -i : d + i,
+        y1: x,
+        y2: x,
+        stroke: V.colors.cl_lightGrey,
+        strokeWidth: 1
       }
     ),
-    /* @__PURE__ */ e.jsx(
-      "text",
+    /* @__PURE__ */ o.jsx(
+      "foreignObject",
       {
-        ref: m,
-        x: M,
-        y: W,
-        style: f(R, W),
-        children: d
+        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 {
-  D as LabelPointer
+  J as SegmentLabel
 };
 //# 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/common-outline-meter-partials/label-pointer/label-pointer.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport { degToRad, getCoordinateForArc } from \"../../outline-meter/utils\";\nimport { LabelPointerProps as Props } from \"./interfaces\";\n\nexport const LabelPointer: React.FC<Props> = (props) => {\n  const {\n    pointerLength,\n    pointerWidth,\n    radius,\n    alpha,\n    color,\n    label,\n    textBottomMargin,\n    horizontal,\n    counterClockWise,\n  } = props;\n\n  const [textWidth, setTextWidth] = useState(0);\n  const ref = useCallback((text: SVGTextElement) => {\n    if (text) setTextWidth(text.getBoundingClientRect().width);\n  }, []);\n\n  if (!label) return null;\n\n  const { x: pointerStartX, y: pointerStartY } = getCoordinateForArc(\n    radius,\n    alpha\n  );\n\n  let { x: pointerEndX, y: pointerEndY } = getCoordinateForArc(\n    radius + pointerLength,\n    alpha,\n    radius\n  );\n\n  const getStyle = (x: number, y: number) => ({\n    transform: `rotateY(${counterClockWise ? 180 : 0}deg)`,\n    transformOrigin: `${x}px ${y}px`,\n  });\n\n  if (Math.round(alpha) === 180) {\n    const textY = pointerEndY - pointerWidth / 2 - textBottomMargin;\n\n    return (\n      <>\n        <line\n          x1={pointerStartX}\n          y1={pointerStartY}\n          x2={pointerEndX}\n          y2={pointerEndY}\n          stroke={color}\n          strokeWidth={pointerWidth}\n        />\n\n        <text\n          ref={ref}\n          x={pointerEndX - textWidth / 2}\n          y={textY}\n          style={getStyle(pointerEndX, textY)}\n        >\n          {label}\n        </text>\n      </>\n    );\n  }\n\n  const alphaInRad = degToRad(alpha);\n  const sinAlpha = Math.sin(alphaInRad);\n  const sinAlphaSign = Math.sign(sinAlpha);\n\n  if (horizontal) {\n    pointerEndX = pointerStartX + pointerLength * -sinAlphaSign;\n    pointerEndY = pointerStartY;\n  }\n\n  const dx = (pointerWidth / 2) * Math.cos(alphaInRad);\n  const dy = (pointerWidth / 2) * sinAlpha;\n  const endDy = pointerWidth / 2 / sinAlphaSign;\n  const textStartX = pointerEndX - (alpha < 180 ? 1 : 0) * textWidth;\n  const textEndX = pointerEndX - textWidth * sinAlphaSign;\n  const textMiddleX = textStartX + textWidth / 2;\n  const textY = pointerEndY - endDy - textBottomMargin;\n\n  return (\n    <>\n      <path\n        d={`M${pointerStartX + dx},${pointerStartY + dy} L${\n          pointerStartX - dx\n        },${pointerStartY - dy} L${pointerEndX},${\n          pointerEndY - endDy\n        } L${textEndX},${pointerEndY - endDy} L${textEndX},${\n          pointerEndY + endDy\n        } L${pointerEndX},${pointerEndY + endDy} Z`}\n        fill={color}\n      />\n\n      <text\n        ref={ref}\n        x={textStartX}\n        y={textY}\n        style={getStyle(textMiddleX, textY)}\n      >\n        {label}\n      </text>\n    </>\n  );\n};\n"],"names":["LabelPointer","props","pointerLength","pointerWidth","radius","alpha","color","label","textBottomMargin","horizontal","counterClockWise","textWidth","setTextWidth","useState","ref","useCallback","text","pointerStartX","pointerStartY","getCoordinateForArc","pointerEndX","pointerEndY","getStyle","x","y","textY","jsxs","Fragment","jsx","alphaInRad","degToRad","sinAlpha","sinAlphaSign","dx","dy","endDy","textStartX","textEndX","textMiddleX"],"mappings":"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"}
+{"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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"}

package/lib/sd-component-library327.js

@@ -0,0 +1,85 @@
+import { j as e } from "./sd-component-library198.js";
+import { useState as A, useCallback as F } from "react";
+import { getCoordinateForArc as X, degToRad as B } from "./sd-component-library93.js";
+const D = (Y) => {
+  const {
+    pointerLength: p,
+    pointerWidth: r,
+    radius: x,
+    alpha: s,
+    color: $,
+    label: d,
+    textBottomMargin: g,
+    horizontal: k,
+    counterClockWise: C
+  } = Y, [a, E] = A(0), m = F((o) => {
+    o && E(o.getBoundingClientRect().width);
+  }, []);
+  if (!d)
+    return null;
+  const { x: c, y: l } = X(
+    x,
+    s
+  );
+  let { x: t, y: n } = X(
+    x + p,
+    s,
+    x
+  );
+  const f = (o, b) => ({
+    transform: `rotateY(${C ? 180 : 0}deg)`,
+    transformOrigin: `${o}px ${b}px`
+  });
+  if (Math.round(s) === 180) {
+    const o = n - r / 2 - g;
+    return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx(
+        "line",
+        {
+          x1: c,
+          y1: l,
+          x2: t,
+          y2: n,
+          stroke: $,
+          strokeWidth: r
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "text",
+        {
+          ref: m,
+          x: t - a / 2,
+          y: o,
+          style: f(t, o),
+          children: d
+        }
+      )
+    ] });
+  }
+  const u = B(s), y = Math.sin(u), h = Math.sign(y);
+  k && (t = c + p * -h, n = l);
+  const j = r / 2 * Math.cos(u), L = r / 2 * y, i = r / 2 / h, M = t - (s < 180 ? 1 : 0) * a, S = t - a * h, R = M + a / 2, W = n - i - g;
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      "path",
+      {
+        d: `M${c + j},${l + L} L${c - j},${l - L} L${t},${n - i} L${S},${n - i} L${S},${n + i} L${t},${n + i} Z`,
+        fill: $
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      "text",
+      {
+        ref: m,
+        x: M,
+        y: W,
+        style: f(R, W),
+        children: d
+      }
+    )
+  ] });
+};
+export {
+  D as LabelPointer
+};
+//# sourceMappingURL=sd-component-library327.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library327.js","sources":["../src/components/meters/common-outline-meter-partials/label-pointer/label-pointer.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport { degToRad, getCoordinateForArc } from \"../../outline-meter/utils\";\nimport { LabelPointerProps as Props } from \"./interfaces\";\n\nexport const LabelPointer: React.FC<Props> = (props) => {\n  const {\n    pointerLength,\n    pointerWidth,\n    radius,\n    alpha,\n    color,\n    label,\n    textBottomMargin,\n    horizontal,\n    counterClockWise,\n  } = props;\n\n  const [textWidth, setTextWidth] = useState(0);\n  const ref = useCallback((text: SVGTextElement) => {\n    if (text) setTextWidth(text.getBoundingClientRect().width);\n  }, []);\n\n  if (!label) return null;\n\n  const { x: pointerStartX, y: pointerStartY } = getCoordinateForArc(\n    radius,\n    alpha\n  );\n\n  let { x: pointerEndX, y: pointerEndY } = getCoordinateForArc(\n    radius + pointerLength,\n    alpha,\n    radius\n  );\n\n  const getStyle = (x: number, y: number) => ({\n    transform: `rotateY(${counterClockWise ? 180 : 0}deg)`,\n    transformOrigin: `${x}px ${y}px`,\n  });\n\n  if (Math.round(alpha) === 180) {\n    const textY = pointerEndY - pointerWidth / 2 - textBottomMargin;\n\n    return (\n      <>\n        <line\n          x1={pointerStartX}\n          y1={pointerStartY}\n          x2={pointerEndX}\n          y2={pointerEndY}\n          stroke={color}\n          strokeWidth={pointerWidth}\n        />\n\n        <text\n          ref={ref}\n          x={pointerEndX - textWidth / 2}\n          y={textY}\n          style={getStyle(pointerEndX, textY)}\n        >\n          {label}\n        </text>\n      </>\n    );\n  }\n\n  const alphaInRad = degToRad(alpha);\n  const sinAlpha = Math.sin(alphaInRad);\n  const sinAlphaSign = Math.sign(sinAlpha);\n\n  if (horizontal) {\n    pointerEndX = pointerStartX + pointerLength * -sinAlphaSign;\n    pointerEndY = pointerStartY;\n  }\n\n  const dx = (pointerWidth / 2) * Math.cos(alphaInRad);\n  const dy = (pointerWidth / 2) * sinAlpha;\n  const endDy = pointerWidth / 2 / sinAlphaSign;\n  const textStartX = pointerEndX - (alpha < 180 ? 1 : 0) * textWidth;\n  const textEndX = pointerEndX - textWidth * sinAlphaSign;\n  const textMiddleX = textStartX + textWidth / 2;\n  const textY = pointerEndY - endDy - textBottomMargin;\n\n  return (\n    <>\n      <path\n        d={`M${pointerStartX + dx},${pointerStartY + dy} L${\n          pointerStartX - dx\n        },${pointerStartY - dy} L${pointerEndX},${\n          pointerEndY - endDy\n        } L${textEndX},${pointerEndY - endDy} L${textEndX},${\n          pointerEndY + endDy\n        } L${pointerEndX},${pointerEndY + endDy} Z`}\n        fill={color}\n      />\n\n      <text\n        ref={ref}\n        x={textStartX}\n        y={textY}\n        style={getStyle(textMiddleX, textY)}\n      >\n        {label}\n      </text>\n    </>\n  );\n};\n"],"names":["LabelPointer","props","pointerLength","pointerWidth","radius","alpha","color","label","textBottomMargin","horizontal","counterClockWise","textWidth","setTextWidth","useState","ref","useCallback","text","pointerStartX","pointerStartY","getCoordinateForArc","pointerEndX","pointerEndY","getStyle","x","y","textY","jsxs","Fragment","jsx","alphaInRad","degToRad","sinAlpha","sinAlphaSign","dx","dy","endDy","textStartX","textEndX","textMiddleX"],"mappings":"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"}

package/lib/sd-component-library33.js

@@ -1,25 +1,88 @@
-import { j as i } from "./sd-component-library197.js";
-import { CheckboxV2Container as x } from "./sd-component-library32.js";
-const d = ({
-  value: o,
-  onChange: r,
-  isHoverCheckbox: c,
-  bg: e = "cl_white",
-  ...n
+import { j as e } from "./sd-component-library198.js";
+import { Box as d } from "rebass";
+import { useHover as j } from "./sd-component-library3.js";
+import { isTouchScreen as S } from "./sd-component-library4.js";
+import { FlexItemsCenter as g, FlexCenter as w } from "./sd-component-library36.js";
+const R = ({
+  onChange: o,
+  value: r,
+  isHoverCheckbox: n,
+  stopPropagation: s = !1,
+  ...t
 }) => {
-  const t = () => r(o !== "checked" ? "checked" : "unchecked"), h = c && o === "unchecked";
-  return /* @__PURE__ */ i.jsx(
-    x,
+  const i = (c) => {
+    s && c.stopPropagation(), o(!r);
+  }, x = n && !r;
+  return /* @__PURE__ */ e.jsx(
+    v,
     {
-      onClick: t,
-      showInnerBox: o !== "unchecked",
-      showHoverCheckbox: h,
-      innerBoxSx: o === "partial" ? { borderTopColor: e, borderLeftColor: e } : void 0,
-      ...n
+      showInnerBox: r,
+      onClick: i,
+      showHoverCheckbox: x,
+      ...t
+    }
+  );
+}, z = "10px", l = "20px", B = "5px", v = ({
+  disabled: o,
+  containerSx: r,
+  showHoverCheckbox: n,
+  bg: s,
+  showBGColorWhenIdle: t,
+  disabledColor: i = "cl_grey",
+  color: x = "cl_blue",
+  children: c,
+  showInnerBox: C,
+  onClick: m,
+  borderRadius: a = "3px",
+  borderWidth: k = "2px",
+  innerBoxSx: b
+}) => {
+  const { isHover: f, hoverCallbacks: u } = j(), h = f || !n || S(), p = o ? i : x;
+  return /* @__PURE__ */ e.jsxs(
+    g,
+    {
+      onClick: o ? void 0 : m,
+      sx: {
+        cursor: o ? "default" : "pointer",
+        gap: "10px",
+        ...r
+      },
+      ...u,
+      children: [
+        /* @__PURE__ */ e.jsx(d, { size: l, sx: { flexShrink: 0 }, children: /* @__PURE__ */ e.jsx(
+          w,
+          {
+            width: h ? l : B,
+            height: l,
+            bg: t && h ? "" : s,
+            sx: {
+              flexShrink: 0,
+              borderRadius: a,
+              borderWidth: k,
+              borderColor: p,
+              borderStyle: "solid",
+              transition: "width 0.1s ease-in"
+            },
+            children: C && /* @__PURE__ */ e.jsx(
+              d,
+              {
+                sx: {
+                  border: `calc(${z} / 2) solid`,
+                  borderColor: p,
+                  borderRadius: "2px",
+                  ...b
+                }
+              }
+            )
+          }
+        ) }),
+        c
+      ]
     }
   );
 };
 export {
-  d as PartialCheckboxV2
+  R as CheckboxV2,
+  v as CheckboxV2Container
 };
 //# sourceMappingURL=sd-component-library33.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library33.js","sources":["../src/components/checkboxes/partial-checkbox-v2/partial-checkbox-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { CheckboxV2Container } from \"../checkbox-v2\";\nimport { PartialCheckboxV2Props as Props } from \"./interfaces\";\n\nexport const PartialCheckboxV2: React.FC<Props> = ({\n  value,\n  onChange,\n  isHoverCheckbox,\n  bg = \"cl_white\",\n  ...containerProps\n}) => {\n  const onClick = () => onChange(value !== \"checked\" ? \"checked\" : \"unchecked\");\n  const showHoverCheckbox = isHoverCheckbox && value === \"unchecked\";\n\n  return (\n    <CheckboxV2Container\n      onClick={onClick}\n      showInnerBox={value !== \"unchecked\"}\n      showHoverCheckbox={showHoverCheckbox}\n      innerBoxSx={\n        value === \"partial\"\n          ? { borderTopColor: bg, borderLeftColor: bg }\n          : undefined\n      }\n      {...containerProps}\n    />\n  );\n};\n"],"names":["PartialCheckboxV2","value","onChange","isHoverCheckbox","bg","containerProps","onClick","showHoverCheckbox","jsx","CheckboxV2Container"],"mappings":";;AAKO,MAAMA,IAAqC,CAAC;AAAA,EACjD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,IAAAC,IAAK;AAAA,EACL,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAU,MAAMJ,EAASD,MAAU,YAAY,YAAY,WAAW,GACtEM,IAAoBJ,KAAmBF,MAAU;AAGrD,SAAAO,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,cAAcL,MAAU;AAAA,MACxB,mBAAAM;AAAA,MACA,YACEN,MAAU,YACN,EAAE,gBAAgBG,GAAI,iBAAiBA,EACvC,IAAA;AAAA,MAEL,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"sd-component-library33.js","sources":["../src/components/checkboxes/checkbox-v2/checkbox-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { useHover } from \"../../../core/custom-hooks\";\nimport { isTouchScreen } from \"../../../core/functions\";\nimport { FlexCenter, FlexItemsCenter } from \"../../containers\";\nimport {\n  CheckboxV2ContainerProps as ContainerProps,\n  CheckboxV2Props as Props,\n} from \"./interfaces\";\n\nexport const CheckboxV2: React.FC<Props> = ({\n  onChange,\n  value,\n  isHoverCheckbox,\n  stopPropagation = false,\n  ...containerProps\n}) => {\n  const onClick: ContainerProps[\"onClick\"] = (event) => {\n    stopPropagation && event.stopPropagation();\n    onChange(!value);\n  };\n\n  const showHoverCheckbox = isHoverCheckbox && !value;\n\n  return (\n    <CheckboxV2Container\n      showInnerBox={value}\n      onClick={onClick}\n      showHoverCheckbox={showHoverCheckbox}\n      {...containerProps}\n    />\n  );\n};\n\nconst innerBoxSize = \"10px\";\nconst outerBoxSize = \"20px\";\n\nconst shrankSize = \"5px\";\n\nexport const CheckboxV2Container: React.FC<ContainerProps> = ({\n  disabled,\n  containerSx,\n  showHoverCheckbox,\n  bg,\n  showBGColorWhenIdle,\n  disabledColor = \"cl_grey\",\n  color = \"cl_blue\",\n  children,\n  showInnerBox,\n  onClick,\n  borderRadius = \"3px\",\n  borderWidth = \"2px\",\n  innerBoxSx,\n}) => {\n  const { isHover, hoverCallbacks } = useHover();\n  const isCheckboxExtended = isHover || !showHoverCheckbox || isTouchScreen();\n  const currentColor = disabled ? disabledColor : color;\n\n  return (\n    <FlexItemsCenter\n      onClick={disabled ? undefined : onClick}\n      sx={{\n        cursor: disabled ? \"default\" : \"pointer\",\n        gap: \"10px\",\n        ...containerSx,\n      }}\n      {...hoverCallbacks}\n    >\n      <Box size={outerBoxSize} sx={{ flexShrink: 0 }}>\n        <FlexCenter\n          width={isCheckboxExtended ? outerBoxSize : shrankSize}\n          height={outerBoxSize}\n          bg={showBGColorWhenIdle ? (isCheckboxExtended ? \"\" : bg) : bg}\n          sx={{\n            flexShrink: 0,\n            borderRadius,\n            borderWidth,\n            borderColor: currentColor,\n            borderStyle: \"solid\",\n            transition: \"width 0.1s ease-in\",\n          }}\n        >\n          {showInnerBox && (\n            <Box\n              sx={{\n                border: `calc(${innerBoxSize} / 2) solid`,\n                borderColor: currentColor,\n                borderRadius: \"2px\",\n                ...innerBoxSx,\n              }}\n            />\n          )}\n        </FlexCenter>\n      </Box>\n\n      {children}\n    </FlexItemsCenter>\n  );\n};\n"],"names":["CheckboxV2","onChange","value","isHoverCheckbox","stopPropagation","containerProps","onClick","event","showHoverCheckbox","jsx","CheckboxV2Container","innerBoxSize","outerBoxSize","shrankSize","disabled","containerSx","bg","showBGColorWhenIdle","disabledColor","color","children","showInnerBox","borderRadius","borderWidth","innerBoxSx","isHover","hoverCallbacks","useHover","isCheckboxExtended","isTouchScreen","currentColor","jsxs","FlexItemsCenter","Box","FlexCenter"],"mappings":";;;;;AAYO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,MAAM;AACE,QAAAC,IAAqC,CAACC,MAAU;AACpD,IAAAH,KAAmBG,EAAM,mBACzBN,EAAS,CAACC,CAAK;AAAA,EAAA,GAGXM,IAAoBL,KAAmB,CAACD;AAG5C,SAAAO,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAcR;AAAA,MACd,SAAAI;AAAA,MACA,mBAAAE;AAAA,MACC,GAAGH;AAAA,IAAA;AAAA,EAAA;AAGV,GAEMM,IAAe,QACfC,IAAe,QAEfC,IAAa,OAENH,IAAgD,CAAC;AAAA,EAC5D,UAAAI;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAP;AAAA,EACA,IAAAQ;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAf;AAAA,EACA,cAAAgB,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,YAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,gBAAAC,EAAe,IAAIC,EAAS,GACvCC,IAAqBH,KAAW,CAACjB,KAAqBqB,EAAc,GACpEC,IAAehB,IAAWI,IAAgBC;AAG9C,SAAAY,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASlB,IAAW,SAAYR;AAAA,MAChC,IAAI;AAAA,QACF,QAAQQ,IAAW,YAAY;AAAA,QAC/B,KAAK;AAAA,QACL,GAAGC;AAAA,MACL;AAAA,MACC,GAAGW;AAAA,MAEJ,UAAA;AAAA,QAAAjB,gBAAAA,MAACwB,KAAI,MAAMrB,GAAc,IAAI,EAAE,YAAY,KACzC,UAAAH,gBAAAA,EAAA;AAAA,UAACyB;AAAA,UAAA;AAAA,YACC,OAAON,IAAqBhB,IAAeC;AAAA,YAC3C,QAAQD;AAAA,YACR,IAAIK,KAAuBW,IAAqB,KAAWZ;AAAA,YAC3D,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,cAAAM;AAAA,cACA,aAAAC;AAAA,cACA,aAAaO;AAAA,cACb,aAAa;AAAA,cACb,YAAY;AAAA,YACd;AAAA,YAEC,UACCT,KAAAZ,gBAAAA,EAAA;AAAA,cAACwB;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,QAAQ,QAAQtB,CAAY;AAAA,kBAC5B,aAAamB;AAAA,kBACb,cAAc;AAAA,kBACd,GAAGN;AAAA,gBACL;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA,GAGN;AAAA,QAECJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}