@elliemae/ds-basic 1.54.0-next.4 → 1.54.0-rc.1

package/css/dimsum.css

@@ -4661,14 +4661,12 @@ _:-ms-fullscreen, :root .em-ds-page-header-toolbar--ie-flex-basis-auto {
   .em-ds-page-header-v2-toolbar .em-ds-toolbar {
     height: auto;
     background: none; }
-    .em-ds-page-header-v2-toolbar .em-ds-toolbar > div {
-      align-items: center; }
-      .em-ds-page-header-v2-toolbar .em-ds-toolbar > div .em-ds-button {
-        margin-left: 0.92308rem; }
-      .em-ds-page-header-v2-toolbar .em-ds-toolbar > div .em-ds-input-addon-wrapper {
-        box-shadow: none; }
-        .em-ds-page-header-v2-toolbar .em-ds-toolbar > div .em-ds-input-addon-wrapper div {
-          height: 100%; }
+    .em-ds-page-header-v2-toolbar .em-ds-toolbar > div .em-ds-button {
+      margin-left: 0.92308rem; }
+    .em-ds-page-header-v2-toolbar .em-ds-toolbar > div .em-ds-input-addon-wrapper {
+      box-shadow: none; }
+      .em-ds-page-header-v2-toolbar .em-ds-toolbar > div .em-ds-input-addon-wrapper div {
+        height: 100%; }
 
 .em-ds-page-header-v2-back {
   display: flex;
@@ -8857,8 +8855,10 @@ div.em-ds-button {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  width: 100%;
+  min-width: 244px;
+  max-height: 449px;
+  overflow-y: scroll;
+  padding-top: 4px;
   padding-bottom: 4px;
   margin: 0 auto; }
   .em-ds-app-picker__wrapper:focus {
@@ -8883,52 +8883,67 @@ div.em-ds-button {
   width: 100%; }
 
 .em-ds-app-picker__section-title {
-  color: #697489;
-  font-size: size(m);
+  color: #353C46;
+  font-size: 0.8461rem;
   font-weight: bold;
-  margin: 12px 0 4px; }
+  margin: 8px 0 4px 0;
+  line-height: 1;
+  text-transform: uppercase; }
 
 .em-ds-app-picker__chip {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   border-radius: 2%;
+  padding: 8px 0 4px 0;
   margin: 4px;
-  padding: 6px;
   height: 68px;
   width: 68px;
-  color: #697489;
-  cursor: pointer; }
-  .em-ds-app-picker__chip:focus, .em-ds-app-picker__chip:hover {
-    outline: none;
-    border: calc(0.30769rem * 0.25) solid #1e79c2;
-    box-shadow: inset 0 0 0 1px #8cc2ed;
-    border-radius: 2px;
-    color: #353C46;
-    background-color: #FFFFFF; }
-  .em-ds-app-picker__chip:hover .app-picker__icon {
-    fill: #005181; }
-  .em-ds-app-picker__chip:active {
+  line-height: 1px;
+  background-color: #fff;
+  color: #1e79c2;
+  cursor: pointer;
+  border: 2px solid transparent; }
+  .em-ds-app-picker__chip:hover {
+    color: #005181;
+    background-color: #EBF6FF; }
+    .em-ds-app-picker__chip:hover .app-picker__icon {
+      fill: #005181; }
+  .em-ds-app-picker__chip:focus {
     outline: none;
-    border: calc(0.30769rem * 0.25) solid #006AA9;
-    border-radius: 2px;
-    box-shadow: none;
-    background-color: #ecf8ff; }
+    border: 2px solid #005181; }
   .em-ds-app-picker__chip--disabled {
     color: #697489;
     cursor: not-allowed; }
-    .em-ds-app-picker__chip--disabled:focus, .em-ds-app-picker__chip--disabled:active, .em-ds-app-picker__chip--disabled:hover {
-      background-color: #fcfcfc;
-      color: #697489;
-      border: 1px solid #697489;
-      outline: none;
-      outline-offset: none;
-      box-shadow: none; }
+    .em-ds-app-picker__chip--disabled .app-picker__icon {
+      fill: #697489; }
+    .em-ds-app-picker__chip--disabled:focus, .em-ds-app-picker__chip--disabled:hover {
+      background-color: #fff;
+      cursor: not-allowed;
+      border: 2px solid transparent; }
+      .em-ds-app-picker__chip--disabled:focus .em-ds-app-picker__chip-label, .em-ds-app-picker__chip--disabled:hover .em-ds-app-picker__chip-label {
+        color: #697489; }
     .em-ds-app-picker__chip--disabled:hover .app-picker__icon {
       fill: #697489; }
-  .em-ds-app-picker__chip--disabled .app-picker__icon {
-    fill: #697489; }
+  .em-ds-app-picker__chip--selected {
+    color: #005181;
+    background-color: #EBF6FF;
+    position: relative; }
+    .em-ds-app-picker__chip--selected .app-picker__icon {
+      fill: #005181; }
+    .em-ds-app-picker__chip--selected:focus {
+      border: 2px solid transparent; }
+      .em-ds-app-picker__chip--selected:focus::after {
+        border: 2px solid #005181; }
+    .em-ds-app-picker__chip--selected::after {
+      position: absolute;
+      content: '';
+      top: -2px;
+      left: -2px;
+      width: calc(100% + 4px);
+      height: calc(100% + 4px);
+      border: 1px solid #1e79c2;
+      border-radius: 2px; }
 
 .app-picker__icon {
   fill: #1e79c2; }
@@ -8937,15 +8952,18 @@ div.em-ds-button {
   background-color: transparent; }
 
 .em-ds-app-picker__chip-label {
-  font-size: 12px;
+  font-size: 0.8461rem;
   font-weight: 600;
-  margin: 5px; }
+  word-wrap: break-word;
+  margin: 4px 0;
+  line-height: 12px;
+  text-overflow: ellipsis; }
 
 .em-ds-app-picker__separator {
   border-top: 1px solid #E0E3E8;
   border-bottom: none;
   width: 99%;
-  margin: 0; }
+  margin-bottom: 0; }
 
 @keyframes pulse {
   0% {