@elliemae/ds-dataviz-pie 3.6.0-next.3

package/dist/esm/config/usePie.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { useMemo, useState, useRef } from "react";
+import { pie } from "d3";
+const usePie = (props) => {
+  const { series, width, height, margin } = props;
+  const containerRef = useRef(null);
+  const svgRef = useRef(null);
+  const [activeSerie, setActiveSerie] = useState("");
+  const innerHeight = height - margin.top - margin.bottom;
+  const innerWidth = width - margin.left - margin.right;
+  const groups = series.map((serie) => serie.name);
+  const data = series.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.data }), {});
+  const pieGenerator = pie().value(function(d) {
+    return d[1];
+  }).sort(null).padAngle(0.02);
+  const pieData = pieGenerator(Object.entries(data));
+  return useMemo(
+    () => ({
+      props,
+      innerHeight,
+      innerWidth,
+      groups,
+      svgRef,
+      containerRef,
+      activeSerie,
+      pieData,
+      setActiveSerie
+    }),
+    [props, pieData, innerHeight, innerWidth, groups, activeSerie]
+  );
+};
+export {
+  usePie
+};
+//# sourceMappingURL=usePie.js.map

package/dist/esm/config/usePie.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/usePie.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState, useRef } from 'react';\nimport { pie } from 'd3';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSPieT } from '../react-desc-prop-types';\n\nexport const usePie = (props: DSPieT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, width, height, margin } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [activeSerie, setActiveSerie] = useState('');\n\n  const innerHeight = height - margin.top - margin.bottom;\n  const innerWidth = width - margin.left - margin.right;\n\n  const groups = series.map((serie) => serie.name);\n\n  const data = series.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.data }), {});\n  const pieGenerator = pie()\n    .value(function (d) {\n      return d[1];\n    })\n    .sort(null)\n    .padAngle(0.02);\n  const pieData = pieGenerator(Object.entries(data));\n\n  return useMemo(\n    () => ({\n      props,\n      innerHeight,\n      innerWidth,\n      groups,\n      svgRef,\n      containerRef,\n      activeSerie,\n      pieData,\n      setActiveSerie,\n    }),\n    [props, pieData, innerHeight, innerWidth, groups, activeSerie],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,UAAU,cAAc;AAC1C,SAAS,WAAW;AAIb,MAAM,SAAS,CAAC,UAAwB;AAG7C,QAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,IAAI;AAE1C,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,cAAc,SAAS,OAAO,MAAM,OAAO;AACjD,QAAM,aAAa,QAAQ,OAAO,OAAO,OAAO;AAEhD,QAAM,SAAS,OAAO,IAAI,CAAC,UAAU,MAAM,IAAI;AAE/C,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK,IAAI,CAAC,CAAC;AAClF,QAAM,eAAe,IAAI,EACtB,MAAM,SAAU,GAAG;AAClB,WAAO,EAAE;AAAA,EACX,CAAC,EACA,KAAK,IAAI,EACT,SAAS,IAAI;AAChB,QAAM,UAAU,aAAa,OAAO,QAAQ,IAAI,CAAC;AAEjD,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,SAAS,aAAa,YAAY,QAAQ,WAAW;AAAA,EAC/D;AACF;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { PieChart } from "./Pie";
+export {
+  PieChart
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { PieChart } from './Pie';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB;",
+  "names": []
+}

package/dist/esm/parts/ChartContainer.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { StyledSVGWrapper } from "../styles";
+import { PieContext } from "../PieContext";
+const ChartContainer = ({ children }) => {
+  const {
+    props: { width, height, margin, responsive },
+    containerRef,
+    activeSerie,
+    svgRef
+  } = useContext(PieContext);
+  const dimensions = useMemo(
+    () => responsive ? {
+      viewBox: `0 0 ${width} ${height}`
+    } : {
+      width,
+      height
+    },
+    [height, responsive, width]
+  );
+  return /* @__PURE__ */ jsx(StyledSVGWrapper, {
+    ref: containerRef,
+    children: /* @__PURE__ */ jsx("svg", {
+      ref: svgRef,
+      ...dimensions,
+      children: /* @__PURE__ */ jsx("g", {
+        className: "container",
+        transform: `translate(${margin.left},${margin.top})`,
+        children
+      })
+    })
+  });
+};
+export {
+  ChartContainer
+};
+//# sourceMappingURL=ChartContainer.js.map

package/dist/esm/parts/ChartContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ChartContainer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { PieContext } from '../PieContext';\n// import { useKeyboardNavigation } from '../config/useKeyboardNavigation';\ninterface ChartContainerT {\n  children: JSX.Element | JSX.Element[] | string | string[];\n}\nexport const ChartContainer: React.ComponentType<ChartContainerT> = ({ children }) => {\n  const {\n    props: { width, height, margin, responsive },\n    containerRef,\n    activeSerie,\n    svgRef,\n  } = useContext(PieContext);\n\n  const dimensions = useMemo(\n    () =>\n      responsive\n        ? {\n            viewBox: `0 0 ${width} ${height}`,\n          }\n        : {\n            width,\n            height,\n          },\n    [height, responsive, width],\n  );\n  //  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n  return (\n    <StyledSVGWrapper\n      ref={containerRef}\n      // onKeyDown={onInputKeyDown}\n      // aria-hidden=\"true\"\n      // tabIndex={activeSerie ? -1 : 0}\n      // onBlur={handleOnBlur}\n      // onFocus={handleOnFocus}\n      // onMouseDown={(e) => e.preventDefault()}\n    >\n      <svg ref={svgRef} {...dimensions}>\n        <g className=\"container\" transform={`translate(${margin.left},${margin.top})`}>\n          {children}\n        </g>\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,wBAAwB;AAEjC,SAAS,kBAAkB;AAKpB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,QAAQ,WAAW;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,UAAU;AAEzB,QAAM,aAAa;AAAA,IACjB,MACE,aACI;AAAA,MACE,SAAS,OAAO,SAAS;AAAA,IAC3B,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACN,CAAC,QAAQ,YAAY,KAAK;AAAA,EAC5B;AAEA,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IAQL,8BAAC;AAAA,MAAI,KAAK;AAAA,MAAS,GAAG;AAAA,MACpB,8BAAC;AAAA,QAAE,WAAU;AAAA,QAAY,WAAW,aAAa,OAAO,QAAQ,OAAO;AAAA,QACpE;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/esm/parts/ColorLegend.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { PieContext } from "../PieContext";
+const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) => {
+  const {
+    colorScale,
+    innerWidth,
+    props: { colorLegend, circleRadius }
+  } = useContext(PieContext);
+  if (!colorLegend)
+    return null;
+  return /* @__PURE__ */ jsxs("g", {
+    transform: `translate(${innerWidth + 30},30)`,
+    children: [
+      /* @__PURE__ */ jsx("text", {
+        x: 35,
+        y: -25,
+        className: "axis-label",
+        textAnchor: "middle",
+        children: colorLegend.label
+      }),
+      colorScale.domain().map((domainValue, i) => /* @__PURE__ */ jsxs("g", {
+        className: "tick",
+        transform: `translate(0,${i * tickSpacing})`,
+        children: [
+          /* @__PURE__ */ jsx("circle", {
+            fill: colorScale(domainValue),
+            r: circleRadius ?? tickSize
+          }),
+          /* @__PURE__ */ jsx("text", {
+            x: tickTextOffset,
+            dy: ".32em",
+            children: domainValue
+          })
+        ]
+      }))
+    ]
+  });
+};
+export {
+  ColorLegend
+};
+//# sourceMappingURL=ColorLegend.js.map

