@superdispatch/ui-lab 0.31.1 → 0.32.0

package/dist-src/alert/Alert.js

@@ -1,6 +1,6 @@
 import { CheckCircle, Error, Info, Warning } from '@material-ui/icons';
 import { Alert as MaterialAlert } from '@material-ui/lab';
-import { Color } from '@superdispatch/ui';
+import { ColorV2 } from '@superdispatch/ui';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,7 +10,7 @@ function colorMixin(textColor, iconColor, backgroundColor, buttonHoverColor) {
 var StyledAlert = /*#__PURE__*/styled(MaterialAlert).withConfig({
   displayName: "Alert__StyledAlert",
   componentId: "SD__sc-1j6qebb-0"
-})(["&.MuiAlert-outlinedSuccess{", ";}&.MuiAlert-outlinedInfo{", ";}&.MuiAlert-outlinedWarning{", ";}&.MuiAlert-outlinedError{", ";}& .MuiAlert-icon{opacity:1;padding:8px 0;font-size:24px;}& .MuiAlert-action{display:block;padding-top:5px;margin-right:-3px;& .MuiIconButton-root{& .MuiSvgIcon-root{font-size:24px;}}}"], /*#__PURE__*/colorMixin(Color.Green500, Color.Green300, Color.Green50, Color.Green400), /*#__PURE__*/colorMixin(Color.Blue500, Color.Blue300, Color.Blue50, Color.Blue400), /*#__PURE__*/colorMixin(Color.Yellow500, Color.Yellow300, Color.Yellow50, Color.Yellow400), /*#__PURE__*/colorMixin(Color.Red500, Color.Red300, Color.Red50, Color.Red400));
+})(["&.MuiAlert-outlinedSuccess{", ";}&.MuiAlert-outlinedInfo{", ";}&.MuiAlert-outlinedWarning{", ";}&.MuiAlert-outlinedError{", ";}& .MuiAlert-icon{opacity:1;padding:8px 0;font-size:24px;}& .MuiAlert-action{display:block;padding-top:5px;margin-right:-3px;& .MuiIconButton-root{& .MuiSvgIcon-root{font-size:24px;}}}"], /*#__PURE__*/colorMixin(ColorV2.Green500, ColorV2.Green300, ColorV2.Green50, ColorV2.Green400), /*#__PURE__*/colorMixin(ColorV2.Blue500, ColorV2.Blue300, ColorV2.Blue50, ColorV2.Blue400), /*#__PURE__*/colorMixin(ColorV2.Yellow500, ColorV2.Yellow300, ColorV2.Yellow50, ColorV2.Yellow400), /*#__PURE__*/colorMixin(ColorV2.Red500, ColorV2.Red300, ColorV2.Red50, ColorV2.Red400));
 function toMaterialSeverity(severity) {
   return severity === 'info' ? 'info' : severity === 'caution' ? 'warning' : severity === 'critical' ? 'error' : 'success';
 }

package/dist-src/banner/Banner.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"],
   _excluded2 = ["in"];
-import { Color } from '@superdispatch/ui';
+import { ColorV2 } from '@superdispatch/ui';
 import { forwardRef, useEffect, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 // eslint-disable-next-line import/no-internal-modules
@@ -10,10 +10,10 @@ import { CSSTransition } from 'react-transition-group';
 import styled, { css, keyframes } from 'styled-components';
 import { jsx as _jsx } from "react/jsx-runtime";
 function enterMixin(border) {
-  return css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], Color.Dark500, Color.White, border);
+  return css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], ColorV2.Dark500, ColorV2.White, border);
 }
 function enterAnimation(border) {
-  return keyframes(["0%{min-height:0;color:", ";background-color:", ";}50%{min-height:56px;color:", ";background-color:", ";}70%{min-height:56px;color:", ";background-color:", ";}100%{", "}"], Color.White, Color.Dark500, Color.White, Color.Dark500, Color.White, Color.Dark500, enterMixin(border));
+  return keyframes(["0%{min-height:0;color:", ";background-color:", ";}50%{min-height:56px;color:", ";background-color:", ";}70%{min-height:56px;color:", ";background-color:", ";}100%{", "}"], ColorV2.White, ColorV2.Dark500, ColorV2.White, ColorV2.Dark500, ColorV2.White, ColorV2.Dark500, enterMixin(border));
 }
 var CustomTransition = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
