@servicetitan/design-system 12.6.1 → 12.7.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: "12.6.1";
+  --anvil-version: "12.7.0";
 }
 
 /*
@@ -16449,9 +16449,10 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  padding: 12px 0;
-  max-width: 640px;
+  font-size: 16px;
   line-height: 1.5;
+  max-width: 640px;
+  padding: 12px 0;
   text-align: left;
   text-decoration: none;
   width: 100%;
@@ -16578,6 +16579,7 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 .Announcement__body {
   align-items: center;
   display: flex;
+  line-height: 1.25;
   margin: auto;
   overflow: hidden;
   padding-left: 4px;
@@ -16608,9 +16610,8 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 .Select--flat .OptionList__option--text .Checkbox__html-label {
   align-items: flex-start;
 }
-.Select--flat .OptionList__option--text .Checkbox__box {
-  position: relative;
-  top: 10px;
+.Select--flat .OptionList__option--text .Checkbox__html-label .Checkbox__box {
+  top: 1px;
 }
 
 .Select__header {
@@ -16988,6 +16989,7 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   display: inline-flex;
   flex: 1;
   font-size: 14px;
+  line-height: 1.25;
   justify-content: flex-start;
 }
 .BackLink:hover {
@@ -17689,6 +17691,8 @@ button.Button--full {
   background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
   color: var(--colorsTextDefault, #141414);
+  font-size: 16px;
+  line-height: normal;
   text-align: left;
 }
 
@@ -18118,6 +18122,15 @@ button.Button--full {
   cursor: pointer;
 }
 
+.DatePicker--open .InputDateMask:not(:focus) > .Input__InnerWrapper {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border-color: var(--colorsBorderPrimary, #2270ee);
+}
+.DatePicker--open .InputDateMask--error:not(:focus) > .Input__InnerWrapper {
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e13212);
+}
+
 .DatePicker--disabled {
   opacity: 0.6;
   pointer-events: none;
@@ -23812,10 +23825,10 @@ button.Button--full {
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  font-weight: 700;
   font-family: "Sofia Pro", SofiaPro, sans-serif;
-  line-height: 1.25;
   font-size: 20px;
+  font-weight: 700;
+  line-height: 1.25;
   margin: 0 0 8px 0;
 }
 .Headline.Headline--xlarge {
@@ -24846,6 +24859,7 @@ button.a-Icon svg {
 .OptionList__option {
   padding-right: 16px;
   border-radius: 3px;
+  line-height: normal;
   display: flex;
   position: relative;
   /* Center vertical alignment of OptionList Checkboxes */