package/dist/esm/parts/ColorLegend.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ColorLegend.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { PieContext } from '../PieContext';\n\nexport const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) => {\n  const {\n    colorScale,\n    innerWidth,\n    props: { colorLegend, circleRadius },\n  } = useContext(PieContext);\n\n  if (!colorLegend) return null;\n  return (\n    <g transform={`translate(${innerWidth + 30},30)`}>\n      <text x={35} y={-25} className=\"axis-label\" textAnchor=\"middle\">\n        {colorLegend.label}\n      </text>\n      {colorScale.domain().map((domainValue, i) => (\n        <g className=\"tick\" transform={`translate(0,${i * tickSpacing})`}>\n          <circle fill={colorScale(domainValue)} r={circleRadius ?? tickSize} />\n          <text x={tickTextOffset} dy=\".32em\">\n            {domainValue}\n          </text>\n        </g>\n      ))}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,cAAc,CAAC,EAAE,cAAc,IAAI,WAAW,IAAI,iBAAiB,GAAG,MAAM;AACvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,aAAa;AAAA,EACrC,IAAI,WAAW,UAAU;AAEzB,MAAI,CAAC;AAAa,WAAO;AACzB,SACE,qBAAC;AAAA,IAAE,WAAW,aAAa,aAAa;AAAA,IACtC;AAAA,0BAAC;AAAA,QAAK,GAAG;AAAA,QAAI,GAAG;AAAA,QAAK,WAAU;AAAA,QAAa,YAAW;AAAA,QACpD,sBAAY;AAAA,OACf;AAAA,MACC,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,qBAAC;AAAA,QAAE,WAAU;AAAA,QAAO,WAAW,eAAe,IAAI;AAAA,QAChD;AAAA,8BAAC;AAAA,YAAO,MAAM,WAAW,WAAW;AAAA,YAAG,GAAG,gBAAgB;AAAA,WAAU;AAAA,UACpE,oBAAC;AAAA,YAAK,GAAG;AAAA,YAAgB,IAAG;AAAA,YACzB;AAAA,WACH;AAAA;AAAA,OACF,CACD;AAAA;AAAA,GACH;AAEJ;",
+  "names": []
+}

package/dist/esm/parts/Pie.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Slice } from "./Slice";
+import { PieContext } from "../PieContext";
+const Pie = () => {
+  const {
+    innerHeight,
+    innerWidth,
+    pieData,
+    props: { isHalfPie, label, innerRadius }
+  } = useContext(PieContext);
+  const radius = Math.min(innerWidth, innerHeight) / 2;
+  const currentInnerHeight = isHalfPie ? innerHeight : innerHeight / 2;
+  return /* @__PURE__ */ jsxs("g", {
+    transform: `translate(${innerWidth / 2},${currentInnerHeight})`,
+    children: [
+      pieData.map((slice) => /* @__PURE__ */ jsx(Slice, {
+        data: slice
+      }, slice.index)),
+      !isHalfPie && label ? /* @__PURE__ */ jsx("text", {
+        x: 0,
+        y: 0,
+        textAnchor: "middle",
+        alignmentBaseline: "middle",
+        children: label
+      }) : null,
+      isHalfPie && label ? /* @__PURE__ */ jsx("text", {
+        x: 0,
+        y: -innerRadius / 4,
+        textAnchor: "middle",
+        alignmentBaseline: "middle",
+        children: label
+      }) : null
+    ]
+  });
+};
+export {
+  Pie
+};
+//# sourceMappingURL=Pie.js.map