@@ -37,7 +37,7 @@ var BannerContent = /*#__PURE__*/styled(CustomTransition).withConfig({
   var {
     border = 'bottom'
   } = _ref2;
-  return css(["height:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;color:", ";background-color:", ";&-enter-active{animation:", " 2s 1s forwards;}&-enter-done{", ";}&-exit{", ";}&-exit-active{min-height:0;transition:min-height 2s 1s;}"], Color.White, Color.White, enterAnimation(border), enterMixin(border), enterMixin(border));
+  return css(["height:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;color:", ";background-color:", ";&-enter-active{animation:", " 2s 1s forwards;}&-enter-done{", ";}&-exit{", ";}&-exit-active{min-height:0;transition:min-height 2s 1s;}"], ColorV2.White, ColorV2.White, enterAnimation(border), enterMixin(border), enterMixin(border));
 });
 export var Banner = /*#__PURE__*/forwardRef((_ref3, ref) => {
   var {

package/dist-src/box/Box.js

@@ -1,4 +1,4 @@
-import { Color, isColorProp, parseResponsiveProp, parseSpaceProp } from '@superdispatch/ui';
+import { ColorV2, isColorPropV2, parseResponsiveProp, parseSpaceProp } from '@superdispatch/ui';
 import styled from 'styled-components';
 import { createRuleNormalizer } from "../utils/RuleNormalizer.js";
 
@@ -7,7 +7,7 @@ import { createRuleNormalizer } from "../utils/RuleNormalizer.js";
 //
 
 function normalizeColor(input) {
-  return isColorProp(input) ? Color[input] : undefined;
+  return isColorPropV2(input) ? ColorV2[input] : undefined;
 }
 
 //

package/dist-src/button/Button.js

@@ -4,7 +4,7 @@ var _excluded = ["children", "endIcon", "startIcon", "tabIndex", "active", "pend
   _excluded2 = ["type"],
   _excluded3 = ["href", "target"];
 import { CircularProgress } from '@material-ui/core';
-import { Color } from '@superdispatch/ui';
+import { ColorV2 } from '@superdispatch/ui';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,15 +18,15 @@ function createButtonVariables(size, _ref) {
     paddingY = size === 'large' ? 8 : size === 'small' ? 2 : 6,
     paddingXMobile = size === 'large' ? 64 : 24,
     paddingYMobile = size === 'large' ? 14 : size === 'small' ? 4 : 10,
-    textColor = Color.Transparent,
+    textColor = ColorV2.Transparent,
     textColorHovered = textColor,
     textColorDisabled = textColor,
     iconColor = textColor,
-    outlineColor = Color.Transparent,
-    borderColor = Color.Transparent,
+    outlineColor = ColorV2.Transparent,
+    borderColor = ColorV2.Transparent,
     borderColorHovered = borderColor,
     borderColorDisabled = borderColor,
-    backgroundColor = Color.Transparent,
+    backgroundColor = ColorV2.Transparent,
     backgroundColorHovered = backgroundColor,
     backgroundColorActive = backgroundColorHovered,
     backgroundColorDisabled = backgroundColor
@@ -56,13 +56,13 @@ function createButtonVariables(size, _ref) {
 }
 function getDefaultVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.White,
-    outlineColor: Color.Blue30,
-    backgroundColor: Color.Blue300,
-    textColorHovered: Color.White,
-    backgroundColorHovered: Color.Blue500,
-    backgroundColorActive: Color.Blue400,
-    backgroundColorDisabled: Color.Blue30
+    textColor: ColorV2.White,
+    outlineColor: ColorV2.Blue30,
+    backgroundColor: ColorV2.Blue300,
+    textColorHovered: ColorV2.White,
+    backgroundColorHovered: ColorV2.Blue500,
+    backgroundColorActive: ColorV2.Blue400,
+    backgroundColorDisabled: ColorV2.Blue30
   });
 }
 function getPrimaryVariables(size) {
@@ -70,62 +70,62 @@ function getPrimaryVariables(size) {
 }
 function getNeutralVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.Dark500,
-    borderColor: Color.Silver500,
-    outlineColor: Color.Blue30,
-    backgroundColor: Color.White,
-    textColorHovered: Color.Blue500,
-    borderColorHovered: Color.Blue500,
-    backgroundColorHovered: Color.Blue50,
-    backgroundColorActive: Color.Blue75,
-    textColorDisabled: Color.Silver500,
-    iconColor: Color.Dark100
+    textColor: ColorV2.Dark500,
+    borderColor: ColorV2.Silver500,
+    outlineColor: ColorV2.Blue30,
+    backgroundColor: ColorV2.White,
+    textColorHovered: ColorV2.Blue500,
+    borderColorHovered: ColorV2.Blue500,
+    backgroundColorHovered: ColorV2.Blue50,
+    backgroundColorActive: ColorV2.Blue75,
+    textColorDisabled: ColorV2.Silver500,
+    iconColor: ColorV2.Dark100
   });
 }
 function getCriticalVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.Red500,
-    borderColor: Color.Red500,
-    outlineColor: Color.Red30,
-    backgroundColor: Color.Red50,
-    backgroundColorHovered: Color.Red75,
-    backgroundColorActive: Color.Red10,
-    textColorDisabled: Color.Red30,
-    borderColorDisabled: Color.Red30,
-    backgroundColorDisabled: Color.Red50
+    textColor: ColorV2.Red500,
+    borderColor: ColorV2.Red500,
+    outlineColor: ColorV2.Red30,
+    backgroundColor: ColorV2.Red50,
+    backgroundColorHovered: ColorV2.Red75,
+    backgroundColorActive: ColorV2.Red10,
+    textColorDisabled: ColorV2.Red30,
+    borderColorDisabled: ColorV2.Red30,
+    backgroundColorDisabled: ColorV2.Red50
   });
 }
 function getTextVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.Blue500,
