scorer-ui-kit 2.3.0 → 2.4.0

package/dist/index.modern.js

@@ -1573,7 +1573,7 @@ var _templateObject$3;
 var ThemeVariables = createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n  ", ";\n  ", ";\n  ", ";\n\n  :root {\n\n    --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n    --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n    --common-height: 32px;\n\n    --font-size: 14px;\n\n    --global-menu-width-closed: 80px;\n    --global-menu-width-open: 280px;\n\n    --button-font-size: 14px;\n    --button-height: 32px;\n    --button-h-padding: 8px;\n    --button-lift-default-x: 0px;\n    --button-lift-default-y: 2px;\n    --button-lift-default-blur: 4px;\n    --button-lift-default-spread: 2px;\n\n    --button-icon-size: 14px;\n    --button-icon-h-padding: 8px;\n\n    --input-height: 40px;\n\n  }\n\n  .button-small {\n    --button-font-size: 12px;\n    --button-height: 24px;\n    --button-h-padding: 4px;\n    --button-icon-size: 12px;\n    --button-icon-h-padding: 8px;\n  }\n\n  .button-large {\n    --button-font-size: 16px;\n    --button-height: 40px;\n    --button-h-padding: 8px;\n    --button-icon-size: 16px;\n    --button-icon-h-padding: 8px;\n  }\n\n  .split-button-primary {\n    --border-color: var(--primary-9);\n    --border-active-color: var(--primary-11);\n    --toggle-icon-border: var(--primary-9);\n    --gradient-1: #72C3EE;\n    --gradient-2: #5CACEE;\n    --button-lift-default-color: rgba(221, 234, 248, 0.08);\n    --text-color: var(--white-a12);\n    --text-disabled-color: var(--white-a11);\n    --button-hover-bg: var(--primary-a3);\n    --button-active-bg: var(--primary-10);\n    --toggle-icon-hover-bg: var(--white-a7);\n    --toggle-icon-active-bg:  var(--black-a6);\n    --toggle-icon: var(--white-a12);\n    --toggle-icon-active: var(--white-a11);\n    --toggle-icon-disabled: var(--white-a10);\n  }\n\n  .split-button-secondary {\n    --border-color: var(--grey-7);\n    --border-active-color: var(--grey-7);\n    --toggle-icon-border: var(--grey-6);\n    --gradient-1: #2E3135;\n    --gradient-2: #363A3F;\n    --button-lift-default-color: rgba(221, 234, 248, 0.08);\n    --text-color: var(--grey-12);\n    --text-disabled-color: var(--grey-a11);\n    --button-hover-bg: var(--grey-a6);\n    --button-active-bg: var(--grey-a3);\n    --toggle-icon-hover-bg: var(--grey-a6);\n    --toggle-icon-active-bg:  var(--grey-a3);\n    --toggle-icon: var(--grey-12);\n    --toggle-icon-active: var(--grey-a11);\n    --toggle-icon-disabled: var(--grey-10);\n  }\n\n  .split-button-danger {\n    --border-color: var(--warning-10);\n    --border-active-color: var(--warning-10);\n    --toggle-icon-border: var(--warning-9);\n    --gradient-1: #D16565;\n    --gradient-2: #E76F6F;\n    --button-lift-default-color: rgba(255, 113, 113, 0.47);\n    --text-color:  var(--white-a12);\n    --text-disabled-color: var(--white-a11);\n    --button-hover-bg: var(--warning-a7);\n    --button-active-bg: var(--warning-8);\n    --toggle-icon-hover-bg: var(--warning-a7);\n    --toggle-icon-active-bg:  var(--warning-a5);\n    --toggle-icon: var(--white-a12);\n    --toggle-icon-active: var(--white-a11);\n    --toggle-icon-disabled: var(--white-a10);\n  }\n\n  .split-button-custom {\n    --border-color: var(--info-10);\n    --border-active-color: var(--info-10);\n    --toggle-icon-border: var(--info-9);\n    --gradient-1: var(--info-10);\n    --gradient-2: var(--info-9);\n    --button-lift-default-color:  var(--info-a3);\n    --text-color:  var(--white-a12);\n    --text-disabled-color: var(--white-a11);\n    --button-hover-bg: var(--info-a7);\n    --button-active-bg: var(--info-8);\n    --toggle-icon-hover-bg: var(--info-a7);\n    --toggle-icon-active-bg:  var(--info-a5);\n    --toggle-icon: var(--white-a12);\n    --toggle-icon-active: var(--white-a11);\n    --toggle-icon-disabled: var(--white-a10);\n  }\n\n"])), layoutVariables, animationVariables, colorVariables);
 
 var _templateObject$4;
-var BaseStyles = css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\n  * , body{\n    box-sizing: border-box;\n  }\n  body, html , #root {\n    min-width: 100%;\n    min-height: 100vh;\n    margin: 0;\n  }\n\n  body {\n    font-family: var(--font-ui);\n    color: var(--grey-11);\n    background: var(--main-background-gradient);\n    background-attachment: fixed;\n  }\n  \n"])));
+var BaseStyles = css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\n  * , body{\n    box-sizing: border-box;\n    text-rendering: geometricPrecision; \n  }\n  body, html , #root {\n    min-width: 100%;\n    min-height: 100vh;\n    margin: 0;\n  }\n\n  body {\n    font-family: var(--font-ui);\n    color: var(--grey-11);\n    background: var(--main-background-gradient);\n    background-attachment: fixed;\n  }\n  \n"])));
 
 var _templateObject$5, _templateObject2, _templateObject3;
 var wrapperCss = css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  svg {\n    overflow: visible;\n    vector-effect: non-scaling-stroke;\n\n    line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n      vector-effect: non-scaling-stroke;\n    }\n  }\n"])));
