@itwin/itwinui-css 0.29.1 → 0.33.0

package/css/all.css

@@ -717,6 +717,18 @@ html.iui-theme-dark{
     background-color:var(--iui-color-background-1-overlay);
     border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
     color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
+    .iui-button:enabled:hover .iui-notification-primary::before,
+    .iui-button:enabled:hover .iui-notification-positive::before,
+    .iui-button:enabled:hover .iui-notification-warning::before,
+    .iui-button:enabled:hover .iui-notification-negative::before, .iui-button:enabled:active .iui-notification-primary::before,
+    .iui-button:enabled:active .iui-notification-positive::before,
+    .iui-button:enabled:active .iui-notification-warning::before,
+    .iui-button:enabled:active .iui-notification-negative::before, .iui-button:focus-visible .iui-notification-primary::before,
+    .iui-button:focus-visible .iui-notification-positive::before,
+    .iui-button:focus-visible .iui-notification-warning::before,
+    .iui-button:focus-visible .iui-notification-negative::before{
+      border-color:#f2f2f2;
+      border-color:var(--iui-color-background-1-overlay); }
     .iui-button:enabled:hover > .iui-icon, .iui-button:enabled:active > .iui-icon, .iui-button:focus-visible > .iui-icon{
       fill:black;
       fill:var(--iui-icons-color-actionable-hover); }
@@ -1055,6 +1067,135 @@ html.iui-theme-dark{
         background-color:var(--iui-color-background-2);
         color:var(--iui-text-color-muted); }
 
+.iui-color-picker{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
+  background-color:#FFF;
+  background-color:var(--iui-color-background-1);
+  max-width:336px;
+  max-height:334px;
+  box-sizing:border-box;
+  border-radius:3px;
+  display:inline-flex;
+  padding:11px 12px;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  overflow-y:auto; }
+  @supports (overflow-y: overlay){
+    .iui-color-picker{
+      overflow-y:overlay; } }
+  .iui-color-picker.iui-advanced{
+    max-width:261px;
+    flex-direction:column; }
+
+.iui-color-palette{
+  display:flex;
+  flex-wrap:wrap; }
+  @supports (gap: 8px){
+    .iui-color-palette{
+      gap:8px; } }
+  .iui-color-palette button.iui-button.iui-borderless{
+    height:24px;
+    width:24px;
+    padding:0; }
+
+.iui-color-swatch{
+  height:24px;
+  width:24px;
+  cursor:pointer;
+  border-radius:5px;
+  background-color:var(--swatch-color);
+  margin-bottom:4px;
+  margin-right:4px;
+  box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+  box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
+  @supports (gap: 8px){
+    .iui-color-swatch{
+      margin-bottom:0;
+      margin-right:0; } }
+  .iui-color-swatch:hover{
+    box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+    box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
+  .iui-color-swatch:focus{
+    outline:0;
+    box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+    box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
+  .iui-color-swatch.iui-active{
+    box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+    box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
+    .iui-color-swatch.iui-active:hover{
+      box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
+      box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
+    .iui-color-swatch.iui-active:focus{
+      box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
+      box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
+    .iui-color-swatch.iui-active:focus:not(:focus-visible){
+      box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
+      box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
+
+.iui-saved-colors{
+  margin-top:11px;
+  margin-bottom:5.5px;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  flex-shrink:0; }
+
+.iui-color-selection-wrapper{
+  display:flex; }
+
+.iui-color-field{
+  position:relative;
+  cursor:crosshair;
+  width:209px;
+  height:209px;
+  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--color));
+  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--color)); }
+
+.iui-color-slider{
+  margin-left:12px;
+  margin-right:8px;
+  position:relative;
+  width:8px;
+  border-radius:3px;
+  background:linear-gradient(#F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%);
+  background:linear-gradient(#F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%); }
+
+.iui-color-dot{
+  position:absolute;
+  top:var(--top, 0%);
+  left:var(--left, 0%);
+  width:16px;
+  height:16px;
+  border-radius:50%;
+  transform:translate(-8px, -8px);
+  cursor:-webkit-grab;
+  cursor:grab;
+  box-shadow:white 0 0 0 1px, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  background-color:var(--selected-color);
+  box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
+  background-color:var(--selected-color); }
+  .iui-color-dot:active{
+    cursor:-webkit-grabbing;
+    cursor:grabbing; }
+  .iui-color-dot.iui-white{
+    transform:translate(-4px, -9px);
+    box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
+    background-color:#FFF;
+    box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
+    background-color:#FFF; }
+  .iui-color-dot:hover{
+    box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+    box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
+  .iui-color-dot:focus{
+    outline:0;
+    box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
+    box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)); }
+
 .iui-date-picker{
   margin:0;
   padding:0;
@@ -1125,9 +1266,8 @@ html.iui-theme-dark{
     .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date{
       cursor:pointer;
       display:inline-block;
-      width:24px;
-      line-height:24px;
-      margin:0 4px; }
+      width:33px;
+      line-height:33px; }
       .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date:focus{
         outline:0;
         box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
@@ -1267,7 +1407,7 @@ html.iui-theme-dark{
       opacity:1; }
     @media (prefers-reduced-motion: no-preference){
       .iui-expandable-block .iui-expandable-content.iui-enter-active, .iui-expandable-block .iui-expandable-content.iui-exit-active{
-        transition:opacity 0.2s ease-out, height 0.2s ease-out; } }
+        transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
     .iui-expandable-block .iui-expandable-content > div{
       padding:11px 12px; }
   .iui-expandable-block:hover > .iui-header{
@@ -1302,6 +1442,35 @@ html.iui-theme-dark{
     .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
       transform:rotate(90deg); }
 
+.iui-fieldset{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  padding:11px 12px;
+  border-radius:3px;
+  border:1px solid #DCE0E3;
+  background-color:#FFF;
+  border:1px solid var(--iui-color-background-4);
+  background-color:var(--iui-color-background-1); }
+  .iui-fieldset legend{
+    font-size:16px;
+    padding:1.5px 8px;
+    border-radius:3px;
+    -webkit-user-select:none;
+       -moz-user-select:none;
+        -ms-user-select:none;
+            user-select:none;
+    background-color:#DCE0E3;
+    color:rgba(0, 0, 0, 0.8);
+    background-color:var(--iui-color-background-4);
+    color:var(--iui-text-color); }
+  .iui-fieldset[disabled]{
+    cursor:not-allowed; }
+    .iui-fieldset[disabled] legend{
+      color:rgba(0, 0, 0, 0.4);
+      color:var(--iui-text-color-muted); }
+
 .iui-file-upload{
   margin:0;
   padding:0;
@@ -1389,35 +1558,6 @@ html.iui-theme-dark{
       fill:#008BE1;
       fill:var(--iui-icons-color-primary); }
 
-.iui-fieldset{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  padding:11px 12px;
-  border-radius:3px;
-  border:1px solid #DCE0E3;
-  background-color:#FFF;
-  border:1px solid var(--iui-color-background-4);
-  background-color:var(--iui-color-background-1); }
-  .iui-fieldset legend{
-    font-size:16px;
-    padding:1.5px 8px;
-    border-radius:3px;
-    -webkit-user-select:none;
-       -moz-user-select:none;
-        -ms-user-select:none;
-            user-select:none;
-    background-color:#DCE0E3;
-    color:rgba(0, 0, 0, 0.8);
-    background-color:var(--iui-color-background-4);
-    color:var(--iui-text-color); }
-  .iui-fieldset[disabled]{
-    cursor:not-allowed; }
-    .iui-fieldset[disabled] legend{
-      color:rgba(0, 0, 0, 0.4);
-      color:var(--iui-text-color-muted); }
-
 .iui-legal-footer{
   margin:0;
   padding:0;
@@ -1974,240 +2114,419 @@ html.iui-theme-dark{
     fill:#D30A0A;
     fill:var(--iui-icons-color-negative); }
 
+.iui-information-panel-wrapper{
+  position:relative;
+  overflow:hidden; }
+
+.iui-information-panel{
+  position:absolute;
+  opacity:0;
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  z-index:2;
+  background-color:#FFF;
+  background-color:var(--iui-color-background-1); }
+  .iui-information-panel > .iui-resizer{
+    display:none;
+    position:absolute;
+    touch-action:none;
+    z-index:1000; }
+    .iui-information-panel > .iui-resizer > .iui-resizer-bar{
+      background-color:#C7CCD1;
+      background-color:var(--iui-color-background-5); }
+    .iui-information-panel > .iui-resizer:hover > .iui-resizer-bar{
+      background-color:#008BE1;
+      background-color:var(--iui-color-foreground-primary); }
+  .iui-information-panel.iui-information-panel-visible{
+    opacity:1; }
+    .iui-information-panel.iui-information-panel-visible > .iui-resizer{
+      display:flex; }
+  .iui-information-panel .iui-information-header,
+  .iui-information-panel .iui-information-body{
+    padding-left:12px;
+    padding-right:12px;
+    box-sizing:border-box; }
+  .iui-information-panel .iui-information-header{
+    height:66px;
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    background-color:#EEF0F3;
+    background-color:var(--iui-color-background-3); }
+    .iui-information-panel .iui-information-header .iui-information-header-label{
+      display:flex;
+      align-items:center;
+      overflow:hidden; }
+      .iui-information-panel .iui-information-header .iui-information-header-label > *{
+        white-space:nowrap;
+        overflow:hidden;
+        text-overflow:ellipsis;
+        -webkit-user-select:all;
+           -moz-user-select:all;
+                user-select:all; }
+      .iui-information-panel .iui-information-header .iui-information-header-label svg{
+        display:flex;
+        width:24px;
+        height:24px;
+        margin-right:8px;
+        fill:rgba(0, 0, 0, 0.4);
+        fill:var(--iui-icons-color); }
+    .iui-information-panel .iui-information-header .iui-information-header-actions{
+      flex-shrink:0;
+      margin-left:8px; }
+  .iui-information-panel .iui-information-body{
+    padding-top:11px;
+    padding-bottom:11px;
+    height:100%;
+    overflow-x:hidden;
+    overflow-y:overlay; }
+    .iui-information-panel .iui-information-body > hr{
+      border-color:#DCE0E3;
+      border-color:var(--iui-color-background-4); }
+  .iui-information-panel.iui-right{
+    top:0;
+    width:384px;
+    min-width:192px;
+    height:100%;
+    right:-384px;
+    box-shadow:-1px 0 14px rgba(0, 0, 0, 0.25);
+    transition:right 0.2s ease-out, opacity 0.2s ease; }
+    .iui-information-panel.iui-right > .iui-resizer{
+      height:100%;
+      width:16px;
+      top:0;
+      cursor:ew-resize;
+      justify-content:center; }
+      .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
+        height:100%;
+        width:1px; }
+        @media (prefers-reduced-motion: no-preference){
+          .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
+            transition:background-color 0.2s ease-out, width 0.2s ease-out; } }
+      .iui-information-panel.iui-right > .iui-resizer:hover > .iui-resizer-bar{
+        width:4px; }
+    .iui-information-panel.iui-right > .iui-resizer{
+      left:-8px; }
+    .iui-information-panel.iui-right.iui-information-panel-visible{
+      right:0; }
+  .iui-information-panel.iui-bottom{
+    left:0;
+    height:384px;
+    min-height:192px;
+    width:100%;
+    bottom:-384px;
+    box-shadow:0 -1px 14px rgba(0, 0, 0, 0.25);
+    transition:bottom 0.2s ease-out, opacity 0.2s ease; }
+    .iui-information-panel.iui-bottom > .iui-resizer{
+      width:100%;
+      height:16px;
+      left:0;
+      cursor:ns-resize;
+      align-items:center; }
+      .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
+        width:100%;
+        height:1px; }
+        @media (prefers-reduced-motion: no-preference){
+          .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
+            transition:background-color 0.2s ease-out, height 0.2s ease-out; } }
+      .iui-information-panel.iui-bottom > .iui-resizer:hover > .iui-resizer-bar{
+        height:4px; }
+    .iui-information-panel.iui-bottom > .iui-resizer{
+      top:-8px; }
+    .iui-information-panel.iui-bottom.iui-information-panel-visible{
+      bottom:0; }
+
 .iui-input-container{
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
-  display:flex;
-  flex-direction:column;
-  position:relative;
-  text-align:left;
-  font-weight:400;
+  display:-ms-grid;
+  display:grid;
+  -ms-grid-rows:auto auto;
+  -ms-grid-columns:auto 1fr;
+      grid-template:'label label' 'inputs inputs' / auto 1fr;
   cursor:default; }
+  .iui-input-container.iui-inline-icon:not(.iui-inline-label) .iui-input-icon{
+    -ms-grid-row:2;
+    -ms-grid-column:2; }
+  .iui-input-container.iui-inline-icon > .iui-input,
+  .iui-input-container.iui-inline-icon > .iui-textarea{
+    padding-right:40px; }
+    .iui-input-container.iui-inline-icon > .iui-input:last-child,
+    .iui-input-container.iui-inline-icon > .iui-textarea:last-child{
+      padding-right:12px; }
+  .iui-input-container.iui-with-message{
+    -ms-grid-rows:auto auto auto;
+    -ms-grid-columns:auto 1fr;
+        grid-template:'label label' 'inputs inputs' 'icon message' / auto 1fr; }
+    .iui-input-container.iui-with-message:not(.iui-inline-icon) .iui-input-icon{
+      margin-top:3px; }
+  .iui-input-container .iui-input,
+  .iui-input-container .iui-textarea,
+  .iui-input-container .iui-input-group,
+  .iui-input-container .iui-select{
+    -ms-grid-row:2;
+    -ms-grid-column:1;
+    -ms-grid-column-span:2;
+    grid-area:inputs;
+    -ms-grid-row:2;
+    -ms-grid-column:1;
+    -ms-grid-column-span:2; }
   label.iui-input-container{
     cursor:pointer; }
     label.iui-input-container.iui-disabled{
       cursor:not-allowed; }
   .iui-input-container.iui-disabled label{
     cursor:not-allowed; }
+  .iui-input-container .iui-checkbox,
+  .iui-input-container .iui-radio{
+    min-height:22px; }
+  .iui-input-container.iui-inline-label{
+    -ms-grid-rows:auto;
+    -ms-grid-columns:auto 1fr auto;
+        grid-template:'label inputs icon' / auto 1fr auto; }
+    div.iui-input-container.iui-inline-label{
+      -ms-grid-columns:auto min-content auto; }
+    .iui-input-container.iui-inline-label .iui-input,
+    .iui-input-container.iui-inline-label .iui-textarea,
+    .iui-input-container.iui-inline-label .iui-input-group,
+    .iui-input-container.iui-inline-label .iui-select{
+      -ms-grid-row:1;
+      -ms-grid-column:2; }
+    .iui-input-container.iui-inline-label .iui-input-icon{
+      -ms-grid-row:1;
+      -ms-grid-column:3; }
+    .iui-input-container.iui-inline-label.iui-with-message{
+      -ms-grid-rows:auto auto;
+      -ms-grid-columns:auto auto 1fr;
+          grid-template:'label inputs inputs' '. icon message' / auto auto 1fr; }
+      .iui-input-container.iui-inline-label.iui-with-message:not(.iui-inline-icon) .iui-input-icon{
+        -ms-grid-row:2;
+        -ms-grid-column:2; }
+      .iui-input-container.iui-inline-label.iui-with-message .iui-message{
+        -ms-grid-row:2;
+        -ms-grid-column:3; }
+    .iui-input-container.iui-inline-label > .iui-input-group{
+      display:flex;
+      gap:16px; }
+      .iui-input-container.iui-inline-label > .iui-input-group > .iui-checkbox,
+      .iui-input-container.iui-inline-label > .iui-input-group > .iui-radio,
+      .iui-input-container.iui-inline-label > .iui-input-group > .iui-toggle-switch{
+        margin-right:16px; }
+        @supports (gap: 16px){
+          .iui-input-container.iui-inline-label > .iui-input-group > .iui-checkbox,
+          .iui-input-container.iui-inline-label > .iui-input-group > .iui-radio,
+          .iui-input-container.iui-inline-label > .iui-input-group > .iui-toggle-switch{
+            margin-right:0; } }
+      .iui-input-container.iui-inline-label > .iui-input-group:not(:last-child){
+        margin-right:16px; }
   .iui-input-container > .iui-label{
-    margin-bottom:3px;
-    font-weight:600; }
+    -ms-grid-row:1;
+    -ms-grid-column:1;
+    -ms-grid-column-span:2;
+    font-weight:600;
+    grid-area:label;
+    -ms-grid-row-align:center;
+        align-self:center;
+    margin-bottom:3px; }
     .iui-input-container > .iui-label.iui-required::after{
       content:' *';
       color:#D30A0A;
       color:var(--iui-color-foreground-negative); }
-  .iui-input-container > .iui-message{
+  .iui-input-container .iui-input-icon{
+    -ms-grid-row:3;
+    -ms-grid-column:1;
     display:flex;
-    width:-webkit-fit-content;
-    width:-moz-fit-content;
-    width:fit-content;
-    align-items:center;
+    grid-area:icon;
+    width:16px;
+    height:16px;
+    -ms-grid-row-align:center;
+        align-self:center;
+    fill:rgba(0, 0, 0, 0.4);
+    fill:var(--iui-icons-color); }
+    .iui-input-container .iui-input-icon:not(:last-child){
+      margin-right:4px; }
+  .iui-input-container .iui-message{
+    -ms-grid-row:3;
+    -ms-grid-column:2;
     font-size:12px;
-    line-height:22px;
+    grid-area:message;
     margin-top:3px;
     color:rgba(0, 0, 0, 0.4);
     color:var(--iui-text-color-muted); }
-    .iui-input-container > .iui-message svg{
-      width:16px;
-      height:16px;
-      display:flex;
-      margin-right:4px;
-      fill:rgba(0, 0, 0, 0.4);
-      fill:var(--iui-icons-color); }
-    .iui-input-container > .iui-message > .iui-borderless{
-      border-top-left-radius:0;
-      border-bottom-left-radius:0; }
-      .iui-input-container > .iui-message > .iui-borderless svg{
-        fill:rgba(0, 0, 0, 0.8);
-        fill:var(--iui-icons-color-actionable); }
-    .iui-input-container > .iui-message a{
+    .iui-input-container .iui-message a{
       -webkit-user-select:none;
          -moz-user-select:none;
           -ms-user-select:none;
               user-select:none; }
-  .iui-input-container > .iui-checkbox,
-  .iui-input-container > .iui-radio{
-    min-height:22px; }
-  .iui-input-container.iui-inline{
-    flex-direction:row;
-    align-items:center; }
-    .iui-input-container.iui-inline > .iui-label{
-      flex-shrink:0;
-      margin:0 16px 0 0; }
-      .iui-input-container.iui-inline > .iui-label.iui-required{
-        margin-right:6px; }
-    .iui-input-container.iui-inline > .iui-checkbox:not(:last-child),
-    .iui-input-container.iui-inline > .iui-radio:not(:last-child),
-    .iui-input-container.iui-inline > .iui-toggle-switch:not(:last-child){
-      margin-right:16px; }
-    .iui-input-container.iui-inline > .iui-message{
-      margin:0; }
-      .iui-input-container.iui-inline > .iui-message svg:not(.iui-icon){
-        margin-right:0; }
-    .iui-input-container.iui-inline > .iui-input,
-    .iui-input-container.iui-inline > .iui-textarea{
-      padding-right:40px; }
-      .iui-input-container.iui-inline > .iui-input + .iui-message,
-      .iui-input-container.iui-inline > .iui-textarea + .iui-message{
-        position:absolute;
-        top:50%;
-        right:0;
-        transform:translateY(-50%); }
-        .iui-input-container.iui-inline > .iui-input + .iui-message svg:not(.iui-icon),
-        .iui-input-container.iui-inline > .iui-textarea + .iui-message svg:not(.iui-icon){
-          margin-right:12px; }
-      .iui-input-container.iui-inline > .iui-input:last-child,
-      .iui-input-container.iui-inline > .iui-textarea:last-child{
-        padding-right:12px; }
+  .iui-input-container.iui-inline-label > .iui-label{
+    margin:0 16px 0 0;
+    -ms-grid-column-span:1; }
+    .iui-input-container.iui-inline-label > .iui-label.iui-required{
+      margin-right:6px; }
+  .iui-input-container.iui-inline-icon .iui-input-icon{
+    -ms-grid-row:1;
+    -ms-grid-column:3;
+    grid-area:inputs;
+    -ms-grid-column-align:end;
+        justify-self:end;
+    margin:0 12px 0 0;
+    position:relative; }
+    .iui-input-container.iui-inline-icon .iui-input-icon.iui-button{
+      height:100%;
+      width:-webkit-fit-content;
+      width:-moz-fit-content;
+      width:fit-content;
+      margin-right:0;
+      border-top-left-radius:0;
+      border-bottom-left-radius:0; }
+    .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable{
+      align-items:center;
+      height:90%;
+      margin-right:1px;
+      padding:0 12px;
+      cursor:pointer;
+      background-position:center;
+      transition:background 0.4s ease-out; }
+      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:hover{
+        background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
+      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:active{
+        background-color:var(--iui-color-background-2);
+        background-size:100%;
+        transition:background 0s; }
+      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable svg{
+        width:16px;
+        height:16px;
+        fill:rgba(0, 0, 0, 0.4);
+        fill:var(--iui-icons-color);
+        transition:transform 0.2s ease-out; }
+      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable.iui-open svg{
+        transform:rotate(180deg); }
   .iui-input-container.iui-positive *::-moz-selection{
     background-color:rgba(83, 162, 26, 0.4);
     background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
   .iui-input-container.iui-positive *::selection{
     background-color:rgba(83, 162, 26, 0.4);
     background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
-  .iui-input-container.iui-positive > .iui-message{
+  .iui-input-container.iui-positive .iui-input-icon{
+    fill:#53A21A;
+    fill:var(--iui-color-foreground-positive); }
+  .iui-input-container.iui-positive .iui-message{
     color:#53A21A;
     color:var(--iui-color-foreground-positive); }
-    .iui-input-container.iui-positive > .iui-message svg{
-      fill:#53A21A;
-      fill:var(--iui-color-foreground-positive); }
-    .iui-input-container.iui-positive > .iui-message a{
+    .iui-input-container.iui-positive .iui-message a{
       text-decoration:underline;
       color:#53A21A;
       color:var(--iui-color-foreground-positive); }
-      .iui-input-container.iui-positive > .iui-message a:hover{
+      .iui-input-container.iui-positive .iui-message a:hover{
         text-decoration:none;
         color:#3c7613;
         color:var(--iui-color-foreground-positive-overlay); }
-  .iui-input-container.iui-positive > input,
   .iui-input-container.iui-positive > .iui-input,
-  .iui-input-container.iui-positive > textarea,
   .iui-input-container.iui-positive > .iui-textarea,
   .iui-input-container.iui-positive > .iui-select > .iui-select-button{
     padding-bottom:6px;
     border-bottom:2px solid #53A21A;
     border-bottom:2px solid var(--iui-color-foreground-positive); }
-    .iui-input-container.iui-positive > input.iui-small,
     .iui-input-container.iui-positive > .iui-input.iui-small,
-    .iui-input-container.iui-positive > textarea.iui-small,
     .iui-input-container.iui-positive > .iui-textarea.iui-small,
     .iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-small{
       padding-bottom:0.5px; }
-    .iui-input-container.iui-positive > input.iui-large,
     .iui-input-container.iui-positive > .iui-input.iui-large,
-    .iui-input-container.iui-positive > textarea.iui-large,
     .iui-input-container.iui-positive > .iui-textarea.iui-large,
     .iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-large{
       padding-bottom:11.5px; }
-    .iui-input-container.iui-positive > input:focus,
     .iui-input-container.iui-positive > .iui-input:focus,
-    .iui-input-container.iui-positive > textarea:focus,
     .iui-input-container.iui-positive > .iui-textarea:focus,
     .iui-input-container.iui-positive > .iui-select > .iui-select-button:focus{
       border-bottom:2px solid #53A21A;
       box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
       border-bottom:2px solid var(--iui-color-foreground-positive);
       box-shadow:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5)) 0 0 0 2px; }
-  .iui-input-container.iui-warning *::-moz-selection{
-    background-color:rgba(241, 139, 18, 0.4);
-    background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
-  .iui-input-container.iui-warning *::selection{
-    background-color:rgba(241, 139, 18, 0.4);
-    background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
-  .iui-input-container.iui-warning > .iui-message{
-    color:#F18B12;
-    color:var(--iui-color-foreground-warning); }
-    .iui-input-container.iui-warning > .iui-message svg{
-      fill:#F18B12;
-      fill:var(--iui-color-foreground-warning); }
-    .iui-input-container.iui-warning > .iui-message a{
-      text-decoration:underline;
-      color:#F18B12;
-      color:var(--iui-color-foreground-warning); }
-      .iui-input-container.iui-warning > .iui-message a:hover{
-        text-decoration:none;
-        color:#c4700c;
-        color:var(--iui-color-foreground-warning-overlay); }
-  .iui-input-container.iui-warning > input,
-  .iui-input-container.iui-warning > .iui-input,
-  .iui-input-container.iui-warning > textarea,
-  .iui-input-container.iui-warning > .iui-textarea,
-  .iui-input-container.iui-warning > .iui-select > .iui-select-button{
-    padding-bottom:6px;
-    border-bottom:2px solid #F18B12;
-    border-bottom:2px solid var(--iui-color-foreground-warning); }
-    .iui-input-container.iui-warning > input.iui-small,
-    .iui-input-container.iui-warning > .iui-input.iui-small,
-    .iui-input-container.iui-warning > textarea.iui-small,
-    .iui-input-container.iui-warning > .iui-textarea.iui-small,
-    .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-small{
-      padding-bottom:0.5px; }
-    .iui-input-container.iui-warning > input.iui-large,
-    .iui-input-container.iui-warning > .iui-input.iui-large,
-    .iui-input-container.iui-warning > textarea.iui-large,
-    .iui-input-container.iui-warning > .iui-textarea.iui-large,
-    .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-large{
-      padding-bottom:11.5px; }
-    .iui-input-container.iui-warning > input:focus,
-    .iui-input-container.iui-warning > .iui-input:focus,
-    .iui-input-container.iui-warning > textarea:focus,
-    .iui-input-container.iui-warning > .iui-textarea:focus,
-    .iui-input-container.iui-warning > .iui-select > .iui-select-button:focus{
-      border-bottom:2px solid #F18B12;
-      box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
-      border-bottom:2px solid var(--iui-color-foreground-warning);
-      box-shadow:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5)) 0 0 0 2px; }
   .iui-input-container.iui-negative *::-moz-selection{
     background-color:rgba(211, 10, 10, 0.4);
     background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
   .iui-input-container.iui-negative *::selection{
     background-color:rgba(211, 10, 10, 0.4);
     background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
-  .iui-input-container.iui-negative > .iui-message{
+  .iui-input-container.iui-negative .iui-input-icon{
+    fill:#D30A0A;
+    fill:var(--iui-color-foreground-negative); }
+  .iui-input-container.iui-negative .iui-message{
     color:#D30A0A;
     color:var(--iui-color-foreground-negative); }
-    .iui-input-container.iui-negative > .iui-message svg{
-      fill:#D30A0A;
-      fill:var(--iui-color-foreground-negative); }
-    .iui-input-container.iui-negative > .iui-message a{
+    .iui-input-container.iui-negative .iui-message a{
       text-decoration:underline;
       color:#D30A0A;
       color:var(--iui-color-foreground-negative); }
-      .iui-input-container.iui-negative > .iui-message a:hover{
+      .iui-input-container.iui-negative .iui-message a:hover{
         text-decoration:none;
         color:#a20808;
         color:var(--iui-color-foreground-negative-overlay); }
-  .iui-input-container.iui-negative > input,
   .iui-input-container.iui-negative > .iui-input,
-  .iui-input-container.iui-negative > textarea,
   .iui-input-container.iui-negative > .iui-textarea,
   .iui-input-container.iui-negative > .iui-select > .iui-select-button{
     padding-bottom:6px;
     border-bottom:2px solid #D30A0A;
     border-bottom:2px solid var(--iui-color-foreground-negative); }
-    .iui-input-container.iui-negative > input.iui-small,
     .iui-input-container.iui-negative > .iui-input.iui-small,
-    .iui-input-container.iui-negative > textarea.iui-small,
     .iui-input-container.iui-negative > .iui-textarea.iui-small,
     .iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-small{
       padding-bottom:0.5px; }
-    .iui-input-container.iui-negative > input.iui-large,
     .iui-input-container.iui-negative > .iui-input.iui-large,
-    .iui-input-container.iui-negative > textarea.iui-large,
     .iui-input-container.iui-negative > .iui-textarea.iui-large,
     .iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-large{
       padding-bottom:11.5px; }
-    .iui-input-container.iui-negative > input:focus,
     .iui-input-container.iui-negative > .iui-input:focus,
-    .iui-input-container.iui-negative > textarea:focus,
     .iui-input-container.iui-negative > .iui-textarea:focus,
     .iui-input-container.iui-negative > .iui-select > .iui-select-button:focus{
       border-bottom:2px solid #D30A0A;
       box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
       border-bottom:2px solid var(--iui-color-foreground-negative);
       box-shadow:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5)) 0 0 0 2px; }
+  .iui-input-container.iui-warning *::-moz-selection{
+    background-color:rgba(241, 139, 18, 0.4);
+    background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
+  .iui-input-container.iui-warning *::selection{
+    background-color:rgba(241, 139, 18, 0.4);
+    background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
+  .iui-input-container.iui-warning .iui-input-icon{
+    fill:#F18B12;
+    fill:var(--iui-color-foreground-warning); }
+  .iui-input-container.iui-warning .iui-message{
+    color:#F18B12;
+    color:var(--iui-color-foreground-warning); }
+    .iui-input-container.iui-warning .iui-message a{
+      text-decoration:underline;
+      color:#F18B12;
+      color:var(--iui-color-foreground-warning); }
+      .iui-input-container.iui-warning .iui-message a:hover{
+        text-decoration:none;
+        color:#c4700c;
+        color:var(--iui-color-foreground-warning-overlay); }
+  .iui-input-container.iui-warning > .iui-input,
+  .iui-input-container.iui-warning > .iui-textarea,
+  .iui-input-container.iui-warning > .iui-select > .iui-select-button{
+    padding-bottom:6px;
+    border-bottom:2px solid #F18B12;
+    border-bottom:2px solid var(--iui-color-foreground-warning); }
+    .iui-input-container.iui-warning > .iui-input.iui-small,
+    .iui-input-container.iui-warning > .iui-textarea.iui-small,
+    .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-small{
+      padding-bottom:0.5px; }
+    .iui-input-container.iui-warning > .iui-input.iui-large,
+    .iui-input-container.iui-warning > .iui-textarea.iui-large,
+    .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-large{
+      padding-bottom:11.5px; }
+    .iui-input-container.iui-warning > .iui-input:focus,
+    .iui-input-container.iui-warning > .iui-textarea:focus,
+    .iui-input-container.iui-warning > .iui-select > .iui-select-button:focus{
+      border-bottom:2px solid #F18B12;
+      box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
+      border-bottom:2px solid var(--iui-color-foreground-warning);
+      box-shadow:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5)) 0 0 0 2px; }
 
 .iui-input{
   margin:0;
@@ -3150,7 +3469,7 @@ html.iui-theme-dark{
   .iui-menu-item:hover{
     background-color:rgba(0, 139, 225, 0.1);
     background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
-  .iui-menu-item:focus{
+  .iui-menu-item:focus, .iui-menu-item.iui-focused{
     outline:thin solid var(--iui-color-foreground-primary);
     outline-offset:-1px;
     outline:thin solid var(--iui-color-foreground-primary);
@@ -3171,7 +3490,7 @@ html.iui-theme-dark{
   .iui-menu-item.iui-active > .iui-icon{
     fill:#008BE1;
     fill:var(--iui-icons-color-primary); }
-  .iui-menu-item.iui-active:focus{
+  .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
     outline-width:2px;
     outline-offset:-2px; }
   .iui-menu-item.iui-active:focus:not(:focus-visible){
@@ -3188,6 +3507,9 @@ html.iui-theme-dark{
       fill:rgba(0, 0, 0, 0.2);
       fill:var(--iui-icons-color-actionable-disabled); }
 
+.iui-menu-content{
+  padding:11px 13px; }
+
 .iui-menu-divider{
   height:1px;
   width:calc(100% - 24px);
@@ -3308,6 +3630,221 @@ html.iui-theme-dark{
     .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-button{
       margin:0 4px; }
 
+.iui-notification-primary{
+  position:relative; }
+  .iui-notification-primary::before{
+    content:'';
+    position:absolute;
+    width:8px;
+    height:8px;
+    top:-6px;
+    right:-6px;
+    border-radius:100%;
+    background-color:#008BE1;
+    border:2px solid #FFF;
+    background-color:var(--iui-color-foreground-primary);
+    border:2px solid var(--iui-color-background-1); }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-notification-primary::before{
+        transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-notification-primary.iui-urgent::before{
+      -webkit-animation:pulse-primary 2s infinite;
+              animation:pulse-primary 2s infinite; } }
+  @media (prefers-reduced-motion: no-preference){
+    @-webkit-keyframes pulse-primary{
+      0%{
+        box-shadow:0 0 0 0 #008be1;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(0, 139, 225, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(0, 139, 225, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0); } }
+    @keyframes pulse-primary{
+      0%{
+        box-shadow:0 0 0 0 #008be1;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(0, 139, 225, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(0, 139, 225, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0); } } }
+
+.iui-notification-positive{
+  position:relative; }
+  .iui-notification-positive::before{
+    content:'';
+    position:absolute;
+    width:8px;
+    height:8px;
+    top:-6px;
+    right:-6px;
+    border-radius:100%;
+    background-color:#53A21A;
+    border:2px solid #FFF;
+    background-color:var(--iui-color-foreground-positive);
+    border:2px solid var(--iui-color-background-1); }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-notification-positive::before{
+        transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-notification-positive.iui-urgent::before{
+      -webkit-animation:pulse-positive 2s infinite;
+              animation:pulse-positive 2s infinite; } }
+  @media (prefers-reduced-motion: no-preference){
+    @-webkit-keyframes pulse-positive{
+      0%{
+        box-shadow:0 0 0 0 #53a21a;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0); } }
+    @keyframes pulse-positive{
+      0%{
+        box-shadow:0 0 0 0 #53a21a;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0); } } }
+
+.iui-notification-warning{
+  position:relative; }
+  .iui-notification-warning::before{
+    content:'';
+    position:absolute;
+    width:8px;
+    height:8px;
+    top:-6px;
+    right:-6px;
+    border-radius:100%;
+    background-color:#F18B12;
+    border:2px solid #FFF;
+    background-color:var(--iui-color-foreground-warning);
+    border:2px solid var(--iui-color-background-1); }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-notification-warning::before{
+        transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-notification-warning.iui-urgent::before{
+      -webkit-animation:pulse-warning 2s infinite;
+              animation:pulse-warning 2s infinite; } }
+  @media (prefers-reduced-motion: no-preference){
+    @-webkit-keyframes pulse-warning{
+      0%{
+        box-shadow:0 0 0 0 #f18b12;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(241, 139, 18, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(241, 139, 18, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0); } }
+    @keyframes pulse-warning{
+      0%{
+        box-shadow:0 0 0 0 #f18b12;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(241, 139, 18, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(241, 139, 18, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0); } } }
+
+.iui-notification-negative{
+  position:relative; }
+  .iui-notification-negative::before{
+    content:'';
+    position:absolute;
+    width:8px;
+    height:8px;
+    top:-6px;
+    right:-6px;
+    border-radius:100%;
+    background-color:#D30A0A;
+    border:2px solid #FFF;
+    background-color:var(--iui-color-foreground-negative);
+    border:2px solid var(--iui-color-background-1); }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-notification-negative::before{
+        transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-notification-negative.iui-urgent::before{
+      -webkit-animation:pulse-negative 2s infinite;
+              animation:pulse-negative 2s infinite; } }
+  @media (prefers-reduced-motion: no-preference){
+    @-webkit-keyframes pulse-negative{
+      0%{
+        box-shadow:0 0 0 0 #d30a0a;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(211, 10, 10, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(211, 10, 10, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0); } }
+    @keyframes pulse-negative{
+      0%{
+        box-shadow:0 0 0 0 #d30a0a;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(211, 10, 10, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(211, 10, 10, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0); } } }
+
+.iui-notification-accessory{
+  position:relative; }
+  .iui-notification-accessory::before{
+    content:'';
+    position:absolute;
+    width:8px;
+    height:8px;
+    top:-6px;
+    right:-6px;
+    border-radius:100%;
+    background-color:#FFF;
+    border:2px solid #FFF;
+    background-color:var(--iui-color-foreground-accessory);
+    border:2px solid var(--iui-color-background-1); }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-notification-accessory::before{
+        transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-notification-accessory.iui-urgent::before{
+      -webkit-animation:pulse-accessory 2s infinite;
+              animation:pulse-accessory 2s infinite; } }
+  @media (prefers-reduced-motion: no-preference){
+    @-webkit-keyframes pulse-accessory{
+      0%{
+        box-shadow:0 0 0 0 white;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0); } }
+    @keyframes pulse-accessory{
+      0%{
+        box-shadow:0 0 0 0 white;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0); } } }
+
 .iui-progress-indicator-linear{
   margin:0;
   padding:0;
@@ -3736,6 +4273,59 @@ html.iui-theme-dark{
           .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon{
             transition:transform 0.4s ease-out; } }
 
+.iui-side-navigation-submenu{
+  min-width:192px;
+  width:384px;
+  max-width:50vw;
+  height:100%;
+  box-sizing:border-box;
+  padding:0 12px 11px;
+  overflow-x:hidden;
+  overflow-y:auto;
+  overflow-y:overlay;
+  resize:horizontal;
+  background-color:#FFF;
+  border-right:1px solid #C7CCD1;
+  background-color:var(--iui-color-background-1);
+  border-right:1px solid var(--iui-color-background-5); }
+  .iui-side-navigation-submenu.iui-enter, .iui-side-navigation-submenu.iui-exit-active{
+    opacity:0; }
+  .iui-side-navigation-submenu.iui-exit, .iui-side-navigation-submenu.iui-enter-active{
+    opacity:1; }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
+      transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
+  .iui-side-navigation-submenu-header{
+    height:55px;
+    display:flex;
+    align-items:center;
+    justify-content:space-between; }
+    .iui-side-navigation-submenu-header-label{
+      margin:0;
+      padding:0;
+      border:none;
+      vertical-align:baseline;
+      font-size:24px;
+      font-weight:300;
+      line-height:33px;
+      display:flex;
+      align-items:center;
+      overflow:hidden; }
+      .iui-side-navigation-submenu-header-label .iui-button{
+        flex-shrink:0; }
+      .iui-side-navigation-submenu-header-label > *{
+        white-space:nowrap;
+        overflow:hidden;
+        text-overflow:ellipsis; }
+      .iui-side-navigation-submenu-header-label-actions{
+        flex-shrink:0;
+        margin-left:8px; }
+
+.iui-side-navigation-wrapper{
+  display:flex;
+  position:relative;
+  height:100%; }
+
 .iui-slider-component-container{
   display:flex; }
   .iui-slider-component-container .iui-slider-min,
@@ -4035,7 +4625,7 @@ html.iui-theme-dark{
         opacity:1; }
       @media (prefers-reduced-motion: no-preference){
         .iui-table-body .iui-row.iui-expanded-content.iui-enter-active, .iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
-          transition:opacity 0.2s ease-out, height 0.2s ease-out; } }
+          transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
     .iui-table-body .iui-row:not(.iui-selected) + .iui-selected, .iui-table-body .iui-row.iui-selected:first-child{
       border-bottom-color:transparent; }
     .iui-table-body .iui-row.iui-selected{
@@ -4251,7 +4841,7 @@ html.iui-theme-dark{
   display:inline-flex;
   flex-direction:column;
   align-items:flex-end; }
-  .iui-column-filter > .iui-input-container:not(.iui-inline){
+  .iui-column-filter > .iui-input-container:not(.iui-inline-label){
     width:100%; }
   .iui-column-filter > .iui-input-container,
   .iui-column-filter > .iui-input{
@@ -5072,56 +5662,90 @@ a.iui-tag{
     border-left:1px solid var(--iui-color-background-4); }
   .iui-time-picker:first-child{
     box-shadow:0 1px 5px rgba(0, 0, 0, 0.25); }
-  .iui-time-picker > .iui-time,
-  .iui-time-picker > .iui-period{
-    padding:11px 8px;
-    overflow-y:auto; }
-    .iui-time-picker > .iui-time:not(:first-child),
-    .iui-time-picker > .iui-period:not(:first-child){
-      border-left:1px solid #DCE0E3;
-      border-left:1px solid var(--iui-color-background-4); }
-    .iui-time-picker > .iui-time > ol,
-    .iui-time-picker > .iui-period > ol{
-      margin:0;
-      padding:0;
-      border:none;
-      vertical-align:baseline;
-      list-style:none; }
-      .iui-time-picker > .iui-time > ol > li,
-      .iui-time-picker > .iui-period > ol > li{
-        padding:11px 16px;
-        border-radius:3px; }
-        .iui-time-picker > .iui-time > ol > li:focus,
-        .iui-time-picker > .iui-period > ol > li:focus{
-          outline:0;
-          box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-          box-shadow:var(--iui-focus-box-shadow); }
-        .iui-time-picker > .iui-time > ol > li:focus:not(:focus-visible),
-        .iui-time-picker > .iui-period > ol > li:focus:not(:focus-visible){
-          box-shadow:none; }
-        .iui-time-picker > .iui-time > ol > li:focus-visible,
-        .iui-time-picker > .iui-period > ol > li:focus-visible{
-          outline:0;
-          box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-          box-shadow:var(--iui-focus-box-shadow); }
-        .iui-time-picker > .iui-time > ol > li:hover,
-        .iui-time-picker > .iui-period > ol > li:hover{
-          cursor:pointer;
-          color:#008BE1;
-          background-color:rgba(0, 139, 225, 0.1);
-          color:var(--iui-color-foreground-primary);
-          background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
-        .iui-time-picker > .iui-time > ol > li.iui-selected,
-        .iui-time-picker > .iui-period > ol > li.iui-selected{
-          font-weight:600;
-          cursor:default;
-          background-color:#008BE1;
-          color:#FFF;
-          background-color:var(--iui-color-background-primary);
-          color:var(--iui-color-foreground-accessory); }
-  .iui-time-picker > .iui-period{
-    display:flex;
-    align-items:center; }
+
+.iui-time{
+  padding:11px 8px;
+  overflow-y:auto;
+  overflow-y:overlay;
+  scrollbar-width:none; }
+  .iui-time:not(:first-child){
+    border-left:1px solid #DCE0E3;
+    border-left:1px solid var(--iui-color-background-4); }
+  .iui-time > ol{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    list-style:none; }
+    .iui-time > ol > li{
+      padding:6px 16px;
+      border-radius:3px; }
+      .iui-time > ol > li:focus{
+        outline:0;
+        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
+        box-shadow:var(--iui-focus-box-shadow); }
+      .iui-time > ol > li:focus:not(:focus-visible){
+        box-shadow:none; }
+      .iui-time > ol > li:focus-visible{
+        outline:0;
+        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
+        box-shadow:var(--iui-focus-box-shadow); }
+      .iui-time > ol > li:hover{
+        cursor:pointer;
+        color:#008BE1;
+        background-color:rgba(0, 139, 225, 0.1);
+        color:var(--iui-color-foreground-primary);
+        background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
+      .iui-time > ol > li.iui-selected{
+        font-weight:600;
+        cursor:default;
+        background-color:#008BE1;
+        color:#FFF;
+        background-color:var(--iui-color-background-primary);
+        color:var(--iui-color-foreground-accessory); }
+
+.iui-period{
+  padding:11px 8px;
+  overflow-y:auto;
+  overflow-y:overlay;
+  scrollbar-width:none;
+  display:flex;
+  align-items:center; }
+  .iui-period:not(:first-child){
+    border-left:1px solid #DCE0E3;
+    border-left:1px solid var(--iui-color-background-4); }
+  .iui-period > ol{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    list-style:none; }
+    .iui-period > ol > li{
+      padding:6px 16px;
+      border-radius:3px; }
+      .iui-period > ol > li:focus{
+        outline:0;
+        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
+        box-shadow:var(--iui-focus-box-shadow); }
+      .iui-period > ol > li:focus:not(:focus-visible){
+        box-shadow:none; }
+      .iui-period > ol > li:focus-visible{
+        outline:0;
+        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
+        box-shadow:var(--iui-focus-box-shadow); }
+      .iui-period > ol > li:hover{
+        cursor:pointer;
+        color:#008BE1;
+        background-color:rgba(0, 139, 225, 0.1);
+        color:var(--iui-color-foreground-primary);
+        background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
+      .iui-period > ol > li.iui-selected{
+        font-weight:600;
+        cursor:default;
+        background-color:#008BE1;
+        color:#FFF;
+        background-color:var(--iui-color-background-primary);
+        color:var(--iui-color-foreground-accessory); }
 
 .iui-toast-wrapper{
   pointer-events:none;
@@ -5141,43 +5765,8 @@ a.iui-tag{
       max-width:640px;
       margin:22px 0; } }
   @media (prefers-reduced-motion: no-preference){
-    @-webkit-keyframes openAnimation{
-      from{
-        opacity:0;
-        transform:translateY(-120%); }
-      to{
-        transform:translateY(0); } }
-    @keyframes openAnimation{
-      from{
-        opacity:0;
-        transform:translateY(-120%); }
-      to{
-        transform:translateY(0); } }
-    @-webkit-keyframes closeAnimation{
-      from{
-        transform:scale(1);
-        opacity:1;
-        opacity:var(--iui-opacity-1); }
-      to{
-        transform:scale(0.9);
-        opacity:0; } }
-    @keyframes closeAnimation{
-      from{
-        transform:scale(1);
-        opacity:1;
-        opacity:var(--iui-opacity-1); }
-      to{
-        transform:scale(0.9);
-        opacity:0; } }
     .iui-toast-wrapper .iui-toast-all{
-      transition:all 240ms cubic-bezier(0, 0, 0.2, 1); }
-    .iui-toast-wrapper .iui-toast-entering,
-    .iui-toast-wrapper .iui-toast-entered{
-      -webkit-animation:openAnimation 240ms cubic-bezier(0.175, 0.885, 0.32, 1.175) both;
-              animation:openAnimation 240ms cubic-bezier(0.175, 0.885, 0.32, 1.175) both; }
-    .iui-toast-wrapper .iui-toast-exiting{
-      -webkit-animation:closeAnimation 120ms cubic-bezier(0.4, 0, 1, 1) both;
-              animation:closeAnimation 120ms cubic-bezier(0.4, 0, 1, 1) both; } }
+      transition:all 240ms cubic-bezier(0, 0, 0.2, 1); } }
   .iui-toast-wrapper.iui-placement-top{
     margin-left:auto;
     margin-right:auto;
@@ -5233,7 +5822,8 @@ a.iui-tag{
   box-shadow:0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)), 0 9px 46px rgba(0, 0, 0, 0.25); }
   .iui-toast > .iui-status-area{
     display:flex;
-    align-self:stretch;
+    -ms-grid-row-align:stretch;
+        align-self:stretch;
     justify-content:center;
     align-items:center;
     width:48px;