@@ -24853,7 +24867,6 @@ button.a-Icon svg {
 .OptionList__option .Checkbox__label {
   font-size: 14px;
   font-weight: 400;
-  padding: 8px 0;
   width: 100%;
 }
 .OptionList__option .a-Checkbox {
@@ -24861,12 +24874,14 @@ button.a-Icon svg {
 }
 .OptionList__option .Checkbox__html-label {
   align-items: center;
+  padding: 8px 0;
 }
 .OptionList__option .Checkbox__box {
   top: 0;
 }
 
 .OptionList__header {
+  line-height: normal;
   padding-bottom: 8px;
   padding-left: 16px;
 }
@@ -26206,6 +26221,7 @@ button.a-Icon svg {
   box-sizing: border-box;
   color: var(--colorsTextInverted, #ffffff);
   display: inline-flex;
+  font-size: 16px;
   align-items: center;
   /** Material's width limit. Soft rule against long copy in this pattern. */
   max-width: 568px;
@@ -27309,6 +27325,7 @@ button.a-Icon svg {
 }
 .Tag .Tag__icon {
   padding-left: 6px;
+  line-height: normal;
   margin-right: -0.2em;
 }
 .Tag--compact.Tag .Tag__icon {
@@ -27839,6 +27856,10 @@ button.a-Icon svg {
   opacity: 1;
 }
 
+.TimePicker__options [role=treeitem] {
+  scroll-margin: 8px;
+}
+
 .Toast {
   /* Set color on root of component. It can be overridden after the @include */
   color: var(--colorsTextDefault, #141414);
@@ -28178,6 +28199,9 @@ button.a-Icon svg {
   transition-delay: duration(slow);
 }
 
+.Tooltip__body {
+  line-height: normal;
+}
 .Tooltip__body:not(.Tooltip__body--open).Tooltip__body, .Tooltip__body:not(.Tooltip__body--open)::before {
   display: none;
   opacity: 0;
@@ -33549,6 +33573,70 @@ _:-ms-lang(x), .Tooltip__body {
   position: sticky !important;
 }
 
+.position-t-auto {
+  top: auto;
+}
+
+.position-t-auto-i {
+  top: auto !important;
+}
+
+.position-r-auto {
+  right: auto;
+}
+
+.position-r-auto-i {
+  right: auto !important;
+}
+
+.position-b-auto {
+  bottom: auto;
+}
+
+.position-b-auto-i {
+  bottom: auto !important;
+}
+
+.position-l-auto {
+  left: auto;
+}
+
+.position-l-auto-i {
+  left: auto !important;
+}
+
+.top-auto {
+  top: auto;
+}
+
+.top-auto-i {
+  top: auto !important;
+}
+
+.right-auto {
+  right: auto;
+}
+
+.right-auto-i {
+  right: auto !important;
+}
+
+.bottom-auto {
+  bottom: auto;
+}
+
+.bottom-auto-i {
+  bottom: auto !important;
+}
+
+.left-auto {
+  left: auto;
+}
+
+.left-auto-i {
+  left: auto !important;
+}
+
 .position-t-0 {
   top: 0;
 }
@@ -33581,36 +33669,100 @@ _:-ms-lang(x), .Tooltip__body {
   left: 0 !important;
 }
 
-.position-t-auto {
-  top: auto;
+.top-0 {
+  top: 0;
 }
 
-.position-t-auto-i {
-  top: auto !important;
+.top-0-i {
+  top: 0 !important;
 }
 
-.position-r-auto {
-  right: auto;
+.right-0 {
+  right: 0;
 }
 
-.position-r-auto-i {
-  right: auto !important;
+.right-0-i {
+  right: 0 !important;
 }
 
-.position-b-auto {
-  bottom: auto;
+.bottom-0 {
+  bottom: 0;
 }
 
-.position-b-auto-i {
-  bottom: auto !important;
+.bottom-0-i {
+  bottom: 0 !important;
 }
 
-.position-l-auto {
-  left: auto;
+.left-0 {
+  left: 0;
 }
 
-.position-l-auto-i {
-  left: auto !important;
+.left-0-i {
+  left: 0 !important;
+}
+
+.top-50 {
+  top: 50%;
+}
+
+.top-50-i {
+  top: 50% !important;
+}
+
+.right-50 {
+  right: 50%;
+}
+
+.right-50-i {
+  right: 50% !important;
+}
+
+.bottom-50 {
+  bottom: 50%;
+}
+
+.bottom-50-i {
+  bottom: 50% !important;
+}
+
+.left-50 {
+  left: 50%;
+}
+
+.left-50-i {
+  left: 50% !important;
+}
+
+.top-100 {
+  top: 100%;
+}
+
+.top-100-i {
+  top: 100% !important;
+}
+
+.right-100 {
+  right: 100%;
+}
+
+.right-100-i {
+  right: 100% !important;
+}
+
+.bottom-100 {
+  bottom: 100%;
+}
+
+.bottom-100-i {
+  bottom: 100% !important;
+}
+
+.left-100 {
+  left: 100%;
+}
+
+.left-100-i {
+  left: 100% !important;
 }
 
 .ta-left {
@@ -33808,6 +33960,382 @@ _:-ms-lang(x), .Tooltip__body {
 .z-drawer-i {
   z-index: 1100 !important;
 }
+
+.transform-none {
+  transform: none;
+}
+
+.transform-none-i {
+  transform: none !important;
+}
+
+.translate-x-0 {
+  --transform-translate-x: 0;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-y-0 {
+  --transform-translate-y: 0;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-x-0-i {
+  --transform-translate-x: 0;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-y-0-i {
+  --transform-translate-y: 0;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-x-50 {
+  --transform-translate-x: 50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-y-50 {
+  --transform-translate-y: 50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-x-50-i {
+  --transform-translate-x: 50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-y-50-i {
+  --transform-translate-y: 50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-x-100 {
+  --transform-translate-x: 100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-y-100 {
+  --transform-translate-y: 100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-x-100-i {
+  --transform-translate-x: 100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-y-100-i {
+  --transform-translate-y: 100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-x--50 {
+  --transform-translate-x: -50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-y--50 {
+  --transform-translate-y: -50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-x--50-i {
+  --transform-translate-x: -50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-y--50-i {
+  --transform-translate-y: -50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-x--100 {
+  --transform-translate-x: -100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-y--100 {
+  --transform-translate-y: -100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-x--100-i {
+  --transform-translate-x: -100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-y--100-i {
+  --transform-translate-y: -100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.row-gap-0 {
+  row-gap: 0;
+}
+
+.row-gap-0-i {
+  row-gap: 0 !important;
+}
+
+.column-gap-0 {
+  -moz-column-gap: 0;
+  column-gap: 0;
+}
+
+.column-gap-0-i {
+  -moz-column-gap: 0 !important;
+  column-gap: 0 !important;
+}
+
+.gap-0 {
+  gap: 0;
+}
+
+.gap-0-i {
+  gap: 0 !important;
+}
+
+.row-gap-1 {
+  row-gap: 8px;
+}
+
+.row-gap-1-i {
+  row-gap: 8px !important;
+}
+
+.column-gap-1 {
+  -moz-column-gap: 8px;
+  column-gap: 8px;
+}
+
+.column-gap-1-i {
+  -moz-column-gap: 8px !important;
+  column-gap: 8px !important;
+}
+
+.gap-1 {
+  gap: 8px;
+}
+
+.gap-1-i {
+  gap: 8px !important;
+}
+
+.row-gap-2 {
+  row-gap: 16px;
+}
+
+.row-gap-2-i {
+  row-gap: 16px !important;
+}
+
+.column-gap-2 {
+  -moz-column-gap: 16px;
+  column-gap: 16px;
+}
+
+.column-gap-2-i {
+  -moz-column-gap: 16px !important;
+  column-gap: 16px !important;
+}
+
+.gap-2 {
+  gap: 16px;
+}
+
+.gap-2-i {
+  gap: 16px !important;
+}
+
+.row-gap-3 {
+  row-gap: 24px;
+}
+
+.row-gap-3-i {
+  row-gap: 24px !important;
+}
+
+.column-gap-3 {
+  -moz-column-gap: 24px;
+  column-gap: 24px;
+}
+
+.column-gap-3-i {
+  -moz-column-gap: 24px !important;
+  column-gap: 24px !important;
+}
+
+.gap-3 {
+  gap: 24px;
+}
+
+.gap-3-i {
+  gap: 24px !important;
+}
+
+.row-gap-4 {
+  row-gap: 32px;
+}
+
+.row-gap-4-i {
+  row-gap: 32px !important;
+}
+
+.column-gap-4 {
+  -moz-column-gap: 32px;
+  column-gap: 32px;
+}
+
+.column-gap-4-i {
+  -moz-column-gap: 32px !important;
+  column-gap: 32px !important;
+}
+
+.gap-4 {
+  gap: 32px;
+}
+
+.gap-4-i {
+  gap: 32px !important;
+}
+
+.row-gap-5 {
+  row-gap: 48px;
+}
+
+.row-gap-5-i {
+  row-gap: 48px !important;
+}
+
+.column-gap-5 {
+  -moz-column-gap: 48px;
+  column-gap: 48px;
+}
+
+.column-gap-5-i {
+  -moz-column-gap: 48px !important;
+  column-gap: 48px !important;
+}
+
+.gap-5 {
+  gap: 48px;
+}
+
+.gap-5-i {
+  gap: 48px !important;
+}
+
+.row-gap-6 {
+  row-gap: 64px;
+}
+
+.row-gap-6-i {
+  row-gap: 64px !important;
+}
+
+.column-gap-6 {
+  -moz-column-gap: 64px;
+  column-gap: 64px;
+}
+
+.column-gap-6-i {
+  -moz-column-gap: 64px !important;
+  column-gap: 64px !important;
+}
+
+.gap-6 {
+  gap: 64px;
+}
+
+.gap-6-i {
+  gap: 64px !important;
+}
+
+.row-gap-7 {
+  row-gap: 96px;
+}
+
+.row-gap-7-i {
+  row-gap: 96px !important;
+}
+
+.column-gap-7 {
+  -moz-column-gap: 96px;
+  column-gap: 96px;
+}
+
+.column-gap-7-i {
+  -moz-column-gap: 96px !important;
+  column-gap: 96px !important;
+}
+
+.gap-7 {
+  gap: 96px;
+}
+
+.gap-7-i {
+  gap: 96px !important;
+}
+
+.row-gap-8 {
+  row-gap: 128px;
+}
+
+.row-gap-8-i {
+  row-gap: 128px !important;
+}
+
+.column-gap-8 {
+  -moz-column-gap: 128px;
+  column-gap: 128px;
+}
+
+.column-gap-8-i {
+  -moz-column-gap: 128px !important;
+  column-gap: 128px !important;
+}
+
+.gap-8 {
+  gap: 128px;
+}
+
+.gap-8-i {
+  gap: 128px !important;
+}
+
+.row-gap-half {
+  row-gap: 4px;
+}
+
+.row-gap-half-i {
+  row-gap: 4px !important;
+}
+
+.column-gap-half {
+  -moz-column-gap: 4px;
+  column-gap: 4px;
+}
+
+.column-gap-half-i {
+  -moz-column-gap: 4px !important;
+  column-gap: 4px !important;
+}
+
+.gap-half {
+  gap: 4px;
+}
+
+.gap-half-i {
+  gap: 4px !important;
+}
+
+.gap-normal {
+  gap: normal;
+}
+
+.gap-normal-i {
+  gap: normal !important;
+}
 .Overlay {
   position: fixed;
   top: 0;