@@ -13669,7 +13669,7 @@ var ContextTitle = styled.div(_templateObject$1y || (_templateObject$1y = _tagge
 });
 var ContextIcon$1 = styled.div(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n  background-color: var(--global-menu-icon-background-default);\n  transition: background-color var(--speed-fast) var(--easing-primary-in);\n    \n  flex: 0 0 40px;\n  width: 40px;\n  height: 40px;\n  margin: 0 20px;\n\n  border-radius: 7px;\n  display:flex;\n  justify-content:center;\n  align-items:center;\n\n  svg {\n    display: block;\n  }\n"])));
 var ContextIndicator = styled.div(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n  width: 12px;\n  height: 12px;\n  flex: 0 0 14px;\n  margin: 0 20px 0 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  \n  opacity: 0;\n  transition: opacity 0 var(--easing-primary-in);\n\n  svg {\n    display: block;\n    height: 12px;\n    width: 12px;\n  }\n"])));
-var ContextActionBaseCSS$1 = css(_templateObject5$Z || (_templateObject5$Z = _taggedTemplateLiteralLoose(["\n  -webkit-tap-highlight-color: transparent;\n  border: none;\n  background: none;\n  display: flex;\n  justify-content:left;\n  align-items:center;\n  flex-wrap: wrap;\n  cursor: pointer;\n  width: 100%;\n  outline: none;\n  padding: 0;\n  text-decoration: none;\n  font-family: var(--font-ui);\n  font-weight: 300;\n  font-size: 16px;\n  color: var(--grey-10);\n"])));
+var ContextActionBaseCSS$1 = css(_templateObject5$Z || (_templateObject5$Z = _taggedTemplateLiteralLoose(["\n  -webkit-tap-highlight-color: transparent;\n  border: none;\n  background: none;\n  display: flex;\n  justify-content:left;\n  align-items:center;\n  flex-wrap: wrap;\n  cursor: pointer;\n  width: 100%;\n  outline: none;\n  padding: 0;\n  text-decoration: none;\n  font-family: var(--font-ui);\n  font-weight: 500;\n  font-size: 16px;\n  color: var(--grey-11);\n\n  &:hover{\n    color: var(--grey-12);\n  }\n"])));
 var StyledAnchor = styled.a(_templateObject6$K || (_templateObject6$K = _taggedTemplateLiteralLoose(["\n  display: flex;\n  text-decoration: none;\n"])));
 var ExternalIconWrapper = styled.div(_templateObject7$E || (_templateObject7$E = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
 var ContextWrapper = styled.div(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    background-color: var(--global-menu-icon-background-hover);\n\n    ", "{\n      [stroke]{\n        stroke: var(--inverse);\n      }\n    }\n  }\n"])), ContextActionBaseCSS$1, function (_ref2) {
@@ -13681,7 +13681,7 @@ var ContextActionA = styled(Link)(_templateObject10$m || (_templateObject10$m =
   return $menuOpen && css(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n  "])), ContextTitle);
 }, ContextIcon$1, IconWrapper, function (_ref4) {
   var $isActive = _ref4.$isActive;
-  return $isActive && css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n    ", ",\n    &:hover ", "{\n      background-color: var(--global-menu-icon-background-active);\n    }\n  "])), ContextIcon$1, ContextIcon$1);
+  return $isActive && css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n    color: var(--grey-12);\n\n    ", ",\n    &:hover ", "{\n      background-color: var(--global-menu-icon-background-active);\n    }\n  "])), ContextIcon$1, ContextIcon$1);
 });
 var ContextActionButton$1 = styled.button(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    background-color: var(--global-menu-icon-background-hover);\n\n    ", "{\n      [stroke]{\n        stroke: var(--inverse);\n      }\n    }\n  }\n\n  ", "\n"])), ContextActionBaseCSS$1, function (_ref5) {
   var menuOpen = _ref5.menuOpen;
@@ -13888,9 +13888,9 @@ var SubmenuItemTitle = styled.span(_templateObject3$1a || (_templateObject3$1a =
 var SubmenuItemLink = styled(Link)(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n"])), resetButtonStyles);
 var ExternalIconWrapper$1 = styled.div(_templateObject5$_ || (_templateObject5$_ = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
 var SubmenuItemAnchor = styled.a(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n"])), resetButtonStyles);
-var SubmenuItem = styled.li(_templateObject7$F || (_templateObject7$F = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 30px;\n  padding-left: 40px;\n  position: relative;\n\n  &::after {\n    display: block;\n    content: '';\n    height: 1px;\n    width: 14px;\n    position: absolute;\n    left: 0;\n    top: 10px;\n    background: var(--dividing-line);\n  }\n\n  ", ", ", "{\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 300;\n    text-decoration: none;\n    color: var(--grey-11);\n\n    ", ";\n\n  }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
+var SubmenuItem = styled.li(_templateObject7$F || (_templateObject7$F = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 30px;\n  padding-left: 40px;\n  position: relative;\n\n  &::after {\n    display: block;\n    content: '';\n    height: 1px;\n    width: 14px;\n    position: absolute;\n    left: 0;\n    top: 10px;\n    background: var(--dividing-line);\n  }\n\n  ", ", ", "{\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 400;\n    text-decoration: none;\n    color: var(--grey-11);\n\n    ", ";\n\n  }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
   var isActive = _ref.isActive;
-  return css(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n    \n      &:hover {\n        color: var(--primary-9);\n      }\n\n      ", "\n\n    "])), isActive && css(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          color: var(--grey-11);\n          font-weight: 600;\n        }\n      "]))));
+  return css(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n    \n      &:hover {\n        color: var(--grey-12);\n      }\n\n      ", "\n\n    "])), isActive && css(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          color: var(--grey-11);\n          font-weight: 600;\n        }\n      "]))));
 });
 var SubmenuContainer = styled.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  transition:\n    max-height var(--speed-normal) var(--easing-primary-out),\n    opacity var(--speed-fast) var(--easing-primary-out);\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: var(--dividing-line);\n  }\n\n"])));
 var ContextContainer = styled.div(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n  min-height: ", ";\n  width: inherit;\n\n  ", "{\n    max-height: 0;\n    opacity: 0;\n  }\n  ", ";\n\n  ", ";\n\n"])), function (_ref2) {
@@ -14263,7 +14263,7 @@ var Logout = styled.div(_templateObject6$O || (_templateObject6$O = _taggedTempl
 var LinkMenu = styled.ul(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 12px 0 0 0;\n  list-style: none;\n"])));
 var LinkMenuItem = styled.li(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n  padding: 10px 0;\n"])));
 var IconWrapperFooter = styled.div(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\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  padding-right: 20px;\n"])));
-var LinkMenuItemA = styled(Link)(_templateObject10$q || (_templateObject10$q = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n  width: 100%;\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--grey-10);\n  text-decoration: none;\n\n  &:hover {\n    color: var(--primary-9);\n  }\n\n  ", ";\n"])), resetButtonStyles, function (_ref) {
+var LinkMenuItemA = styled(Link)(_templateObject10$q || (_templateObject10$q = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n  width: 100%;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--grey-10);\n  text-decoration: none;\n\n  &:hover {\n    color: var(--primary-9);\n  }\n\n  ", ";\n"])), resetButtonStyles, function (_ref) {
   var isActive = _ref.isActive;
   return isActive && css(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      color: var(--primary-9);\n    }\n  "])));
 });
@@ -15118,7 +15118,7 @@ var _templateObject$1T, _templateObject2$1B, _templateObject3$1n, _templateObjec
 var Container$1c = styled.div(_templateObject$1T || (_templateObject$1T = _taggedTemplateLiteralLoose(["\n  width: 286px;\n  border-right: 1px solid var(--grey-a7);\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n"])));
 var LogoContainer = styled.div(_templateObject2$1B || (_templateObject2$1B = _taggedTemplateLiteralLoose(["\n  height: 84px;\n  color: var(--grey-11);\n  border-bottom: 1px solid var(--grey-a7);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding-top: 18px;\n  padding-bottom: 15px;\n"])));
 var LogoTopText = styled.div(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose(["\n  height: 31px;\n  font-family: Monorale;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 1.72;\n  letter-spacing: 4.5px;\n  text-align: center;\n"])));
-var LogoBottomText = styled.div(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n  height: 19px;\n  font-family: Monorale;\n  font-size: 16px;\n  font-weight: 300;\n  line-height: normal;\n  letter-spacing: 14.11px;\n  text-align: center;\n"])));
+var LogoBottomText = styled.div(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n  height: 19px;\n  font-family: Monorale;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: normal;\n  letter-spacing: 14.11px;\n  text-align: center;\n"])));
 var SidebarBox = styled.div(_templateObject5$15 || (_templateObject5$15 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  border-bottom: 1px solid var(--grey-a7);\n  padding: 22px 20px 21px 20px;\n"])));
 var SidebarHeading = styled.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.35px;\n  color: var(--grey-10);\n  margin-bottom: 18px;\n"])));
 var SidebarLinkHeading = styled.div(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.35px;\n  color: var(--grey-10);\n"])));