-    outlineColor: Color.Blue30,
-    textColorHovered: Color.Blue500,
-    backgroundColorHovered: Color.Blue50,
-    backgroundColorActive: Color.Blue75,
-    textColorDisabled: Color.Blue30
+    textColor: ColorV2.Blue500,
+    outlineColor: ColorV2.Blue30,
+    textColorHovered: ColorV2.Blue500,
+    backgroundColorHovered: ColorV2.Blue50,
+    backgroundColorActive: ColorV2.Blue75,
+    textColorDisabled: ColorV2.Blue30
   });
 }
 function getInvertedVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.White,
-    outlineColor: Color.White40,
-    backgroundColor: Color.White20,
-    textColorHovered: Color.White,
-    backgroundColorHovered: Color.White40,
-    backgroundColorActive: Color.White20,
-    textColorDisabled: Color.White50,
-    backgroundColorDisabled: Color.White08
+    textColor: ColorV2.White,
+    outlineColor: ColorV2.White40,
+    backgroundColor: ColorV2.White20,
+    textColorHovered: ColorV2.White,
+    backgroundColorHovered: ColorV2.White40,
+    backgroundColorActive: ColorV2.White20,
+    textColorDisabled: ColorV2.White50,
+    backgroundColorDisabled: ColorV2.White08
   });
 }
 function getSuccessVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.White,
