scorer-ui-kit 1.7.8 → 1.7.9

package/dist/LineUI/LineUI.d.ts

@@ -8,6 +8,7 @@ interface LineUIProps {
     }) => void;
     onLineMoveEnd?: () => void;
     options?: LineUIOptions;
+    showDirectionMark?: boolean;
 }
 declare const LineUI: React.FC<LineUIProps>;
 export default LineUI;

package/dist/LineUI/index.d.ts

@@ -35,6 +35,7 @@ export interface IDragLineUISharedOptions {
     setIndexOffset: number;
     pointIndexOffset: number;
     showPoint: boolean;
+    showDirectionMark?: boolean;
 }
 export interface LineUIOptions {
     showHandleFinder?: boolean;
@@ -51,6 +52,7 @@ export interface LineUIOptions {
         y: number;
     };
     boundaryOffset?: number;
+    showDirectionMark?: boolean;
 }
 export declare type LineUIVideoOptions = VideoHTMLAttributes<HTMLVideoElement>;
 export { LineUI, LineUIVideo, LineUIRTC, LineReducer, LineSetContext };

package/dist/index.js

@@ -6559,7 +6559,7 @@ var HandleUnit = function HandleUnit(props) {
   }, index + pointIndexOffset))));
 };
 
-var _templateObject$H, _templateObject2$F, _templateObject3$z, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$l, _templateObject9$i, _templateObject10$f, _templateObject11$b;
+var _templateObject$H, _templateObject2$F, _templateObject3$z, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$l, _templateObject9$i, _templateObject10$f, _templateObject11$b, _templateObject12$6;
 var ContrastLine = styled__default.line(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  pointer-events: none;\n  stroke: ", ";\n  mix-blend-mode: multiply;\n"])), function (_ref) {
   var theme = _ref.theme,
       styling = _ref.styling;
@@ -6602,6 +6602,7 @@ var GrabHandleContrast = styled__default(GrabHandle)(_templateObject9$i || (_tem
 var GrabHandleGroup = styled__default.g(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n\n  ", ", ", " {\n    transition: r 250ms ease;\n  }\n\n  ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
   return props.showIndex && styled.css(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n    ", ", ", " {\n      pointer-events: none;\n      r: ", ";\n    }\n  "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
 });
+var DMCircle = styled__default.circle(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n  fill: hsla(203, 100%, 35%, 0.49);\n"])));
 
 var LineUnit = function LineUnit(props) {
   var x1 = props.x1,
@@ -6621,7 +6622,8 @@ var LineUnit = function LineUnit(props) {
   var handleFinderActive = options.handleFinderActive,
       revealSetIndex = options.revealSetIndex,
       showMoveHandle = options.showMoveHandle,
-      setIndexOffset = options.setIndexOffset;
+      setIndexOffset = options.setIndexOffset,
+      showDirectionMark = options.showDirectionMark;
   var a = x1 - x2;
   var b = y1 - y2;
   var distance = Math.sqrt(a * a + b * b);
@@ -6680,6 +6682,49 @@ var LineUnit = function LineUnit(props) {
     x: (x2 + x1) / 2,
     y: (y2 + y1) / 2
   };
+
+  var directionMarkCoordinate = function directionMarkCoordinate() {
+    var angle = Math.atan2(y2 - y1, x2 - x1);
+    var angleMode = Math.PI / 2 - angle;
+    var x = midpoint.x + Math.sin(angleMode) - 5;
+    var y = midpoint.y + Math.cos(angleMode);
+    var rotate = 180 / Math.PI * Math.atan2(y2 - y1, x2 - x1);
+    var labelRotate = -rotate;
+    return {
+      x: x,
+      y: y,
+      rotate: rotate,
+      labelRotate: labelRotate
+    };
+  };
+
+  var getDirectionMarkLine = function getDirectionMarkLine() {
+    var dmCoordinate = directionMarkCoordinate();
+    return React__default.createElement("g", {
+      transform: "translate(" + dmCoordinate.x + "," + dmCoordinate.y + ") rotate(" + dmCoordinate.rotate + ") scale(" + unit * 1 + ")"
+    }, React__default.createElement("g", {
+      transform: 'translate(-3,-30) scale(0.8)'
+    }, React__default.createElement(DMCircle, {
+      r: 12,
+      cx: 6,
+      cy: 7
+    }), React__default.createElement(Icon, {
+      color: 'inverse',
+      icon: 'Up',
+      size: 12,
+      weight: 'heavy',
+      forSvgUsage: true
+    })), React__default.createElement("g", {
+      transform: "translate(0,30) rotate(" + dmCoordinate.labelRotate + ")"
+    }, React__default.createElement(LabelText$2, {
+      styling: styling,
+      fontSize: 14 + "px",
+      x: 0,
+      y: 0,
+      showIndex: revealSetIndex || handleFinderActive
+    }, label)));
+  };
+
   return React__default.createElement("g", null, React__default.createElement(ContrastLine, {
     styling: styling,
     strokeLinecap: 'round',
@@ -6725,7 +6770,7 @@ var LineUnit = function LineUnit(props) {
     x: midpoint.x - 3 * unit,
     y: midpoint.y + 4 * unit,
     showIndex: revealSetIndex || handleFinderActive
-  }, lineSetId + setIndexOffset)), label && React__default.createElement(LabelText$2, {
+  }, lineSetId + setIndexOffset)), showDirectionMark ? getDirectionMarkLine() : label && React__default.createElement(LabelText$2, {
     styling: styling,
     fontSize: unit * 14 + "px",
     x: midpoint.x - 16 * unit,
@@ -7021,7 +7066,9 @@ var LineUI = function LineUI(_ref) {
       showPoint = _ref$options$showPoin2 === void 0 ? false : _ref$options$showPoin2,
       fixedImgDimensions = _ref$options.fixedImgDimensions,
       _ref$options$boundary = _ref$options.boundaryOffset,
-      boundaryOffset = _ref$options$boundary === void 0 ? 0 : _ref$options$boundary;
+      boundaryOffset = _ref$options$boundary === void 0 ? 0 : _ref$options$boundary,
+      _ref$options$showDire = _ref$options.showDirectionMark,
+      showDirectionMark = _ref$options$showDire === void 0 ? false : _ref$options$showDire;
 
   var _useState = React.useState({
     x: {
@@ -7148,7 +7195,8 @@ var LineUI = function LineUI(_ref) {
     showMoveHandle: showMoveHandle || showMoveHandle !== false && showGrabHandle !== false,
     setIndexOffset: setIndexOffset,
     pointIndexOffset: pointIndexOffset,
-    showPoint: showPoint
+    showPoint: showPoint,
+    showDirectionMark: showDirectionMark
   };
   return React__default.createElement(Container$t, null, React__default.createElement(Image$1, {
     ref: imgRef,
@@ -8839,7 +8887,7 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
   }), header);
 };
 
-var _templateObject$Y, _templateObject2$T, _templateObject3$J, _templateObject4$D, _templateObject5$z, _templateObject6$t, _templateObject7$r, _templateObject8$p, _templateObject9$k, _templateObject10$h, _templateObject11$d, _templateObject12$6, _templateObject13$5, _templateObject14$4, _templateObject15$3;
+var _templateObject$Y, _templateObject2$T, _templateObject3$J, _templateObject4$D, _templateObject5$z, _templateObject6$t, _templateObject7$r, _templateObject8$p, _templateObject9$k, _templateObject10$h, _templateObject11$d, _templateObject12$7, _templateObject13$5, _templateObject14$4, _templateObject15$3;
 var HeaderRow = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  display: table-row;\n  height: 50px;\n"])));
 var HeaderItem = styled__default.div(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n  display: table-cell;\n  height: inherit;\n  vertical-align:top;\n  line-height: 20px;\n  position: relative;\n  font-family: ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (p) {
   return p.theme.fontFamily.ui;
@@ -8866,7 +8914,7 @@ var TitleItems = styled__default.div(_templateObject9$k || (_templateObject9$k =
   return alignment && styled.css(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", ";\n  "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
 });
 var GroupTitle = styled__default.div(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-self: stretch;\n  margin-bottom: 4px;\n"])));
-var Title$4 = styled__default.div(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n  padding-left: 2px;\n  padding-right: 8px;\n  color: hsla(210, 2%, 51%, 0.65);\n  font-weight: 500;\n  font-size: 12px;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n"])));
+var Title$4 = styled__default.div(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n  padding-left: 2px;\n  padding-right: 8px;\n  color: hsla(210, 2%, 51%, 0.65);\n  font-weight: 500;\n  font-size: 12px;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n"])));
 var EmptyTitle = styled__default.div(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n  height: 20px;\n"])));
 var MiddleLine = styled__default.div(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n  height: 1px;\n  background: hsl(0, 0%, 93%);\n  flex: 1;\n  ", ";\n"])), function (_ref6) {
   var isLastOfGroup = _ref6.isLastOfGroup;
@@ -11211,7 +11259,7 @@ var ContentArea = styled__default.div(_templateObject6$w || (_templateObject6$w
   return paddingOverride ? paddingOverride : '70px 90px';
 });
 
-var _templateObject$1a, _templateObject2$13, _templateObject3$V, _templateObject4$P, _templateObject5$K, _templateObject6$x, _templateObject7$t, _templateObject8$r, _templateObject9$m, _templateObject10$j, _templateObject11$e, _templateObject12$7, _templateObject13$6, _templateObject14$5, _templateObject15$4, _templateObject16$3, _templateObject17$3, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
+var _templateObject$1a, _templateObject2$13, _templateObject3$V, _templateObject4$P, _templateObject5$K, _templateObject6$x, _templateObject7$t, _templateObject8$r, _templateObject9$m, _templateObject10$j, _templateObject11$e, _templateObject12$8, _templateObject13$6, _templateObject14$5, _templateObject15$4, _templateObject16$3, _templateObject17$3, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
 var ContextTitle = styled__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return styled.css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["\n    transition: opacity ", " ", ";\n  "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
@@ -11232,7 +11280,7 @@ var StyledAnchor = styled__default.a(_templateObject9$m || (_templateObject9$m =
 var ExternalIconWrapper = styled__default.div(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
 var ContextWrapper = styled__default.div(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    ", ";\n    ", "{\n      [stroke]{\n        stroke: ", ";\n      }\n    }\n  }\n"])), ContextActionBaseCSS, function (_ref5) {
   var theme = _ref5.theme;
-  return theme && styled.css(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
+  return theme && styled.css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
 }, function (_ref6) {
   var $menuOpen = _ref6.$menuOpen;
   return $menuOpen && styled.css(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n  ", "{\n    opacity: 1;\n  }\n"])), ContextTitle);
@@ -11472,7 +11520,7 @@ var useMenu = function useMenu(defaultMenuOpen) {
   };
 };
 
-var _templateObject$1b, _templateObject2$14, _templateObject3$W, _templateObject4$Q, _templateObject5$L, _templateObject6$y, _templateObject7$u, _templateObject8$s, _templateObject9$n, _templateObject10$k, _templateObject11$f, _templateObject12$8, _templateObject13$7, _templateObject14$6, _templateObject15$5;
+var _templateObject$1b, _templateObject2$14, _templateObject3$W, _templateObject4$Q, _templateObject5$L, _templateObject6$y, _templateObject7$u, _templateObject8$s, _templateObject9$n, _templateObject10$k, _templateObject11$f, _templateObject12$9, _templateObject13$7, _templateObject14$6, _templateObject15$5;
 var Submenu = styled__default.ul(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n  margin-left: 40px;\n  padding: 0;\n\n"])));
 var SubmenuHeader = styled__default.div(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 40px;\n  margin-left: 40px;\n"])));
 var SubmenuItemTitle = styled__default.span(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n  display: block;\n  ", ";\n\n"])), function (_ref) {
@@ -11492,7 +11540,7 @@ var SubmenuItem = styled__default.li(_templateObject8$s || (_templateObject8$s =
 });
 var SubmenuContainer = styled__default.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  position: relative;\n  overflow: hidden;\n\n  &::after {\n    display: block;\n    content: '';\n    width: 1px;\n    position: absolute;\n    left: 40px;\n    top: 0;\n    bottom: 35px;\n    background: ", ";\n  }\n\n"])), function (_ref4) {
   var theme = _ref4.theme;
-  return theme && styled.css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n    transition:\n      max-height ", " ", ",\n      opacity ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
+  return theme && styled.css(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n    transition:\n      max-height ", " ", ",\n      opacity ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
 }, function (_ref5) {
   var colors = _ref5.theme.colors;
   return colors.divider;
@@ -11619,7 +11667,7 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
   return output;
 };
 
-var _templateObject$1c, _templateObject2$15, _templateObject3$X, _templateObject4$R, _templateObject5$M, _templateObject6$z, _templateObject7$v, _templateObject8$t, _templateObject9$o, _templateObject10$l, _templateObject11$g, _templateObject12$9, _templateObject13$8, _templateObject14$7, _templateObject15$6;
+var _templateObject$1c, _templateObject2$15, _templateObject3$X, _templateObject4$R, _templateObject5$M, _templateObject6$z, _templateObject7$v, _templateObject8$t, _templateObject9$o, _templateObject10$l, _templateObject11$g, _templateObject12$a, _templateObject13$8, _templateObject14$7, _templateObject15$6;
 var Logo = styled__default(reactRouterDom.Link)(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n  height: 50px;\n  margin: 0 20px 55px 15px;\n  display: flex;\n\n  object {\n    pointer-events: none;\n  }\n"])));
 var LogoMark = styled__default.div(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n  height: 50px;\n  flex: 0 0 50px;\n  margin-right: 15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n"])));
 var LogoType = styled__default.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  flex: 1;\n  height: 50px;\n  display: flex;\n  justify-content: left;\n  align-items: center;\n"])));
@@ -11636,7 +11684,7 @@ var PushContainer = styled__default.div(_templateObject10$l || (_templateObject1
       isPinned = _ref2.isPinned;
   return theme && styled.css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n    width: ", ";\n  "])), isPinned ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed);
 });
-var Container$O = styled__default.div(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n  z-index: 99;\n  position: fixed;\n  top: 0;\n  left: 0;\n  ", "\n\n  box-sizing: border-box;\n  height: 100%;\n  padding: 20px 0 0 0;\n  overflow: hidden;\n"])), function (_ref3) {
+var Container$O = styled__default.div(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n  z-index: 99;\n  position: fixed;\n  top: 0;\n  left: 0;\n  ", "\n\n  box-sizing: border-box;\n  height: 100%;\n  padding: 20px 0 0 0;\n  overflow: hidden;\n"])), function (_ref3) {
   var theme = _ref3.theme,
       open = _ref3.open,
       desktopSize = _ref3.desktopSize;
@@ -11757,7 +11805,7 @@ var MainMenu = function MainMenu(_ref5) {
   }) : null)))), document.body));
 };
 
-var _templateObject$1d, _templateObject2$16, _templateObject3$Y, _templateObject4$S, _templateObject5$N, _templateObject6$A, _templateObject7$w, _templateObject8$u, _templateObject9$p, _templateObject10$m, _templateObject11$h, _templateObject12$a, _templateObject13$9, _templateObject14$8, _templateObject15$7, _templateObject16$4;
+var _templateObject$1d, _templateObject2$16, _templateObject3$Y, _templateObject4$S, _templateObject5$N, _templateObject6$A, _templateObject7$w, _templateObject8$u, _templateObject9$p, _templateObject10$m, _templateObject11$h, _templateObject12$b, _templateObject13$9, _templateObject14$8, _templateObject15$7, _templateObject16$4;
 var DrawerTop = styled__default.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose([""])));
 var DrawerBottom = styled__default.div(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -11779,7 +11827,7 @@ var Logout = styled__default.div(_templateObject8$u || (_templateObject8$u = _ta
 var LinkMenu = styled__default.ul(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 12px 0 0 0;\n  list-style: none;\n"])));
 var LinkMenuItem = styled__default.li(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n  padding: 10px 0;\n"])));
 var IconWrapper$3 = styled__default.div(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n  flex: 0 40px;\n  width: 5px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  > div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])));
-var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n  width: 100%;\n\n  ", ";\n\n  ", ";\n"])), resetButtonStyles, function (_ref5) {
+var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n  width: 100%;\n\n  ", ";\n\n  ", ";\n"])), resetButtonStyles, function (_ref5) {
   var theme = _ref5.theme;
   return styled.css(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n    ", ";\n\n    &:hover {\n      ", ";\n    }\n  "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover);
 }, function (_ref6) {
@@ -11922,7 +11970,7 @@ var NotificationsHistory = function NotificationsHistory(_ref3) {
   return React__default.createElement(Container$Q, null, unread && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
 };
 
-var _templateObject$1g, _templateObject2$19, _templateObject3$$, _templateObject4$U, _templateObject5$P, _templateObject6$C, _templateObject7$y, _templateObject8$w, _templateObject9$q, _templateObject10$n, _templateObject11$i, _templateObject12$b, _templateObject13$a, _templateObject14$9;
+var _templateObject$1g, _templateObject2$19, _templateObject3$$, _templateObject4$U, _templateObject5$P, _templateObject6$C, _templateObject7$y, _templateObject8$w, _templateObject9$q, _templateObject10$n, _templateObject11$i, _templateObject12$c, _templateObject13$a, _templateObject14$9;
 var Container$R = styled__default.div(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n  z-index: 9;\n  position: sticky;\n  top: 0;\n  align-self: flex-start;\n  height: 65px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       colors = _ref.theme.colors;
@@ -11966,7 +12014,7 @@ var Drawer = styled__default.div(_templateObject11$i || (_templateObject11$i = _
   return baseWidth ? baseWidth : "200px";
 }, function (_ref11) {
   var theme = _ref11.theme;
-  return styled.css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n    transition:\n      opacity ", " ", ",\n      right ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
+  return styled.css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n    transition:\n      opacity ", " ", ",\n      right ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
 }, function (_ref12) {
   var isOpen = _ref12.isOpen;
   return isOpen && styled.css(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n    right: 0;\n    opacity: 1;\n    visibility: visible;\n  "])));