feat IDC #2797: add support for SR qualitative annotation per instance (#2822)

2022-06-14 14:12:27 +02:00 · 2022-06-14 14:12:27 +02:00 · b04e186274
commit b04e186274
parent c59d66412f
16 changed files with 463 additions and 99 deletions
--- a/extensions/cornerstone/package.json
+++ b/extensions/cornerstone/package.json
@ -44,7 +44,8 @@
    "react-dom": "^16.8.6",
    "react-redux": "^6.0.0",
    "react-resize-detector": "^3.4.0",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "styled-components": "^5.3.5"
  },
  "dependencies": {
    "@babel/runtime": "^7.5.5",
--- a/extensions/cornerstone/src/OHIFCornerstoneViewport.js
+++ b/extensions/cornerstone/src/OHIFCornerstoneViewport.js
@ -238,10 +238,20 @@ class OHIFCornerstoneViewport extends Component {
    };

    const warningsOverlay = props => {
+      const displaySet = this.props.viewportData.displaySet;
+      let filteredSRLabels;
+      if (displaySet.SRLabels && displaySet.SRLabels.length !== 0) {
+        filteredSRLabels = displaySet.SRLabels.filter(
+          SRLabel =>
+            SRLabel.ReferencedSOPInstanceUID === displaySet.SOPInstanceUID
+        );
+      }
+
      return (
        <OHIFCornerstoneViewportOverlay
          {...props}
          inconsistencyWarnings={inconsistencyWarnings}
+          SRLabels={filteredSRLabels}
        />
      );
    };
--- a/extensions/cornerstone/src/components/OHIFCornerstoneViewportOverlay.css
+++ b/extensions/cornerstone/src/components/OHIFCornerstoneViewportOverlay.css
@ -33,6 +33,10 @@
  bottom: 140px;
  left: 20px;
 }
