@servicetitan/design-system 12.4.0 → 12.6.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.4.0";
+  --anvil-version: "12.6.0";
 }
 
 /*
@@ -95,13 +95,13 @@ a:focus {
   padding-bottom: 1px;
   padding-top: 1px;
 }
-.a-Checkbox + .FormField__helpers {
+.a-Checkbox + .FormField__addons {
   margin-left: 25px;
 }
-.a-Checkbox.Checkbox--small, .a-Checkbox.Checkbox--small + .FormField__helpers {
+.a-Checkbox.Checkbox--small, .a-Checkbox.Checkbox--small + .FormField__addons {
   margin-left: 23px;
 }
-.a-Checkbox.Checkbox--large, .a-Checkbox.Checkbox--large + .FormField__helpers {
+.a-Checkbox.Checkbox--large, .a-Checkbox.Checkbox--large + .FormField__addons {
   margin-left: 31px;
 }
 
@@ -18828,25 +18828,38 @@ button.Button--full {
   margin-top: 4px;
 }
 
-.FormField__description {
+.FormField__addons {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: var(--colorsTextDefault, #141414);
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+}
+
+.FormField__description,
+.FormField__counter {
   color: var(--colorsTextSubdued, #606162);
   font-size: 14px;
   line-height: 1.25;
   margin-top: 8px;
 }
-.FormField--ToggleSwitch .FormField__description {
+.FormField--ToggleSwitch .FormField__description,
+.FormField--ToggleSwitch .FormField__counter {
   margin-top: 4px;
 }
 
+.FormField__description {
+  word-break: break-word;
+}
+
 .FormField__label {
   margin-bottom: 8px;
 }
 
 .FormField__helpers {
-  /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #141414);
-  /* Make sure font-family goes across entire component */
-  font-family: "Nunito Sans", sans-serif;
+  flex: 100%;
 }
 
 .FormField--disabled {
@@ -19062,8 +19075,7 @@ button.Button--full {
   font-family: "Nunito Sans", sans-serif;
   display: flex;
   flex-direction: column;
-  height: calc(var(--frame-vh, 1vh) * 100);
-  min-height: calc(var(--frame-vh, 1vh) * 100);
+  height: 100vh;
 }
 
 .Frame__header {
@@ -19077,6 +19089,30 @@ button.Button--full {
   overflow: hidden;
 }
 
+/*
+ * Hacky way of handling with mobile Chrome's head and 100vh layout.
+ * To be removed after Chrome to support dvh units.
+ */
+@media (hover: none) and (pointer: coarse) {
+  @supports (height: 100dvh) {
+    .Frame {
+      height: 100dvh;
+    }
+  }
+  @supports not (height: 100dvh) {
+    html.with-frame-inside {
+      height: 100vh;
+      max-height: -moz-available;
+      max-height: -webkit-fill-available;
+      max-height: stretch;
+    }
+
+    .with-frame-inside,
+.Frame {
+      height: 100%;
+    }
+  }
+}
 /* Grid variables */
 /* Grid component */
 .Grid,
@@ -24950,6 +24986,7 @@ button.a-Icon svg {
   width: 100%;
   height: 100%;
   flex: auto;
+  overflow: hidden;
 }
 
 .Content__wrapper {
@@ -25097,9 +25134,9 @@ button.a-Icon svg {
   display: flex;
   position: -webkit-sticky;
   position: sticky;
-  z-index: 990;
   bottom: 0;
   flex-shrink: 0;
+  z-index: 798;
 }
 @media (min-width: 480px) {
   .Page__footer {
@@ -25431,13 +25468,13 @@ button.a-Icon svg {
   padding-bottom: 1px;
   padding-top: 1px;
 }
-.a-Radio + .FormField__helpers {
+.a-Radio + .FormField__addons {
   margin-left: 27px;
 }
-.a-Radio.Radio--small, .a-Radio.Radio--small + .FormField__helpers {
+.a-Radio.Radio--small, .a-Radio.Radio--small + .FormField__addons {
   margin-left: 23px;
 }
-.a-Radio.Radio--large, .a-Radio.Radio--large + .FormField__helpers {
+.a-Radio.Radio--large, .a-Radio.Radio--large + .FormField__addons {
   margin-left: 33px;
 }
 
@@ -25995,7 +26032,7 @@ button.a-Icon svg {
 }
 .Sidebar--collapsed .Sidebar__content {
   visibility: hidden;
-  overflow: hidden;
+  overflow-x: hidden;
   opacity: 0;
 }
 .Sidebar--collapsed .Sidebar__toggle-button:not(:hover) {
@@ -28007,7 +28044,7 @@ button.a-Icon svg {
   box-sizing: border-box;
   display: inline-block;
 }
-.ToggleSwitch + .FormField__helpers {
+.ToggleSwitch + .FormField__addons {
   margin-left: 54px;
 }