scorer-ui-kit 1.7.6 → 1.8.0-beta.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import lightTheme from './themes/light/light';
-import darkTheme from './themes/dark';
+import darkTheme from './themes/dark/dark';
 import themeFallbackHelper from './themes/themeFallbackHelper';
 import { AlertBar, Notification, INotificationProps, AlertWrapper } from './Alerts';
 import { Form, Button, ButtonWithIcon, ButtonWithLoading, IconButton, IconButtonData, ActionButtons, SmallInput, Input, Label, Switch, Checkbox, PasswordField, TextField, TextArea, TextAreaField, SliderInput, ISliderMark, DurationSlider, PercentageSlider, InputFileButton, DropArea, CropTool, AvatarUploader, SelectField, SelectWrapper, AreaUploadManager, RadioButton } from './Form';

package/dist/index.js

@@ -1424,81 +1424,397 @@ var light = {
   deviceMediaQuery: deviceMediaQuery
 };
 
-var colors$1 = {};
-var styles$1 = {
+var typography$1 = {
   "form": {
-    "button": {
-      "primary": {
+    "label": {
+      "default": {
+        "textAlign": "left",
+        "fontSize": "14px",
+        "fontWeight": 400,
+        "textDecoration": "none",
+        "color": "hsla(207, 5%, 56.7%, 1.000)"
+      }
+    }
+  },
+  "global": {
+    "mainMenu": {
+      "subItem": {
         "default": {
-          "backgroundImage": "linear-gradient(135.00deg, hsla(200, 77.5%, 68.6%, 1.000) 0%, hsla(207, 80.2%, 64.3%, 1.000) 100%)"
+          "textAlign": "left",
+          "fontSize": "14px",
+          "fontWeight": 300,
+          "textDecoration": "none",
+          "color": "hsla(0, 0%, 100%, 0.549)"
+        },
+        "hover": {
+          "textAlign": "left",
+          "fontSize": "14px",
+          "fontWeight": 300,
+          "textDecoration": "none",
+          "color": "hsla(0, 0%, 100%, 0.800)"
+        }
+      },
+      "subheader": {
+        "textAlign": "left",
+        "fontSize": "14px",
+        "fontWeight": 600,
+        "textTransform": "uppercase",
+        "letterSpacing": "0.35px",
+        "textDecoration": "none",
+        "color": "hsla(0, 0%, 100%, 0.545)"
+      },
+      "identity": {
+        "textAlign": "left",
+        "fontSize": "12px",
+        "fontWeight": 400,
+        "textDecoration": "none",
+        "color": "hsla(0, 0%, 88.6%, 0.651)"
+      },
+      "menuItem": {
+        "active": {
+          "textAlign": "left",
+          "fontSize": "16px",
+          "fontWeight": 300,
+          "textDecoration": "none",
+          "color": "hsla(0, 0%, 100%, 1.000)"
+        },
+        "default": {
+          "textAlign": "left",
+          "fontSize": "16px",
+          "fontWeight": 300,
+          "textDecoration": "none",
+          "color": "hsla(0, 0%, 100%, 1.000)"
+        },
+        "hover": {
+          "textAlign": "left",
+          "fontSize": "16px",
+          "fontWeight": 300,
+          "textDecoration": "none",
+          "color": "hsla(0, 0%, 100%, 1.000)"
+        }
+      },
+      "hidePrompt": {
+        "textAlign": "left",
+        "fontSize": "14px",
+        "fontWeight": 300,
+        "textDecoration": "none",
+        "color": "hsla(203, 13.2%, 73.3%, 1.000)"
+      },
+      "sub-MenuItem": {
+        "default": {
+          "textAlign": "left",
+          "fontSize": "14px",
+          "fontWeight": 300,
+          "textDecoration": "none",
+          "color": "hsla(203, 6.6%, 76.1%, 1.000)"
+        },
+        "active": {
+          "textAlign": "left",
+          "fontSize": "14px",
+          "fontWeight": 300,
+          "textDecoration": "none",
+          "color": "hsla(203, 6.6%, 76.1%, 1.000)"
+        },
+        "hover": {
+          "textAlign": "left",
+          "fontSize": "14px",
+          "fontWeight": 300,
+          "textDecoration": "none",
+          "color": "hsla(203, 6.6%, 76.1%, 1.000)"
         }
       }
+    },
+    "topBar": {
+      "search": {
+        "value": {
+          "textAlign": "left",
+          "fontSize": "14px",
+          "fontWeight": 300,
+          "textDecoration": "none",
+          "color": "hsla(0, 0%, 34.9%, 1.000)"
+        }
+      }
+    }
+  },
+  "pageHeader": {
+    "introduction": {
+      "textAlign": "left",
+      "fontStyle": "italic",
+      "fontSize": "14px",
+      "fontWeight": 300,
+      "lineHeight": "25px",
+      "textDecoration": "none",
+      "color": "hsla(207, 5%, 56.7%, 1.000)"
+    }
+  },
+  "styleGuide": {
+    "guideTitle": {
+      "textAlign": "left",
+      "fontSize": "24px",
+      "fontWeight": 300,
+      "textDecoration": "none",
+      "color": "hsla(0, 0%, 48.2%, 1.000)",
+      "textTransform": "uppercase",
+      "letterSpacing": "0.4px"
+    },
+    "guideNotes": {
+      "textAlign": "left",
+      "fontStyle": "italic",
+      "fontSize": "14px",
+      "fontWeight": 300,
+      "lineHeight": "30px",
+      "paragraphSpacing": "15px",
+      "textDecoration": "none",
+      "color": "hsla(0, 0%, 48.2%, 1.000)"
+    },
+    "itemName": {
+      "textAlign": "left",
+      "fontSize": "12px",
+      "fontWeight": 300,
+      "textDecoration": "none",
+      "color": "hsla(0, 0%, 22.7%, 1.000)"
+    },
+    "guideAreaSubtitle": {
+      "textAlign": "left",
+      "fontSize": "16px",
+      "fontWeight": 300,
+      "textTransform": "uppercase",
+      "textDecoration": "none",
+      "color": "hsla(0, 0%, 48.2%, 1.000)"
+    },
+    "guideAreaTitle": {
+      "textAlign": "left",
+      "fontSize": "20px",
+      "fontWeight": 300,
+      "textTransform": "uppercase",
+      "textDecoration": "none",
+      "color": "hsla(0, 0%, 48.2%, 1.000)"
     }
+  },
+  "active": {
+    "textAlign": "left",
+    "fontSize": "14px",
+    "fontWeight": 600,
+    "textDecoration": "none",
+    "color": "hsla(0, 0%, 100%, 0.800)"
   }
 };
-var tmp = {
-  input: {
-    states: {
-      "default": {
-        icon: '',
-        iconColor: '#000',
-        borderColor: 'hsl(120, 1%, 85%)',
-        backgroundColor: 'hsl(0, 0%, 99%)'
-      },
-      required: {
-        icon: '',
-        iconColor: 'hsl(0, 0%, 100%)',
-        borderColor: 'hsl(205, 59%, 71%)',
-        backgroundColor: 'hsl(205, 59%, 71%)'
-      },
-      loading: {
-        icon: '',
-        iconColor: '#000',
-        borderColor: 'hsl(195, 79%, 71%)',
-        backgroundColor: 'hsl(195, 79%, 71%)'
-      },
-      valid: {
-        icon: '',
-        iconColor: '#000',
-        borderColor: 'hsl(120, 35%, 72%)',
-        backgroundColor: 'hsl(120, 35%, 72%)'
-      },
-      error: {
-        icon: '',
-        iconColor: '#000',
-        borderColor: 'hsl(0, 79%, 70%)',
-        backgroundColor: 'hsl(0, 79%, 70%)'
+
+var colors$1 = {
+  "divider": "hsla(240, 6.3%, 15.5%, 1.000)",
+  "menu": {
+    "active": "hsla(215, 100%, 75.1%, 1.000)",
+    "hover": "hsla(200, 77.8%, 77.1%, 1.000)",
+    "default": "hsla(200, 77.8%, 77.1%, 0.000)"
+  },
+  "icons": {
+    "subtle": "hsla(0, 0%, 85.1%, 1.000)",
+    "dimmed": "hsla(0, 0%, 65.1%, 1.000)",
+    "inverse": "hsla(0, 0%, 100%, 1.000)",
+    "mono": "hsla(0, 0%, 25.1%, 1.000)",
+    "danger": "hsla(0, 100%, 70%, 1.000)",
+    "primary": "hsla(205, 100%, 65.1%, 1.000)"
+  }
+};
+
+var styles$1 = {
+  "global": {
+    "mainMenu": {
+      "background": {
+        "boxShadow": "5px 0px 10px 0px hsla(205, 14%, 16.9%, 0.251)",
+        "backgroundColor": "hsla(210, 7.9%, 14.9%, 1.000)"
+      },
+      "footerBackground": {
+        "backgroundColor": "hsla(210, 7.9%, 14.9%, 0.800)"
+      },
+      "lines": {
+        "backgroundColor": "hsla(225, 3.5%, 22.4%, 1.000)"
+      },
+      "iconBackground": {
+        "default": {
+          "backgroundColor": "hsla(215, 19.1%, 36.9%, 0.000)"
+        },
+        "hover": {
+          "backgroundColor": "hsla(215, 19.1%, 36.9%, 1.000)"
+        },
+        "active": {
+          "backgroundColor": "hsla(215, 66.3%, 59.2%, 1.000)"
+        }
+      },
+      "desktop": {
+        "open": {}
       }
+    },
+    "drawer": {
+      "background": {
+        "boxShadow": "5px 0px 10px 0px hsla(205, 14%, 16.9%, 0.251)",
+        "backgroundColor": "hsla(210, 7.9%, 14.9%, 1.000)"
+      }
+    },
+    "topBar": {
+      "lines": {
+        "backgroundColor": "hsla(225, 3.5%, 22.4%, 1.000)"
+      }
+    },
+    "background": {
+      "backgroundImage": "linear-gradient(180.00deg, hsla(220, 4.2%, 13.9%, 1.000) 0%, hsla(220, 4.9%, 12%, 1.000) 100%)"
     }
   },
-  body: {
-    backgroundColor: '#f00',
-    backgroundImage: 'radial-gradient(circle at 55% 1%, #303335, #212427 117%), url(./noise.png)'
-  },
-  fontFamily: 'Helvetica, Arial, sans-serif',
-  colors: {
-    button: {
-      backgroundColor: '#666666',
-      color: '#efefef',
-      borderColor: '#efefef'
+  "general": {
+    "divider": {
+      "backgroundColor": "hsla(213, 11.6%, 18.6%, 1.000)"
+    }
+  }
+};
+
+var custom$1 = {
+  "lines": {
+    "primary": {
+      label: {
+        fill: "#fff"
+      },
+      contrastLine: {
+        stroke: 'hsla(205deg, 80%, 45%, 100%);'
+      },
+      highlightLine: {
+        stroke: 'hsla(205deg, 45%, 90%, 90%);'
+      },
+      grabHandle: {
+        fill: 'hsla(205deg, 45%, 90%, 100%)',
+        stroke: 'hsla(205deg, 45%, 100%, 100%)'
+      },
+      point: {
+        fill: 'hsla(205deg, 45%, 90%, 100%)'
+      },
+      grabHandleContrast: {
+        stroke: 'hsla(205deg, 80%, 45%, 100%)'
+      },
+      grabHandleText: {
+        fill: 'hsla(205deg, 80%, 25%, 100%);'
+      },
+      handleBase: {
+        fill: 'hsla(235deg, 100%, 80%, 100%);'
+      },
+      handleRingLayer: {
+        stroke: 'hsla(205deg, 100%, 89%, 100%);'
+      },
+      handleReactiveFill: {
+        fill: 'hsla(192deg, 100%, 45%, 100%);'
+      },
+      handleReactiveRing: {
+        stroke: 'hsla(205deg, 100%, 36%, 27%);'
+      },
+      handleContrastLayer: {
+        stroke: 'hsla(205deg, 100%, 36%, 15%);'
+      },
+      stopStart: {
+        stopColor: ' hsla(205deg, 100%, 15%, 35%);'
+      },
+      stopEnd: {
+        stopColor: 'hsla(205deg, 100%, 15%, 0%)'
+      }
     },
-    exampleCard: {
-      backgroundColor: '#666666',
-      color: 'hsla(205, 15%, 95%, 100%)',
-      borderColor: 'hsla(205, 90%, 65%, 100%)',
-      shadowColor: 'hsla(205, 90%, 65%, 15%)'
+    "secondary": {
+      label: {
+        fill: "#fff"
+      },
+      contrastLine: {
+        stroke: 'hsla(120deg, 80%, 45%, 100%);'
+      },
+      highlightLine: {
+        stroke: 'hsla(120deg, 45%, 90%, 90%);'
+      },
+      grabHandle: {
+        fill: 'hsla(120deg, 45%, 90%, 100%)',
+        stroke: 'hsla(120deg, 45%, 100%, 100%)'
+      },
+      point: {
+        fill: 'hsla(120deg, 45%, 90%, 100%)'
+      },
+      grabHandleContrast: {
+        stroke: 'hsla(120deg, 80%, 45%, 100%)'
+      },
+      grabHandleText: {
+        fill: 'hsla(120deg, 80%, 25%, 100%);'
+      },
+      handleBase: {
+        fill: 'hsla(150deg, 100%, 80%, 100%);'
+      },
+      handleRingLayer: {
+        stroke: 'hsla(120deg, 100%, 89%, 100%);'
+      },
+      handleReactiveFill: {
+        fill: 'hsla(108deg, 100%, 45%, 100%);'
+      },
+      handleReactiveRing: {
+        stroke: 'hsla(120deg, 100%, 36%, 27%);'
+      },
+      handleContrastLayer: {
+        stroke: 'hsla(120deg, 100%, 36%, 15%);'
+      },
+      stopStart: {
+        stopColor: ' hsla(120deg, 100%, 15%, 35%);'
+      },
+      stopEnd: {
+        stopColor: 'hsla(120deg, 100%, 15%, 0%)'
+      }
+    },
+    "danger": {
+      label: {
+        fill: "#fff"
+      },
+      contrastLine: {
+        stroke: 'hsla(0, 80%, 45%, 100%);'
+      },
+      highlightLine: {
+        stroke: 'hsla(0, 45%, 90%, 90%);'
+      },
+      grabHandle: {
+        fill: 'hsla(0, 45%, 90%, 100%)',
+        stroke: 'hsla(0, 45%, 100%, 100%)'
+      },
+      point: {
+        fill: 'hsla(0, 45%, 90%, 100%)'
+      },
+      grabHandleText: {
+        fill: 'hsla(0, 80%, 25%, 100%);'
+      },
+      grabHandleContrast: {
+        stroke: 'hsla(0, 80%, 45%, 100%)'
+      },
+      handleBase: {
+        fill: 'hsla(30deg, 100%, 80%, 100%);'
+      },
+      handleRingLayer: {
+        stroke: 'hsla(0, 100%, 89%, 100%);'
+      },
+      handleReactiveFill: {
+        fill: 'hsla(348deg, 100%, 45%, 100%);'
+      },
+      handleReactiveRing: {
+        stroke: 'hsla(0deg, 100%, 36%, 27%);'
+      },
+      handleContrastLayer: {
+        stroke: 'hsla(0deg, 100%, 36%, 15%);'
+      },
+      stopStart: {
+        stopColor: ' hsla(0, 100%, 15%, 35%);'
+      },
+      stopEnd: {
+        stopColor: 'hsla(0, 100%, 15%, 0%);'
+      }
     }
   }
 };
+
 var dark = {
   fontFamily: fontFamily,
   dimensions: dimensions,
+  typography: typography$1,
   colors: colors$1,
-  tmp: tmp,
   styles: styles$1,
   animation: animation,
-  deviceSize: deviceSize,
-  deviceMediaQuery: deviceMediaQuery
+  custom: custom$1
 };
 
 function themeFallbackHelper(theme, themeFallback) {
@@ -1548,20 +1864,23 @@ function _taggedTemplateLiteralLoose(strings, raw) {
 }
 
 var _templateObject;
-var IconWrapper = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  [stroke]{\n    stroke: ", ";\n  }\n  svg {\n    overflow: visible;\n    vector-effect: non-scaling-stroke;\n    line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n    vector-effect: non-scaling-stroke;\n  }\n  }\n"])), function (_ref) {
-  var theme = _ref.theme,
-      color = _ref.color;
+var IconWrapper = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  [stroke]{\n    content: ", ";\n    stroke: ", ";\n  }\n  svg {\n    overflow: visible;\n    vector-effect: non-scaling-stroke;\n    line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n    vector-effect: non-scaling-stroke;\n  }\n  }\n"])), function (_ref) {
+  var color = _ref.color;
+  return color;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      color = _ref2.color;
   return theme.colors.icons[color];
 });
 
-var Icon = function Icon(_ref2) {
-  var icon = _ref2.icon,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? 24 : _ref2$size,
-      _ref2$weight = _ref2.weight,
-      weight = _ref2$weight === void 0 ? 'regular' : _ref2$weight,
-      _ref2$color = _ref2.color,
-      color = _ref2$color === void 0 ? 'mono' : _ref2$color;
+var Icon = function Icon(_ref3) {
+  var icon = _ref3.icon,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? 24 : _ref3$size,
+      _ref3$weight = _ref3.weight,
+      weight = _ref3$weight === void 0 ? 'regular' : _ref3$weight,
+      _ref3$color = _ref3.color,
+      color = _ref3$color === void 0 ? 'mono' : _ref3$color;
   var iconWeight = dimensions.icons.weights[weight];
   var IconSVG = icons.IconSVGs[icon];
   return IconSVG != null ? React__default.createElement(IconWrapper, {
@@ -11750,7 +12069,7 @@ var MainMenu = function MainMenu(_ref5) {
   }) : null)))), document.body));
 };
 
-var _templateObject$1d, _templateObject2$15, _templateObject3$X, _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$15, _templateObject3$X, _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, _templateObject17$4;
 var DrawerTop = styled__default.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose([""])));
 var DrawerBottom = styled__default.div(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -11762,25 +12081,25 @@ var DrawerHeader = styled__default.h2(_templateObject4$S || (_templateObject4$S
 });
 var CurrentUser = styled__default.div(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 15px;\n\n  ", ";\n"])), function (_ref3) {
   var theme = _ref3.theme;
-  return styled.css(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n    ", ";\n  "])), theme.colors.divider, theme.typography.global.mainMenu.identity);
+  return styled.css(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n    ", ";\n  "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.typography.global.mainMenu.identity);
 });
-var UserOptions = styled__default.div(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 10px 20px;\n  border-bottom: ", " 1px solid;\n"])), function (_ref4) {
-  var colors = _ref4.theme.colors;
-  return colors.divider;
+var UserOptions = styled__default.div(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 10px 20px;\n  ", ";\n\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return styled.css(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n  "])), theme.styles.global.mainMenu.lines.backgroundColor);
 });
-var Logout = styled__default.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n    padding: 0 20px;\n"])));
-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 Logout = styled__default.div(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n    padding: 0 20px;\n"])));
+var LinkMenu = styled__default.ul(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 12px 0 0 0;\n  list-style: none;\n"])));
+var LinkMenuItem = styled__default.li(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n  padding: 10px 0;\n"])));
+var IconWrapper$3 = styled__default.div(_templateObject12$a || (_templateObject12$a = _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)(_templateObject13$9 || (_templateObject13$9 = _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);
+  return styled.css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n    ", ";\n\n    &:hover {\n      ", ";\n    }\n  "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover);
 }, function (_ref6) {
   var theme = _ref6.theme,
       isActive = _ref6.isActive;
-  return isActive && styled.css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      ", ";\n    }\n  "])), theme.typography.global.mainMenu.subItem.active);
+  return isActive && styled.css(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      ", ";\n    }\n  "])), theme.typography.global.mainMenu.subItem.active);
 });
-var LanguageMenu = styled__default.button(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  font-family: ", ";\n  margin-top: auto;\n  display: flex;\n  flex-direction: row;\n\n  border-top: ", " 1px solid;\n  ", ";\n\n  padding: 20px 10px 15px;\n  align-items: center;\n  width: 100%;\n"])), resetButtonStyles, function (_ref7) {
+var LanguageMenu = styled__default.button(_templateObject16$4 || (_templateObject16$4 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  font-family: ", ";\n  margin-top: auto;\n  display: flex;\n  flex-direction: row;\n\n  border-top: ", " 1px solid;\n  ", ";\n\n  padding: 20px 10px 15px;\n  align-items: center;\n  width: 100%;\n"])), resetButtonStyles, function (_ref7) {
   var theme = _ref7.theme;
   return theme.fontFamily.ui;
 }, function (_ref8) {
@@ -11788,7 +12107,7 @@ var LanguageMenu = styled__default.button(_templateObject15$7 || (_templateObjec
   return colors.divider;
 }, function (_ref9) {
   var theme = _ref9.theme;
-  return styled.css(_templateObject16$4 || (_templateObject16$4 = _taggedTemplateLiteralLoose(["\n    ", ";\n    &:hover { ", "; }\n    &:active { ", "; }\n  "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover, theme.typography.global.mainMenu.subItem.active);
+  return styled.css(_templateObject17$4 || (_templateObject17$4 = _taggedTemplateLiteralLoose(["\n    ", ";\n    &:hover { ", "; }\n    &:active { ", "; }\n  "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover, theme.typography.global.mainMenu.subItem.active);
 });
 
 var UserMenu = function UserMenu(_ref10) {
@@ -11913,11 +12232,11 @@ var _templateObject$1g, _templateObject2$18, _templateObject3$_, _templateObject
 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;
-  return colors && styled.css(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n    box-shadow: 5px 7px 10px 0 hsla(205, 16%, 77%, 0.1);\n    background-color:", ";\n  "])), colors.divider, theme.styles.global.mainMenu.background.backgroundColor);
+  return colors && styled.css(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n    // box-shadow: 5px 7px 10px 0 hsla(205, 16%, 77%, 0.1);\n    background-color:", ";\n  "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.styles.global.mainMenu.background.backgroundColor);
 });
 var SearchBar = styled__default.div(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n  margin-left: 25px;\n  flex: 0 1 500px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 var IconWrapper$4 = styled__default.div(_templateObject4$U || (_templateObject4$U = _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 SearchInput = styled__default.input(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  flex: 1;\n  height: 35px;\n  line-height: 35px;\n  border: none;\n  outline: none;\n\n  ", ";\n\n  &::placeholder {\n    font-style: italic;\n    ", ";\n  }\n"])), function (_ref2) {
+var SearchInput = styled__default.input(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  flex: 1;\n  height: 35px;\n  line-height: 35px;\n  border: none;\n  outline: none;\n  background: transparent;\n\n  ", ";\n\n  &::placeholder {\n    font-style: italic;\n    ", ";\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.fontFamily.data;
 }, function (_ref3) {
@@ -11932,7 +12251,7 @@ var DrawerToggle = styled__default.button.attrs({
   type: 'button'
 })(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose(["\n  width: 60px;\n  margin: 0 5px;\n  height: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n\n  ", ";\n\n  ", "\n"])), function (_ref5) {
   var theme = _ref5.theme;
-  return styled.css(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid ", ";\n\n    &:hover {\n      border-bottom-color: ", ";\n    }\n\n    transition: border ", " ", ";\n  "])), theme.colors.menu.indicator, theme.colors.menu.hover, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
+  return styled.css(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid transparent;\n    /*", ";*/\n\n    &:hover {\n      border-bottom-color: ", ";\n    }\n\n    transition: border ", " ", ";\n  "])), theme.colors.menu.indicator, theme.colors.menu.hover, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
 }, function (_ref6) {
   var isActive = _ref6.isActive,
       theme = _ref6.theme;
@@ -11946,8 +12265,8 @@ var Drawer = styled__default.div(_templateObject11$i || (_templateObject11$i = _
   var theme = _ref8.theme;
   return theme.styles.global.mainMenu.background;
 }, function (_ref9) {
-  var colors = _ref9.theme.colors;
-  return colors.divider;
+  var theme = _ref9.theme;
+  return theme.styles.global.mainMenu.lines.backgroundColor;
 }, function (_ref10) {
   var baseWidth = _ref10.baseWidth;
   return baseWidth ? baseWidth : "200px";