@servicetitan/design-system 13.0.0 → 13.2.0

package/dist/system.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 html {
-  --anvil-version: "13.0.0";
+  --anvil-version: "13.2.0";
 }
 
 /*
@@ -330,7 +330,6 @@ span.Popover {
 
 /** Popover (w) Width */
 .Popover--w-auto {
-  width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
@@ -1346,8 +1345,7 @@ kendo-sortable {
   margin-left: -0.5em;
   width: 1em;
   height: 1em;
-  -webkit-animation: k-loading-animation 0.7s linear infinite;
-          animation: k-loading-animation 0.7s linear infinite;
+  animation: k-loading-animation 0.7s linear infinite;
 }
 
 .k-i-loading::after,
@@ -1367,20 +1365,6 @@ kendo-sortable {
   font-size: 4em;
 }
 
-@-webkit-keyframes loading {
-  0% {
-    stroke-dasharray: 0 251;
-    stroke-dashoffset: 502;
-  }
-  50% {
-    stroke-dasharray: 250 1;
-  }
-  100% {
-    stroke-dasharray: 0 251;
-    stroke-dashoffset: 0;
-  }
-}
-
 @keyframes loading {
   0% {
     stroke-dasharray: 0 251;
@@ -1394,14 +1378,6 @@ kendo-sortable {
     stroke-dashoffset: 0;
   }
 }
-@-webkit-keyframes k-loading-animation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
 @keyframes k-loading-animation {
   0% {
     transform: rotate(0deg);
@@ -1607,7 +1583,6 @@ kendo-sortable {
 
 .k-sticky,
 .k-pos-sticky {
-  position: -webkit-sticky !important;
   position: sticky !important;
 }
 
@@ -6206,7 +6181,6 @@ kendo-badge-container {
   vertical-align: middle;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   cursor: pointer;
   outline: none;
@@ -7695,7 +7669,6 @@ kendo-badge-container {
   flex-flow: column nowrap;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -8272,19 +8245,12 @@ kendo-badge-container {
   -moz-user-select: none;
        user-select: none;
 }
-.k-input:-ms-input-placeholder, .k-picker:-ms-input-placeholder {
-  color: #666666;
-  opacity: 1;
-  -ms-user-select: none;
-      user-select: none;
-}
 .k-input::placeholder,
 .k-picker::placeholder {
   color: #666666;
   opacity: 1;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 .k-input:-ms-input-placeholder,
@@ -8364,18 +8330,11 @@ select.k-picker:disabled, select.k-picker[disabled] {
   -moz-user-select: none;
        user-select: none;
 }
-.k-input-inner:-ms-input-placeholder {
-  color: #666666;
-  opacity: 1;
-  -ms-user-select: none;
-      user-select: none;
-}
 .k-input-inner::placeholder {
   color: #666666;
   opacity: 1;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 .k-input-inner:-ms-input-placeholder {
@@ -8748,29 +8707,22 @@ textarea.k-input-inner {
   position: fixed;
 }
 
-@-webkit-keyframes autoFillStart {}
-
 @keyframes autoFillStart {}
-@-webkit-keyframes autoFillEnd {}
 @keyframes autoFillEnd {}
 .k-autofill:-webkit-autofill {
-  -webkit-animation-name: autoFillStart;
-          animation-name: autoFillStart;
+  animation-name: autoFillStart;
 }
 
 .k-autofill:not(:-webkit-autofill) {
-  -webkit-animation-name: autoFillEnd;
-          animation-name: autoFillEnd;
+  animation-name: autoFillEnd;
 }
 
 .k-input:-webkit-autofill {
-  -webkit-animation-name: autoFillStart;
-          animation-name: autoFillStart;
+  animation-name: autoFillStart;
 }
 
 .k-input:not(:-webkit-autofill) {
-  -webkit-animation-name: autoFillEnd;
-          animation-name: autoFillEnd;
+  animation-name: autoFillEnd;
 }
 
 .k-input-solid {
@@ -9054,7 +9006,6 @@ textarea.k-input-inner {
   flex-flow: column nowrap;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -9354,9 +9305,6 @@ textarea.k-input-inner {
 .k-floating-label-container.k-state-empty:not(.k-state-focused) ::-moz-placeholder, .k-floating-label-container.k-empty:not(.k-focus):not(:focus-within) ::-moz-placeholder {
   color: transparent;
 }
-.k-floating-label-container.k-state-empty:not(.k-state-focused) :-ms-input-placeholder, .k-floating-label-container.k-empty:not(.k-focus):not(:focus-within) :-ms-input-placeholder {
-  color: transparent;
-}
 .k-floating-label-container.k-state-empty:not(.k-state-focused) ::placeholder, .k-floating-label-container.k-empty:not(.k-focus):not(:focus-within) ::placeholder {
   color: transparent;
 }
@@ -9378,7 +9326,6 @@ textarea.k-input-inner {
 }
 
 .k-dropdown-operator {
-  width: -webkit-min-content;
   width: -moz-min-content;
   width: min-content;
   flex: none;
@@ -9413,7 +9360,6 @@ textarea.k-input-inner {
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 .k-chip *,
@@ -10137,7 +10083,6 @@ textarea.k-input-inner {
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -10417,7 +10362,6 @@ textarea.k-input-inner {
   position: relative;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 
@@ -10794,7 +10738,6 @@ textarea.k-input-inner {
   width: 10em;
 }
 .k-toolbar .k-color-picker {
-  width: -webkit-min-content;
   width: -moz-min-content;
   width: min-content;
 }
@@ -10979,7 +10922,6 @@ kendo-toolbar-renderer {
   height: 100%;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   box-sizing: border-box;
   font-family: sans-serif;
@@ -11057,8 +10999,7 @@ kendo-toolbar-renderer {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
-  -ms-user-select: none;
-      user-select: none;
+  user-select: none;
   -webkit-user-drag: none;
   -moz-user-drag: none;
 }
@@ -11221,8 +11162,7 @@ kendo-toolbar-renderer {
 .k-scheduler-mobile .k-scheduler-times .k-scheduler-groupcolumn .k-scheduler-group-text,
 .k-scheduler-mobile .k-scheduler-agenda .k-scheduler-group-cell .k-scheduler-group-text,
 .k-scheduler-mobile .k-scheduler-agenda .k-scheduler-groupcolumn .k-scheduler-group-text {
-  -ms-writing-mode: tb-lr;
-      writing-mode: vertical-lr;
+  writing-mode: vertical-lr;
   transform: rotate(180deg);
   white-space: nowrap;
 }
@@ -11534,8 +11474,7 @@ kendo-toolbar-renderer {
   flex-direction: column-reverse;
 }
 .k-progressbar-vertical .k-progress-status {
-  -ms-writing-mode: tb-lr;
-      writing-mode: vertical-lr;
+  writing-mode: vertical-lr;
 }
 .k-progressbar-vertical > .k-state-selected,
 .k-progressbar-vertical > .k-selected {
@@ -11615,15 +11554,6 @@ kendo-toolbar-renderer {
   -ms-grid-row-align: start;
 }
 
-@-webkit-keyframes progressbar-indeterminate-animation {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: 22px 0;
-  }
-}
-
 @keyframes progressbar-indeterminate-animation {
   from {
     background-position: 0 0;
@@ -11653,8 +11583,7 @@ kendo-toolbar-renderer {
   background-color: #ebebeb;
   background-image: linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 50%, #d8d8d8 50%, #d8d8d8 75%, transparent 75%, transparent);
   background-size: 22px 22px;
-  -webkit-animation: progressbar-indeterminate-animation 1s linear infinite;
-          animation: progressbar-indeterminate-animation 1s linear infinite;
+  animation: progressbar-indeterminate-animation 1s linear infinite;
 }
 
 .k-tooltip {
@@ -12725,18 +12654,6 @@ kendo-label > .k-label {
   border-radius: 9999px;
 }
 
-@-webkit-keyframes k-skeleton-wave {
-  0% {
-    transform: translateX(-100%);
-  }
-  60% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
 @keyframes k-skeleton-wave {
   0% {
     transform: translateX(-100%);
@@ -12760,20 +12677,7 @@ kendo-label > .k-label {
   bottom: 0;
   left: 0;
   transform: translateX(-100%);
-  -webkit-animation: k-skeleton-wave 1.6s linear 0.5s infinite;
-          animation: k-skeleton-wave 1.6s linear 0.5s infinite;
-}
-
-@-webkit-keyframes k-skeleton-pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
+  animation: k-skeleton-wave 1.6s linear 0.5s infinite;
 }
 
 @keyframes k-skeleton-pulse {
@@ -12788,8 +12692,7 @@ kendo-label > .k-label {
   }
 }
 .k-skeleton-pulse .k-skeleton, .k-skeleton-pulse.k-skeleton {
-  -webkit-animation: k-skeleton-pulse 1.5s ease-in-out 0.5s infinite;
-          animation: k-skeleton-pulse 1.5s ease-in-out 0.5s infinite;
+  animation: k-skeleton-pulse 1.5s ease-in-out 0.5s infinite;
 }
 
 .k-skeleton {
@@ -13130,7 +13033,6 @@ kendo-label > .k-label {
   position: static;
 }
 .k-grid .k-dirty-cell.k-grid-content-sticky {
-  position: -webkit-sticky;
   position: sticky;
 }
 .k-grid .k-dirty {
@@ -13329,7 +13231,6 @@ div.k-grid-footer {
 .k-grid-header.k-grid-draggable-header {
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   touch-action: none;
 }
@@ -13478,7 +13379,6 @@ div.k-grid-footer {
 }
 .k-filtercell .k-color-picker,
 .k-filtercell .k-dropdown-operator {
-  width: -webkit-min-content;
   width: -moz-min-content;
   width: min-content;
   flex: none;
@@ -13676,7 +13576,6 @@ div.k-grid-footer {
 .k-grid-content-sticky,
 .k-grid-row-sticky,
 .k-grid-footer-sticky {
-  position: -webkit-sticky;
   position: sticky;
   z-index: 2;
 }
@@ -13697,7 +13596,6 @@ kendo-grid tr.k-grid-row-sticky {
 kendo-grid .k-grid-row-sticky td {
   border-bottom-width: 1px;
   border-top-width: 1px;
-  position: -webkit-sticky;
   position: sticky;
   top: inherit;
   bottom: inherit;
@@ -13905,7 +13803,6 @@ div.k-grid-norecords {
   gap: 8px;
 }
 .k-filter-menu-container .k-filter-and {
-  width: -webkit-min-content;
   width: -moz-min-content;
   width: min-content;
   align-self: start;
@@ -14070,7 +13967,6 @@ div.k-grid-norecords {
   position: relative;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 
@@ -14534,10 +14430,8 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 }
 
 .k-slider {
-  width: -webkit-min-content;
   width: -moz-min-content;
   width: min-content;
-  height: -webkit-min-content;
   height: -moz-min-content;
   height: min-content;
   gap: calc( 14px / 2 );
@@ -14562,7 +14456,6 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   justify-content: space-between;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 .k-slider .k-slider-track-wrap .k-tick {
@@ -15307,7 +15200,6 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   display: none;
   outline: none;
   top: 100%;
-  min-width: -webkit-max-content;
   min-width: -moz-max-content;
   min-width: max-content;
   margin: 0em;
@@ -15740,7 +15632,6 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 .semantic-anvil-theme .ui.multiple.dropdown > .label {
   -webkit-user-select: none;
   -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
   display: inline-block;
   vertical-align: top;
@@ -15842,9 +15733,7 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   margin: -0.65625em 0em 0em -0.65625em;
   width: 1.3125em;
   height: 1.3125em;
-  -webkit-animation: dropdown-spin 0.6s linear;
   animation: dropdown-spin 0.6s linear;
-  -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   border-radius: 500rem;
   border-color: #767676 transparent transparent;
@@ -15855,14 +15744,6 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 .semantic-anvil-theme .ui.loading.dropdown.button > i.icon:after {
   display: none;
 }
-@-webkit-keyframes dropdown-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 @keyframes dropdown-spin {
   from {
     transform: rotate(0deg);
@@ -17133,6 +17014,7 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   font-family: "Nunito Sans", sans-serif;
   line-height: 1.5;
   font-size: 16px;
+  font-style: normal;
   margin: 0;
 }
 .BodyText.BodyText--large {
@@ -17151,6 +17033,26 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   font-family: inherit;
 }
 
+.BodyText--subdued {
+  color: var(--colorsTextSubdued, #606162);
+}
+
+.BodyText--bold {
+  font-weight: bold;
+}
+
+.BodyText--italic {
+  font-style: italic;
+}
+
+.BodyText--inline {
+  display: inline-block;
+}
+
+.BodyText--block {
+  display: block;
+}
+
 .Breadcrumb {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
@@ -17229,7 +17131,6 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   transition: background cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   position: relative;
 }
@@ -17441,12 +17342,6 @@ button.Button--full {
   width: 100%;
 }
 
-@-webkit-keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -17470,8 +17365,7 @@ button.Button--full {
   border-radius: 50%;
   border: 0.15em solid transparent;
   border-top-color: currentColor;
-  -webkit-animation: spin 0.6s linear infinite;
-          animation: spin 0.6s linear infinite;
+  animation: spin 0.6s linear infinite;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -18217,7 +18111,6 @@ button.Button--full {
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  width: -webkit-min-content;
   width: -moz-min-content;
   width: min-content;
   min-width: 340px;
@@ -18496,6 +18389,7 @@ button.Button--full {
   font-family: "Nunito Sans", sans-serif;
   line-height: 1.5;
   font-size: 12px;
+  font-style: normal;
   color: var(--colorsTextSubdued, #606162);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -18512,6 +18406,22 @@ button.Button--full {
   font-size: 10px;
 }
 
+.Eyebrow--bold {
+  font-weight: bold;
+}
+
+.Eyebrow--italic {
+  font-style: italic;
+}
+
+.Eyebrow--inline {
+  display: inline-block;
+}
+
+.Eyebrow--block {
+  display: block;
+}
+
 .FilePicker {
   /* Set color on root of component. It can be overridden after the @include */
   color: var(--colorsTextDefault, #141414);
@@ -18629,9 +18539,9 @@ button.Button--full {
 }
 .FilterButton.FilterButton--active {
   color: var(--colorsTextSecondary, #6954c0);
-  border: none;
+  border-color: transparent;
   background-color: var(--colorsSurfaceSecondarySubdued, #f1edff);
-  padding: calc(4px + 1px) calc(8px + 1px);
+  padding: 4px 8px;
 }
 .FilterButton.FilterButton--active .FilterButton__Icon,
 .FilterButton.FilterButton--active .FilterButton__ExpandIcon {
@@ -19119,7 +19029,6 @@ button.Button--full {
     html.with-frame-inside {
       height: 100vh;
       max-height: -moz-available;
-      max-height: -webkit-fill-available;
       max-height: stretch;
     }
 
@@ -19890,7 +19799,6 @@ button.Button--full {
 .Grid.Grid--text-align-justify > .GridColumn, .Grid.Grid--text-align-justify > .GridRow > .GridColumn {
   text-align: justify;
   -webkit-hyphens: auto;
-      -ms-hyphens: auto;
           hyphens: auto;
 }
 .Grid.Grid > .GridRow.GridRow--text-align-left > .GridColumn {
@@ -19908,7 +19816,6 @@ button.Button--full {
 .Grid.Grid > .GridRow.GridRow--text-align-justify > .GridColumn {
   text-align: justify;
   -webkit-hyphens: auto;
-      -ms-hyphens: auto;
           hyphens: auto;
 }
 .Grid.Grid.Grid > .GridColumn.GridColumn--text-align-left, .Grid.Grid.Grid > .GridRow > .GridColumn.GridColumn--text-align-left {
@@ -19926,7 +19833,6 @@ button.Button--full {
 .Grid.Grid.Grid > .GridColumn.GridColumn--text-align-justify, .Grid.Grid.Grid > .GridRow > .GridColumn.GridColumn--text-align-justify {
   text-align: justify;
   -webkit-hyphens: auto;
-      -ms-hyphens: auto;
           hyphens: auto;
 }
 
@@ -23829,6 +23735,7 @@ button.Button--full {
   font-size: 20px;
   font-weight: 700;
   line-height: 1.25;
+  font-style: normal;
   margin: 0 0 8px 0;
 }
 .Headline.Headline--xlarge {
@@ -23847,6 +23754,18 @@ button.Button--full {
   font-size: 16px;
 }
 
+.Headline--subdued {
+  color: var(--colorsTextSubdued, #606162);
+}
+
+.Headline--italic {
+  font-style: italic;
+}
+
+.Headline--inline {
+  display: inline-block;
+}
+
 button.a-Icon {
   all: unset;
   cursor: pointer;
@@ -24169,10 +24088,6 @@ button.a-Icon svg {
   color: var(--colorsTextDefault, #141414);
   opacity: 0.4;
 }
-.Input > .Input__InnerWrapper > input:-ms-input-placeholder {
-  color: var(--colorsTextDefault, #141414);
-  opacity: 0.4;
-}
 .Input > .Input__InnerWrapper > input::placeholder {
   color: var(--colorsTextDefault, #141414);
   opacity: 0.4;
@@ -24205,10 +24120,6 @@ button.a-Icon svg {
   color: var(--colorsTextDefault, #141414);
   opacity: 0.4;
 }
-.Input.Input--disabled > .Input__InnerWrapper:-ms-input-placeholder, .Input:not(.Input--disabled) input[disabled]:-ms-input-placeholder {
-  color: var(--colorsTextDefault, #141414);
-  opacity: 0.4;
-}
 .Input.Input--disabled > .Input__InnerWrapper::placeholder, .Input:not(.Input--disabled) input[disabled]::placeholder {
   color: var(--colorsTextDefault, #141414);
   opacity: 0.4;
@@ -24240,10 +24151,6 @@ button.a-Icon svg {
   color: var(--colorsTextCritical, #bf2a00);
   opacity: 0.4;
 }
-.Input.Input--error > .Input__InnerWrapper > input:-ms-input-placeholder {
-  color: var(--colorsTextCritical, #bf2a00);
-  opacity: 0.4;
-}
 .Input.Input--error > .Input__InnerWrapper > input::placeholder {
   color: var(--colorsTextCritical, #bf2a00);
   opacity: 0.4;
@@ -24396,15 +24303,6 @@ button.a-Icon svg {
   margin-left: -1px;
 }
 
-@-webkit-keyframes button-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @keyframes button-spin {
   from {
     transform: rotate(0deg);
@@ -24870,6 +24768,11 @@ button.a-Icon svg {
   font-weight: 400;
   width: 100%;
 }
+.OptionList__option .Checkbox__label::after {
+  content: "";
+  position: absolute;
+  inset: -8px -16px;
+}
 .OptionList__option .a-Checkbox {
   width: 100%;
 }
@@ -25101,7 +25004,6 @@ button.a-Icon svg {
   }
 }
 .Page__actionToolbar.Page__actionToolbar--sticky {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
 }
@@ -25113,7 +25015,6 @@ button.a-Icon svg {
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
-  position: -webkit-sticky;
   position: sticky;
   transition: width cubic-bezier(0.4, 0, 0.6, 1) 300ms 0ms;
   overflow: hidden;
@@ -25151,7 +25052,6 @@ button.a-Icon svg {
   box-sizing: border-box;
   align-items: center;
   display: flex;
-  position: -webkit-sticky;
   position: sticky;
   bottom: 0;
   flex-shrink: 0;
@@ -25331,19 +25231,7 @@ button.a-Icon svg {
   top: 0;
   left: -80%;
   will-change: left, right;
-  -webkit-animation: indeterminateprogress 1.15s cubic-bezier(0.57, 0.63, 0.91, 0.61) infinite;
-          animation: indeterminateprogress 1.15s cubic-bezier(0.57, 0.63, 0.91, 0.61) infinite;
-}
-
-@-webkit-keyframes indeterminateprogress {
-  0% {
-    left: -60%;
-    right: 100%;
-  }
-  85%, 100% {
-    left: 110%;
-    right: -180%;
-  }
+  animation: indeterminateprogress 1.15s cubic-bezier(0.57, 0.63, 0.91, 0.61) infinite;
 }
 
 @keyframes indeterminateprogress {
@@ -26369,8 +26257,7 @@ button.a-Icon svg {
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  -webkit-animation: snackbarIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
-          animation: snackbarIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  animation: snackbarIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
   background: var(--colorsSurfaceInverted, #2d2e31);
   border-radius: 3px;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
@@ -26434,17 +26321,6 @@ button.a-Icon svg {
   z-index: 1200;
 }
 
-@-webkit-keyframes snackbarIn {
-  0% {
-    opacity: 0;
-    transform: translate3d(0, 3px, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
 @keyframes snackbarIn {
   0% {
     opacity: 0;
@@ -26468,16 +26344,14 @@ button.a-Icon svg {
   left: 0;
   width: 100%;
   height: 100%;
-  -webkit-animation: 2s linear infinite spinnerRotation;
-          animation: 2s linear infinite spinnerRotation;
+  animation: 2s linear infinite spinnerRotation;
 }
 
 .Spinner__circle {
   display: block;
   fill: transparent;
   stroke-width: 10px;
-  -webkit-animation: 1.5s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite both spinnerAnimation;
-          animation: 1.5s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite both spinnerAnimation;
+  animation: 1.5s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite both spinnerAnimation;
   transform-origin: 50% 50%;
   stroke-linecap: butt;
   stroke-dasharray: 282.743343;
@@ -26518,21 +26392,6 @@ button.a-Icon svg {
   padding: 10px;
 }
 
-@-webkit-keyframes spinnerAnimation {
-  0% {
-    stroke-dashoffset: 237.50440812;
-    transform: rotate(0);
-  }
-  50% {
-    stroke-dashoffset: 67.85840232;
-    transform: rotate(45deg);
-  }
-  100% {
-    stroke-dashoffset: 237.50440812;
-    transform: rotate(360deg);
-  }
-}
-
 @keyframes spinnerAnimation {
   0% {
     stroke-dashoffset: 237.50440812;
@@ -26547,14 +26406,6 @@ button.a-Icon svg {
     transform: rotate(360deg);
   }
 }
-@-webkit-keyframes spinnerRotation {
-  0% {
-    transform: rotateZ(0deg);
-  }
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
 @keyframes spinnerRotation {
   0% {
     transform: rotateZ(0deg);
@@ -26828,21 +26679,6 @@ button.a-Icon svg {
   background-color: var(--colorsStatusCritical, #f94d32);
 }
 
-@-webkit-keyframes shadow-pulse {
-  0% {
-    width: 12px;
-    height: 12px;
-    border-radius: 12px;
-    opacity: 0.3;
-  }
-  100% {
-    width: 32px;
-    height: 32px;
-    border-radius: 32px;
-    opacity: 0;
-  }
-}
-
 @keyframes shadow-pulse {
   0% {
     width: 12px;
@@ -26858,8 +26694,7 @@ button.a-Icon svg {
   }
 }
 .StatusLight--pulsing .StatusLight__indicator::before {
-  -webkit-animation: shadow-pulse 1s infinite ease;
-          animation: shadow-pulse 1s infinite ease;
+  animation: shadow-pulse 1s infinite ease;
 }
 
 .StatusLight--disabled {
@@ -26870,8 +26705,7 @@ button.a-Icon svg {
   background-color: var(--colorsStatusDefault, #8c9ca5);
 }
 .StatusLight--disabled .StatusLight__indicator::before {
-  -webkit-animation: none;
-          animation: none;
+  animation: none;
 }
 
 .StatusLight--action:hover {
@@ -26884,8 +26718,7 @@ button.a-Icon svg {
   border-radius: 28px;
   transition: width cubic-bezier(0, 0, 0.4, 1) 200ms 0ms, height cubic-bezier(0, 0, 0.4, 1) 200ms 0ms;
   opacity: 0.2;
-  -webkit-animation: none;
-          animation: none;
+  animation: none;
 }
 
 .StatusLight--full {
@@ -26923,7 +26756,6 @@ button.a-Icon svg {
   white-space: nowrap;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 .Tab .Tag {
@@ -27209,9 +27041,6 @@ button.a-Icon svg {
 .Table .k-grid-header .k-header .k-link {
   font-weight: 400;
 }
-.Table .k-grid-header .k-header .k-link:not(:-webkit-any-link) {
-  cursor: default;
-}
 .Table .k-grid-header .k-header .k-link:not(:-moz-any-link) {
   cursor: default;
 }
@@ -27832,10 +27661,6 @@ button.a-Icon svg {
   color: var(--colorsTextDefault, #141414);
   opacity: 0.4;
 }
-.TextArea:-ms-input-placeholder {
-  color: var(--colorsTextDefault, #141414);
-  opacity: 0.4;
-}
 .TextArea::placeholder {
   color: var(--colorsTextDefault, #141414);
   opacity: 0.4;
@@ -27864,10 +27689,6 @@ button.a-Icon svg {
   color: var(--colorsTextDefault, #141414);
   opacity: 0.4;
 }
-.TextArea[readonly]:-ms-input-placeholder {
-  color: var(--colorsTextDefault, #141414);
-  opacity: 0.4;
-}
 .TextArea[readonly]::placeholder {
   color: var(--colorsTextDefault, #141414);
   opacity: 0.4;
@@ -27893,10 +27714,6 @@ button.a-Icon svg {
   color: var(--colorsTextCritical, #bf2a00);
   opacity: 0.4;
 }
-.TextArea.TextArea--error:-ms-input-placeholder {
-  color: var(--colorsTextCritical, #bf2a00);
-  opacity: 0.4;
-}
 .TextArea.TextArea--error::placeholder {
   color: var(--colorsTextCritical, #bf2a00);
   opacity: 0.4;
@@ -28016,6 +27833,15 @@ button.a-Icon svg {
   scroll-margin: 8px;
 }
 
+.TimePicker--open .Input:not(:focus) > .Input__InnerWrapper {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border-color: var(--colorsBorderPrimary, #2270ee);
+}
+.TimePicker--open .Input.Input--error:not(:focus) > .Input__InnerWrapper {
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e13212);
+}
+
 .Toast {
   /* Set color on root of component. It can be overridden after the @include */
   color: var(--colorsTextDefault, #141414);
@@ -28373,7 +28199,6 @@ button.a-Icon svg {
   padding: 4px 8px;
   position: relative;
   text-align: center;
-  width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
   white-space: pre-line;
@@ -28381,18 +28206,12 @@ button.a-Icon svg {
   z-index: 1100;
   /* Media query for touchscreen. A finger blocks the screens (unlike a mouse), so
      padding is increased to improve tooltip visibility. Technique is used in Material. */
-  -webkit-animation-name: showTooltip;
-          animation-name: showTooltip;
-  -webkit-animation-duration: 100ms;
-          animation-duration: 100ms;
-  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  -webkit-animation-iteration-count: 1;
-          animation-iteration-count: 1;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-direction: normal;
-          animation-direction: normal;
+  animation-name: showTooltip;
+  animation-duration: 100ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-direction: normal;
 }
 @media (pointer: coarse) {
   .Tooltip__body.Tooltip__body {
@@ -28406,15 +28225,6 @@ _:-ms-lang(x), .Tooltip__body {
   min-width: 125px;
 }
 
-@-webkit-keyframes showTooltip {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 @keyframes showTooltip {
   0% {
     opacity: 0;
@@ -30085,22 +29895,18 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .cursor-grab {
-  cursor: -webkit-grab;
   cursor: grab;
 }
 
 .cursor-grab-i {
-  cursor: -webkit-grab !important;
   cursor: grab !important;
 }
 
 .cursor-grabbing {
-  cursor: -webkit-grabbing;
   cursor: grabbing;
 }
 
 .cursor-grabbing-i {
-  cursor: -webkit-grabbing !important;
   cursor: grabbing !important;
 }
 
@@ -33720,12 +33526,10 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .position-sticky {
-  position: -webkit-sticky;
   position: sticky;
 }
 
 .position-sticky-i {
-  position: -webkit-sticky !important;
   position: sticky !important;
 }
 
@@ -34552,18 +34356,12 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .Popper__caret {
-  -webkit-animation-name: showTooltip;
-          animation-name: showTooltip;
-  -webkit-animation-duration: 100ms;
-          animation-duration: 100ms;
-  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  -webkit-animation-iteration-count: 1;
-          animation-iteration-count: 1;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-direction: normal;
-          animation-direction: normal;
+  animation-name: showTooltip;
+  animation-duration: 100ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-direction: normal;
   border: 1px solid yellow;
 }
 .Popper__caret::before {