+.OHIFCornerstoneViewportOverlay .bottom-left3 {
+  bottom: 110px;
+  left: 100px;
+}
 .OHIFCornerstoneViewportOverlay .bottom-right {
  bottom: 20px;
  right: 20px;
--- a/extensions/cornerstone/src/components/OHIFCornerstoneViewportOverlay.js
+++ b/extensions/cornerstone/src/components/OHIFCornerstoneViewportOverlay.js
@ -1,5 +1,6 @@
 import { PureComponent } from 'react';
 import React from 'react';
+import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
 import './OHIFCornerstoneViewportOverlay.css';
@ -9,13 +10,33 @@ import {
  formatDICOMDate,
  formatDICOMTime,
  formatPN,
-  getCompression
+  getCompression,
 } from '../utils/formatStudy';
 import classNames from 'classnames';
 import { Icon } from '@ohif/ui/src/elements/Icon';
 import { Tooltip } from '@ohif/ui/src/components/tooltip';
 import { OverlayTrigger } from '@ohif/ui/src/components/overlayTrigger';

+const Button = styled.button`
+  background-color: #3f51b5;
+  color: white;
+  padding: 5px 15px;
+  border-radius: 10px;
+  outline: 0;
+  text-transform: lowercase;
+  margin: 5px 5px;
+  cursor: pointer;
+  box-shadow: 0px 2px 2px lightgray;
+  transition: ease background-color 250ms;
+  &:hover {
+    background-color: #283593;
+  }
+  &:disabled {
+    cursor: default;
+    opacity: 0.9;
+  }
+`;
+
 class OHIFCornerstoneViewportOverlay extends PureComponent {
  static propTypes = {
    scale: PropTypes.number.isRequired,
@ -30,11 +51,19 @@ class OHIFCornerstoneViewportOverlay extends PureComponent {
    imageId: PropTypes.string.isRequired,
    imageIndex: PropTypes.number.isRequired,
    stackSize: PropTypes.number.isRequired,
-    inconsistencyWarnings: PropTypes.array.isRequired
+    inconsistencyWarnings: PropTypes.array.isRequired,
+    SRLabels: PropTypes.array,
  };

  render() {
-    const { imageId, scale, windowWidth, windowCenter, inconsistencyWarnings } = this.props;
+    const {
+      imageId,
+      scale,
+      windowWidth,
+      windowCenter,
+      inconsistencyWarnings,
+      SRLabels,
+    } = this.props;

    if (!imageId) {
      return null;
@ -72,8 +101,11 @@ class OHIFCornerstoneViewportOverlay extends PureComponent {

    const { imageIndex, stackSize } = this.props;

-    const inconsistencyWarningsOn = inconsistencyWarnings && inconsistencyWarnings.length !== 0 ? true : false;
-    const getWarningContent = (warningList) => {
+    const inconsistencyWarningsOn =
+      inconsistencyWarnings && inconsistencyWarnings.length !== 0
+        ? true
+        : false;
+    const getWarningContent = warningList => {
      if (Array.isArray(warningList)) {
        const listedWarnings = warningList.map((warn, index) => {
          return <li key={index}>{warn}</li>;
@ -86,33 +118,86 @@ class OHIFCornerstoneViewportOverlay extends PureComponent {
    };

    const getWarningInfo = (seriesNumber, inconsistencyWarnings) => {
-      return(
+      return (
        <React.Fragment>
-        {inconsistencyWarnings.length != 0 ? (
-          <OverlayTrigger
-            key={seriesNumber}
-            placement="left"
-            overlay={
-              <Tooltip
-                placement="left"
-                className="in tooltip-warning"
-                id="tooltip-left"
-              >
-                <div className="warningTitle">Series Inconsistencies</div>
-                <div className="warningContent">{getWarningContent(inconsistencyWarnings)}</div>
-              </Tooltip>
-            }
-          >
-            <div className={classNames('warning')}>
-              <span className="warning-icon">
-                <Icon name="exclamation-triangle" />
-              </span>
-            </div>
-          </OverlayTrigger>
-        ) : (
-          <React.Fragment></React.Fragment>
+          {inconsistencyWarnings.length != 0 ? (
+            <OverlayTrigger
+              key={seriesNumber}
+              placement="left"
+              overlay={
+                <Tooltip
+                  placement="left"
+                  className="in tooltip-warning"
+                  id="tooltip-left"
+                >
+                  <div className="warningTitle">Series Inconsistencies</div>
+                  <div className="warningContent">
+                    {getWarningContent(inconsistencyWarnings)}
+                  </div>
+                </Tooltip>
+              }
+            >
+              <div className={classNames('warning')}>
+                <span className="warning-icon">
+                  <Icon name="exclamation-triangle" />
+                </span>
+              </div>
+            </OverlayTrigger>
+          ) : (
+            <React.Fragment></React.Fragment>
          )}
-      </React.Fragment>
+        </React.Fragment>
+      );
+    };
+
+    const SRLabelsOn = SRLabels && SRLabels.length !== 0 ? true : false;
+
+    const getSRLabelsContent = SRLabels => {
+      if (Array.isArray(SRLabels)) {
+        const listedSRLabels = SRLabels.map((SRLabel, index) => {
+          return (
+            <OverlayTrigger
+              key={index}
+              placement="top"
+              overlay={
+                <Tooltip
+                  placement="top"
+                  className="in tooltip-warning"
+                  id="tooltip-top"
+                >
+                  <div className="warningTitle"> Designators </div>
+                  <div className="warningContent">
+                    {SRLabel.labels.labelCodingSchemeDesignator +
+                      ' : ' +
+                      SRLabel.labels.valueCodingSchemeDesignator}
+                  </div>
+                </Tooltip>
+              }
+            >
+              <div style={{ display: 'inline-block' }}>
+                <Button disabled={true} key={index}>
+                  {SRLabel.labels.label + ' : ' + SRLabel.labels.value}
+                </Button>
+              </div>
+            </OverlayTrigger>
+          );
+        });
+
+        return <ol>{listedSRLabels}</ol>;
+      } else {
+        return <React.Fragment></React.Fragment>;
+      }
+    };
+
+    const getSRLabelsInfo = SRLabels => {
+      return (
+        <React.Fragment>
+          {SRLabels.length != 0 ? (
+            getSRLabelsContent(SRLabels)
+          ) : (
+            <React.Fragment></React.Fragment>
+          )}
+        </React.Fragment>
      );
    };

@ -134,7 +219,14 @@ class OHIFCornerstoneViewportOverlay extends PureComponent {
          <div className="compressionIndicator">{compression}</div>
        </div>
        <div className="bottom-left2 warning">
-          <div>{inconsistencyWarningsOn ? getWarningInfo(seriesNumber, inconsistencyWarnings) : ''}</div>
+          <div>
+            {inconsistencyWarningsOn
+              ? getWarningInfo(seriesNumber, inconsistencyWarnings)
+              : ''}
+          </div>
+        </div>
+        <div className="bottom-left3 warning">
+          <div>{SRLabelsOn ? getSRLabelsInfo(SRLabels) : ''}</div>
        </div>
        <div className="bottom-left overlay-element">
          <div>{seriesNumber >= 0 ? `Ser: ${seriesNumber}` : ''}</div>
--- a/extensions/cornerstone/src/tools/DICOMSRDisplayTool.js
+++ b/extensions/cornerstone/src/tools/DICOMSRDisplayTool.js
@ -97,6 +97,8 @@ export default class DICOMSRDisplayTool extends BaseTool {
        const renderableDataForGraphicType = renderableData[GraphicType];

        switch (GraphicType) {
+          case SCOORD_TYPES.TEXT:
+            break;
          case SCOORD_TYPES.POINT:
            this.renderPoint(renderableDataForGraphicType, eventData, options);
            break;
@ -167,20 +169,22 @@ export default class DICOMSRDisplayTool extends BaseTool {
        return data.handles.textBox.anchorPoints;
      }

-      draw(context, context => {
-        drawLinkedTextBox(
-          context,
-          element,
-          data.handles.textBox,
-          text,
-          data.handles,
-          textBoxAnchorPoints,
-          color,
-          lineWidth,
-          0,
-          true
-        );
-      });
+      if (data.handles.textBox.anchorPoints.length !== 0) {
+        draw(context, context => {
+          drawLinkedTextBox(
+            context,
+            element,
+            data.handles.textBox,
+            text,
+            data.handles,
+            textBoxAnchorPoints,
+            color,
+            lineWidth,
+            0,
+            true
+          );
+        });
+      }
    }

    // TOOD -> text boxes may overlap with other annotations at the moment.
@ -230,7 +234,6 @@ export default class DICOMSRDisplayTool extends BaseTool {
    const { element, image } = eventData;
    const { rows, columns } = image;
    const context = getNewContext(eventData.canvasContext.canvas);
-
    const { color, lineWidth } = options;

    // Find a suitable length for the image size.
@ -332,6 +335,8 @@ function _getTextBoxAnchorPointsForRenderableData(renderableData, eventData) {
    const renderableDataForGraphicType = renderableData[GraphicType];

    switch (GraphicType) {
+      case SCOORD_TYPES.TEXT:
+        break;
      case SCOORD_TYPES.POINT:
        renderableDataForGraphicType.forEach(points => {
          anchorPoints = [...anchorPoints, ...points];
@ -405,7 +410,7 @@ function _getBoundingBoxFromAnchorPoints(anchorPoints) {
      minX = x;
    }

-    if (y > maxX) {
+    if (y > maxY) {
      maxY = y;
    } else if (y < minY) {
      minY = y;
--- a/extensions/cornerstone/src/tools/constants/scoordTypes.js
+++ b/extensions/cornerstone/src/tools/constants/scoordTypes.js
@ -1,4 +1,5 @@
 export default {
+  TEXT: 'TEXT',
  POINT: 'POINT',
  MULTIPOINT: 'MULTIPOINT',
  POLYLINE: 'POLYLINE',
--- a/package.json
+++ b/package.json
@ -99,6 +99,7 @@
    "shader-loader": "^1.3.1",
    "start-server-and-test": "^1.10.0",
    "style-loader": "^1.0.0",
+    "styled-components": "^5.3.5",
    "stylelint": "^10.1.0",
    "stylelint-config-recommended": "^2.2.0",
    "stylus": "^0.54.5",
--- a/platform/core/src/DICOMSR/SCOORD3D/constants/scoordTypes.js
+++ b/platform/core/src/DICOMSR/SCOORD3D/constants/scoordTypes.js
@ -1,4 +1,5 @@
 export default {
+  TEXT: 'TEXT',
  POINT: 'POINT',
  MULTIPOINT: 'MULTIPOINT',
  POLYLINE: 'POLYLINE',
--- a/platform/core/src/DICOMSR/SCOORD3D/parseSCOORD3D.js
+++ b/platform/core/src/DICOMSR/SCOORD3D/parseSCOORD3D.js
@ -18,7 +18,7 @@ const parseSCOORD3D = ({ servicesManager, displaySets }) => {
    const { ContentSequence } = firstInstance;

    srDisplaySet.referencedImages = getReferencedImagesList(ContentSequence);
-    srDisplaySet.measurements = getMeasurements(ContentSequence, srDisplaySet);
+    srDisplaySet.measurements = getMeasurements(ContentSequence);
    const mappings = MeasurementService.getSourceMappings(
      'CornerstoneTools',
      '4'
@ -127,6 +127,7 @@ const checkIfCanAddMeasurementsToDisplaySet = (

  const imageIds = images.map(i => i.getImageId());
  const SOPInstanceUIDs = images.map(i => i.SOPInstanceUID);
+  imageDisplaySet.SRLabels = [];
  measurements.forEach(measurement => {
    const { coords } = measurement;

@ -140,6 +141,21 @@ const checkIfCanAddMeasurementsToDisplaySet = (
        if (imageIndex > -1) {
          const imageId = imageIds[imageIndex];
          const imageMetadata = images[imageIndex].getData().metadata;
+
+          const coords = measurement.coords;
+          for (let i = 0; i < coords.length; i++) {
+            const coord = coords[i];
+            if (coord.GraphicType !== 'TEXT') {
+              continue;
+            }
+
+            imageDisplaySet.SRLabels.push({
+              ReferencedSOPInstanceUID:
+                coord.ReferencedSOPSequence.ReferencedSOPInstanceUID,
+              labels: measurement.labels[i],
+            });
+          }
+
          addMeasurement(
            measurement,
            imageId,
--- a/platform/core/src/DICOMSR/SCOORD3D/utils/getCoordsFromSCOORDOrSCOORD3D.js
+++ b/platform/core/src/DICOMSR/SCOORD3D/utils/getCoordsFromSCOORDOrSCOORD3D.js
@ -1,22 +1,14 @@
-const getCoordsFromSCOORDOrSCOORD3D = (graphicItem, displaySet) => {
-  const { ValueType, RelationshipType, GraphicType, GraphicData } = graphicItem;
-
-  // if (RelationshipType !== RELATIONSHIP_TYPE.INFERRED_FROM) {
-  //   console.warn(
-  //     `Relationshiptype === ${RelationshipType}. Cannot deal with NON TID-1400 SCOORD group with RelationshipType !== "INFERRED FROM."`
-  //   );
-  //   return;
-  // }
-
+const getCoordsFromSCOORDOrSCOORD3D = graphicItem => {
+  const { ValueType, GraphicType, GraphicData } = graphicItem;
  const coords = { ValueType, GraphicType, GraphicData };

-  // ContentSequence has length of 1 as RelationshipType === 'INFERRED FROM'
  if (ValueType === 'SCOORD') {
    const { ReferencedSOPSequence } = graphicItem.ContentSequence;
    coords.ReferencedSOPSequence = ReferencedSOPSequence;
  } else if (ValueType === 'SCOORD3D') {
    if (graphicItem.ReferencedFrameOfReferenceUID) {
-      coords.ReferencedFrameOfReferenceSequence = graphicItem.ReferencedFrameOfReferenceUID;
+      coords.ReferencedFrameOfReferenceSequence =
+        graphicItem.ReferencedFrameOfReferenceUID;
    } else if (graphicItem.ContentSequence) {
      const {
        ReferencedFrameOfReferenceSequence,
--- a/platform/core/src/DICOMSR/SCOORD3D/utils/getMeasurements.js
+++ b/platform/core/src/DICOMSR/SCOORD3D/utils/getMeasurements.js
@ -3,10 +3,7 @@ import getSequenceAsArray from './getSequenceAsArray';
 import getMergedContentSequencesByTrackingUniqueIdentifiers from './getMergedContentSequencesByTrackingUniqueIdentifiers';
 import processMeasurement from './processMeasurement';

-const getMeasurements = (
-  ImagingMeasurementReportContentSequence,
-  displaySet
-) => {
+const getMeasurements = ImagingMeasurementReportContentSequence => {
  const ImagingMeasurements = ImagingMeasurementReportContentSequence.find(
    item =>
      item.ConceptNameCodeSequence.CodeValue ===
@ -21,25 +18,19 @@ const getMeasurements = (
      CodeNameCodeSequenceValues.MeasurementGroup
  );

-  const mergedContentSequencesByTrackingUniqueIdentifiers = getMergedContentSequencesByTrackingUniqueIdentifiers(
+  /* const mergedContentSequencesByTrackingUniqueIdentifiers = getMergedContentSequencesByTrackingUniqueIdentifiers(
    MeasurementGroups
-  );
+  );*/

  let measurements = [];

-  Object.keys(mergedContentSequencesByTrackingUniqueIdentifiers).forEach(
-    trackingUniqueIdentifier => {
-      const mergedContentSequence =
-        mergedContentSequencesByTrackingUniqueIdentifiers[
-          trackingUniqueIdentifier
-        ];
-
-      const measurement = processMeasurement(mergedContentSequence, displaySet);
-      if (measurement) {
-        measurements.push(measurement);
-      }
+  MeasurementGroups.forEach(MeasurementGroup => {
+    const contentSequence = MeasurementGroup.ContentSequence;
+    const measurement = processMeasurement(contentSequence);
+    if (measurement) {
+      measurements.push(measurement);
    }
-  );
+  });

  return measurements;
 };
--- a/platform/core/src/DICOMSR/SCOORD3D/utils/getRenderableData.js
+++ b/platform/core/src/DICOMSR/SCOORD3D/utils/getRenderableData.js
@ -57,6 +57,10 @@ const getRenderableData = (

  // https://dicom.innolitics.com/ciods/procedure-log/sr-document-content/00700023
  switch (GraphicType) {
+    case SCOORD_TYPES.TEXT:
+      renderableData = [{ x: GraphicData[0], y: GraphicData[1] }];
+
+      break;
    case SCOORD_TYPES.POINT:
      renderableData = [];

--- a/platform/core/src/DICOMSR/SCOORD3D/utils/processMeasurement.js
+++ b/platform/core/src/DICOMSR/SCOORD3D/utils/processMeasurement.js
@ -1,16 +1,16 @@
 import processTID1410Measurement from './processTID1410Measurement';
 import processNonGeometricallyDefinedMeasurement from './processNonGeometricallyDefinedMeasurement';

-const processMeasurement = (mergedContentSequence, displaySet) => {
+const processMeasurement = contentSequence => {
  if (
-    mergedContentSequence.some(
+    contentSequence.some(
      group => group.ValueType === 'SCOORD' || group.ValueType === 'SCOORD3D'
    )
  ) {
-    return processTID1410Measurement(mergedContentSequence, displaySet);
+    return processTID1410Measurement(contentSequence);
  }

-  return processNonGeometricallyDefinedMeasurement(mergedContentSequence);
+  return processNonGeometricallyDefinedMeasurement(contentSequence);
 };

 export default processMeasurement;
--- a/platform/core/src/DICOMSR/SCOORD3D/utils/processNonGeometricallyDefinedMeasurement.js
+++ b/platform/core/src/DICOMSR/SCOORD3D/utils/processNonGeometricallyDefinedMeasurement.js
@ -1,31 +1,40 @@
 import getLabelFromMeasuredValueSequence from './getLabelFromMeasuredValueSequence';
 import getCoordsFromSCOORDOrSCOORD3D from './getCoordsFromSCOORDOrSCOORD3D';
 import { CodeNameCodeSequenceValues, CodingSchemeDesignators } from '../enums';
+import SCOORD_TYPES from '../constants/scoordTypes';

 const CORNERSTONE_FREETEXT_CODE_VALUE = 'CORNERSTONEFREETEXT';

-const processNonGeometricallyDefinedMeasurement = mergedContentSequence => {
-  const NUMContentItems = mergedContentSequence.filter(
+const processNonGeometricallyDefinedMeasurement = contentSequence => {
+  const NUMContentItems = contentSequence.filter(
    group => group.ValueType === 'NUM'
  );

-  const UIDREFContentItem = mergedContentSequence.find(
+  const CODEContentItems = contentSequence.filter(
+    group => group.ValueType === 'CODE'
+  );
+
+  const UIDREFContentItem = contentSequence.find(
    group => group.ValueType === 'UIDREF'
  );

-  const TrackingIdentifierContentItem = mergedContentSequence.find(
+  const IMAGEContentItem = contentSequence.find(
+    group => group.ValueType === 'IMAGE'
+  );
+
+  const TrackingIdentifierContentItem = contentSequence.find(
    item =>
      item.ConceptNameCodeSequence.CodeValue ===
      CodeNameCodeSequenceValues.TrackingIdentifier
  );

-  const Finding = mergedContentSequence.find(
+  const Finding = contentSequence.find(
    item =>
      item.ConceptNameCodeSequence.CodeValue ===
      CodeNameCodeSequenceValues.Finding
  );

-  const FindingSites = mergedContentSequence.filter(
+  const FindingSites = contentSequence.filter(
    item =>
      item.ConceptNameCodeSequence.CodingSchemeDesignator ===
        CodingSchemeDesignators.SRT &&
@ -111,6 +120,37 @@ const processNonGeometricallyDefinedMeasurement = mergedContentSequence => {
    }
  });

+  if (NUMContentItems.length === 0 && IMAGEContentItem) {
+    CODEContentItems.forEach(item => {
+      const { ConceptCodeSequence, ConceptNameCodeSequence } = item;
+
+      if (!ConceptCodeSequence || !ConceptNameCodeSequence) {
+        console.warn(`Graphic missing, skipping annotation.`);
+
+        return;
+      }
+
+      const GraphicData = [0, 0];
+      const GraphicType = SCOORD_TYPES.TEXT;
+      const { ValueType } = item;
+      const ReferencedSOPSequence = IMAGEContentItem.ReferencedSOPSequence;
+      const coord = {
+        ValueType,
+        GraphicType,
+        GraphicData,
+        ReferencedSOPSequence,
+      };
+      measurement.coords.push(coord);
+      measurement.labels.push({
+        label: ConceptNameCodeSequence.CodeMeaning,
+        labelCodingSchemeDesignator:
+          ConceptNameCodeSequence.CodingSchemeDesignator,
+        value: ConceptCodeSequence.CodeMeaning,
+        valueCodingSchemeDesignator: ConceptCodeSequence.CodingSchemeDesignator,
+      });
+    });
+  }
+
  return measurement;
 };

--- a/platform/core/src/DICOMSR/SCOORD3D/utils/processTID1410Measurement.js
+++ b/platform/core/src/DICOMSR/SCOORD3D/utils/processTID1410Measurement.js
@ -5,14 +5,14 @@ import { RELATIONSHIP_TYPE, CodeNameCodeSequenceValues } from '../enums';
 /**
 * TID 1410 Planar ROI Measurements and Qualitative Evaluations.
 *
- * @param {*} mergedContentSequence
+ * @param {*} contentSequence
 * @returns
 */
-const processTID1410Measurement = (mergedContentSequence, displaySet) => {
+const processTID1410Measurement = contentSequence => {
  // Need to deal with TID 1410 style measurements, which will have a SCOORD or SCOORD3D at the top level,
  // And non-geometric representations where each NUM has "INFERRED FROM" SCOORD/SCOORD3D

-  const graphicItem = mergedContentSequence.find(
+  const graphicItem = contentSequence.find(
    group => group.ValueType === 'SCOORD' || group.ValueType === 'SCOORD3D'
  );

@ -23,24 +23,24 @@ const processTID1410Measurement = (mergedContentSequence, displaySet) => {
    return;
  }

-  const UIDREFContentItem = mergedContentSequence.find(
+  const UIDREFContentItem = contentSequence.find(
    group => group.ValueType === 'UIDREF'
  );

-  const TrackingIdentifierContentItem = mergedContentSequence.find(
+  const TrackingIdentifierContentItem = contentSequence.find(
    item =>
      item.ConceptNameCodeSequence.CodeValue ===
      CodeNameCodeSequenceValues.TrackingIdentifier
  );

-  const NUMContentItems = mergedContentSequence.filter(
+  const NUMContentItems = contentSequence.filter(
    group => group.ValueType === 'NUM'
  );

  const measurement = {
    loaded: false,
    labels: [],
-    coords: [getCoordsFromSCOORDOrSCOORD3D(graphicItem, displaySet)],
+    coords: [getCoordsFromSCOORDOrSCOORD3D(graphicItem)],
    TrackingUniqueIdentifier: UIDREFContentItem.UID,
    TrackingIdentifier: TrackingIdentifierContentItem.TextValue,
  };
--- a/yarn.lock
+++ b/yarn.lock
@ -9,6 +9,13 @@
  dependencies:
    "@babel/highlight" "^7.0.0"

+"@babel/code-frame@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
 "@babel/core@>=7.2.2", "@babel/core@^7.1.0", "@babel/core@^7.5.0", "@babel/core@^7.5.5":
  version "7.6.4"
  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.4.tgz#6ebd9fe00925f6c3e177bb726a188b5f578088ff"
@ -29,6 +36,15 @@
    semver "^5.4.1"
    source-map "^0.5.0"

+"@babel/generator@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.2.tgz#33873d6f89b21efe2da63fe554460f3df1c5880d"
+  integrity sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==
+  dependencies:
+    "@babel/types" "^7.18.2"
+    "@jridgewell/gen-mapping" "^0.3.0"
+    jsesc "^2.5.1"
+
 "@babel/generator@^7.4.0":
  version "7.8.8"
  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.8.tgz#cdcd58caab730834cee9eeadb729e833b625da3e"
@ -56,6 +72,13 @@
  dependencies:
    "@babel/types" "^7.0.0"

+"@babel/helper-annotate-as-pure@^7.16.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
+  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.1.0":
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.1.0.tgz#6b69628dfe4087798e0c4ed98e3d4a6b2fbd2f5f"
@ -102,6 +125,11 @@
    "@babel/types" "^7.5.5"
    lodash "^4.17.13"

+"@babel/helper-environment-visitor@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz#8a6d2dedb53f6bf248e31b4baf38739ee4a637bd"
+  integrity sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ==
+
 "@babel/helper-explode-assignable-expression@^7.1.0":
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.1.0.tgz#537fa13f6f1674df745b0c00ec8fe4e99681c8f6"
@ -119,6 +147,14 @@
    "@babel/template" "^7.1.0"
    "@babel/types" "^7.0.0"

+"@babel/helper-function-name@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz#136fcd54bc1da82fcb47565cf16fd8e444b1ff12"
+  integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-get-function-arity@^7.0.0":
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
@ -126,6 +162,13 @@
  dependencies:
    "@babel/types" "^7.0.0"

+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-hoist-variables@^7.4.4":
  version "7.4.4"
  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.4.tgz#0298b5f25c8c09c53102d52ac4a98f773eb2850a"
@ -147,6 +190,13 @@
  dependencies:
    "@babel/types" "^7.0.0"

+"@babel/helper-module-imports@^7.16.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-module-transforms@^7.1.0", "@babel/helper-module-transforms@^7.4.4":
  version "7.5.5"
  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.5.5.tgz#f84ff8a09038dcbca1fd4355661a500937165b4a"
@ -207,6 +257,13 @@
    "@babel/template" "^7.1.0"
    "@babel/types" "^7.0.0"

+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-split-export-declaration@^7.4.4":
  version "7.4.4"
  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz#ff94894a340be78f53f06af038b205c49d993677"
@ -214,6 +271,11 @@
  dependencies:
    "@babel/types" "^7.4.4"

+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helper-validator-identifier@^7.9.5":
  version "7.9.5"
  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80"
@ -247,11 +309,25 @@
    esutils "^2.0.2"
    js-tokens "^4.0.0"

+"@babel/highlight@^7.16.7":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.12.tgz#257de56ee5afbd20451ac0a75686b6b404257351"
+  integrity sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.4.3":
  version "7.8.8"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.8.tgz#4c3b7ce36db37e0629be1f0d50a571d2f86f6cd4"
  integrity sha512-mO5GWzBPsPf6865iIbzNE0AvkKF3NE+2S3eRUpE+FE07BOAkXh6G+GW/Pj01hhXjve1WScbaIO4UlY1JKeqCcA==

+"@babel/parser@^7.16.7", "@babel/parser@^7.18.5":
+  version "7.18.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.5.tgz#337062363436a893a2d22faa60be5bb37091c83c"
+  integrity sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==
+
 "@babel/parser@^7.6.0", "@babel/parser@^7.6.3", "@babel/parser@^7.6.4":
  version "7.6.4"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.4.tgz#cb9b36a7482110282d5cb6dd424ec9262b473d81"
@ -736,6 +812,15 @@
    "@babel/parser" "^7.6.0"
    "@babel/types" "^7.6.0"

+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.5", "@babel/traverse@^7.6.2", "@babel/traverse@^7.6.3":
  version "7.6.3"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.6.3.tgz#66d7dba146b086703c0fb10dd588b7364cec47f9"
@ -751,6 +836,22 @@
    globals "^11.1.0"
    lodash "^4.17.13"

+"@babel/traverse@^7.4.5":
+  version "7.18.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.5.tgz#94a8195ad9642801837988ab77f36e992d9a20cd"
+  integrity sha512-aKXj1KT66sBj0vVzk6rEeAO6Z9aiiQ68wfDgge3nHhA/my6xMM/7HGQUNumKZaoa2qUPQ5whJG9aAifsxUKfLA==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.18.2"
+    "@babel/helper-environment-visitor" "^7.18.2"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.18.5"
+    "@babel/types" "^7.18.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.5.5", "@babel/types@^7.6.0", "@babel/types@^7.6.3":
  version "7.6.3"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.6.3.tgz#3f07d96f854f98e2fbd45c64b0cb942d11e8ba09"
@ -760,6 +861,14 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.16.7", "@babel/types@^7.17.0", "@babel/types@^7.18.2", "@babel/types@^7.18.4":
+  version "7.18.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.4.tgz#27eae9b9fd18e9dccc3f9d6ad051336f307be354"
+  integrity sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.8.7":
  version "7.9.5"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444"
@ -882,11 +991,23 @@
  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==

+"@emotion/is-prop-valid@^1.1.0":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz#f0907a416368cf8df9e410117068e20fe87c0a3a"
+  integrity sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
 "@emotion/memoize@0.7.4":
  version "0.7.4"
  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==

+"@emotion/memoize@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
 "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
  version "0.11.16"
  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
@ -903,12 +1024,12 @@
  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==

-"@emotion/stylis@0.8.5":
+"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4":
  version "0.8.5"
  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==

-"@emotion/unitless@0.7.5":
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4":
  version "0.7.5"
  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@ -1213,6 +1334,38 @@
    "@types/istanbul-reports" "^1.1.1"
    "@types/yargs" "^13.0.0"

+"@jridgewell/gen-mapping@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz#cf92a983c83466b8c0ce9124fadeaf09f7c66ea9"
+  integrity sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
+  integrity sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==
+
+"@jridgewell/set-array@^1.0.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.1.tgz#36a6acc93987adcf0ba50c66908bd0b70de8afea"
+  integrity sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.13"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
+  integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
+
+"@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.13"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz#dcfe3e95f224c8fe97a87a5235defec999aa92ea"
+  integrity sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
 "@js.properties/properties@0.4.0":
  version "0.4.0"
  resolved "https://registry.yarnpkg.com/@js.properties/properties/-/properties-0.4.0.tgz#3f98b784ab6fe9b31fd3c1637fedbfa2ff320185"
@ -3454,6 +3607,17 @@ babel-plugin-module-resolver@^3.2.0:
    reselect "^3.0.1"
    resolve "^1.4.0"

+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
+  integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+    picomatch "^2.3.0"
+
 babel-plugin-syntax-jsx@^6.18.0:
  version "6.18.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@ -4045,6 +4209,11 @@ camelcase@^5.0.0, camelcase@^5.3.1:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==
+
 caniuse-api@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@ -5096,6 +5265,11 @@ css-blank-pseudo@^0.1.4:
  dependencies:
    postcss "^7.0.5"

+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
+
 css-color-names@0.0.4, css-color-names@^0.0.4:
  version "0.0.4"
  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@ -5174,6 +5348,15 @@ css-select@^2.0.0:
    domutils "^1.7.0"
    nth-check "^1.0.2"

+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@1.0.0-alpha.29:
  version "1.0.0-alpha.29"
  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.29.tgz#3fa9d4ef3142cbd1c301e7664c1f352bd82f5a39"
@ -7864,6 +8047,13 @@ hoist-non-react-statics@^2.3.1:
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
  integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==

+hoist-non-react-statics@^3.0.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
@ -11810,7 +12000,7 @@ picomatch@^2.0.4, picomatch@^2.0.5:
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.0.7.tgz#514169d8c7cd0bdbeecc8a2609e34a7163de69f6"
  integrity sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==

-picomatch@^2.2.1, picomatch@^2.2.3:
+picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.0:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@ -15204,6 +15394,22 @@ style-search@^0.1.0:
  resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
  integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=

+styled-components@^5.3.5:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
+  integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^4.0.0:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"