@servicetitan/design-system 11.7.0 → 12.1.0

package/dist/components/Checkbox/Checkbox.css

@@ -44,8 +44,8 @@
 .Field.Field--error .Input > input,
 .Field.Field--error .TextArea {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
 }
 .Fields.Fields--error .Field .Input > input:focus,
@@ -53,8 +53,8 @@
 .Field.Field--error .Input > input:focus,
 .Field.Field--error .TextArea:focus {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
   -webkit-appearance: none;
 }
@@ -219,7 +219,7 @@
   opacity: 1;
 }
 .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
   box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
@@ -231,20 +231,20 @@
   border-color: var(--colorsBorderDefault, #444445);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
   box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
   border-color: var(--colorsBorderPrimary, #2270ee);
   box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
   box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 

package/dist/components/Checkbox/index.css

@@ -44,8 +44,8 @@
 .Field.Field--error .Input > input,
 .Field.Field--error .TextArea {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
 }
 .Fields.Fields--error .Field .Input > input:focus,
@@ -53,8 +53,8 @@
 .Field.Field--error .Input > input:focus,
 .Field.Field--error .TextArea:focus {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
   -webkit-appearance: none;
 }
@@ -219,7 +219,7 @@
   opacity: 1;
 }
 .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
   box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
@@ -231,20 +231,20 @@
   border-color: var(--colorsBorderDefault, #444445);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
   box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
   border-color: var(--colorsBorderPrimary, #2270ee);
   box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
   box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 

package/dist/components/DatePicker/DatePicker.css

@@ -44,8 +44,8 @@
 .Field.Field--error .Input > input,
 .Field.Field--error .TextArea {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
 }
 .Fields.Fields--error .Field .Input > input:focus,
@@ -53,8 +53,8 @@
 .Field.Field--error .Input > input:focus,
 .Field.Field--error .TextArea:focus {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
   -webkit-appearance: none;
 }
@@ -219,7 +219,7 @@
   opacity: 1;
 }
 .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
   box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
@@ -231,20 +231,20 @@
   border-color: var(--colorsBorderDefault, #444445);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
   box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
   border-color: var(--colorsBorderPrimary, #2270ee);
   box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
   box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 

package/dist/components/DatePicker/index.css

@@ -44,8 +44,8 @@
 .Field.Field--error .Input > input,
 .Field.Field--error .TextArea {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
 }
 .Fields.Fields--error .Field .Input > input:focus,
@@ -53,8 +53,8 @@
 .Field.Field--error .Input > input:focus,
 .Field.Field--error .TextArea:focus {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
   -webkit-appearance: none;
 }
@@ -219,7 +219,7 @@
   opacity: 1;
 }
 .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
   box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
@@ -231,20 +231,20 @@
   border-color: var(--colorsBorderDefault, #444445);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
   box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
   border-color: var(--colorsBorderPrimary, #2270ee);
   box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
   box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 

package/dist/components/Drawer/Drawer.d.ts

@@ -19,6 +19,10 @@ interface DrawerPropsStrict extends OverlayProps {
     width?: 'xs' | 's' | 'm' | 'l';
     /** Options passed into FocusTrap */
     focusTrapOptions?: FocusTrapProps;
+    /** Adds classnames to Drawer's content wrapper */
+    contentClassName?: string;
+    /** Adds classnames to Drawer's footer wrapper */
+    footerClassName?: string;
 }
 export interface DrawerProps extends DrawerPropsStrict {
     /** Unstrict Props */

package/dist/components/Drawer/Drawer.js

@@ -17,7 +17,7 @@ import { Button, Headline } from '../';
 import { Overlay } from '../../internal/Overlay';
 import { FocusTrap } from '../../utilities/FocusTrap';
 export const Drawer = (_a) => {
-    var { animate = true, children, className, footer, footerAlign = 'right', header, onClose, open, portal = true, backdrop, width = 's', focusTrapOptions } = _a, rest = __rest(_a, ["animate", "children", "className", "footer", "footerAlign", "header", "onClose", "open", "portal", "backdrop", "width", "focusTrapOptions"]);
+    var { animate = true, children, className, contentClassName, footerClassName, footer, footerAlign = 'right', header, onClose, open, portal = true, backdrop, width = 's', focusTrapOptions } = _a, rest = __rest(_a, ["animate", "children", "className", "contentClassName", "footerClassName", "footer", "footerAlign", "header", "onClose", "open", "portal", "backdrop", "width", "focusTrapOptions"]);
     const drawerRef = useRef(null);
     const [focusWrapper, setFocusWrapper] = React.useState(1);
     const DrawerClasses = classnames('Drawer', className, {
@@ -26,7 +26,8 @@ export const Drawer = (_a) => {
         'Drawer--close': !open,
         [`Drawer--w-${width}`]: width,
     });
-    const DrawerFooterClassNames = classnames('Drawer__footer', className, {
+    const DrawerContentClassNames = classnames('Drawer__content', contentClassName);
+    const DrawerFooterClassNames = classnames('Drawer__footer', footerClassName, {
         'justify-content-start': footerAlign === 'left',
         'justify-content-center': footerAlign === 'center',
         'justify-content-end': footerAlign === 'right',
@@ -58,7 +59,7 @@ export const Drawer = (_a) => {
                 header && (React.createElement("div", { className: "Drawer__header" },
                     React.createElement(Headline, { className: "Drawer__header-title" }, header),
                     onClose && (React.createElement(Button, { fill: "subtle", className: "Drawer__header-close", iconName: "clear", size: "xsmall", onClick: onClose })))),
-                React.createElement("div", { className: "Drawer__content" }, children),
+                React.createElement("div", { className: DrawerContentClassNames }, children),
                 footer && (React.createElement("div", { className: DrawerFooterClassNames }, footer))))))));
 };
 //# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}

package/dist/components/Eyebrow/Eyebrow.css

@@ -8,7 +8,7 @@
   font-family: "Nunito Sans", sans-serif;
   line-height: 1.5;
   font-size: 12px;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   display: block;

package/dist/components/Eyebrow/index.css

@@ -8,7 +8,7 @@
   font-family: "Nunito Sans", sans-serif;
   line-height: 1.5;
   font-size: 12px;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   display: block;

package/dist/components/Form/Form.css

@@ -43,8 +43,8 @@
 .Field.Field--error .Input > input,
 .Field.Field--error .TextArea {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
 }
 .Fields.Fields--error .Field .Input > input:focus,
@@ -52,8 +52,8 @@
 .Field.Field--error .Input > input:focus,
 .Field.Field--error .TextArea:focus {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
   -webkit-appearance: none;
 }

package/dist/components/Form/index.css

@@ -43,8 +43,8 @@
 .Field.Field--error .Input > input,
 .Field.Field--error .TextArea {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
 }
 .Fields.Fields--error .Field .Input > input:focus,
@@ -52,8 +52,8 @@
 .Field.Field--error .Input > input:focus,
 .Field.Field--error .TextArea:focus {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
   -webkit-appearance: none;
 }

package/dist/components/FormField/FormField.css

@@ -57,7 +57,7 @@
 }
 
 .FormField__errorText {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   font-size: 14px;
   line-height: 1.25;
   margin-top: 8px;
@@ -67,7 +67,7 @@
 }
 
 .FormField__description {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   font-size: 14px;
   line-height: 1.25;
   margin-top: 8px;
@@ -96,23 +96,23 @@
 
 /* Errors on Semantic Dropdown */
 .FormField--error .semantic-anvil-theme .ui.dropdown {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu {
-  border-color: var(--colorsBorderCritical, #e63717) !important;
+  border-color: var(--colorsBorderCritical, #e13212) !important;
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected {
-  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.03));
+  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.03));
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item:hover, .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected:hover {
-  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.08));
-  color: var(--colorsTextCritical, #e63717);
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.08));
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown:focus, .FormField--error .semantic-anvil-theme .ui.dropdown:focus-within {
   box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0) !important;

package/dist/components/FormField/index.css

@@ -57,7 +57,7 @@
 }
 
 .FormField__errorText {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   font-size: 14px;
   line-height: 1.25;
   margin-top: 8px;
@@ -67,7 +67,7 @@
 }
 
 .FormField__description {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   font-size: 14px;
   line-height: 1.25;
   margin-top: 8px;
@@ -96,23 +96,23 @@
 
 /* Errors on Semantic Dropdown */
 .FormField--error .semantic-anvil-theme .ui.dropdown {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu {
-  border-color: var(--colorsBorderCritical, #e63717) !important;
+  border-color: var(--colorsBorderCritical, #e13212) !important;
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected {
-  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.03));
+  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.03));
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item:hover, .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected:hover {
-  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.08));
-  color: var(--colorsTextCritical, #e63717);
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.08));
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown:focus, .FormField--error .semantic-anvil-theme .ui.dropdown:focus-within {
   box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0) !important;

package/dist/components/Frame/Frame.css

@@ -4,10 +4,10 @@
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  height: 100vh;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: calc(var(--frame-vh, 1vh) * 100);
+  min-height: calc(var(--frame-vh, 1vh) * 100);
 }
 
 .Frame__header {

package/dist/components/Frame/Frame.js

@@ -11,12 +11,24 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import classnames from 'classnames';
+import throttle from 'lodash/throttle';
 export const Frame = (_a) => {
     var { children, className, el: El = 'div', header } = _a, props = __rest(_a, ["children", "className", "el", "header"]);
     React.useEffect(() => {
         document.body.classList.add('of-hidden');
         return () => document.body.classList.remove('of-hidden');
     }, []);
+    React.useEffect(() => {
+        const calculateHeight = throttle(() => {
+            if (document.body.scrollHeight !== window.innerHeight) {
+                const vh = window.innerHeight * 0.01;
+                document.documentElement.style.setProperty('--frame-vh', `${vh}px`);
+            }
+        }, 100);
+        calculateHeight();
+        window.addEventListener('resize', calculateHeight);
+        return () => window.removeEventListener('resize', calculateHeight);
+    }, []);
     return (React.createElement(El, Object.assign({ className: classnames('Frame', className), "data-anvil-component": "Frame" }, props),
         header && React.createElement("div", { className: "Frame__header" }, header),
         React.createElement("div", { className: "Frame__content" }, children)));

package/dist/components/Frame/Frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"Frame.js","sourceRoot":"","sources":["../../../src/components/Frame/Frame.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAiBpC,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAMrC,EAAE,EAAE;QANiC,EACrC,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,EAAE,GAAG,KAAK,EACd,MAAM,OAEN,EADG,KAAK,cAL6B,yCAMrC,CADQ;IAER,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN,oBAAC,EAAE,kBACF,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,0BACpB,OAAO,IACxB,KAAK;QAER,MAAM,IAAI,6BAAK,SAAS,EAAC,eAAe,IAAE,MAAM,CAAO;QACxD,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAC5C,CACL,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"Frame.js","sourceRoot":"","sources":["../../../src/components/Frame/Frame.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AAiBvC,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAMrC,EAAE,EAAE;QANiC,EACrC,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,EAAE,GAAG,KAAK,EACd,MAAM,OAEN,EADG,KAAK,cAL6B,yCAMrC,CADQ;IAER,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE;YACrC,IAAI,QAAQ,CAAC,IAAI,CAAC,YAAY,KAAK,MAAM,CAAC,WAAW,EAAE;gBACtD,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC;gBACrC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,YAAY,EACZ,GAAG,EAAE,IAAI,CACT,CAAC;aACF;QACF,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,eAAe,EAAE,CAAC;QAElB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QACnD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN,oBAAC,EAAE,kBACF,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,0BACpB,OAAO,IACxB,KAAK;QAER,MAAM,IAAI,6BAAK,SAAS,EAAC,eAAe,IAAE,MAAM,CAAO;QACxD,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAC5C,CACL,CAAC;AACH,CAAC,CAAC"}

package/dist/components/Frame/index.css

@@ -4,10 +4,10 @@
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  height: 100vh;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: calc(var(--frame-vh, 1vh) * 100);
+  min-height: calc(var(--frame-vh, 1vh) * 100);
 }
 
 .Frame__header {

package/dist/components/Icon/Icon.css

@@ -145,7 +145,7 @@ button.Button {
 }
 
 .Button--red {
-  background-color: var(--colorsSurfaceCritical, #e63717);
+  background-color: var(--colorsSurfaceCritical, #e13212);
   color: var(--colorsTextOnCritical, #ffffff);
 }
 .Button--red:hover::before {
@@ -159,27 +159,27 @@ button.Button {
 }
 .Button--red.Button--outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .Button--red.Button--outline:hover::before {
-  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
 }
 .Button--red.Button--outline:active::before, .Button--red.Button--outline.Button--selected::before {
-  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
+  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
 }
 .Button--red.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .Button--red.Button--subtle {
   background-color: transparent;
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .Button--red.Button--subtle:hover::before {
-  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
 }
 .Button--red.Button--subtle:active::before, .Button--red.Button--subtle.Button--selected::before {
-  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
+  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
 }
 
 .Button--disabled, .Button--disabled.Button--outline, .Button--disabled.Button--subtle {

package/dist/components/Icon/index.css

@@ -145,7 +145,7 @@ button.Button {
 }
 
 .Button--red {
-  background-color: var(--colorsSurfaceCritical, #e63717);
+  background-color: var(--colorsSurfaceCritical, #e13212);
   color: var(--colorsTextOnCritical, #ffffff);
 }
 .Button--red:hover::before {
@@ -159,27 +159,27 @@ button.Button {
 }
 .Button--red.Button--outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .Button--red.Button--outline:hover::before {
-  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
 }
 .Button--red.Button--outline:active::before, .Button--red.Button--outline.Button--selected::before {
-  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
+  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
 }
 .Button--red.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .Button--red.Button--subtle {
   background-color: transparent;
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .Button--red.Button--subtle:hover::before {
-  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
 }
 .Button--red.Button--subtle:active::before, .Button--red.Button--subtle.Button--selected::before {
-  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
+  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
 }
 
 .Button--disabled, .Button--disabled.Button--outline, .Button--disabled.Button--subtle {

package/dist/components/InlineEdit/InlineEdit.css

@@ -79,7 +79,7 @@
 }
 
 .InlineEdit__content--error {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 
 .InlineEdit__content--underline .InlineEdit__value::before {
@@ -90,7 +90,7 @@
   border-bottom: 1px dashed currentColor;
 }
 .InlineEdit__content--underline.InlineEdit__content--error::before {
-  border-bottom-color: var(--colorsBorderCritical, #e63717);
+  border-bottom-color: var(--colorsBorderCritical, #e13212);
 }
 
 .InlineEdit__value--placeholder {

package/dist/components/InlineEdit/index.css

@@ -79,7 +79,7 @@
 }
 
 .InlineEdit__content--error {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 
 .InlineEdit__content--underline .InlineEdit__value::before {
@@ -90,7 +90,7 @@
   border-bottom: 1px dashed currentColor;
 }
 .InlineEdit__content--underline.InlineEdit__content--error::before {
-  border-bottom-color: var(--colorsBorderCritical, #e63717);
+  border-bottom-color: var(--colorsBorderCritical, #e13212);
 }
 
 .InlineEdit__value--placeholder {