-    outlineColor: Color.Green30,
-    backgroundColor: Color.Green300,
-    backgroundColorHovered: Color.Green500,
-    backgroundColorActive: Color.Green500,
-    textColorDisabled: Color.White,
-    backgroundColorDisabled: Color.Green30
+    textColor: ColorV2.White,
+    outlineColor: ColorV2.Green30,
+    backgroundColor: ColorV2.Green300,
+    backgroundColorHovered: ColorV2.Green500,
+    backgroundColorActive: ColorV2.Green500,
+    textColorDisabled: ColorV2.White,
+    backgroundColorDisabled: ColorV2.Green30
   });
 }
 var ButtonRoot = /*#__PURE__*/styled.button.withConfig({
@@ -139,7 +139,7 @@ var ButtonRoot = /*#__PURE__*/styled.button.withConfig({
     fullWidth
   } = _ref2;
   var variables = variant === 'primary' ? getPrimaryVariables(size) : variant === 'neutral' ? getNeutralVariables(size) : variant === 'critical' ? getCriticalVariables(size) : variant === 'text' ? getTextVariables(size) : variant === 'inverted' ? getInvertedVariables(size) : variant === 'success' ? getSuccessVariables(size) : getDefaultVariables(size);
-  return css(JSON.parse('["border:0;margin:0;outline:0;position:relative;vertical-align:middle;cursor:pointer;text-decoration:none;&[aria-disabled=\'true\']{cursor:default;pointer-events:none;}-moz-appearance:none;&::-moz-focus-inner{border-style:none;}-webkit-appearance:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;@media print{-webkit-print-color-adjust:exact;}--button-visibility:visible;--button-text-color:",";--button-border-color:",";--button-outline-color:",";--button-background-color:",";--button-icon-color:",";--button-padding-x:","px;--button-padding-y:","px;--button-font-size:","px;--button-line-height:","px;","{--button-padding-x:","px;--button-padding-y:","px;--button-font-size:","px;--button-line-height:","px;}&[aria-disabled=\'true\']{--button-text-color:",";--button-border-color:",";--button-background-color:",";--button-icon-color:",";&[aria-busy=\'true\']{--button-visibility:hidden;}}&[aria-disabled=\'false\']{&[aria-expanded=\'true\']{--button-text-color:",";--button-border-color:",";--button-background-color:",";--button-icon-color:",";}&,&[aria-expanded=\'true\']{&:focus{--button-outline-color:",";}@media (hover:hover) and (pointer:fine){&:hover{--button-text-color:",";--button-border-color:",";--button-background-color:",";span{svg{fill:",";}}}}&:active{--button-background-color:",";}}}display:inline-flex;align-items:center;justify-content:center;min-width:48px;width:",";border-radius:4px;font-family:",";font-weight:",";color:var(--button-text-color);background-color:var(--button-background-color);font-size:var(--button-font-size);line-height:var(--button-line-height);padding:var(--button-padding-y) var(--button-padding-x);box-shadow:inset 0 0 0 1px var(--button-border-color),0 0 0 2px var(--button-outline-color);transition:",";"]'), variables.textColor, variables.borderColor, Color.Transparent, variables.backgroundColor, variables.iconColor, variables.paddingXMobile, variables.paddingYMobile, variables.fontSizeMobile, variables.lineHeightMobile, theme.breakpoints.up('sm'), variables.paddingX, variables.paddingY, variables.fontSize, variables.lineHeight, variables.textColorDisabled, variables.borderColorDisabled, variables.backgroundColorDisabled, variables.textColorDisabled, variables.textColorHovered, variables.borderColorHovered, variables.backgroundColorHovered, variables.textColorHovered, variables.outlineColor, variables.textColorHovered, variables.borderColorHovered, variables.backgroundColorHovered, variables.textColorHovered, variables.backgroundColorActive, fullWidth ? '100%' : 'auto', theme.typography.fontFamily, theme.typography.fontWeightBold, theme.transitions.create(['color', 'box-shadow', 'background-color']));
+  return css(JSON.parse('["border:0;margin:0;outline:0;position:relative;vertical-align:middle;cursor:pointer;text-decoration:none;&[aria-disabled=\'true\']{cursor:default;pointer-events:none;}-moz-appearance:none;&::-moz-focus-inner{border-style:none;}-webkit-appearance:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;@media print{-webkit-print-color-adjust:exact;}--button-visibility:visible;--button-text-color:",";--button-border-color:",";--button-outline-color:",";--button-background-color:",";--button-icon-color:",";--button-padding-x:","px;--button-padding-y:","px;--button-font-size:","px;--button-line-height:","px;","{--button-padding-x:","px;--button-padding-y:","px;--button-font-size:","px;--button-line-height:","px;}&[aria-disabled=\'true\']{--button-text-color:",";--button-border-color:",";--button-background-color:",";--button-icon-color:",";&[aria-busy=\'true\']{--button-visibility:hidden;}}&[aria-disabled=\'false\']{&[aria-expanded=\'true\']{--button-text-color:",";--button-border-color:",";--button-background-color:",";--button-icon-color:",";}&,&[aria-expanded=\'true\']{&:focus{--button-outline-color:",";}@media (hover:hover) and (pointer:fine){&:hover{--button-text-color:",";--button-border-color:",";--button-background-color:",";span{svg{fill:",";}}}}&:active{--button-background-color:",";}}}display:inline-flex;align-items:center;justify-content:center;min-width:48px;width:",";border-radius:4px;font-family:",";font-weight:",";color:var(--button-text-color);background-color:var(--button-background-color);font-size:var(--button-font-size);line-height:var(--button-line-height);padding:var(--button-padding-y) var(--button-padding-x);box-shadow:inset 0 0 0 1px var(--button-border-color),0 0 0 2px var(--button-outline-color);transition:",";"]'), variables.textColor, variables.borderColor, ColorV2.Transparent, variables.backgroundColor, variables.iconColor, variables.paddingXMobile, variables.paddingYMobile, variables.fontSizeMobile, variables.lineHeightMobile, theme.breakpoints.up('sm'), variables.paddingX, variables.paddingY, variables.fontSize, variables.lineHeight, variables.textColorDisabled, variables.borderColorDisabled, variables.backgroundColorDisabled, variables.textColorDisabled, variables.textColorHovered, variables.borderColorHovered, variables.backgroundColorHovered, variables.textColorHovered, variables.outlineColor, variables.textColorHovered, variables.borderColorHovered, variables.backgroundColorHovered, variables.textColorHovered, variables.backgroundColorActive, fullWidth ? '100%' : 'auto', theme.typography.fontFamily, theme.typography.fontWeightBold, theme.transitions.create(['color', 'box-shadow', 'background-color']));
 });
 var ButtonLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "Button__ButtonLabel",

package/dist-src/button-area/ButtonArea.js

@@ -2,14 +2,14 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["icon", "children", "variant", "active", "disabled", "fullWidth"];
 import { ButtonBase, Typography } from '@material-ui/core';
-import { Color, Stack } from '@superdispatch/ui';
+import { ColorV2, Stack } from '@superdispatch/ui';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var ButtonRoot = /*#__PURE__*/styled(ButtonBase).withConfig({
   displayName: "ButtonArea__ButtonRoot",
   componentId: "SD__sc-1czum63-0"
-})(["padding:12px 32px;border-width:1px;border-radius:4px;border-style:solid;border-color:", ";color:", ";background-color:", ";& svg{color:inherit;font-size:24px;}&[data-full-width='true']{width:100%;}&[data-disabled='true']{color:", ";border-color:", ";}&[data-variant='success']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}&[data-variant='danger']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}"], Color.Silver500, Color.Dark100, Color.White, Color.Silver500, Color.Silver400, Color.Green300, Color.Green100, Color.Green300, Color.Green300, Color.Green300, Color.Green50, Color.Red300, Color.Red100, Color.Red300, Color.Red300, Color.Red300, Color.Red50);
+})(["padding:12px 32px;border-width:1px;border-radius:4px;border-style:solid;border-color:", ";color:", ";background-color:", ";& svg{color:inherit;font-size:24px;}&[data-full-width='true']{width:100%;}&[data-disabled='true']{color:", ";border-color:", ";}&[data-variant='success']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}&[data-variant='danger']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}"], ColorV2.Silver500, ColorV2.Dark100, ColorV2.White, ColorV2.Silver500, ColorV2.Silver400, ColorV2.Green300, ColorV2.Green100, ColorV2.Green300, ColorV2.Green300, ColorV2.Green300, ColorV2.Green50, ColorV2.Red300, ColorV2.Red100, ColorV2.Red300, ColorV2.Red300, ColorV2.Red300, ColorV2.Red50);
 export var ButtonArea = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
       icon,

