@desynova-digital/components 8.7.2 → 8.9.0

package/_helpers/story-stack.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: bottom;\n  justify-content: ', ';\n\n  margin-bottom: 20px;\n\n  > * {\n    flex: ', ';\n    align-self: center;\n    margin-right: ', ';\n  }\n  > *:last-child {\n    margin-right: 0;\n  }\n'], ['\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: bottom;\n  justify-content: ', ';\n\n  margin-bottom: 20px;\n\n  > * {\n    flex: ', ';\n    align-self: center;\n    margin-right: ', ';\n  }\n  > *:last-child {\n    margin-right: 0;\n  }\n']),
+var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: bottom;\n  justify-content: ', ';\n  overflow: auto;\n  margin-bottom: 20px;\n\n  > * {\n    flex: ', ';\n    align-self: center;\n    margin-right: ', ';\n  }\n  > *:last-child {\n    margin-right: 0;\n  }\n'], ['\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: bottom;\n  justify-content: ', ';\n  overflow: auto;\n  margin-bottom: 20px;\n\n  > * {\n    flex: ', ';\n    align-self: center;\n    margin-right: ', ';\n  }\n  > *:last-child {\n    margin-right: 0;\n  }\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n  flex-basis: ', '%;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n'], ['\n  flex-basis: ', '%;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n']);
 
 var _react = require('react');

package/atoms/cardV2/cardV2.js

@@ -9,7 +9,7 @@ var _templateObject = _taggedTemplateLiteral(["\n  ", "\n"], ["\n  ", "\n"]),
     _templateObject2 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    margin: ", ";\n    padding: ", ";\n    display: ", ";\n    justify-content: ", ";\n    align-items: ", ";\n    font-size: ", ";\n    color: ", ";\n    position: ", ";\n    border: ", ";\n    z-index: ", ";\n    cursor: ", ";\n    border-radius: ", ";\n    height: ", ";\n    width: ", ";\n  "], ["\n    background-color: ", ";\n    margin: ", ";\n    padding: ", ";\n    display: ", ";\n    justify-content: ", ";\n    align-items: ", ";\n    font-size: ", ";\n    color: ", ";\n    position: ", ";\n    border: ", ";\n    z-index: ", ";\n    cursor: ", ";\n    border-radius: ", ";\n    height: ", ";\n    width: ", ";\n  "]),
     _templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n"], ["\n  ", ";\n"]),
     _templateObject4 = _taggedTemplateLiteral(["\n  font-family: SFUIText-Regular;\n  ", ";\n"], ["\n  font-family: SFUIText-Regular;\n  ", ";\n"]),
-    _templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  background-color: ", ";\n  border-radius: 2px;\n"], ["\n  position: relative;\n  background-color: ", ";\n  border-radius: 2px;\n"]);
+    _templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  border-radius: 2px;\n"], ["\n  position: relative;\n  border-radius: 2px;\n"]);
 
 var _react = require("react");
 
@@ -31,6 +31,10 @@ var _content = require("./content");
 
 var _content2 = _interopRequireDefault(_content);
 
