@mdsfe/mds-ui 0.2.0 → 0.2.9-rc.1

package/dist/style/table.css

@@ -504,7 +504,7 @@ a {
 }
 a:focus {
   text-decoration: underline;
-  text-decoration-skip: ink;
+  text-decoration-skip-ink: auto;
 }
 a:hover {
   color: #3f89ff;
@@ -554,7 +554,7 @@ samp {
   font-display: auto;
   font-style: normal;
   /* project id 1921203 */
-  src: url('//at.alicdn.com/t/font_1921203_dze2k4tp7o.woff2?t=1629700491964') format('woff2'), url('//at.alicdn.com/t/font_1921203_dze2k4tp7o.woff?t=1629700491964') format('woff'), url('//at.alicdn.com/t/font_1921203_dze2k4tp7o.ttf?t=1629700491964') format('truetype');
+  src: url(/dist/font/iconfont.486e3d3.woff2) format('woff2'), url(/dist/font/iconfont.675049e.woff) format('woff'), url(/dist/font/iconfont.28359fa.ttf) format('truetype');
 }
 .mdsicon {
   display: inline-block;
@@ -2071,6 +2071,54 @@ samp {
 .mdsicon-line-process:before {
   content: "\E60B";
 }
+.mdsicon-line-cluster:before {
+  content: "\E6D2";
+}
+.mdsicon-line-approval:before {
+  content: "\E6D1";
+}
+.mdsicon-line-whistory:before {
+  content: "\E6D0";
+}
+.mdsicon-line-wtable:before {
+  content: "\E6CF";
+}
+.mdsicon-line-Apply:before {
+  content: "\E6CE";
+}
+.mdsicon-line-wlist:before {
+  content: "\E6CD";
+}
+.mdsicon-line-monitor:before {
+  content: "\E6CC";
+}
+.mdsicon-line-deploy:before {
+  content: "\E6CB";
+}
+.mdsicon-line-gateway:before {
+  content: "\E6CA";
+}
+.mdsicon-line-measure:before {
+  content: "\E6C9";
+}
+.mdsicon-line-new:before {
+  content: "\E6C8";
+}
+.mdsicon-line-data:before {
+  content: "\E6C7";
+}
+.mdsicon-line-SCF:before {
+  content: "\E6C6";
+}
+.mdsicon-line-order:before {
+  content: "\E6C5";
+}
+.mdsicon-line-alert:before {
+  content: "\E6C4";
+}
+.mdsicon-line-management:before {
+  content: "\E6C3";
+}
 .mdsicon-line-trend-up:before {
   content: "\EA63";
 }
@@ -2509,6 +2557,9 @@ samp {
 .mdsicon-line-electronic-archives:before {
   content: "\E60D";
 }
+.mdsicon-line-doc:before {
+  content: "\E707";
+}
 .mdsicon-line-send-forward:before {
   content: "\EAC6";
 }
@@ -4673,6 +4724,177 @@ samp {
   display: inline-block;
   animation: loadingCircle 6s infinite linear;
 }
+.mdsicon-line-recommended-2:before {
+  content: "\E698";
+}
+.mdsicon-line-history-2:before {
+  content: "\E697";
+}
+.mdsicon-fill-collect-1:before {
+  content: "\E669";
+}
+.mdsicon-fill-praise-1:before {
+  content: "\E66D";
+}
+.mdsicon-line-show:before {
+  content: "\E659";
+}
+.mdsicon-line-praise-1:before {
+  content: "\E65D";
+}
+.mdsicon-fill-book1:before {
+  content: "\E63F";
+}
+.mdsicon-fill-beans:before {
+  content: "\E640";
+}
+.mdsicon-fill-article:before {
+  content: "\E641";
+}
+.mdsicon-fill-delete1:before {
+  content: "\E642";
+}
+.mdsicon-fill-recommend:before {
+  content: "\E643";
+}
+.mdsicon-fill-message:before {
+  content: "\E644";
+}
+.mdsicon-fill-ranking:before {
+  content: "\E645";
+}
+.mdsicon-fill-achievement:before {
+  content: "\E646";
+}
+.mdsicon-fill-circle:before {
+  content: "\E647";
+}
+.mdsicon-fill-figure-1:before {
+  content: "\E648";
+}
+.mdsicon-fill-figure-2:before {
+  content: "\E64A";
+}
+.mdsicon-fill-figure-7:before {
+  content: "\E64B";
+}
+.mdsicon-fill-figure-4:before {
+  content: "\E64C";
+}
+.mdsicon-fill-figure-10:before {
+  content: "\E652";
+}
+.mdsicon-fill-figure-5:before {
+  content: "\E653";
+}
+.mdsicon-fill-figure-3:before {
+  content: "\E654";
+}
+.mdsicon-fill-figure-9:before {
+  content: "\E655";
+}
+.mdsicon-fill-figure-6:before {
+  content: "\E656";
+}
+.mdsicon-fill-figure-8:before {
+  content: "\E657";
+}
+.mdsicon-line-article:before {
+  content: "\E658";
+}
+.mdsicon-line-calendar1:before {
+  content: "\E65A";
+}
+.mdsicon-line-add:before {
+  content: "\E65B";
+}
+.mdsicon-line-download1:before {
+  content: "\E65C";
+}
+.mdsicon-line-dynamic:before {
+  content: "\E65E";
+}
+.mdsicon-line-change:before {
+  content: "\E65F";
+}
+.mdsicon-line-course:before {
+  content: "\E660";
+}
+.mdsicon-line-edit1:before {
+  content: "\E661";
+}
+.mdsicon-line-comment:before {
+  content: "\E662";
+}
+.mdsicon-line-delete1:before {
+  content: "\E663";
+}
+.mdsicon-line-email:before {
+  content: "\E664";
+}
+.mdsicon-line-message:before {
+  content: "\E665";
+}
+.mdsicon-line-feedback:before {
+  content: "\E666";
+}
+.mdsicon-line-face1:before {
+  content: "\E667";
+}
+.mdsicon-line-link1:before {
+  content: "\E668";
+}
+.mdsicon-line-member:before {
+  content: "\E66A";
+}
+.mdsicon-line-picture:before {
+  content: "\E66B";
+}
+.mdsicon-line-PSQ:before {
+  content: "\E66C";
+}
+.mdsicon-line-time1:before {
+  content: "\E66E";
+}
+.mdsicon-line-setting1:before {
+  content: "\E66F";
+}
+.mdsicon-line-topic:before {
+  content: "\E670";
+}
+.mdsicon-line-transmit:before {
+  content: "\E671";
+}
+.mdsicon-line-select:before {
+  content: "\E672";
+}
+.mdsicon-line-management1:before {
+  content: "\E673";
+}
+.mdsicon-line-search1:before {
+  content: "\E674";
+}
+.mdsicon-line-vote:before {
+  content: "\E675";
+}
+.mdsicon-line-prompt:before {
+  content: "\E676";
+}
+.mdsicon-line-video:before {
+  content: "\E678";
+}
+.mdsicon-line-wechat:before {
+  content: "\E67A";
+}
+.mdsicon-line-close1:before {
+  content: "\E67B";
+}
+.mdsicon-line-home1:before {
+  content: "\E67C";
+}
+.mdsicon-line-landmark:before {
+  content: "\E67D";
+}
 .fade-enter,
 .fade-appear {
   animation-duration: 0.2s;
@@ -5572,7 +5794,7 @@ samp {
 }
 .mds-btn-sm {
   padding: 0 11px;
-  font-size: 16px;
+  font-size: 14px;
   border-radius: 4px;
   height: 32px;
 }
@@ -5582,7 +5804,7 @@ samp {
 }
 .mds-btn-ls {
   padding: 0 7px;
-  font-size: 14px;
+  font-size: 12px;
   border-radius: 4px;
   height: 28px;
 }
@@ -6635,6 +6857,7 @@ samp {
   font-size: 16px;
   border-radius: 50%;
   height: 32px;
+  font-size: 14px;
 }
 .mds-btn-circle.mds-btn-ls,
 .mds-btn-circle-outline.mds-btn-ls {
@@ -6643,6 +6866,7 @@ samp {
   font-size: 14px;
   border-radius: 50%;
   height: 28px;
+  font-size: 12px;
 }
 .mds-btn-loading {
   color: #fff;
@@ -6939,7 +7163,7 @@ samp {
   height: 32px;
 }
 .mds-btn-group-ls > .mds-btn > .mdsicon {
-  font-size: 14px;
+  font-size: 12px;
 }
 .mds-btn-group .mds-btn + .mds-btn,
 .mds-btn + .mds-btn-group,
@@ -7640,6 +7864,11 @@ samp {
   border: none;
   background-color: inherit !important;
 }
+.mds-btn-a-text {
+  color: #0364ff;
+  border: none;
+  background-color: inherit !important;
+}
 .mds-btn-round {
   border-radius: 18px;
 }
@@ -7740,11 +7969,11 @@ samp {
 .mds-checkbox-inner:after {
   transform: rotate(45deg) scale(0);
   position: absolute;
-  left: 4.57142857px;
-  top: 1.14285714px;
-  display: table;
-  width: 5.71428571px;
-  height: 9.14285714px;
+  left: 4.3px;
+  top: 1px;
+  display: block;
+  width: 6px;
+  height: 10px;
   border: 2px solid #fff;
   border-top: 0;
   border-left: 0;
@@ -7783,7 +8012,7 @@ samp {
 .mds-checkbox-checked .mds-checkbox-inner:after {
   transform: rotate(45deg) scale(1);
   position: absolute;
-  display: table;
+  display: block;
   border: 2px solid #fff;
   border-top: 0;
   border-left: 0;
@@ -7874,7 +8103,8 @@ samp {
     transform: rotate(2turn);
   }
 }
-.mdsicon-colourful {
+.mdsicon-colourful,
+.mdsicon-symbol {
   width: 24px;
   height: 24px;
   vertical-align: inherit;
@@ -7886,262 +8116,179 @@ samp {
 /* stylelint-disable declaration-bang-space-before */
 .mds-tooltip {
   position: absolute;
-  z-index: 1060;
-  display: block;
-  visibility: visible;
-  word-break: break-all;
+  border-radius: 4px;
+  padding: 10px;
   font-size: 12px;
   line-height: 1.5;
+  min-width: 10px;
+  word-wrap: break-word;
+  font-size: 14px;
+}
+.mds-tooltip .popper__arrow,
+.mds-tooltip .popper__arrow::after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.mds-tooltip .popper__arrow::after {
+  content: " ";
+  border-width: 5px;
 }
 .mds-tooltip-hidden {
   display: none;
 }
+.mds-tooltip.dark-mode {
+  background: #303133;
+  color: #ffffff;
+}
+.mds-tooltip.light-mode {
+  background: #ffffff;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+}
 .mds-tooltip-placement-top,
-.mds-tooltip-placement-topLeft,
-.mds-tooltip-placement-topRight {
-  margin-bottom: 8px;
+.mds-tooltip-placement-top-start,
+.mds-tooltip-placement-top-end {
+  margin-bottom: 9px;
 }
 .mds-tooltip-placement-right,
-.mds-tooltip-placement-rightTop,
-.mds-tooltip-placement-rightBottom {
-  margin-left: 8px;
+.mds-tooltip-placement-right-start,
+.mds-tooltip-placement-right-end {
+  margin-left: 9px;
 }
 .mds-tooltip-placement-bottom,
-.mds-tooltip-placement-bottomLeft,
-.mds-tooltip-placement-bottomRight {
-  margin-top: 8px;
+.mds-tooltip-placement-bottom-start,
+.mds-tooltip-placement-bottom-end {
+  margin-top: 9px;
 }
 .mds-tooltip-placement-left,
-.mds-tooltip-placement-leftTop,
-.mds-tooltip-placement-leftBottom {
-  margin-right: 8px;
-}
-.mds-tooltip-inner {
-  max-width: 250px;
-  padding: 8px 16px;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  background-color: #354052;
-  border-radius: 4px;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
-  min-height: 34px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  line-height: 22px;
-}
-.mds-tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
+.mds-tooltip-placement-left-start,
+.mds-tooltip-placement-left-end {
+  margin-right: 9px;
+}
+.mds-tooltip-placement-top .popper__arrow,
+.mds-tooltip-placement-top-start .popper__arrow,
+.mds-tooltip-placement-top-end .popper__arrow {
+  bottom: -6px;
+  border-width: 6px 6px 0;
+  border-top-color: #354052;
 }
-.mds-tooltip-placement-top .mds-tooltip-arrow,
-.mds-tooltip-placement-topLeft .mds-tooltip-arrow,
-.mds-tooltip-placement-topRight .mds-tooltip-arrow {
-  bottom: -5px;
-  border-width: 5px 5px 0;
+.mds-tooltip-placement-top .popper__arrow::after,
+.mds-tooltip-placement-top-start .popper__arrow::after,
+.mds-tooltip-placement-top-end .popper__arrow::after {
+  bottom: 1px;
   border-top-color: #354052;
+  border-width: 5px 5px 0;
+  margin-left: -5px;
 }
-.mds-tooltip-placement-top .mds-tooltip-light .mds-tooltip-inner,
-.mds-tooltip-placement-topLeft .mds-tooltip-light .mds-tooltip-inner,
-.mds-tooltip-placement-topRight .mds-tooltip-light .mds-tooltip-inner {
-  color: #354052;
-  background-color: #fff;
+.mds-tooltip-placement-top.light-mode .popper__arrow,
+.mds-tooltip-placement-top-start.light-mode .popper__arrow,
+.mds-tooltip-placement-top-end.light-mode .popper__arrow {
+  border-top-color: #ebeef5;
 }
-.mds-tooltip-placement-top .mds-tooltip-light .mds-tooltip-arrow,
-.mds-tooltip-placement-topLeft .mds-tooltip-light .mds-tooltip-arrow,
-.mds-tooltip-placement-topRight .mds-tooltip-light .mds-tooltip-arrow {
+.mds-tooltip-placement-top.light-mode .popper__arrow::after,
+.mds-tooltip-placement-top-start.light-mode .popper__arrow::after,
+.mds-tooltip-placement-top-end.light-mode .popper__arrow::after {
   border-top-color: #fff;
 }
-.mds-tooltip-placement-top .mds-tooltip-arrow {
-  left: 50%;
-  margin-left: -5px;
-}
-.mds-tooltip-placement-topLeft .mds-tooltip-arrow {
-  left: 16px;
-}
-.mds-tooltip-placement-topRight .mds-tooltip-arrow {
-  right: 16px;
+.mds-tooltip-placement-right .popper__arrow,
+.mds-tooltip-placement-right-start .popper__arrow,
+.mds-tooltip-placement-right-end .popper__arrow {
+  left: -6px;
+  border-width: 6px 6px 6px 0;
+  border-right-color: #354052;
 }
-.mds-tooltip-placement-right .mds-tooltip-arrow,
-.mds-tooltip-placement-rightTop .mds-tooltip-arrow,
-.mds-tooltip-placement-rightBottom .mds-tooltip-arrow {
-  left: -5px;
-  border-width: 5px 5px 5px 0;
+.mds-tooltip-placement-right .popper__arrow::after,
+.mds-tooltip-placement-right-start .popper__arrow::after,
+.mds-tooltip-placement-right-end .popper__arrow::after {
+  left: 1px;
   border-right-color: #354052;
+  border-width: 5px 5px 5px 0;
+  bottom: -5px;
 }
-.mds-tooltip-placement-right .mds-tooltip-light .mds-tooltip-inner,
-.mds-tooltip-placement-rightTop .mds-tooltip-light .mds-tooltip-inner,
-.mds-tooltip-placement-rightBottom .mds-tooltip-light .mds-tooltip-inner {
-  color: #354052;
-  background-color: #fff;
+.mds-tooltip-placement-right.light-mode .popper__arrow,
+.mds-tooltip-placement-right-start.light-mode .popper__arrow,
+.mds-tooltip-placement-right-end.light-mode .popper__arrow {
+  border-right-color: #ebeef5;
 }
-.mds-tooltip-placement-right .mds-tooltip-light .mds-tooltip-arrow,
-.mds-tooltip-placement-rightTop .mds-tooltip-light .mds-tooltip-arrow,
-.mds-tooltip-placement-rightBottom .mds-tooltip-light .mds-tooltip-arrow {
+.mds-tooltip-placement-right.light-mode .popper__arrow::after,
+.mds-tooltip-placement-right-start.light-mode .popper__arrow::after,
+.mds-tooltip-placement-right-end.light-mode .popper__arrow::after {
   border-right-color: #fff;
 }
-.mds-tooltip-placement-right .mds-tooltip-arrow {
-  top: 50%;
-  margin-top: -5px;
-}
-.mds-tooltip-placement-rightTop .mds-tooltip-arrow {
-  top: 8px;
-}
-.mds-tooltip-placement-rightBottom .mds-tooltip-arrow {
-  bottom: 8px;
+.mds-tooltip-placement-left .popper__arrow,
+.mds-tooltip-placement-left-start .popper__arrow,
+.mds-tooltip-placement-left-end .popper__arrow {
+  right: -6px;
+  border-width: 6px 0 6px 6px;
+  border-left-color: #354052;
 }
-.mds-tooltip-placement-left .mds-tooltip-arrow,
-.mds-tooltip-placement-leftTop .mds-tooltip-arrow,
-.mds-tooltip-placement-leftBottom .mds-tooltip-arrow {
-  right: -5px;
-  border-width: 5px 0 5px 5px;
+.mds-tooltip-placement-left .popper__arrow::after,
+.mds-tooltip-placement-left-start .popper__arrow::after,
+.mds-tooltip-placement-left-end .popper__arrow::after {
+  right: 1px;
   border-left-color: #354052;
+  border-width: 5px 0 5px 5px;
+  margin-left: -5px;
+  bottom: -5px;
 }
-.mds-tooltip-placement-left .mds-tooltip-light .mds-tooltip-inner,
-.mds-tooltip-placement-leftTop .mds-tooltip-light .mds-tooltip-inner,
-.mds-tooltip-placement-leftBottom .mds-tooltip-light .mds-tooltip-inner {
-  color: #354052;
-  background-color: #fff;
+.mds-tooltip-placement-left.light-mode .popper__arrow,
+.mds-tooltip-placement-left-start.light-mode .popper__arrow,
+.mds-tooltip-placement-left-end.light-mode .popper__arrow {
+  border-left-color: #ebeef5;
 }
-.mds-tooltip-placement-left .mds-tooltip-light .mds-tooltip-arrow,
-.mds-tooltip-placement-leftTop .mds-tooltip-light .mds-tooltip-arrow,
-.mds-tooltip-placement-leftBottom .mds-tooltip-light .mds-tooltip-arrow {
+.mds-tooltip-placement-left.light-mode .popper__arrow::after,
+.mds-tooltip-placement-left-start.light-mode .popper__arrow::after,
+.mds-tooltip-placement-left-end.light-mode .popper__arrow::after {
   border-left-color: #fff;
 }
-.mds-tooltip-placement-left .mds-tooltip-arrow {
-  top: 50%;
-  margin-top: -5px;
-}
-.mds-tooltip-placement-leftTop .mds-tooltip-arrow {
-  top: 8px;
-}
-.mds-tooltip-placement-leftBottom .mds-tooltip-arrow {
-  bottom: 8px;
-}
-.mds-tooltip-placement-bottom .mds-tooltip-arrow,
-.mds-tooltip-placement-bottomLeft .mds-tooltip-arrow,
-.mds-tooltip-placement-bottomRight .mds-tooltip-arrow {
-  top: -5px;
-  border-width: 0 5px 5px;
+.mds-tooltip-placement-bottom .popper__arrow,
+.mds-tooltip-placement-bottom-start .popper__arrow,
+.mds-tooltip-placement-bottom-end .popper__arrow {
+  top: -6px;
+  border-width: 0 6px 6px;
   border-bottom-color: #354052;
 }
-.mds-tooltip-placement-bottom .mds-tooltip-light .mds-tooltip-inner,
-.mds-tooltip-placement-bottomLeft .mds-tooltip-light .mds-tooltip-inner,
-.mds-tooltip-placement-bottomRight .mds-tooltip-light .mds-tooltip-inner {
-  color: #354052;
-  background-color: #fff;
-}
-.mds-tooltip-placement-bottom .mds-tooltip-light .mds-tooltip-arrow,
-.mds-tooltip-placement-bottomLeft .mds-tooltip-light .mds-tooltip-arrow,
-.mds-tooltip-placement-bottomRight .mds-tooltip-light .mds-tooltip-arrow {
-  border-bottom-color: #fff;
-}
-.mds-tooltip-placement-bottom .mds-tooltip-arrow {
-  left: 50%;
+.mds-tooltip-placement-bottom .popper__arrow::after,
+.mds-tooltip-placement-bottom-start .popper__arrow::after,
+.mds-tooltip-placement-bottom-end .popper__arrow::after {
+  top: 1px;
+  border-top-color: #354052;
+  border-width: 0 5px 5px;
   margin-left: -5px;
 }
-.mds-tooltip-placement-bottomLeft .mds-tooltip-arrow {
-  left: 16px;
+.mds-tooltip-placement-bottom.light-mode .popper__arrow,
+.mds-tooltip-placement-bottom-start.light-mode .popper__arrow,
+.mds-tooltip-placement-bottom-end.light-mode .popper__arrow {
+  border-bottom-color: #ebeef5;
 }
-.mds-tooltip-placement-bottomRight .mds-tooltip-arrow {
-  right: 16px;
+.mds-tooltip-placement-bottom.light-mode .popper__arrow::after,
+.mds-tooltip-placement-bottom-start.light-mode .popper__arrow::after,
+.mds-tooltip-placement-bottom-end.light-mode .popper__arrow::after {
+  border-bottom-color: #fff;
 }
 /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
 /* stylelint-disable declaration-bang-space-before */
 /* stylelint-disable declaration-bang-space-before */
+.mds-popover-wrapper {
+  display: inline-block;
+}
 .mds-popover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1030;
-  cursor: auto;
-  user-select: text;
-  white-space: normal;
+  text-align: center;
+  border-radius: 4px;
+  padding: 10px;
   font-size: 12px;
   line-height: 1.5;
-  font-weight: normal;
-  text-align: left;
-}
-.mds-popover:after {
-  content: "";
-  position: absolute;
-  background: rgba(255, 255, 255, 0.01);
-}
-.mds-popover-hidden {
-  display: none;
-}
-.mds-popover-placement-top,
-.mds-popover-placement-topLeft,
-.mds-popover-placement-topRight {
-  margin-bottom: 8px;
-}
-.mds-popover-placement-right,
-.mds-popover-placement-rightTop,
-.mds-popover-placement-rightBottom {
-  margin-left: 8px;
-}
-.mds-popover-placement-bottom,
-.mds-popover-placement-bottomLeft,
-.mds-popover-placement-bottomRight {
-  margin-top: 8px;
-}
-.mds-popover-placement-left,
-.mds-popover-placement-leftTop,
-.mds-popover-placement-leftBottom {
-  margin-right: 8px;
-}
-.mds-popover-inner {
-  background-color: #fff;
-  background-clip: padding-box;
-  border-radius: 4px;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
-}
-.mds-popover-title {
-  width: 230px;
-  margin: 0 auto;
-  padding: 13px 16px;
-  padding-bottom: 5px;
-  min-height: 32px;
-  color: #666666;
-  font-weight: bold;
-  text-align: center;
-  font-size: 16px;
-}
-.mds-popover-inner-content {
-  padding: 9px 16px;
+  min-width: 150px;
+  word-wrap: break-word;
   font-size: 14px;
-  color: #666666;
-  text-align: center;
   background: #ffffff;
-  border-radius: 4px;
-  box-shadow: 0px 0px 12px 0px #d8dce6;
-}
-.mds-popover-message {
-  padding: 8px 0 16px;
-  font-size: 12px;
-  color: #666666;
-}
-.mds-popover-message > .mdsicon {
-  color: #ffbf00;
-  line-height: 17px;
-  position: absolute;
-}
-.mds-popover-message-title {
-  padding-left: 20px;
-}
-.mds-popover-buttons {
-  text-align: right;
-  margin-bottom: 8px;
-}
-.mds-popover-buttons button {
-  margin-left: 8px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
 }
-.mds-popover-arrow,
-.mds-popover-arrow:after {
+.mds-popover .popper__arrow,
+.mds-popover .popper__arrow::after {
   position: absolute;
   display: block;
   width: 0;
@@ -8149,116 +8296,113 @@ samp {
   border-color: transparent;
   border-style: solid;
 }
-.mds-popover-arrow {
-  border-width: 5px;
-}
-.mds-popover-arrow:after {
-  border-width: 4px;
-  content: "";
-}
-.mds-popover-placement-top > .mds-popover-content > .mds-popover-arrow,
-.mds-popover-placement-topLeft > .mds-popover-content > .mds-popover-arrow,
-.mds-popover-placement-topRight > .mds-popover-content > .mds-popover-arrow {
-  border-bottom-width: 0;
-  border-top-color: rgba(217, 217, 217, 0.7);
-  bottom: -5px;
-}
-.mds-popover-placement-top > .mds-popover-content > .mds-popover-arrow:after,
-.mds-popover-placement-topLeft > .mds-popover-content > .mds-popover-arrow:after,
-.mds-popover-placement-topRight > .mds-popover-content > .mds-popover-arrow:after {
+.mds-popover .popper__arrow::after {
   content: " ";
-  bottom: 1px;
-  margin-left: -4px;
-  border-bottom-width: 0;
-  border-top-color: #fff;
+  border-width: 6px;
 }
-.mds-popover-placement-top > .mds-popover-content > .mds-popover-arrow {
-  left: 50%;
-  margin-left: -5px;
+.mds-popover-hidden {
+  display: none;
 }
-.mds-popover-placement-topLeft > .mds-popover-content > .mds-popover-arrow {
-  left: 16px;
+.mds-popover-placement-top,
+.mds-popover-placement-top-start,
+.mds-popover-placement-top-end {
+  margin-bottom: 18px;
 }
-.mds-popover-placement-topRight > .mds-popover-content > .mds-popover-arrow {
-  right: 16px;
+.mds-popover-placement-right,
+.mds-popover-placement-right-start,
+.mds-popover-placement-right-end {
+  margin-left: 9px;
 }
-.mds-popover-placement-right > .mds-popover-content > .mds-popover-arrow,
-.mds-popover-placement-rightTop > .mds-popover-content > .mds-popover-arrow,
-.mds-popover-placement-rightBottom > .mds-popover-content > .mds-popover-arrow {
-  left: -5px;
-  border-left-width: 0;
-  border-right-color: rgba(217, 217, 217, 0.7);
+.mds-popover-placement-bottom,
+.mds-popover-placement-bottom-start,
+.mds-popover-placement-bottom-end {
+  margin-top: 18px;
 }
-.mds-popover-placement-right > .mds-popover-content > .mds-popover-arrow:after,
-.mds-popover-placement-rightTop > .mds-popover-content > .mds-popover-arrow:after,
-.mds-popover-placement-rightBottom > .mds-popover-content > .mds-popover-arrow:after {
-  content: " ";
-  left: 1px;
-  bottom: -4px;
-  border-left-width: 0;
-  border-right-color: #fff;
+.mds-popover-placement-left,
+.mds-popover-placement-left-start,
+.mds-popover-placement-left-end {
+  margin-right: 9px;
+}
+.mds-popover-placement-top .popper__arrow,
+.mds-popover-placement-top-start .popper__arrow,
+.mds-popover-placement-top-end .popper__arrow {
+  bottom: -6px;
+  border-width: 6px 6px 0;
+  border-top-color: #ebeef5;
+}
+.mds-popover-placement-top .popper__arrow::after,
+.mds-popover-placement-top-start .popper__arrow::after,
+.mds-popover-placement-top-end .popper__arrow::after {
+  bottom: 1px;
+  border-top-color: #ebeef5;
+  border-width: 5px 5px 0;
+  margin-left: -5px;
 }
-.mds-popover-placement-right > .mds-popover-content > .mds-popover-arrow {
-  top: 50%;
-  margin-top: -5px;
+.mds-popover-placement-top .popper__arrow::after,
+.mds-popover-placement-top-start .popper__arrow::after,
+.mds-popover-placement-top-end .popper__arrow::after {
+  border-top-color: #fff;
 }
-.mds-popover-placement-rightTop > .mds-popover-content > .mds-popover-arrow {
-  top: 12px;
+.mds-popover-placement-right .popper__arrow,
+.mds-popover-placement-right-start .popper__arrow,
+.mds-popover-placement-right-end .popper__arrow {
+  left: -6px;
+  border-width: 6px 6px 6px 0;
+  border-right-color: #ebeef5;
 }
-.mds-popover-placement-rightBottom > .mds-popover-content > .mds-popover-arrow {
-  bottom: 12px;
+.mds-popover-placement-right .popper__arrow::after,
+.mds-popover-placement-right-start .popper__arrow::after,
+.mds-popover-placement-right-end .popper__arrow::after {
+  left: 1px;
+  border-right-color: #ebeef5;
+  border-width: 5px 5px 5px 0;
+  bottom: -5px;
 }
-.mds-popover-placement-bottom > .mds-popover-content > .mds-popover-arrow,
-.mds-popover-placement-bottomLeft > .mds-popover-content > .mds-popover-arrow,
-.mds-popover-placement-bottomRight > .mds-popover-content > .mds-popover-arrow {
-  border-top-width: 0;
-  border-bottom-color: rgba(217, 217, 217, 0.7);
-  top: -5px;
+.mds-popover-placement-right .popper__arrow::after,
+.mds-popover-placement-right-start .popper__arrow::after,
+.mds-popover-placement-right-end .popper__arrow::after {
+  border-right-color: #fff;
 }
-.mds-popover-placement-bottom > .mds-popover-content > .mds-popover-arrow:after,
-.mds-popover-placement-bottomLeft > .mds-popover-content > .mds-popover-arrow:after,
-.mds-popover-placement-bottomRight > .mds-popover-content > .mds-popover-arrow:after {
-  content: " ";
-  top: 1px;
-  margin-left: -4px;
-  border-top-width: 0;
-  border-bottom-color: #fff;
+.mds-popover-placement-left .popper__arrow,
+.mds-popover-placement-left-start .popper__arrow,
+.mds-popover-placement-left-end .popper__arrow {
+  right: -6px;
+  border-width: 6px 0 6px 6px;
+  border-left-color: #ebeef5;
 }
-.mds-popover-placement-bottom > .mds-popover-content > .mds-popover-arrow {
-  left: 50%;
+.mds-popover-placement-left .popper__arrow::after,
+.mds-popover-placement-left-start .popper__arrow::after,
+.mds-popover-placement-left-end .popper__arrow::after {
+  right: 1px;
+  border-left-color: #ebeef5;
+  border-width: 5px 0 5px 5px;
   margin-left: -5px;
+  bottom: -5px;
 }
-.mds-popover-placement-bottomLeft > .mds-popover-content > .mds-popover-arrow {
-  left: 16px;
-}
-.mds-popover-placement-bottomRight > .mds-popover-content > .mds-popover-arrow {
-  right: 16px;
-}
-.mds-popover-placement-left > .mds-popover-content > .mds-popover-arrow,
-.mds-popover-placement-leftTop > .mds-popover-content > .mds-popover-arrow,
-.mds-popover-placement-leftBottom > .mds-popover-content > .mds-popover-arrow {
-  right: -5px;
-  border-right-width: 0;
-  border-left-color: rgba(217, 217, 217, 0.7);
-}
-.mds-popover-placement-left > .mds-popover-content > .mds-popover-arrow:after,
-.mds-popover-placement-leftTop > .mds-popover-content > .mds-popover-arrow:after,
-.mds-popover-placement-leftBottom > .mds-popover-content > .mds-popover-arrow:after {
-  content: " ";
-  right: 1px;
-  border-right-width: 0;
+.mds-popover-placement-left .popper__arrow::after,
+.mds-popover-placement-left-start .popper__arrow::after,
+.mds-popover-placement-left-end .popper__arrow::after {
   border-left-color: #fff;
-  bottom: -4px;
 }
-.mds-popover-placement-left > .mds-popover-content > .mds-popover-arrow {
-  top: 50%;
-  margin-top: -5px;
+.mds-popover-placement-bottom .popper__arrow,
+.mds-popover-placement-bottom-start .popper__arrow,
+.mds-popover-placement-bottom-end .popper__arrow {
+  top: -6px;
+  border-width: 0 6px 6px;
+  border-bottom-color: #ebeef5;
 }
-.mds-popover-placement-leftTop > .mds-popover-content > .mds-popover-arrow {
-  top: 12px;
+.mds-popover-placement-bottom .popper__arrow::after,
+.mds-popover-placement-bottom-start .popper__arrow::after,
+.mds-popover-placement-bottom-end .popper__arrow::after {
+  top: 1px;
+  border-top-color: #ebeef5;
+  border-width: 0 5px 5px;
+  margin-left: -5px;
 }
-.mds-popover-placement-leftBottom > .mds-popover-content > .mds-popover-arrow {
-  bottom: 12px;
+.mds-popover-placement-bottom .popper__arrow::after,
+.mds-popover-placement-bottom-start .popper__arrow::after,
+.mds-popover-placement-bottom-end .popper__arrow::after {
+  border-bottom-color: #fff;
 }
 /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
 /* stylelint-disable declaration-bang-space-before */