package/dist-src/description-item/DescriptionItem.js

@@ -1,4 +1,4 @@
-import { Color, Column, Columns, Inline, isEmptyReactNode, useUID } from '@superdispatch/ui';
+import { ColorV2, Column, Columns, Inline, isEmptyReactNode, useUID } from '@superdispatch/ui';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { TextBox } from "../text-box/TextBox.js";
@@ -13,7 +13,7 @@ var DescriptionItemIcon = /*#__PURE__*/styled.div.withConfig({
   var {
     theme
   } = _ref;
-  return css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], Color.Dark100, descriptionItemIconMixin(20), theme.breakpoints.up('sm'), descriptionItemIconMixin(16));
+  return css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], ColorV2.Dark100, descriptionItemIconMixin(20), theme.breakpoints.up('sm'), descriptionItemIconMixin(16));
 });
 export var DescriptionItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {

package/dist-src/description-line-item/DescriptionLineItem.js

@@ -1,11 +1,11 @@
-import { Color, Column, Columns } from '@superdispatch/ui';
+import { ColorV2, Column, Columns } from '@superdispatch/ui';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var DottedLine = /*#__PURE__*/styled.div.withConfig({
   displayName: "DescriptionLineItem__DottedLine",
   componentId: "SD__sc-1ixx5h8-0"
-})(["border-bottom:1px dotted ", ";margin:0px 8px;height:7px;"], Color.Silver400);
+})(["border-bottom:1px dotted ", ";margin:0px 8px;height:7px;"], ColorV2.Silver400);
 export var DescriptionLineItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     title,

package/dist-src/file-drop-zone/FileDropZone.js

@@ -4,7 +4,7 @@ var _excluded = ["disabled", "children", "hintText", "startIcon", "fallback", "a
 import { CircularProgress, SvgIcon } from '@material-ui/core';
 import { Error } from '@material-ui/icons';
 import { mdiUpload } from '@mdi/js';
-import { CardButton, Color, Column, Columns } from '@superdispatch/ui';
+import { CardButton, ColorV2, Column, Columns } from '@superdispatch/ui';
 import { forwardRef, Suspense } from 'react';
 import Dropzone from 'react-dropzone';
 import styled from 'styled-components';
@@ -30,7 +30,7 @@ var StyledCardButton = /*#__PURE__*/styled(CardButton).withConfig({
     status
   } = _ref;
   return {
-    backgroundColor: status === 'active' ? Color.Blue50 : undefined
+    backgroundColor: status === 'active' ? ColorV2.Blue50 : undefined
   };
 });
 function UploadRejection(_ref2) {

package/dist-src/file-list-item/FileListItem.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { CircularProgress, IconButton, Link, SvgIcon, Tooltip } from '@material-ui/core';
 import { CheckCircle, Delete, Error, Image, Refresh } from '@material-ui/icons';
 import { mdiFilePdfBox, mdiTextBox } from '@mdi/js';
-import { Color, Column, Columns, useResponsiveValue, useUID } from '@superdispatch/ui';
+import { ColorV2, Column, Columns, useResponsiveValue, useUID } from '@superdispatch/ui';
 import { forwardRef, memo, useState } from 'react';
 import styled from 'styled-components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -112,7 +112,7 @@ export var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
           size: "small",
           children: /*#__PURE__*/_jsx(CheckCircle, {
             fontSize: "small",
-            htmlColor: Color.Green300
+            htmlColor: ColorV2.Green300
           })
         }) : canDelete ? /*#__PURE__*/_jsx(Tooltip, {
           title: "Delete",

package/dist-src/navbar/NavbarAccordion.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { Accordion, AccordionSummary } from '@material-ui/core';
 import { ExpandMore } from '@material-ui/icons';
-import { Color, useUID } from '@superdispatch/ui';
+import { ColorV2, useUID } from '@superdispatch/ui';
 import { useEffect, useMemo, useState, createElement as _createElement } from 'react';
 import styled from 'styled-components';
 import { useNavbarContext } from "./NavbarContext.js";
@@ -14,11 +14,11 @@ export var NavbarAccordionLabel = /*#__PURE__*/styled.span.withConfig({
 var NavbarAccordionRoot = /*#__PURE__*/styled(Accordion).withConfig({
   displayName: "NavbarAccordion__NavbarAccordionRoot",
   componentId: "SD__sc-1s7g3kw-1"
-})(["width:100%;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;background-color:#1b2638;&[aria-current]{background-color:#2f394a;color:", ";}&.MuiAccordion-root:before{background-color:#1b2638;}&.MuiPaper-elevation0{border:0px;}&[data-gutter]{margin-top:16px;}&[data-gutter].MuiAccordion-root.Mui-expanded{margin-top:16px;}"], Color.White);
+})(["width:100%;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;background-color:#1b2638;&[aria-current]{background-color:#2f394a;color:", ";}&.MuiAccordion-root:before{background-color:#1b2638;}&.MuiPaper-elevation0{border:0px;}&[data-gutter]{margin-top:16px;}&[data-gutter].MuiAccordion-root.Mui-expanded{margin-top:16px;}"], ColorV2.White);
 var NavbarAccordionSummary = /*#__PURE__*/styled(AccordionSummary).withConfig({
   displayName: "NavbarAccordion__NavbarAccordionSummary",
   componentId: "SD__sc-1s7g3kw-2"
-})(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root{max-height:40px;min-height:40px;}&.MuiAccordionSummary-content{align-items:center;}&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.White, Color.Blue300);
+})(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root{max-height:40px;min-height:40px;}&.MuiAccordionSummary-content{align-items:center;}&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], ColorV2.White, ColorV2.Blue300);
 var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarAccordion__IconWrapper",
   componentId: "SD__sc-1s7g3kw-3"

package/dist-src/navbar/NavbarAvatar.js

@@ -2,14 +2,14 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["title", "subtitle", "children"];
 import { Avatar, Typography } from '@material-ui/core';
-import { Color, Column, Columns, Stack } from '@superdispatch/ui';
+import { ColorV2, Column, Columns, Stack } from '@superdispatch/ui';
 import styled from 'styled-components';
 import { useNavbarContext } from "./NavbarContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var StyledTypography = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "NavbarAvatar__StyledTypography",
   componentId: "SD__sc-19q2zd0-0"
-})(["color:", ";text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&:hover{color:", ";}"], Color.Silver500, Color.White);
+})(["color:", ";text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&:hover{color:", ";}"], ColorV2.Silver500, ColorV2.White);
 export function NavbarAvatar(_ref) {
   var {
       title,

package/dist-src/navbar/NavbarBottomBar.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["active", "hasBadge"];
 import { BottomNavigation, BottomNavigationAction } from '@material-ui/core';
 import { Menu } from '@material-ui/icons';
-import { Color } from '@superdispatch/ui';
+import { ColorV2 } from '@superdispatch/ui';
 import { useMemo, createElement as _createElement } from 'react';
 import styled from 'styled-components';
 import { useNavbarContext } from "./NavbarContext.js";
@@ -11,11 +11,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var StyledBottomNavigation = /*#__PURE__*/styled(BottomNavigation).withConfig({
   displayName: "NavbarBottomBar__StyledBottomNavigation",
   componentId: "SD__sc-9z6v3k-0"
-})(["background:", ";"], Color.Dark500);
+})(["background:", ";"], ColorV2.Dark500);
 var StyledBottomNavigationAction = /*#__PURE__*/styled(BottomNavigationAction).withConfig({
   displayName: "NavbarBottomBar__StyledBottomNavigationAction",
   componentId: "SD__sc-9z6v3k-1"
-})(["&&{background:#1b2638;color:", ";padding:6px 0 8px;line-height:20px;}&:first-child{padding-left:12px;}&:last-child{padding-right:12px;}&.Mui-selected{color:", ";.MuiBottomNavigationAction-label{font-size:0.75rem;}}"], Color.Silver500, Color.White);
+})(["&&{background:#1b2638;color:", ";padding:6px 0 8px;line-height:20px;}&:first-child{padding-left:12px;}&:last-child{padding-right:12px;}&.Mui-selected{color:", ";.MuiBottomNavigationAction-label{font-size:0.75rem;}}"], ColorV2.Silver500, ColorV2.White);
 var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarBottomBar__IconWrapper",
   componentId: "SD__sc-9z6v3k-2"
@@ -23,7 +23,7 @@ var IconWrapper = /*#__PURE__*/styled.div.withConfig({
 var IconLabel = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarBottomBar__IconLabel",
   componentId: "SD__sc-9z6v3k-3"
-})(["display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:50%;color:", ";background:", ";position:absolute;top:0;right:0;width:8px;height:8px;"], Color.White, Color.Red300);
+})(["display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:50%;color:", ";background:", ";position:absolute;top:0;right:0;width:8px;height:8px;"], ColorV2.White, ColorV2.Red300);
 export function NavbarBottomBar(_ref) {
   var {
     items,

package/dist-src/navbar/NavbarItem.js

@@ -1,10 +1,10 @@
-import { Color, useUID } from '@superdispatch/ui';
+import { ColorV2, useUID } from '@superdispatch/ui';
 import styled from 'styled-components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var NavbarBadge = /*#__PURE__*/styled.span.withConfig({
   displayName: "NavbarItem__NavbarBadge",
   componentId: "SD__sc-1pvzq3w-0"
-})(["flex-shrink:0;padding:4px 6px;min-width:20px;line-height:12px;font-size:12px;font-weight:400;border-radius:10px;text-align:center;background:#131c2a;&[data-variant='primary']{color:", ";background:", ";}&[data-variant='danger']{color:", ";background:", ";}"], Color.White, Color.Blue300, Color.White, Color.Red500);
+})(["flex-shrink:0;padding:4px 6px;min-width:20px;line-height:12px;font-size:12px;font-weight:400;border-radius:10px;text-align:center;background:#131c2a;&[data-variant='primary']{color:", ";background:", ";}&[data-variant='danger']{color:", ";background:", ";}"], ColorV2.White, ColorV2.Blue300, ColorV2.White, ColorV2.Red500);
 export var NavbarLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "NavbarItem__NavbarLabel",
   componentId: "SD__sc-1pvzq3w-1"
@@ -12,7 +12,7 @@ export var NavbarLabel = /*#__PURE__*/styled.span.withConfig({
 var NavbarItemRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarItem__NavbarItemRoot",
   componentId: "SD__sc-1pvzq3w-2"
-})(["width:100%;display:flex;align-items:center;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;padding:8px 16px;border-left:4px solid transparent;&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}"], Color.White, Color.Blue300);
+})(["width:100%;display:flex;align-items:center;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;padding:8px 16px;border-left:4px solid transparent;&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}"], ColorV2.White, ColorV2.Blue300);
 var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarItem__IconWrapper",
   componentId: "SD__sc-1pvzq3w-3"

package/dist-src/navbar/NavbarList.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { IconButton } from '@material-ui/core';
 import { Menu as MenuIcon, MenuOpen } from '@material-ui/icons';
-import { Color, Inline, useResponsiveValue } from '@superdispatch/ui';
+import { ColorV2, Inline, useResponsiveValue } from '@superdispatch/ui';
 import { useMemo, createElement as _createElement } from 'react';
 import styled from 'styled-components';
 import { NavbarAccordion } from "./NavbarAccordion.js";
@@ -34,7 +34,7 @@ var Wrapper = /*#__PURE__*/styled.div.withConfig({
 var ExpandIconButton = /*#__PURE__*/styled(IconButton).withConfig({
   displayName: "NavbarList__ExpandIconButton",
   componentId: "SD__sc-19zrmxc-2"
-})(["color:", ";&&:focus{background-color:inherit;}"], Color.Silver500);
+})(["color:", ";&&:focus{background-color:inherit;}"], ColorV2.Silver500);
 var Footer = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Footer",
   componentId: "SD__sc-19zrmxc-3"
@@ -42,7 +42,7 @@ var Footer = /*#__PURE__*/styled.div.withConfig({
 var Root = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Root",
   componentId: "SD__sc-19zrmxc-4"
-})(["color:inherit;background-color:unset;border-left:unset;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;padding:8px 16px;svg{font-size:24px;color:", ";}"], Color.Dark100);
+})(["color:inherit;background-color:unset;border-left:unset;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;padding:8px 16px;svg{font-size:24px;color:", ";}"], ColorV2.Dark100);
 export function NavbarMenuItem(_ref4) {
   var {
     label,
@@ -65,7 +65,7 @@ export function NavbarMenuItem(_ref4) {
 var Content = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Content",
   componentId: "SD__sc-19zrmxc-5"
-})(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:100vw;margin-bottom:100px;}"], NavbarBadge, NavbarLabel, Color.Dark300);
+})(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:100vw;margin-bottom:100px;}"], NavbarBadge, NavbarLabel, ColorV2.Dark300);
 export function NavbarList(_ref5) {
   var {
     header,

package/dist-src/navbar/NavbarMenu.js

@@ -1,5 +1,5 @@
 import { Menu, MenuItem, Typography } from '@material-ui/core';
-import { Color, Inline } from '@superdispatch/ui';
+import { ColorV2, Inline } from '@superdispatch/ui';
 import { useState } from 'react';
 import styled from 'styled-components';
 import { useNavbarContext } from "./NavbarContext.js";
@@ -7,20 +7,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 var Divider = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarMenu__Divider",
   componentId: "SD__sc-1c8icpt-0"
-})(["border-bottom:1px solid ", ";margin:8px -16px;"], Color.Silver400);
+})(["border-bottom:1px solid ", ";margin:8px -16px;"], ColorV2.Silver400);
 var StyledMenuItem = /*#__PURE__*/styled(MenuItem).withConfig({
   displayName: "NavbarMenu__StyledMenuItem",
   componentId: "SD__sc-1c8icpt-1"
-})(["& svg{font-size:24px;color:", ";}"], Color.Dark100);
+})(["& svg{font-size:24px;color:", ";}"], ColorV2.Dark100);
 var Wrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarMenu__Wrapper",
   componentId: "SD__sc-1c8icpt-2"
-})(["width:100%;padding:8px 16px;cursor:pointer;background:", ";border-left:4px solid ", ";&:hover{border-left-color:", ";background:", ";}"], Color.Dark400, _ref => {
+})(["width:100%;padding:8px 16px;cursor:pointer;background:", ";border-left:4px solid ", ";&:hover{border-left-color:", ";background:", ";}"], ColorV2.Dark400, _ref => {
   var {
     active
   } = _ref;
-  return active ? Color.Blue300 : 'transparent';
-}, Color.Blue300, Color.Dark400);
+  return active ? ColorV2.Blue300 : 'transparent';
+}, ColorV2.Blue300, ColorV2.Dark400);
 export function NavbarMenu(_ref2) {
   var {
     items,
@@ -63,7 +63,7 @@ export function NavbarMenu(_ref2) {
             verticalAlign: "center",
             children: [item.icon, /*#__PURE__*/_jsx(Typography, {
               style: {
-                color: Color.Dark500
+                color: ColorV2.Dark500
               },
               children: item.label
             })]

package/dist-src/sidebar/Sidebar.js

@@ -1,4 +1,4 @@
-import { Color, Column, Columns, useUID } from '@superdispatch/ui';
+import { ColorV2, Column, Columns, useUID } from '@superdispatch/ui';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { TextBox } from "../text-box/TextBox.js";
@@ -6,11 +6,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var SidebarRoot = /*#__PURE__*/styled.aside.withConfig({
   displayName: "Sidebar__SidebarRoot",
   componentId: "SD__sc-b77o22-0"
-})(["top:0;position:sticky;overflow-y:auto;overflow-x:hidden;height:100vh;background-color:", ";border-right:1px solid ", ";"], Color.White, Color.Silver400);
+})(["top:0;position:sticky;overflow-y:auto;overflow-x:hidden;height:100vh;background-color:", ";border-right:1px solid ", ";"], ColorV2.White, ColorV2.Silver400);
 var SidebarHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "Sidebar__SidebarHeader",
   componentId: "SD__sc-b77o22-1"
-})(["top:0;z-index:2;position:sticky;padding-left:24px;padding-right:24px;padding-bottom:8px;background-color:", ";"], Color.White);
+})(["top:0;z-index:2;position:sticky;padding-left:24px;padding-right:24px;padding-bottom:8px;background-color:", ";"], ColorV2.White);
 var SidebarTitle = /*#__PURE__*/styled.div.withConfig({
   displayName: "Sidebar__SidebarTitle",
   componentId: "SD__sc-b77o22-2"

package/dist-src/sidebar/SidebarMenuItem.js

@@ -1,6 +1,6 @@
 import { ButtonBase } from '@material-ui/core';
 import { OpenInNew } from '@material-ui/icons';
-import { Color, Column, Columns, Inline, mergeRefs } from '@superdispatch/ui';
+import { ColorV2, Column, Columns, Inline, mergeRefs } from '@superdispatch/ui';
 import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { TextBox } from "../text-box/TextBox.js";
@@ -15,12 +15,12 @@ var SidebarMenuItemRoot = /*#__PURE__*/styled.div.withConfig({
     hasAvatar
   } = _ref;
   var height = hasAvatar ? 48 : 40;
-  return css(["position:relative;& > .MuiButtonBase-root{width:100%;display:flex;justify-content:flex-start;padding-left:24px;padding-right:24px;height:", "px;max-height:", "px;&[aria-current='true']{background-color:", ";box-shadow:inset 4px 0 0 ", ";}&:hover{background-color:", ";}}"], height, height, Color.Silver200, Color.Blue300, Color.Silver200);
+  return css(["position:relative;& > .MuiButtonBase-root{width:100%;display:flex;justify-content:flex-start;padding-left:24px;padding-right:24px;height:", "px;max-height:", "px;&[aria-current='true']{background-color:", ";box-shadow:inset 4px 0 0 ", ";}&:hover{background-color:", ";}}"], height, height, ColorV2.Silver200, ColorV2.Blue300, ColorV2.Silver200);
 });
 var SidebarMenuItemBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarMenuItem__SidebarMenuItemBadge",
   componentId: "SD__sc-1sb5zqa-1"
-})(["font-size:12px;font-weight:500;line-height:16px;padding-left:4px;padding-right:4px;border-radius:100px;color:", ";background-color:", ";"], Color.Dark500, Color.Silver400);
+})(["font-size:12px;font-weight:500;line-height:16px;padding-left:4px;padding-right:4px;border-radius:100px;color:", ";background-color:", ";"], ColorV2.Dark500, ColorV2.Silver400);
 export var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     action,

package/dist-src/text-box/TextBox.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
-import { Color, parseResponsiveProp } from '@superdispatch/ui';
+import { ColorV2, parseResponsiveProp } from '@superdispatch/ui';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { mergeStyles } from "../utils/mergeStyles.js";
@@ -9,16 +9,16 @@ import { createRuleNormalizer } from "../utils/RuleNormalizer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
   inherit: 'inherit',
-  primary: Color.Dark500,
-  secondary: Color.Dark300,
-  'light-gray': Color.Dark100,
-  white: Color.White,
-  blue: Color.Blue500,
-  green: Color.Green500,
-  purple: Color.Purple500,
-  red: Color.Red500,
-  teal: Color.Teal500,
-  yellow: Color.Yellow500
+  primary: ColorV2.Dark500,
+  secondary: ColorV2.Dark300,
+  'light-gray': ColorV2.Dark100,
+  white: ColorV2.White,
+  blue: ColorV2.Blue500,
+  green: ColorV2.Green500,
+  purple: ColorV2.Purple500,
+  red: ColorV2.Red500,
+  teal: ColorV2.Teal500,
+  yellow: ColorV2.Yellow500
 });
 var VARIANT_TYPE_MAPPING = {
   'heading-1': 'h1',