package/dist/esm/parts/Pie.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Pie.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Slice } from './Slice';\nimport { PieContext } from '../PieContext';\n\nexport const Pie = () => {\n  const {\n    innerHeight,\n    innerWidth,\n    pieData,\n\n    props: { isHalfPie, label, innerRadius },\n  } = useContext(PieContext);\n\n  const radius = Math.min(innerWidth, innerHeight) / 2;\n\n  const currentInnerHeight = isHalfPie ? innerHeight : innerHeight / 2;\n  return (\n    <g transform={`translate(${innerWidth / 2},${currentInnerHeight})`}>\n      {pieData.map((slice) => (\n        <Slice key={slice.index} data={slice} />\n      ))}\n      {!isHalfPie && label ? (\n        <text x={0} y={0} textAnchor=\"middle\" alignmentBaseline=\"middle\">\n          {label}\n        </text>\n      ) : null}\n      {isHalfPie && label ? (\n        <text x={0} y={-innerRadius / 4} textAnchor=\"middle\" alignmentBaseline=\"middle\">\n          {label}\n        </text>\n      ) : null}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAEpB,MAAM,MAAM,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEA,OAAO,EAAE,WAAW,OAAO,YAAY;AAAA,EACzC,IAAI,WAAW,UAAU;AAEzB,QAAM,SAAS,KAAK,IAAI,YAAY,WAAW,IAAI;AAEnD,QAAM,qBAAqB,YAAY,cAAc,cAAc;AACnE,SACE,qBAAC;AAAA,IAAE,WAAW,aAAa,aAAa,KAAK;AAAA,IAC1C;AAAA,cAAQ,IAAI,CAAC,UACZ,oBAAC;AAAA,QAAwB,MAAM;AAAA,SAAnB,MAAM,KAAoB,CACvC;AAAA,MACA,CAAC,aAAa,QACb,oBAAC;AAAA,QAAK,GAAG;AAAA,QAAG,GAAG;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QACrD;AAAA,OACH,IACE;AAAA,MACH,aAAa,QACZ,oBAAC;AAAA,QAAK,GAAG;AAAA,QAAG,GAAG,CAAC,cAAc;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QACpE;AAAA,OACH,IACE;AAAA;AAAA,GACN;AAEJ;",
+  "names": []
+}

package/dist/esm/parts/Point.js

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo, useRef, useCallback } from "react";
+import { DSTooltipV3 } from "@elliemae/ds-tooltip";
+import { StyledPoint, StyleFocusableRegion } from "../styles";
+import { PieContext } from "../PieContext";
+const Point = ({ x, y, id, label, opacity }) => {
+  const {
+    activePoint,
+    props: { circleRadius, xAxis }
+  } = useContext(PieContext);
+  const isFocused = activePoint === id;
+  const focusableElement = useRef();
+  const handleRef = useCallback(
+    (newRef) => {
+      if (focusableElement.current)
+        focusableElement.current = newRef;
+      if (isFocused)
+        newRef?.focus();
+    },
+    [isFocused]
+  );
+  return useMemo(
+    () => /* @__PURE__ */ jsxs("g", {
+      transform: `translate(${x},${y})`,
+      children: [
+        /* @__PURE__ */ jsx(StyledPoint, {
+          id: `${id}-mark`,
+          isFocused,
+          r: circleRadius,
+          opacity
+        }),
+        /* @__PURE__ */ jsx("foreignObject", {
+          width: circleRadius * 2,
+          height: circleRadius * 2,
+          style: { transform: `translate(-${circleRadius}px, -${circleRadius}px)` },
+          children: /* @__PURE__ */ jsx(DSTooltipV3, {
+            withoutAnimation: true,
+            text: label,
+            children: /* @__PURE__ */ jsx(StyleFocusableRegion, {
+              s: circleRadius,
+              tabIndex: -1,
+              ref: handleRef
+            })
+          })
+        })
+      ]
+    }),
+    [circleRadius, handleRef, id, isFocused, label, opacity, x, y]
+  );
+};
+export {
+  Point
+};
+//# sourceMappingURL=Point.js.map

package/dist/esm/parts/Point.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Point.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useRef, useCallback } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { StyledPoint, StyleFocusableRegion } from '../styles';\nimport { PieContext } from '../PieContext';\n\nexport const Point = ({ x, y, id, label, opacity }) => {\n  const {\n    activePoint,\n\n    props: { circleRadius, xAxis },\n  } = useContext(PieContext);\n\n  const isFocused = activePoint === id;\n\n  const focusableElement = useRef<HTMLDivElement>();\n  const handleRef = useCallback(\n    (newRef: HTMLDivElement) => {\n      if (focusableElement.current) focusableElement.current = newRef;\n      if (isFocused) newRef?.focus();\n    },\n    [isFocused],\n  );\n\n  return useMemo(\n    () => (\n      <g transform={`translate(${x},${y})`}>\n        <StyledPoint id={`${id}-mark`} isFocused={isFocused} r={circleRadius} opacity={opacity}></StyledPoint>\n        <foreignObject\n          width={circleRadius * 2}\n          height={circleRadius * 2}\n          style={{ transform: `translate(-${circleRadius}px, -${circleRadius}px)` }}\n        >\n          <DSTooltipV3 withoutAnimation text={label}>\n            <StyleFocusableRegion\n              s={circleRadius}\n              // aria-label={`${xValue} ${d[yValue]}`}\n              tabIndex={-1}\n              ref={handleRef}\n            ></StyleFocusableRegion>\n          </DSTooltipV3>\n        </foreignObject>\n      </g>\n    ),\n    [circleRadius, handleRef, id, isFocused, label, opacity, x, y],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,QAAQ,mBAAmB;AAChE,SAAS,mBAAmB;AAC5B,SAAS,aAAa,4BAA4B;AAClD,SAAS,kBAAkB;AAEpB,MAAM,QAAQ,CAAC,EAAE,GAAG,GAAG,IAAI,OAAO,QAAQ,MAAM;AACrD,QAAM;AAAA,IACJ;AAAA,IAEA,OAAO,EAAE,cAAc,MAAM;AAAA,EAC/B,IAAI,WAAW,UAAU;AAEzB,QAAM,YAAY,gBAAgB;AAElC,QAAM,mBAAmB,OAAuB;AAChD,QAAM,YAAY;AAAA,IAChB,CAAC,WAA2B;AAC1B,UAAI,iBAAiB;AAAS,yBAAiB,UAAU;AACzD,UAAI;AAAW,gBAAQ,MAAM;AAAA,IAC/B;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SAAO;AAAA,IACL,MACE,qBAAC;AAAA,MAAE,WAAW,aAAa,KAAK;AAAA,MAC9B;AAAA,4BAAC;AAAA,UAAY,IAAI,GAAG;AAAA,UAAW;AAAA,UAAsB,GAAG;AAAA,UAAc;AAAA,SAAkB;AAAA,QACxF,oBAAC;AAAA,UACC,OAAO,eAAe;AAAA,UACtB,QAAQ,eAAe;AAAA,UACvB,OAAO,EAAE,WAAW,cAAc,oBAAoB,kBAAkB;AAAA,UAExE,8BAAC;AAAA,YAAY,kBAAgB;AAAA,YAAC,MAAM;AAAA,YAClC,8BAAC;AAAA,cACC,GAAG;AAAA,cAEH,UAAU;AAAA,cACV,KAAK;AAAA,aACN;AAAA,WACH;AAAA,SACF;AAAA;AAAA,KACF;AAAA,IAEF,CAAC,cAAc,WAAW,IAAI,WAAW,OAAO,SAAS,GAAG,CAAC;AAAA,EAC/D;AACF;",
+  "names": []
+}

package/dist/esm/parts/Slice.js

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useRef, useContext } from "react";
+import { arc, select } from "d3";
+import { PieContext } from "../PieContext";
+import { Tooltip } from "./Tooltip";
+const Slice = ({ data }) => {
+  const {
+    innerHeight,
+    innerWidth,
+    activeSerie,
+    setActiveSerie,
+    props: { series, innerRadius: innerRadiusProp, isHalfPie, TooltipRenderer }
+  } = useContext(PieContext);
+  const [isTooltipShown, setIsTooltipShown] = useState(false);
+  const innerRadius = innerRadiusProp ?? 0;
+  const tooltipRef = useRef(null);
+  const arcRef = useRef(null);
+  const radius = isHalfPie ? Math.min(innerWidth, innerHeight) : Math.min(innerWidth, innerHeight) / 2;
+  const { startAngle, endAngle, index, value } = data;
+  const currentStartAngle = isHalfPie ? startAngle / 2 : startAngle;
+  const currentEndAngle = isHalfPie ? endAngle / 2 : endAngle;
+  const serieData = series?.find((serie) => serie.name === data.data[0]);
+  const { color, name } = serieData;
+  const sliceData = arc().innerRadius(innerRadius).outerRadius(radius).startAngle(currentStartAngle).endAngle(currentEndAngle);
+  const deltaAngle = currentStartAngle + (currentEndAngle - currentStartAngle) / 2;
+  const x = radius * Math.sin(deltaAngle);
+  const y = -radius * Math.cos(deltaAngle);
+  const isOpen = useMemo(
+    () => activeSerie === "" && isTooltipShown || activeSerie === `${name}-${index}` && !isTooltipShown,
+    [activeSerie, index, isTooltipShown, name]
+  );
+  useEffect(() => {
+    if (arcRef.current) {
+      select(arcRef.current).attr("d", sliceData());
+    }
+  }, [sliceData]);
+  return /* @__PURE__ */ jsxs("g", {
+    onMouseEnter: () => {
+      setActiveSerie("");
+      setIsTooltipShown(true);
+    },
+    onMouseLeave: (e) => {
+      setIsTooltipShown(false);
+    },
+    transform: isHalfPie ? "rotate(-90)" : "",
+    children: [
+      /* @__PURE__ */ jsx("path", {
+        ref: arcRef,
+        fill: color,
+        stroke: "white"
+      }),
+      name !== "no-data" && TooltipRenderer && /* @__PURE__ */ jsx("foreignObject", {
+        x,
+        y,
+        children: /* @__PURE__ */ jsx(Tooltip, {
+          isTooltipShown: isOpen,
+          withoutAnimation: true,
+          onFocus: () => {
+            setActiveSerie(`${name}-${index}`);
+          },
+          onBlur: () => {
+            setActiveSerie("");
+          },
+          startPlacementPreference: "bottom",
+          children: /* @__PURE__ */ jsx(TooltipRenderer, {
+            data: serieData
+          })
+        })
+      })
+    ]
+  });
+};
+export {
+  Slice
+};
+//# sourceMappingURL=Slice.js.map

package/dist/esm/parts/Slice.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Slice.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect, useMemo, useRef, useContext } from 'react';\nimport { arc, select } from 'd3';\nimport { PieContext } from '../PieContext';\nimport { Tooltip } from './Tooltip';\nexport const Slice = ({ data }) => {\n  const {\n    innerHeight,\n    innerWidth,\n    activeSerie,\n    setActiveSerie,\n    props: { series, innerRadius: innerRadiusProp, isHalfPie, TooltipRenderer },\n  } = useContext(PieContext);\n\n  const [isTooltipShown, setIsTooltipShown] = useState(false);\n\n  const innerRadius = innerRadiusProp ?? 0;\n  const tooltipRef = useRef(null);\n  const arcRef = useRef(null);\n\n  const radius = isHalfPie ? Math.min(innerWidth, innerHeight) : Math.min(innerWidth, innerHeight) / 2;\n  const { startAngle, endAngle, index, value } = data;\n  const currentStartAngle = isHalfPie ? startAngle / 2 : startAngle;\n  const currentEndAngle = isHalfPie ? endAngle / 2 : endAngle;\n\n  const serieData = series?.find((serie) => serie.name === data.data[0]);\n  const { color, name } = serieData;\n\n  const sliceData = arc()\n    .innerRadius(innerRadius)\n    .outerRadius(radius)\n    .startAngle(currentStartAngle)\n    .endAngle(currentEndAngle);\n  const deltaAngle = currentStartAngle + (currentEndAngle - currentStartAngle) / 2;\n  const x = radius * Math.sin(deltaAngle);\n  const y = -radius * Math.cos(deltaAngle);\n\n  const isOpen = useMemo(\n    () => (activeSerie === '' && isTooltipShown) || (activeSerie === `${name}-${index}` && !isTooltipShown),\n    [activeSerie, index, isTooltipShown, name],\n  );\n\n  useEffect(() => {\n    if (arcRef.current) {\n      select(arcRef.current).attr('d', sliceData());\n    }\n  }, [sliceData]);\n\n  return (\n    <g\n      onMouseEnter={() => {\n        setActiveSerie('');\n        setIsTooltipShown(true);\n      }}\n      onMouseLeave={(e) => {\n        setIsTooltipShown(false);\n      }}\n      transform={isHalfPie ? 'rotate(-90)' : ''}\n    >\n      <path ref={arcRef} fill={color} stroke=\"white\"></path>\n      {name !== 'no-data' && TooltipRenderer && (\n        <foreignObject x={x} y={y}>\n          <Tooltip\n            isTooltipShown={isOpen}\n            withoutAnimation\n            onFocus={() => {\n              setActiveSerie(`${name}-${index}`);\n            }}\n            onBlur={() => {\n              setActiveSerie('');\n            }}\n            startPlacementPreference=\"bottom\"\n          >\n            <TooltipRenderer data={serieData} />\n          </Tooltip>\n        </foreignObject>\n      )}\n\n      {/* {isOpen && (\n        <g>\n          <circle r=\"5\" fill={color} cx={x} cy={y} stroke=\"black\" />\n        </g>\n      )} */}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,UAAU,WAAW,SAAS,QAAQ,kBAAkB;AACxE,SAAS,KAAK,cAAc;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACjB,MAAM,QAAQ,CAAC,EAAE,KAAK,MAAM;AACjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,aAAa,iBAAiB,WAAW,gBAAgB;AAAA,EAC5E,IAAI,WAAW,UAAU;AAEzB,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAE1D,QAAM,cAAc,mBAAmB;AACvC,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,SAAS,YAAY,KAAK,IAAI,YAAY,WAAW,IAAI,KAAK,IAAI,YAAY,WAAW,IAAI;AACnG,QAAM,EAAE,YAAY,UAAU,OAAO,MAAM,IAAI;AAC/C,QAAM,oBAAoB,YAAY,aAAa,IAAI;AACvD,QAAM,kBAAkB,YAAY,WAAW,IAAI;AAEnD,QAAM,YAAY,QAAQ,KAAK,CAAC,UAAU,MAAM,SAAS,KAAK,KAAK,EAAE;AACrE,QAAM,EAAE,OAAO,KAAK,IAAI;AAExB,QAAM,YAAY,IAAI,EACnB,YAAY,WAAW,EACvB,YAAY,MAAM,EAClB,WAAW,iBAAiB,EAC5B,SAAS,eAAe;AAC3B,QAAM,aAAa,qBAAqB,kBAAkB,qBAAqB;AAC/E,QAAM,IAAI,SAAS,KAAK,IAAI,UAAU;AACtC,QAAM,IAAI,CAAC,SAAS,KAAK,IAAI,UAAU;AAEvC,QAAM,SAAS;AAAA,IACb,MAAO,gBAAgB,MAAM,kBAAoB,gBAAgB,GAAG,QAAQ,WAAW,CAAC;AAAA,IACxF,CAAC,aAAa,OAAO,gBAAgB,IAAI;AAAA,EAC3C;AAEA,YAAU,MAAM;AACd,QAAI,OAAO,SAAS;AAClB,aAAO,OAAO,OAAO,EAAE,KAAK,KAAK,UAAU,CAAC;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,qBAAC;AAAA,IACC,cAAc,MAAM;AAClB,qBAAe,EAAE;AACjB,wBAAkB,IAAI;AAAA,IACxB;AAAA,IACA,cAAc,CAAC,MAAM;AACnB,wBAAkB,KAAK;AAAA,IACzB;AAAA,IACA,WAAW,YAAY,gBAAgB;AAAA,IAEvC;AAAA,0BAAC;AAAA,QAAK,KAAK;AAAA,QAAQ,MAAM;AAAA,QAAO,QAAO;AAAA,OAAQ;AAAA,MAC9C,SAAS,aAAa,mBACrB,oBAAC;AAAA,QAAc;AAAA,QAAM;AAAA,QACnB,8BAAC;AAAA,UACC,gBAAgB;AAAA,UAChB,kBAAgB;AAAA,UAChB,SAAS,MAAM;AACb,2BAAe,GAAG,QAAQ,OAAO;AAAA,UACnC;AAAA,UACA,QAAQ,MAAM;AACZ,2BAAe,EAAE;AAAA,UACnB;AAAA,UACA,0BAAyB;AAAA,UAEzB,8BAAC;AAAA,YAAgB,MAAM;AAAA,WAAW;AAAA,SACpC;AAAA,OACF;AAAA;AAAA,GAQJ;AAEJ;",
+  "names": []
+}

package/dist/esm/parts/Tooltip.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { DSPopperJS } from "@elliemae/ds-popperjs";
+const Tooltip = (props) => {
+  const { children, innerRef, isTooltipShown, onFocus, onBlur, ...extraPopperJsProps } = props;
+  const [referenceElement, setReferenceElement] = useState();
+  return /* @__PURE__ */ jsx("div", {
+    onFocus,
+    onBlur,
+    tabIndex: 0,
+    ref: setReferenceElement,
+    className: "myclass",
+    children: /* @__PURE__ */ jsx(DSPopperJS, {
+      referenceElement,
+      showPopover: isTooltipShown,
+      zIndex: 3e3,
+      ...extraPopperJsProps,
+      children: /* @__PURE__ */ jsx("div", {
+        style: { backgroundColor: "white" },
+        children
+      })
+    })
+  });
+};
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/esm/parts/Tooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Tooltip.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\n\nexport const Tooltip: React.ComponentType<any> = (props) => {\n  const { children, innerRef, isTooltipShown, onFocus, onBlur, ...extraPopperJsProps } = props;\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n\n  return (\n    <div onFocus={onFocus} onBlur={onBlur} tabIndex={0} ref={setReferenceElement} className=\"myclass\">\n      <DSPopperJS\n        referenceElement={referenceElement}\n        showPopover={isTooltipShown}\n        zIndex={3000}\n        {...extraPopperJsProps}\n      >\n        <div style={{ backgroundColor: 'white' }}>{children}</div>\n      </DSPopperJS>\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,gBAAgB;AAChC,SAAS,kBAAkB;AAEpB,MAAM,UAAoC,CAAC,UAAU;AAC1D,QAAM,EAAE,UAAU,UAAU,gBAAgB,SAAS,WAAW,mBAAmB,IAAI;AAEvF,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiC;AAEjF,SACE,oBAAC;AAAA,IAAI;AAAA,IAAkB;AAAA,IAAgB,UAAU;AAAA,IAAG,KAAK;AAAA,IAAqB,WAAU;AAAA,IACtF,8BAAC;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb,QAAQ;AAAA,MACP,GAAG;AAAA,MAEJ,8BAAC;AAAA,QAAI,OAAO,EAAE,iBAAiB,QAAQ;AAAA,QAAI;AAAA,OAAS;AAAA,KACtD;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { globalAttributesPropTypes, PropTypes } from "@elliemae/ds-utilities";
+const propTypes = {
+  ...globalAttributesPropTypes,
+  height: PropTypes.number.isRequired.description("height").defaultValue(""),
+  width: PropTypes.number.isRequired.description("height").defaultValue(""),
+  margin: PropTypes.shape({
+    top: PropTypes.number,
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number
+  }).isRequired.description("margin").defaultValue(""),
+  series: PropTypes.arrayOf(PropTypes.object).description("yValue").defaultValue("")
+};
+export {
+  propTypes
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\ntype MarginT = {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n};\n\nexport declare namespace DSPieT {\n  export interface SeriesT {\n    name: string;\n    data: number;\n    color: string;\n  }\n  export interface Props {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n  }\n}\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AAuB9C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,UAAU,MAAM;AAAA,IACtB,KAAK,UAAU;AAAA,IACf,QAAQ,UAAU;AAAA,IAClB,MAAM,UAAU;AAAA,IAChB,OAAO,UAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
+  "names": []
+}

package/dist/esm/styles.js

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { styled, css } from "@elliemae/ds-system";
+const StyledSVGWrapper = styled.div`
+  :focus {
+    outline: none;
+  }
+  :focus-within {
+    outline: none;
+  }
+`;
+const StyledAxis = styled("g")`
+  text {
+    fill: #635f5d;
+  }
+
+  text.axis-label {
+    font-size: 2.5em;
+  }
+
+  .tick text {
+    ${({ color }) => color ? `fill: ${color}` : ""}
+  }
+  .tick line {
+    ${({ color }) => color ? `stroke: ${color}` : ""}
+  }
+  line {
+    stroke: #c0c0bb;
+  }
+`;
+const StyledGrid = styled("g")`
+  line {
+    stroke: #c0c0bb;
+  }
+`;
+const borderCircle = css`
+  stroke: red;
+  stroke-width: 2;
+`;
+const StyledMark = styled("rect")`
+  ${({ isFocused }) => isFocused ? borderCircle : ""};
+`;
+const StyleFocusableRegion = styled("div")`
+  width: ${({ s }) => s * 2}px;
+  height: ${({ s }) => s * 2}px;
+  :focus {
+    outline: none;
+  }
+`;
+const StyledLine = styled("path")`
+  fill: none;
+  stroke-width: ${({ isActiveLine }) => isActiveLine ? 5 : 3};
+  stroke-linejoin: round;
+`;
+const StyledArea = styled("path")`
+  stroke-width: ${({ isActiveLine }) => isActiveLine ? 5 : 3};
+  stroke-linejoin: round;
+  opacity: 0.8;
+`;
+const StyledPoint = styled("circle")`
+  opacity: ${({ opacity }) => opacity};
+  ${({ isFocused }) => isFocused ? borderCircle : ""};
+`;
+export {
+  StyleFocusableRegion,
+  StyledArea,
+  StyledAxis,
+  StyledGrid,
+  StyledLine,
+  StyledMark,
+  StyledPoint,
+  StyledSVGWrapper
+};
+//# sourceMappingURL=styles.js.map

package/dist/esm/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\n\nexport const StyledSVGWrapper = styled.div`\n  :focus {\n    outline: none;\n  }\n  :focus-within {\n    outline: none;\n  }\n`;\n\nexport const StyledAxis = styled('g')`\n  text {\n    fill: #635f5d;\n  }\n\n  text.axis-label {\n    font-size: 2.5em;\n  }\n\n  .tick text {\n    ${({ color }) => (color ? `fill: ${color}` : '')}\n  }\n  .tick line {\n    ${({ color }) => (color ? `stroke: ${color}` : '')}\n  }\n  line {\n    stroke: #c0c0bb;\n  }\n`;\n\nexport const StyledGrid = styled('g')`\n  line {\n    stroke: #c0c0bb;\n  }\n`;\n\nconst borderCircle = css`\n  stroke: red;\n  stroke-width: 2;\n`;\nexport const StyledMark = styled('rect')<{ isFocused: boolean }>`\n  ${({ isFocused }) => (isFocused ? borderCircle : '')};\n`;\n\nexport const StyleFocusableRegion = styled('div')<{ s: number }>`\n  width: ${({ s }) => s * 2 ?? '1'}px;\n  height: ${({ s }) => s * 2 ?? '1'}px;\n  :focus {\n    outline: none;\n  }\n`;\n\nexport const StyledLine = styled('path')`\n  fill: none;\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n`;\nexport const StyledArea = styled('path')`\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n  opacity: 0.8;\n`;\n\nexport const StyledPoint = styled('circle')<{ isFocused: boolean }>`\n  opacity: ${({ opacity }) => opacity};\n  ${({ isFocused }) => (isFocused ? borderCircle : '')};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAErB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAU9B,CAAC,EAAE,MAAM,MAAO,QAAQ,SAAS,UAAU;AAAA;AAAA;AAAA,MAG3C,CAAC,EAAE,MAAM,MAAO,QAAQ,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,eAAe;AAAA;AAAA;AAAA;AAId,MAAM,aAAa,OAAO,MAAM;AAAA,IACnC,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe;AAAA;AAG5C,MAAM,uBAAuB,OAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,aAAa,OAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,aAAa,OAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,cAAc,OAAO,QAAQ;AAAA,aAC7B,CAAC,EAAE,QAAQ,MAAM;AAAA,IAC1B,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe;AAAA;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@elliemae/ds-dataviz-pie",
+  "version": "3.6.0-next.3",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - DataViz",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "@elliemae/ds-grid": "3.6.0-next.3",
+    "@elliemae/ds-icon": "3.6.0-next.3",
+    "@elliemae/ds-icons": "3.6.0-next.3",
+    "@elliemae/ds-popperjs": "3.6.0-next.3",
+    "@elliemae/ds-system": "3.6.0-next.3",
+    "@elliemae/ds-tooltip": "3.6.0-next.3",
+    "@elliemae/ds-utilities": "3.6.0-next.3",
+    "d3": "~7.4.4"
+  },
+  "devDependencies": {
+    "@elliemae/pui-theme": "~2.6.0",
+    "@testing-library/dom": "~8.13.0",
+    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/react": "~12.1.3",
+    "@testing-library/user-event": "~13.5.0",
+    "@types/d3": "~7.4.0",
+    "styled-components": "~5.3.5",
+    "styled-system": "~5.1.5"
+  },
+  "peerDependencies": {
+    "@elliemae/pui-theme": "~2.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.5",
+    "styled-system": "^5.1.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}