+var _timeline = require("./timeline");
+
+var _timeline2 = _interopRequireDefault(_timeline);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -63,20 +67,18 @@ var BaseParaStyles = exports.BaseParaStyles = _styledComponents2.default.p(_temp
 
 var BaseButtonStyles = exports.BaseButtonStyles = _styledComponents2.default.button(_templateObject4, CommonStyles);
 
-var CardStyles = _styledComponents2.default.div(_templateObject5, function (_ref2) {
-  var bgColor = _ref2.bgColor,
-      type = _ref2.type;
-  return type === "search" ? "transparent" : bgColor === "secondary" && type !== "search" ? "#0C141D" : "#15212F";
-});
+var CardStyles = _styledComponents2.default.div(_templateObject5);
 
 var CardV2 = function CardV2(props) {
-  var width = props.width;
+  var width = props.width,
+      type = props.type;
 
 
   var content = (0, _react.useCallback)(function () {
     return _react2.default.createElement(
       _react.Fragment,
       null,
+      type === 'timeline' && _react2.default.createElement(_timeline2.default, props) || null,
       _react2.default.createElement(_thumbnail2.default, props),
       _react2.default.createElement(_content2.default, props)
     );

package/atoms/cardV2/cardV2.story.js

@@ -34,6 +34,23 @@ var COMMON_SEARCH_PROPS = _extends({}, COMMON_PROPS, {
   return _react2.default.createElement(
     _storyHelpers.Example,
     { title: "Dark Mode", background: "dark" },
+    _react2.default.createElement(
+      "h1",
+      { style: { marginBottom: "10px" } },
+      "Timeline Cards"
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.CardV2, _extends({}, COMMON_PROPS, {
+        h1: "Wicked Tuna: North vs South, East vs West, All Sides",
+        h2: "S1 E1",
+        startTime: 1640968200000,
+        endTime: 1640970000000,
+        overlapping: [],
+        type: "timeline"
+      }))
+    ),
     _react2.default.createElement(
       "h1",
       { style: { marginBottom: "10px" } },

package/atoms/cardV2/content.js

@@ -12,7 +12,7 @@ var _templateObject = _taggedTemplateLiteral(["\n  display: -webkit-box;\n  -web
     _templateObject2 = _taggedTemplateLiteral(["\n  font-family: SFUIText-Regular;\n  top: ", ";\n  word-break: break-all;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    margin-left: -5px;\n    border-width: 5px;\n    border-style: solid;\n    border-color: transparent transparent #000;\n  }\n"], ["\n  font-family: SFUIText-Regular;\n  top: ", ";\n  word-break: break-all;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    margin-left: -5px;\n    border-width: 5px;\n    border-style: solid;\n    border-color: transparent transparent #000;\n  }\n"]),
     _templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  padding: 0;\n  margin-right: 10px;\n  font-size: 10px;\n  color: #afb2ba;\n  -webkit-line-clamp: 1;\n  height: 10px;\n"], ["\n  ", ";\n  padding: 0;\n  margin-right: 10px;\n  font-size: 10px;\n  color: #afb2ba;\n  -webkit-line-clamp: 1;\n  height: 10px;\n"]),
     _templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  font-family: SFUIText-Medium;\n  -webkit-line-clamp: 2;\n  height: 27px;\n  cursor: ", ";\n"], ["\n  ", ";\n  font-family: SFUIText-Medium;\n  -webkit-line-clamp: 2;\n  height: 27px;\n  cursor: ", ";\n"]),
-    _templateObject5 = _taggedTemplateLiteral(["\n  height: 74px;\n  width: ", ";\n  padding: ", ";\n\n  .title-parent {\n    position: relative;\n  }\n\n  .segment-indicator {\n    position: relative;\n    color: #fff;\n    padding-left: 10px;\n    &:before {\n      display: inline-block;\n      content: \" \";\n      width: 6px;\n      height: 6px;\n      position: absolute;\n      top: 2px;\n      left: 0px;\n      background: rgb(0, 206, 198);\n      border-radius: 50%;\n    }\n  }\n"], ["\n  height: 74px;\n  width: ", ";\n  padding: ", ";\n\n  .title-parent {\n    position: relative;\n  }\n\n  .segment-indicator {\n    position: relative;\n    color: #fff;\n    padding-left: 10px;\n    &:before {\n      display: inline-block;\n      content: \" \";\n      width: 6px;\n      height: 6px;\n      position: absolute;\n      top: 2px;\n      left: 0px;\n      background: rgb(0, 206, 198);\n      border-radius: 50%;\n    }\n  }\n"]);
+    _templateObject5 = _taggedTemplateLiteral(["\n  height: 74px;\n  width: ", ";\n  padding: ", ";\n  background-color: ", ";\n\n  .title-parent {\n    position: relative;\n  }\n\n  .segment-indicator {\n    position: relative;\n    color: #fff;\n    padding-left: 10px;\n    &:before {\n      display: inline-block;\n      content: \" \";\n      width: 6px;\n      height: 6px;\n      position: absolute;\n      top: 2px;\n      left: 0px;\n      background: rgb(0, 206, 198);\n      border-radius: 50%;\n    }\n  }\n  .overlapping-container {\n    justify-content: center;\n    align-items: center;\n    height: 11px;\n    p {\n      font-size: 12px;\n      margin-left: 5px;\n      height: 12px\n    }\n  }\n"], ["\n  height: 74px;\n  width: ", ";\n  padding: ", ";\n  background-color: ", ";\n\n  .title-parent {\n    position: relative;\n  }\n\n  .segment-indicator {\n    position: relative;\n    color: #fff;\n    padding-left: 10px;\n    &:before {\n      display: inline-block;\n      content: \" \";\n      width: 6px;\n      height: 6px;\n      position: absolute;\n      top: 2px;\n      left: 0px;\n      background: rgb(0, 206, 198);\n      border-radius: 50%;\n    }\n  }\n  .overlapping-container {\n    justify-content: center;\n    align-items: center;\n    height: 11px;\n    p {\n      font-size: 12px;\n      margin-left: 5px;\n      height: 12px\n    }\n  }\n"]);
 
 var _react = require("react");
 
@@ -28,6 +28,10 @@ var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
 var _cardV = require("./cardV2");
 
+var _icon = require("../../atoms/icon");
+
+var _icon2 = _interopRequireDefault(_icon);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -63,6 +67,10 @@ var ContentStyles = _styledComponents2.default.div(_templateObject5, function (_
   } else if (type === "search" && width !== "sm") {
     return "13px 0px";
   } else return "13px 15px";
+}, function (_ref4) {
+  var bgColor = _ref4.bgColor,
+      type = _ref4.type;
+  return type === "search" ? "transparent" : bgColor === "secondary" && type !== "search" ? "#0C141D" : "#15212F";
 });
 
 var Content = function Content(props) {
@@ -75,7 +83,8 @@ var Content = function Content(props) {
       type = props.type,
       width = props.width,
       titleClick = props.titleClick,
-      show_page_id = props.show_page_id;
+      show_page_id = props.show_page_id,
+      overlapping = props.overlapping;
 
   var _useState = (0, _react.useState)(''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -187,6 +196,16 @@ var Content = function Content(props) {
           h5
         )
       ),
+      overlapping && overlapping.length && _react2.default.createElement(
+        _cardV.DivStyles,
+        { display: "flex", className: "overlapping-container" },
+        _react2.default.createElement(_icon2.default, { name: "overlapping" }),
+        overlapping.length > 1 && _react2.default.createElement(
+          ParaStyles,
+          { margin: "0" },
+          overlapping.length
+        )
+      ) || null,
       tooltipVisibleSection == "bottom" && _react2.default.createElement(
         ToolTipStyles,
         {

package/atoms/cardV2/thumbnail.js

@@ -48,7 +48,7 @@ var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject);
 
 var ThumbnailStyles = _styledComponents2.default.div(_templateObject2, function (_ref) {
   var thumbnail = _ref.thumbnail;
-  return "url(" + thumbnail + ") no-repeat 100%";
+  return "url(" + thumbnail + ") no-repeat 50%";
 }, function (_ref2) {
   var width = _ref2.width;
   return width === "sm" ? "90px" : width === "md" ? "125px" : "222px";
@@ -210,7 +210,7 @@ var Thumbnail = function Thumbnail(props) {
         );
       })
     ),
-    _react2.default.createElement(
+    iframeurl && _react2.default.createElement(
       "div",
       {
         onMouseMove: handleMouseMove,
@@ -219,7 +219,7 @@ var Thumbnail = function Thumbnail(props) {
       },
       _react2.default.createElement("div", { className: "hover-pointer", ref: hoverPointerRef }),
       _react2.default.createElement("img", { ref: iframeImageRef, className: "iframe-image", src: iframeurl })
-    )
+    ) || null
   );
 };
 

package/atoms/cardV2/timeline.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    height: 50px;\n    .start-time {\n        position: absolute;\n        top: 0px;\n        .hours {\n            font-size: 20px;\n            color: #fff;\n            font-family: 'SFUIText-Medium';\n        }\n        .seperator {\n            font-size: 20px;\n            color: #fff;\n            font-family: 'SFUIText-Light';\n        }\n        .minutes {\n            font-size: 20px;\n            color: #fff;\n            font-family: 'SFUIText-Light';\n            align-self: 1;\n        }\n    }\n    .image-block {\n        position: absolute;\n        bottom: 0;\n    }\n    .end-time {\n        position: absolute;\n        right: 0;\n        top: 8px;\n        font-size: 10px;\n        font-family: 'SFUIText-Light';\n        color: #AFB2BA;\n        .am-pm {\n            margin-left: 4px;\n        }\n    }\n    .am-pm {\n        font-size: 10px;\n        align-self: end;\n        font-family: 'SFUIText-Light';\n        color: #AFB2BA;\n        margin-left: 3px;\n    }\n"], ["\n    position: relative;\n    height: 50px;\n    .start-time {\n        position: absolute;\n        top: 0px;\n        .hours {\n            font-size: 20px;\n            color: #fff;\n            font-family: 'SFUIText-Medium';\n        }\n        .seperator {\n            font-size: 20px;\n            color: #fff;\n            font-family: 'SFUIText-Light';\n        }\n        .minutes {\n            font-size: 20px;\n            color: #fff;\n            font-family: 'SFUIText-Light';\n            align-self: 1;\n        }\n    }\n    .image-block {\n        position: absolute;\n        bottom: 0;\n    }\n    .end-time {\n        position: absolute;\n        right: 0;\n        top: 8px;\n        font-size: 10px;\n        font-family: 'SFUIText-Light';\n        color: #AFB2BA;\n        .am-pm {\n            margin-left: 4px;\n        }\n    }\n    .am-pm {\n        font-size: 10px;\n        align-self: end;\n        font-family: 'SFUIText-Light';\n        color: #AFB2BA;\n        margin-left: 3px;\n    }\n"]);
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require("styled-components");
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _dateTime = require("../dateTime");
+
+var _dateTime2 = _interopRequireDefault(_dateTime);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var TimelineBlock = _styledComponents2.default.div(_templateObject);
+
+var Timeline = function Timeline(props) {
+    var startTime = props.startTime,
+        endTime = props.endTime;
+
+
+    var getTimeString = function getTimeString(date, type) {
+        var string = '';
+        if (date) {
+            var timeString = _dateTime2.default.toTimeString(date, "HH:MM AP");
+
+            if (type === 'hours') {
+                string = timeString.split(':')[0];
+            } else if (type === 'minutes') {
+                string = timeString.split(':')[1].split(' ')[0];
+            } else if (type === 'ampm') {
+                string = timeString.split(' ')[1];
+            }
+        }
+        return string;
+    };
+
+    return _react2.default.createElement(
+        TimelineBlock,
+        null,
+        _react2.default.createElement(
+            "div",
+            { className: "start-time" },
+            _react2.default.createElement(
+                "span",
+                { className: "hours" },
+                getTimeString(startTime, 'hours')
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: "seperator" },
+                ":"
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: "minutes" },
+                getTimeString(startTime, 'minutes')
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: "am-pm" },
+                getTimeString(startTime, 'ampm')
+            )
+        ),
+        _react2.default.createElement(
+            "div",
+            { className: "image-block" },
+            _react2.default.createElement(
+                "svg",
+                { width: "222", height: "23", viewBox: "0 0 222 23", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                _react2.default.createElement("rect", { width: "2", height: "23", rx: "1", fill: "#00CEC6" }),
+                _react2.default.createElement("rect", { x: "15", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "29", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "42", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "56", y: "8", width: "1", height: "15", rx: "0.5", fill: "#303F51" }),
+                _react2.default.createElement("rect", { x: "70", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "84", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "97", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "111", y: "8", width: "1", height: "15", rx: "0.5", fill: "#303F51" }),
+                _react2.default.createElement("rect", { x: "125", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "139", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "152", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "166", y: "8", width: "1", height: "15", rx: "0.5", fill: "#303F51" }),
+                _react2.default.createElement("rect", { x: "180", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "194", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "207", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "221", y: "8", width: "1", height: "15", rx: "0.5", fill: "#FF6C56" })
+            )
+        ),
+        _react2.default.createElement(
+            "div",
+            { className: "end-time" },
+            _react2.default.createElement(
+                "span",
+                { className: "hours" },
+                getTimeString(endTime, 'hours')
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: "seperator" },
+                ":"
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: "minutes" },
+                getTimeString(endTime, 'minutes')
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: "am-pm" },
+                getTimeString(endTime, 'ampm')
+            )
+        )
+    );
+};
+
+Timeline.propTypes = {
+    startTime: _propTypes2.default.string,
+    endTime: _propTypes2.default.string
+};
+
+exports.default = Timeline;

package/atoms/icon/icon.js

@@ -51,7 +51,8 @@ var Icon = function Icon(props) {
           fill: props.color,
           stroke: props.stroke,
           strokeWidth: icon.strokeWidth,
-          fillRule: icon.fillRule
+          fillRule: icon.fillRule,
+          clipRule: icon.clipRule
         });
       })
     )

package/atoms/icon/icon.story.js

@@ -10,9 +10,33 @@ var _storyHelpers = require("../../_helpers/story-helpers");
 
 var _components = require("../../components");
 
+var _icons = require("./icons.json");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var iconsArr = Object.keys(_icons.icons).map(function (icon) {
+  var iconObj = {
+    name: icon,
+    width: _icons.icons[icon].width,
+    height: _icons.icons[icon].height
+  };
+  return iconObj;
+});
+console.log(iconsArr);
 (0, _react3.storiesOf)("Icon").add("default", function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: "Icons", background: "dark" },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      iconsArr.map(function (icon) {
+        return _react2.default.createElement(_components.Icon, { name: icon.name, width: icon.width, height: icon.height, color: "#fff" });
+      })
+    )
+  );
+});
+(0, _react3.storiesOf)("Icon").add("default 1", function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
     { title: "Icons", background: "dark" },
@@ -83,6 +107,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     _react2.default.createElement(
       _storyHelpers.Stack,
       null,
+      _react2.default.createElement(_components.Icon, { name: "dialogue-miss", width: 24, height: 24 }),
+      _react2.default.createElement(_components.Icon, { name: "voice-mismatch", width: 20, height: 20 }),
+      _react2.default.createElement(_components.Icon, { name: "me-issue", width: 24, height: 24 }),
+      _react2.default.createElement(_components.Icon, { name: "av-cut", width: 20, height: 20 }),
+      _react2.default.createElement(_components.Icon, { name: "short-replacement", width: 24, height: 24 }),
+      _react2.default.createElement(_components.Icon, { name: "meaning-error", width: 20, height: 20 }),
+      _react2.default.createElement(_components.Icon, { name: "pronunciation", width: 24, height: 24 }),
       _react2.default.createElement(_components.Icon, { name: "volume", width: 18, height: 18 }),
       _react2.default.createElement(_components.Icon, { name: "share", width: 18, height: 18 }),
       _react2.default.createElement(_components.Icon, { name: "settings", width: 16, height: 16 }),

package/atoms/icon/icons.json

@@ -1159,6 +1159,97 @@
       "width": 24,
       "height": 20,
       "fillRule": "evenodd"
+    },
+    "dialogue-miss": {
+      "paths":["M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1.2-9.1c0-.66.54-1.2 1.2-1.2.66 0 1.2.54 1.2 1.2l-.01 6.2c0 .66-.53 1.2-1.19 1.2-.66 0-1.2-.54-1.2-1.2V4.9zm6.5 6.1c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"],
+      "width": 24,
+      "height": 24
+    },
+    "voice-mismatch": {
+      "paths": ["M12,10c1.66,0,3-1.34,3-3s-1.34-3-3-3S9,5.34,9,7S10.34,10,12,10z M16.87,13.38c-0.62,0-1.12-0.5-1.12-1.12v-1.88 c0-0.62,0.5-1.12,1.13-1.12c0.62,0,1.12,0.5,1.12,1.12v1.88C18,12.87,17.5,13.38,16.87,13.38z M16.5,16h0.75c0,0,0-1.15,0-1.15 c1.27-0.18,2.25-1.28,2.25-2.6h-0.75c0,1.03-0.84,1.88-1.88,1.88S15,13.28,15,12.25h-0.75c0,1.32,0.98,2.42,2.25,2.6 C16.5,14.85,16.5,16,16.5,16z M8.38,9.67C7.83,8.92,7.5,8,7.5,7c0-1,0.33-1.92,0.88-2.67C7.96,4.12,7.5,4,7,4C5.34,4,4,5.34,4,7 s1.34,3,3,3C7.5,10,7.96,9.88,8.38,9.67z M4.5,16H1v-1.91c0-0.7,0.36-1.36,0.97-1.72c1.29-0.76,2.76-1.23,4.33-1.35 C5.89,11.22,4.5,12.2,4.5,14.09V16z M6,16v-1.91c0-0.7,0.36-1.36,0.97-1.72C8.44,11.5,10.16,11,12,11c0.49,0,0.97,0.04,1.45,0.1 c-0.82,1.84-0.03,4.01,1.79,4.9H6z"],
+      "width": 20,
+      "height": 20
+    },
+    "me-issue": {
+      "paths": ["M21,3H3C1.89,3,1,3.89,1,5v12c0,1.1,0.89,2,2,2h5v2h8v-2h5c1.1,0,1.99-0.9,1.99-2L23,5C23,3.89,22.1,3,21,3z M21,17H3V5 h18V17z M16,10v2H8v-2H16z"],
+      "width": 24,
+      "height": 24
+    },
+    "av-cut": {
+      "paths": ["M17.78,17.78L2.22,2.22L1.16,3.28L2.38,4.5C2.14,4.77,2,5.12,2,5.5v9C2,15.33,2.67,16,3.5,16h10.38l2.84,2.84L17.78,17.78z M3.5,14.5V7h1.38l7.5,7.5H3.5z M6.12,4H16.5C17.33,4,18,4.67,18,5.5v9c0,0.38-0.14,0.73-0.38,1l-1.12-1.12V7H9.12L6.12,4z"],
+      "height": 20,
+      "width": 20
+    },
+    "short-replacement": {
+      "paths": ["M21 1H3c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zM7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"],
+      "heigth": 24,
+      "width": 24,
+      "fillRule": "evenodd"
+    },
+    "meaning-error": {
+      "paths": ["M18,5h-4v6.21C13.69,11.08,13.36,11,13,11c-1.38,0-2.5,1.12-2.5,2.5c0,1.38,1.12,2.5,2.5,2.5s2.5-1.12,2.5-2.5v-7H18V5z"],
+      "width": 20,
+      "heigth": 20
+    },
+    "pronunciation": {
+      "paths": ["M17 20c-.29 0-.56-.06-.76-.15-.71-.37-1.21-.88-1.71-2.38-.51-1.56-1.47-2.29-2.39-3-.79-.61-1.61-1.24-2.32-2.53C9.29 10.98 9 9.93 9 9c0-2.8 2.2-5 5-5s5 2.2 5 5h2c0-3.93-3.07-7-7-7S7 5.07 7 9c0 1.26.38 2.65 1.07 3.9.91 1.65 1.98 2.48 2.85 3.15.81.62 1.39 1.07 1.71 2.05.6 1.82 1.37 2.84 2.73 3.55.51.23 1.07.35 1.64.35 2.21 0 4-1.79 4-4h-2c0 1.1-.9 2-2 2zM7.64 2.64L6.22 1.22C4.23 3.21 3 5.96 3 9s1.23 5.79 3.22 7.78l1.41-1.41C6.01 13.74 5 11.49 5 9s1.01-4.74 2.64-6.36zM11.5 9c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5-2.5 1.12-2.5 2.5z"],
+      "height": 24,
+      "width": 24
+    },
+    "program-schedular": {
+      "paths": [
+        "M12.4444 8H3.55556V9.77778H12.4444V8ZM14.2222 1.77778H13.3333V0H11.5556V1.77778H4.44444V0H2.66667V1.77778H1.77778C0.791111 1.77778 0.00888888 2.57778 0.00888888 3.55556L0 16C0 16.9778 0.791111 17.7778 1.77778 17.7778H14.2222C15.2 17.7778 16 16.9778 16 16V3.55556C16 2.57778 15.2 1.77778 14.2222 1.77778ZM14.2222 16H1.77778V6.22222H14.2222V16ZM9.77778 11.5556H3.55556V13.3333H9.77778V11.5556Z"
+      ],
+      "width": 16,
+      "height": 18
+    },
+    "bulk-schedular": {
+      "paths": [
+        "M5.33333 8H3.55556V9.77778H5.33333V8ZM8.88889 8H7.11111V9.77778H8.88889V8ZM12.4444 8H10.6667V9.77778H12.4444V8ZM14.2222 1.77778H13.3333V0H11.5556V1.77778H4.44444V0H2.66667V1.77778H1.77778C0.791111 1.77778 0.00888888 2.57778 0.00888888 3.55556L0 16C0 16.9778 0.791111 17.7778 1.77778 17.7778H14.2222C15.2 17.7778 16 16.9778 16 16V3.55556C16 2.57778 15.2 1.77778 14.2222 1.77778ZM14.2222 16H1.77778V6.22222H14.2222V16Z"
+      ],
+      "width": 16,
+      "height": 18
+    },
+    "asset-pending": {
+      "paths": [
+        "M5.60889 14.2222L7.77778 12.0533L9.94667 14.2222L10.8889 13.28L8.72 11.1111L10.8889 8.94222L9.94667 8L7.77778 10.1689L5.60889 8L4.66667 8.94222L6.83556 11.1111L4.66667 13.28L5.60889 14.2222ZM14.2222 1.77778H13.3333V0H11.5556V1.77778H4.44444V0H2.66667V1.77778H1.77778C0.791111 1.77778 0.00888888 2.57778 0.00888888 3.55556L0 16C0 16.9778 0.791111 17.7778 1.77778 17.7778H14.2222C15.2 17.7778 16 16.9778 16 16V3.55556C16 2.57778 15.2 1.77778 14.2222 1.77778ZM14.2222 16H1.77778V6.22222H14.2222V16Z"
+      ],
+      "width": 16,
+      "height": 18
+    },
+    "asset-overlapping": {
+      "paths": [
+        "M12.4444 9.77778H8V14.2222H12.4444V9.77778ZM11.5556 0V1.77778H4.44444V0H2.66667V1.77778H1.77778C0.791111 1.77778 0.00888888 2.57778 0.00888888 3.55556L0 16C0 16.9778 0.791111 17.7778 1.77778 17.7778H14.2222C15.2 17.7778 16 16.9778 16 16V3.55556C16 2.57778 15.2 1.77778 14.2222 1.77778H13.3333V0H11.5556ZM14.2222 16H1.77778V6.22222H14.2222V16Z"
+      ],
+      "width": 16,
+      "height": 18
+    },
+    "asset-ingested": {
+      "paths": [
+        "M12.0267 8.94222L11.0844 8L6.74667 12.3378L4.86222 10.4533L3.92 11.3956L6.74667 14.2222L12.0267 8.94222ZM14.2222 1.77778H13.3333V0H11.5556V1.77778H4.44444V0H2.66667V1.77778H1.77778C0.791111 1.77778 0.00888888 2.57778 0.00888888 3.55556L0 16C0 16.9778 0.791111 17.7778 1.77778 17.7778H14.2222C15.2 17.7778 16 16.9778 16 16V3.55556C16 2.57778 15.2 1.77778 14.2222 1.77778ZM14.2222 16H1.77778V6.22222H14.2222V16Z"
+      ],
+      "width": 16,
+      "height": 18
+    },
+    "overlapping": {
+      "paths": [
+        "M0 8.57143V10H12.8571V8.57143H0ZM0 5.71429H12.8571V7.14286H0V5.71429ZM0 0H12.8571V4.28571H0V0Z"
+      ],
+      "width": 13,
+      "height": 10,
+      "fillRule": "evenodd",
+      "clipRule": "evenodd"
+    },
+    "curate": {
+      "paths": ["M0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8ZM14.5455 8C14.5455 11.615 11.615 14.5455 8 14.5455C4.38505 14.5455 1.45455 11.615 1.45455 8C1.45455 4.38505 4.38505 1.45455 8 1.45455C11.615 1.45455 14.5455 4.38505 14.5455 8ZM10.1818 5.09091C10.5835 5.09091 10.9091 5.41652 10.9091 5.81818V10.1818C10.9091 10.5835 10.5835 10.9091 10.1818 10.9091H5.81818C5.41652 10.9091 5.09091 10.5835 5.09091 10.1818V5.81818C5.09091 5.41652 5.41652 5.09091 5.81818 5.09091H10.1818ZM6.54545 9.45455V6.54545H9.45455V9.45455H6.54545Z"],
+      "width": 16,
+      "height": 16,
+      "fillRule": "evenodd"
+    },
+    "camera": {
+      "paths": ["M6.22222 0L4.59556 1.77778H1.77778C0.8 1.77778 0 2.57778 0 3.55556V14.2222C0 15.2 0.8 16 1.77778 16H16C16.9778 16 17.7778 15.2 17.7778 14.2222V3.55556C17.7778 2.57778 16.9778 1.77778 16 1.77778H13.1822L11.5556 0H6.22222ZM8.88889 13.3333C6.43556 13.3333 4.44444 11.3422 4.44444 8.88889C4.44444 6.43556 6.43556 4.44444 8.88889 4.44444C11.3422 4.44444 13.3333 6.43556 13.3333 8.88889C13.3333 11.3422 11.3422 13.3333 8.88889 13.3333ZM8.88889 11.7333C10.4598 11.7333 11.7333 10.4598 11.7333 8.88889C11.7333 7.31795 10.4598 6.04444 8.88889 6.04444C7.31795 6.04444 6.04444 7.31795 6.04444 8.88889C6.04444 10.4598 7.31795 11.7333 8.88889 11.7333Z"],
+      "width": 18,
+      "height": 16
     }
   }
 }

package/atoms/inputText/inputText.js

@@ -207,7 +207,7 @@ InputText.defaultProps = {
   error: null,
   onChange: null,
   type: 'text',
-  maxlength: 50,
+  // maxlength: 50,
   theme: 'light',
   value: '',
   showLengthCount: false

package/atoms/label/label.js

@@ -31,13 +31,13 @@ var LabelStyles = _styledComponents2.default.div(_templateObject, function (_ref
 });
 
 var LABEL_STYLES = [{
-  code: ["cancelled", "error", "failed", "upload_cancelled_by_user"],
+  code: ["cancelled", "error", "failed", "upload_cancelled_by_user", "rejected"],
   hex: {
     background: "#FF6C56",
     color: "#FFF"
   }
 }, {
-  code: ["in_queue", "running", "verifying"],
+  code: ["in_queue", "running", "verifying", "approval_pending"],
   hex: {
     background: "#F9E900"
   }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "8.7.2",
+  "version": "8.9.0",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "8.7.2",
+    "@desynova-digital/tokens": "8.9.0",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },