@superdispatch/ui 0.31.1 → 0.33.0

package/dist-web/index.js

@@ -5,9 +5,9 @@ import { MoreHoriz, Info, Close, Error, CheckCircle } from '@material-ui/icons';
 import { makeStyles, StylesProvider, ThemeProvider as ThemeProvider$1 } from '@material-ui/styles';
 import { forwardRef, useState, useRef, useLayoutEffect, cloneElement, useMemo, useContext, createContext, Children, useCallback, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import styled, { css, ThemeProvider as ThemeProvider$2 } from 'styled-components';
+import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$2 } from 'styled-components';
 import { ResizeObserver } from '@juggle/resize-observer';
-import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo, useConstant } from '@superdispatch/hooks';
+import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo } from '@superdispatch/hooks';
 import clsx from 'clsx';
 import flattenChildren from 'react-keyed-flatten-children';
 import { NumericFormat, PatternFormat } from 'react-number-format';
@@ -59,7 +59,7 @@ var CaretButton = /*#__PURE__*/styled(Button).withConfig({
   var {
     variant
   } = _ref;
-  return variant === 'contained' && "border-left: 1px solid ".concat(Color.Blue500);
+  return variant === 'contained' && "border-left: 1px solid ".concat(ColorV2.Blue500);
 });
 var DropdownButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var _anchorRef$current2;
@@ -406,7 +406,14 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName = "AdaptiveVerticalToolbar";
 
+// `Color`: Represents the primary color palette with various shades and opacities.
+//    - Includes legacy colors marked as deprecated.
+//   - To update a color, modify the hex or rgba value associated with the desired color name.
+
 var Color;
+// `ColorLightInternal`: Represents the color palette for light themes.
+//    - Similar to `Color`, but specifically tailored for light theme usage.
+//    - Update colors by changing the associated value
 (function (Color) {
   Color["White"] = "#fff";
   Color["White50"] = "rgba(255, 255, 255, 0.5)";
@@ -486,9 +493,259 @@ var Color;
   Color["Yellow300"] = "#E8671C";
   Color["Yellow500"] = "#B84807";
 })(Color || (Color = {}));
+var ColorLightInternal;
+// `ColorDarkInternal`: Represents the color palette for dark themes.
+//     - Tailored for dark theme usage.
+//     - Update colors by modifying the associated values.
+(function (ColorLightInternal) {
+  ColorLightInternal["White"] = "#fff";
+  ColorLightInternal["White50"] = "rgba(255, 255, 255, 0.5)";
+  ColorLightInternal["White40"] = "rgba(255, 255, 255, 0.4)";
+  ColorLightInternal["White20"] = "rgba(255, 255, 255, 0.2)";
+  ColorLightInternal["White10"] = "rgba(255, 255, 255, 0.1)";
+  ColorLightInternal["White08"] = "rgba(255, 255, 255, 0.08)";
+  ColorLightInternal["Transparent"] = "rgba(0, 0, 0, 0)";
+  ColorLightInternal["Black"] = "#000";
+  ColorLightInternal["Black50"] = "rgba(0, 0, 0, 0.5)";
+  ColorLightInternal["Black20"] = "rgba(0, 0, 0, 0.2)";
+  ColorLightInternal["Dark30"] = "rgba(143, 148, 158, 0.3)";
+  ColorLightInternal["Blue30"] = "rgba(0, 112, 245, 0.3)";
+  ColorLightInternal["Green30"] = "rgba(3, 135, 47, 0.3)";
+  ColorLightInternal["Red30"] = "rgba(229, 35, 13, 0.3)";
+  ColorLightInternal["Silver30"] = "rgba(225, 229, 234, 0.3)";
+  ColorLightInternal["Blue10"] = "rgba(0, 112, 245, 0.1)";
+  ColorLightInternal["Red10"] = "rgba(195, 25, 9, 0.1)";
+  ColorLightInternal["Grey100"] = "#8F949E";
+  ColorLightInternal["Grey200"] = "#6A707C";
+  ColorLightInternal["Grey300"] = "#5B6371";
+  ColorLightInternal["Grey400"] = "#323C4E";
+  ColorLightInternal["Grey450"] = "#222F44";
+  ColorLightInternal["Grey500"] = "#192334";
+  ColorLightInternal["Dark200"] = "#6A707C";
+  ColorLightInternal["Dark400"] = "#323C4E";
+  ColorLightInternal["Dark450"] = "#222F44";
+  ColorLightInternal["Silver100"] = "#F6F7F8";
+  ColorLightInternal["Silver300"] = "#E8ECF0";
+  ColorLightInternal["Blue75"] = "#CCE5FF";
+  ColorLightInternal["Blue100"] = "#A8D1FF";
+  ColorLightInternal["Blue200"] = "#66ADFF";
+  ColorLightInternal["Blue400"] = "#0063DB";
+  ColorLightInternal["Green75"] = "#C8F4D1";
+  ColorLightInternal["Green100"] = "#90EAAE";
+  ColorLightInternal["Green200"] = "#5DDA87";
+  ColorLightInternal["Green400"] = "#1E8F46";
+  ColorLightInternal["Purple75"] = "#DCDBF5";
+  ColorLightInternal["Purple100"] = "#CBC8EE";
+  ColorLightInternal["Purple200"] = "#A7A1E8";
+  ColorLightInternal["Purple400"] = "#473ABB";
+  ColorLightInternal["Red75"] = "#FDD9D3";
+  ColorLightInternal["Red100"] = "#FDC2BA";
+  ColorLightInternal["Red200"] = "#FE988B";
+  ColorLightInternal["Red400"] = "#D9210D";
+  ColorLightInternal["Teal75"] = "#BEEDF9";
+  ColorLightInternal["Teal100"] = "#91E3F8";
+  ColorLightInternal["Teal200"] = "#61D3EF";
+  ColorLightInternal["Teal400"] = "#008DB8";
+  ColorLightInternal["Yellow75"] = "#FFF1C2";
+  ColorLightInternal["Yellow100"] = "#FFE494";
+  ColorLightInternal["Yellow200"] = "#FFDC6B";
+  ColorLightInternal["Yellow400"] = "#FFA91F";
+  ColorLightInternal["Dark50"] = "rgba(25, 35, 52, 0.5)";
+  ColorLightInternal["Dark100"] = "#8F949E";
+  ColorLightInternal["Dark300"] = "#5B6371";
+  ColorLightInternal["Dark500"] = "#192334";
+  ColorLightInternal["Silver200"] = "#F3F5F8";
+  ColorLightInternal["Silver400"] = "#E1E5EA";
+  ColorLightInternal["Silver500"] = "#C4CDD5";
+  ColorLightInternal["Blue50"] = "#EBF4FF";
+  ColorLightInternal["Blue300"] = "#0070F5";
+  ColorLightInternal["Blue500"] = "#0063DB";
+  ColorLightInternal["Green50"] = "#ECF9EF";
+  ColorLightInternal["Green300"] = "#03872F";
+  ColorLightInternal["Green500"] = "#007A29";
+  ColorLightInternal["Purple50"] = "#EFEEFC";
+  ColorLightInternal["Purple300"] = "#6559CF";
+  ColorLightInternal["Purple500"] = "#473ABB";
+  ColorLightInternal["Red50"] = "#FFEDEB";
+  ColorLightInternal["Red300"] = "#E5230D";
+  ColorLightInternal["Red500"] = "#C31909";
+  ColorLightInternal["Teal50"] = "#E3F6FC";
+  ColorLightInternal["Teal300"] = "#007EAB";
+  ColorLightInternal["Teal500"] = "#00678A";
+  ColorLightInternal["Yellow50"] = "#FFF7DC";
+  ColorLightInternal["Yellow300"] = "#E8671C";
+  ColorLightInternal["Yellow500"] = "#B84807";
+})(ColorLightInternal || (ColorLightInternal = {}));
+var ColorDarkInternal;
+
+// `ColorV2`: Represents a newer version of the color palette using CSS variables.
+//   - Designed for more dynamic theming using CSS custom properties.
+//   - Update colors by changing the CSS variable references.
+(function (ColorDarkInternal) {
+  ColorDarkInternal["White"] = "#fff";
+  ColorDarkInternal["White50"] = "rgba(255, 255, 255, 0.5)";
+  ColorDarkInternal["White40"] = "rgba(255, 255, 255, 0.4)";
+  ColorDarkInternal["White20"] = "rgba(255, 255, 255, 0.2)";
+  ColorDarkInternal["White10"] = "rgba(255, 255, 255, 0.1)";
+  ColorDarkInternal["White08"] = "rgba(255, 255, 255, 0.08)";
+  ColorDarkInternal["Transparent"] = "rgba(0, 0, 0, 0)";
+  ColorDarkInternal["Black"] = "#000";
+  ColorDarkInternal["Black50"] = "rgba(0, 0, 0, 0.5)";
+  ColorDarkInternal["Black20"] = "rgba(0, 0, 0, 0.2)";
+  ColorDarkInternal["Dark30"] = "rgba(143, 148, 158, 0.3)";
+  ColorDarkInternal["Blue30"] = "rgba(0, 112, 245, 0.3)";
+  ColorDarkInternal["Green30"] = "rgba(3, 135, 47, 0.3)";
+  ColorDarkInternal["Red30"] = "rgba(229, 35, 13, 0.3)";
+  ColorDarkInternal["Silver30"] = "rgba(225, 229, 234, 0.3)";
+  ColorDarkInternal["Blue10"] = "rgba(0, 112, 245, 0.1)";
+  ColorDarkInternal["Red10"] = "rgba(195, 25, 9, 0.1)";
+  ColorDarkInternal["Grey100"] = "#8F949E";
+  ColorDarkInternal["Grey200"] = "#6A707C";
+  ColorDarkInternal["Grey300"] = "#5B6371";
+  ColorDarkInternal["Grey400"] = "#323C4E";
+  ColorDarkInternal["Grey450"] = "#222F44";
+  ColorDarkInternal["Grey500"] = "#192334";
+  ColorDarkInternal["Dark200"] = "#6A707C";
+  ColorDarkInternal["Dark400"] = "#323C4E";
+  ColorDarkInternal["Dark450"] = "#222F44";
+  ColorDarkInternal["Silver100"] = "#F6F7F8";
+  ColorDarkInternal["Silver300"] = "#E8ECF0";
+  ColorDarkInternal["Blue75"] = "#CCE5FF";
+  ColorDarkInternal["Blue100"] = "#A8D1FF";
+  ColorDarkInternal["Blue200"] = "#66ADFF";
+  ColorDarkInternal["Blue400"] = "#0063DB";
+  ColorDarkInternal["Green75"] = "#C8F4D1";
+  ColorDarkInternal["Green100"] = "#90EAAE";
+  ColorDarkInternal["Green200"] = "#5DDA87";
+  ColorDarkInternal["Green400"] = "#1E8F46";
+  ColorDarkInternal["Purple75"] = "#DCDBF5";
+  ColorDarkInternal["Purple100"] = "#CBC8EE";
+  ColorDarkInternal["Purple200"] = "#A7A1E8";
+  ColorDarkInternal["Purple400"] = "#473ABB";
+  ColorDarkInternal["Red75"] = "#FDD9D3";
+  ColorDarkInternal["Red100"] = "#FDC2BA";
+  ColorDarkInternal["Red200"] = "#FE988B";
+  ColorDarkInternal["Red400"] = "#D9210D";
+  ColorDarkInternal["Teal75"] = "#BEEDF9";
+  ColorDarkInternal["Teal100"] = "#91E3F8";
+  ColorDarkInternal["Teal200"] = "#61D3EF";
+  ColorDarkInternal["Teal400"] = "#008DB8";
+  ColorDarkInternal["Yellow75"] = "#FFF1C2";
+  ColorDarkInternal["Yellow100"] = "#FFE494";
+  ColorDarkInternal["Yellow200"] = "#FFDC6B";
+  ColorDarkInternal["Yellow400"] = "#FFA91F";
+  ColorDarkInternal["Dark50"] = "rgba(25, 35, 52, 0.5)";
+  ColorDarkInternal["Dark100"] = "#6E7A8A";
+  ColorDarkInternal["Dark300"] = "#AEB4BD";
+  ColorDarkInternal["Dark500"] = "#FFFFFF";
+  ColorDarkInternal["Silver200"] = "#0D1017";
+  ColorDarkInternal["Silver400"] = "#30373D";
+  ColorDarkInternal["Silver500"] = "#47505B";
+  ColorDarkInternal["Blue50"] = "#0E2947";
+  ColorDarkInternal["Blue300"] = "#0070F5";
+  ColorDarkInternal["Blue500"] = "#55ADFF";
+  ColorDarkInternal["Green50"] = "#092E16";
+  ColorDarkInternal["Green300"] = "#03872F";
+  ColorDarkInternal["Green500"] = "#5EE18A";
+  ColorDarkInternal["Purple50"] = "#262247";
+  ColorDarkInternal["Purple300"] = "#6559CF";
+  ColorDarkInternal["Purple500"] = "#BFA0FF";
+  ColorDarkInternal["Red50"] = "#3D0A06";
+  ColorDarkInternal["Red300"] = "#E5230D";
+  ColorDarkInternal["Red500"] = "#FF6359";
+  ColorDarkInternal["Teal50"] = "#11333D";
+  ColorDarkInternal["Teal300"] = "#007EAB";
+  ColorDarkInternal["Teal500"] = "#31C7F5";
+  ColorDarkInternal["Yellow50"] = "#33200A";
+  ColorDarkInternal["Yellow300"] = "#E8671C";
+  ColorDarkInternal["Yellow500"] = "#FCA542";
+})(ColorDarkInternal || (ColorDarkInternal = {}));
+var ColorV2;
+(function (ColorV2) {
+  ColorV2["White"] = "var(--sd-white)";
+  ColorV2["White50"] = "var(--sd-white-50)";
+  ColorV2["White40"] = "var(--sd-white-40)";
+  ColorV2["White20"] = "var(--sd-white-20)";
+  ColorV2["White10"] = "var(--sd-white-10)";
+  ColorV2["White08"] = "var(--sd-white-08)";
+  ColorV2["Transparent"] = "var(--sd-transparent)";
+  ColorV2["Black"] = "var(--sd-black)";
+  ColorV2["Black50"] = "var(--sd-black-50)";
+  ColorV2["Black20"] = "var(--sd-black-20)";
+  ColorV2["Dark30"] = "var(--sd-dark-30)";
+  ColorV2["Blue30"] = "var(--sd-blue-30)";
+  ColorV2["Green30"] = "var(--sd-green-30)";
+  ColorV2["Red30"] = "var(--sd-red-30)";
+  ColorV2["Silver30"] = "var(--sd-silver-30)";
+  ColorV2["Blue10"] = "var(--sd-blue-10)";
+  ColorV2["Red10"] = "var(--sd-red-10)";
+  ColorV2["Grey100"] = "var(--sd-grey-100)";
+  ColorV2["Grey200"] = "var(--sd-grey-200)";
+  ColorV2["Grey300"] = "var(--sd-grey-300)";
+  ColorV2["Grey400"] = "var(--sd-grey-400)";
+  ColorV2["Grey450"] = "var(--sd-grey-450)";
+  ColorV2["Grey500"] = "var(--sd-grey-500)";
+  ColorV2["Dark200"] = "var(--sd-dark-200)";
+  ColorV2["Dark400"] = "var(--sd-dark-400)";
+  ColorV2["Dark450"] = "var(--sd-dark-450)";
+  ColorV2["Silver100"] = "var(--sd-silver-100)";
+  ColorV2["Silver300"] = "var(--sd-silver-300)";
+  ColorV2["Blue75"] = "var(--sd-blue-75)";
+  ColorV2["Blue100"] = "var(--sd-blue-100)";
+  ColorV2["Blue200"] = "var(--sd-blue-200)";
+  ColorV2["Blue400"] = "var(--sd-blue-400)";
+  ColorV2["Green75"] = "var(--sd-green-75)";
+  ColorV2["Green100"] = "var(--sd-green-100)";
+  ColorV2["Green200"] = "var(--sd-green-200)";
+  ColorV2["Green400"] = "var(--sd-green-400)";
+  ColorV2["Purple75"] = "var(--sd-purple-75)";
+  ColorV2["Purple100"] = "var(--sd-purple-100)";
+  ColorV2["Purple200"] = "var(--sd-purple-200)";
+  ColorV2["Purple400"] = "var(--sd-purple-400)";
+  ColorV2["Red75"] = "var(--sd-red-75)";
+  ColorV2["Red100"] = "var(--sd-red-100)";
+  ColorV2["Red200"] = "var(--sd-red-200)";
+  ColorV2["Red400"] = "var(--sd-red-400)";
+  ColorV2["Teal75"] = "var(--sd-teal-75)";
+  ColorV2["Teal100"] = "var(--sd-teal-100)";
+  ColorV2["Teal200"] = "var(--sd-teal-200)";
+  ColorV2["Teal400"] = "var(--sd-teal-400)";
+  ColorV2["Yellow75"] = "var(--sd-yellow-75)";
+  ColorV2["Yellow100"] = "var(--sd-yellow-100)";
+  ColorV2["Yellow200"] = "var(--sd-yellow-200)";
+  ColorV2["Yellow400"] = "var(--sd-yellow-400)";
+  ColorV2["Dark50"] = "var(--sd-dark-50)";
+  ColorV2["Dark100"] = "var(--sd-dark-100)";
+  ColorV2["Dark300"] = "var(--sd-dark-300)";
+  ColorV2["Dark500"] = "var(--sd-dark-500)";
+  ColorV2["Silver200"] = "var(--sd-silver-200)";
+  ColorV2["Silver400"] = "var(--sd-silver-400)";
+  ColorV2["Silver500"] = "var(--sd-silver-500)";
+  ColorV2["Blue50"] = "var(--sd-blue-50)";
+  ColorV2["Blue300"] = "var(--sd-blue-300)";
+  ColorV2["Blue500"] = "var(--sd-blue-500)";
+  ColorV2["Green50"] = "var(--sd-green-50)";
+  ColorV2["Green300"] = "var(--sd-green-300)";
+  ColorV2["Green500"] = "var(--sd-green-500)";
+  ColorV2["Purple50"] = "var(--sd-purple-50)";
+  ColorV2["Purple300"] = "var(--sd-purple-300)";
+  ColorV2["Purple500"] = "var(--sd-purple-500)";
+  ColorV2["Red50"] = "var(--sd-red-50)";
+  ColorV2["Red300"] = "var(--sd-red-300)";
+  ColorV2["Red500"] = "var(--sd-red-500)";
+  ColorV2["Teal50"] = "var(--sd-teal-50)";
+  ColorV2["Teal300"] = "var(--sd-teal-300)";
+  ColorV2["Teal500"] = "var(--sd-teal-500)";
+  ColorV2["Yellow50"] = "var(--sd-yellow-50)";
+  ColorV2["Yellow300"] = "var(--sd-yellow-300)";
+  ColorV2["Yellow500"] = "var(--sd-yellow-500)";
+})(ColorV2 || (ColorV2 = {}));
 function isColorProp(name) {
   return typeof name == 'string' && Object.prototype.hasOwnProperty.call(Color, name);
 }
+function isColorPropV2(name) {
+  return typeof name == 'string' && Object.prototype.hasOwnProperty.call(ColorV2, name);
+}
 
 var _excluded$3 = ["size", "icon", "isLoading", "classes", "disabled", "avatarRef", "className", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"],
   _excluded2 = ["button", "overlay", "progress", "withIcon", "sizeLarge"];
@@ -499,19 +756,19 @@ var useStyles$2 = /*#__PURE__*/makeStyles(theme => {
       borderRadius: '50%',
       '&[disabled], &[aria-busy="true"]': {
         '& > $overlay': {
-          backgroundColor: Color.White50
+          backgroundColor: ColorV2.White50
         }
       },
       '&:not([disabled])[aria-busy="false"]': {
         '&:hover, &:focus': {
           '&$withIcon > $overlay': {
-            backgroundColor: Color.Dark50,
+            backgroundColor: ColorV2.Dark50,
             '& > svg': {
               opacity: 1
             }
           },
           '&:not($withIcon) > $overlay': {
-            backgroundColor: Color.Black20
+            backgroundColor: ColorV2.Black20
           }
         }
       }
@@ -526,11 +783,11 @@ var useStyles$2 = /*#__PURE__*/makeStyles(theme => {
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: '50%',
-      backgroundColor: Color.Transparent,
+      backgroundColor: ColorV2.Transparent,
       transition: theme.transitions.create('background-color'),
       '& > svg': {
         opacity: 0,
-        color: Color.White,
+        color: ColorV2.White,
         transition: theme.transitions.create('opacity'),
         fontSize: theme.spacing(3),
         [sm]: {
@@ -542,7 +799,7 @@ var useStyles$2 = /*#__PURE__*/makeStyles(theme => {
       top: 0,
       left: 0,
       position: 'absolute',
-      color: Color.Blue500,
+      color: ColorV2.Blue500,
       fontSize: theme.spacing(5),
       [sm]: {
         fontSize: theme.spacing(4)
@@ -649,7 +906,7 @@ var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
     alignItems: 'center',
     flexDirection: 'column',
     justifyContent: 'center',
-    backgroundColor: Color.White,
+    backgroundColor: ColorV2.White,
     border: '1px dashed',
     borderRadius: theme.spacing(0.5),
     padding: theme.spacing(1.5),
@@ -657,27 +914,27 @@ var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
     transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
   },
   disabled: {
-    color: Color.Dark200,
-    borderColor: Color.Silver500,
-    backgroundColor: Color.Silver100
+    color: ColorV2.Dark200,
+    borderColor: ColorV2.Silver500,
+    backgroundColor: ColorV2.Silver100
   },
   error: {
-    color: Color.Red500,
-    borderColor: Color.Red500,
-    backgroundColor: Color.Red50,
+    color: ColorV2.Red500,
+    borderColor: ColorV2.Red500,
+    backgroundColor: ColorV2.Red50,
     '&:focus': {
-      backgroundColor: Color.Red75
+      backgroundColor: ColorV2.Red75
     }
   },
   primary: {
-    color: Color.Blue500,
-    borderColor: Color.Silver500,
+    color: ColorV2.Blue500,
+    borderColor: ColorV2.Silver500,
     '&:focus': {
-      backgroundColor: Color.Blue50
+      backgroundColor: ColorV2.Blue50
     },
     '&:hover, &:active': {
-      borderColor: Color.Blue300,
-      backgroundColor: Color.Blue50
+      borderColor: ColorV2.Blue300,
+      backgroundColor: ColorV2.Blue50
     }
   },
   sizeSmall: {
@@ -775,7 +1032,7 @@ var FormControl = /*#__PURE__*/styled(FormControl$2).withConfig({
 var FormHelperText = /*#__PURE__*/styled(FormHelperText$4).withConfig({
   displayName: "CheckboxField__FormHelperText",
   componentId: "SD__sc-1wxu0g6-1"
-})(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
+})(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], ColorV2.Dark300, ColorV2.Red500);
 var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
       label,
@@ -809,11 +1066,11 @@ var _excluded$6 = ["FormGroupProps", "label", "FormLabelProps", "helperText", "F
 var FormLabel = /*#__PURE__*/styled(FormLabel$2).withConfig({
   displayName: "CheckboxGroudField__FormLabel",
   componentId: "SD__sc-1lihyfy-0"
-})(["margin-bottom:8px;color:", ";font-weight:600;"], Color.Dark300);
+})(["margin-bottom:8px;color:", ";font-weight:600;"], ColorV2.Dark300);
 var FormHelperText$1 = /*#__PURE__*/styled(FormHelperText$4).withConfig({
   displayName: "CheckboxGroudField__FormHelperText",
   componentId: "SD__sc-1lihyfy-1"
-})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
+})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], ColorV2.Dark300, ColorV2.Red500);
 var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
       FormGroupProps: formGroupProps,
@@ -1095,7 +1352,7 @@ var useStyles$4 = /*#__PURE__*/makeStyles(theme => ({
     transition: theme.transitions.create('border'),
     '&$truncated': {
       cursor: 'pointer',
-      borderBottomColor: Color.Silver500
+      borderBottomColor: ColorV2.Silver500
     }
   },
   truncated: {},
@@ -1194,7 +1451,7 @@ var useStyles$5 = /*#__PURE__*/makeStyles(theme => ({
     display: 'inline-flex',
     marginRight: theme.spacing(1),
     '& > .MuiSvgIcon-root': {
-      color: Color.Dark100,
+      color: ColorV2.Dark100,
       fontSize: theme.spacing(3),
       [theme.breakpoints.up('sm')]: {
         fontSize: theme.spacing(2)
@@ -1279,7 +1536,7 @@ var useStyles$6 = /*#__PURE__*/makeStyles(theme => ({
       borderBottom: 'none',
       transition: theme.transitions.create(['border-color']),
       '&:not($appBarSticky)': {
-        borderTopColor: Color.Transparent
+        borderTopColor: ColorV2.Transparent
       }
     }
   },
@@ -1403,7 +1660,7 @@ var useStyles$9 = /*#__PURE__*/makeStyles(theme => ({
       borderRight: 'none',
       transition: theme.transitions.create(['border-color']),
       '&:not($appBarSticky)': {
-        borderBottomColor: Color.Transparent
+        borderBottomColor: ColorV2.Transparent
       }
     }
   },
@@ -1841,7 +2098,7 @@ var FormControl$1 = /*#__PURE__*/styled(FormControl$2).withConfig({
 var FormHelperText$2 = /*#__PURE__*/styled(FormHelperText$4).withConfig({
   displayName: "RadioField__FormHelperText",
   componentId: "SD__sc-6ey4qt-1"
-})(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
+})(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], ColorV2.Dark300, ColorV2.Red500);
 var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
       label,
@@ -1891,7 +2148,7 @@ var Content = /*#__PURE__*/styled.div.withConfig({
   var {
     active
   } = _ref;
-  return active ? Color.Blue300 : Color.Silver500;
+  return active ? ColorV2.Blue300 : ColorV2.Silver500;
 });
 var Caption = /*#__PURE__*/styled.div.withConfig({
   displayName: "RadioFieldCard__Caption",
@@ -1953,11 +2210,11 @@ var _excluded$m = ["name", "value", "onChange", "RadioGroupProps", "label", "For
 var FormLabel$1 = /*#__PURE__*/styled(FormLabel$2).withConfig({
   displayName: "RadioGroupField__FormLabel",
   componentId: "SD__sc-1udxviq-0"
-})(["margin-bottom:8px;color:", ";font-weight:600;"], Color.Dark300);
+})(["margin-bottom:8px;color:", ";font-weight:600;"], ColorV2.Dark300);
 var FormHelperText$3 = /*#__PURE__*/styled(FormHelperText$4).withConfig({
   displayName: "RadioGroupField__FormHelperText",
   componentId: "SD__sc-1udxviq-1"
-})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
+})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], ColorV2.Dark300, ColorV2.Red500);
 var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
       name,
@@ -2023,8 +2280,8 @@ var PaddedContent = /*#__PURE__*/styled.span.withConfig({
 })(["padding:2px 0 0;"]);
 var useStyles$b = /*#__PURE__*/makeStyles(theme => ({
   root: {
-    color: Color.White,
-    backgroundColor: Color.Dark500,
+    color: ColorV2.White,
+    backgroundColor: ColorV2.Dark500,
     alignItems: 'flex-start',
     padding: '10px 16px',
     [theme.breakpoints.up('md')]: {
@@ -2047,17 +2304,17 @@ var useStyles$b = /*#__PURE__*/makeStyles(theme => ({
     fontSize: theme.spacing(3)
   },
   closeButton: {
-    color: Color.White40,
+    color: ColorV2.White40,
     '&:hover, &:focus': {
-      backgroundColor: Color.White08,
-      color: Color.White40
+      backgroundColor: ColorV2.White08,
+      color: ColorV2.White40
     }
   },
   variantError: {
-    color: Color.Red500,
-    background: Color.Red50,
+    color: ColorV2.Red500,
+    background: ColorV2.Red50,
     '& $closeButton': {
-      color: Color.Red500
+      color: ColorV2.Red500
     }
   },
   variantSuccess: {}
@@ -2314,56 +2571,56 @@ var useStyles$c = /*#__PURE__*/makeStyles(theme => ({
   },
   variantSubtle: {
     '&$colorGrey': {
-      color: Color.Dark300,
-      backgroundColor: Color.Silver200
+      color: ColorV2.Dark300,
+      backgroundColor: ColorV2.Silver200
     },
     '&$colorBlue': {
-      color: Color.Blue500,
-      backgroundColor: Color.Blue50
+      color: ColorV2.Blue500,
+      backgroundColor: ColorV2.Blue50
     },
     '&$colorGreen': {
-      color: Color.Green500,
-      backgroundColor: Color.Green50
+      color: ColorV2.Green500,
+      backgroundColor: ColorV2.Green50
     },
     '&$colorPurple': {
-      color: Color.Purple500,
-      backgroundColor: Color.Purple50
+      color: ColorV2.Purple500,
+      backgroundColor: ColorV2.Purple50
     },
     '&$colorRed': {
-      color: Color.Red500,
-      backgroundColor: Color.Red50
+      color: ColorV2.Red500,
+      backgroundColor: ColorV2.Red50
     },
     '&$colorTeal': {
-      color: Color.Teal500,
-      backgroundColor: Color.Teal50
+      color: ColorV2.Teal500,
+      backgroundColor: ColorV2.Teal50
     },
     '&$colorYellow': {
-      color: Color.Yellow500,
-      backgroundColor: Color.Yellow50
+      color: ColorV2.Yellow500,
+      backgroundColor: ColorV2.Yellow50
     }
   },
   variantBold: {
-    color: Color.White,
+    color: ColorV2.White,
     '&$colorGrey': {
-      backgroundColor: Color.Dark300
+      backgroundColor: ColorV2.Dark300
     },
     '&$colorBlue': {
-      backgroundColor: Color.Blue300
+      backgroundColor: ColorV2.Blue300
     },
     '&$colorGreen': {
-      backgroundColor: Color.Green300
+      backgroundColor: ColorV2.Green300
     },
     '&$colorPurple': {
-      backgroundColor: Color.Purple300
+      backgroundColor: ColorV2.Purple300
     },
     '&$colorRed': {
-      backgroundColor: Color.Red300
+      backgroundColor: ColorV2.Red300
     },
     '&$colorTeal': {
-      backgroundColor: Color.Teal300
+      backgroundColor: ColorV2.Teal300
     },
     '&$colorYellow': {
-      backgroundColor: Color.Yellow300
+      backgroundColor: ColorV2.Yellow300
     }
   },
   colorGrey: {},
@@ -2498,22 +2755,22 @@ function overrideAvatar(theme) {
       }
     }),
     colorDefault: {
-      color: Color.Dark300,
-      backgroundColor: Color.Silver300
+      color: ColorV2.Dark300,
+      backgroundColor: ColorV2.Silver300
     }
   };
 }
 
 function outlineShadow() {
   var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Color.Transparent;
+  var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorV2.Transparent;
   return "0 0 0 ".concat(size, "px ").concat(color);
 }
 function textVariant(text, outline, background, progress) {
   return {
     color: text,
     boxShadow: outlineShadow(),
-    backgroundColor: Color.Transparent,
+    backgroundColor: ColorV2.Transparent,
     '&:hover': {
       backgroundColor: background
     },
@@ -2527,7 +2784,7 @@ function textVariant(text, outline, background, progress) {
     '&$disabled': {
       color: outline,
       boxShadow: outlineShadow(),
-      backgroundColor: Color.Transparent
+      backgroundColor: ColorV2.Transparent
     },
     '&$disabled[aria-busy="true"]': {
       color: progress
@@ -2535,7 +2792,7 @@ function textVariant(text, outline, background, progress) {
   };
 }
 function outlinedBorder(borderColor) {
-  var outlineColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Color.Transparent;
+  var outlineColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorV2.Transparent;
   return "inset 0 0 0 1px ".concat(borderColor, ", 0 0 0 2px ").concat(outlineColor);
 }
 function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, activeText, activeBorder, activeOutline, activeBackground, progress, backgroundColor) {
@@ -2665,11 +2922,11 @@ function overrideButton(theme) {
     },
     text: {
       padding: undefined,
-      '&[data-color="error"]': textVariant(Color.Red300, Color.Red100, Color.Red50, Color.Red200),
-      '&[data-color="success"]': textVariant(Color.Green300, Color.Green100, Color.Green50, Color.Green200),
-      '&[data-color="white"]': textVariant(Color.White, Color.White50, Color.White10, Color.White50)
+      '&[data-color="error"]': textVariant(ColorV2.Red300, ColorV2.Red100, ColorV2.Red50, ColorV2.Red200),
+      '&[data-color="success"]': textVariant(ColorV2.Green300, ColorV2.Green100, ColorV2.Green50, ColorV2.Green200),
+      '&[data-color="white"]': textVariant(ColorV2.White, ColorV2.White50, ColorV2.White10, ColorV2.White50)
     },
-    textPrimary: textVariant(Color.Blue300, Color.Blue100, Color.Blue50, Color.Blue200),
+    textPrimary: textVariant(ColorV2.Blue300, ColorV2.Blue100, ColorV2.Blue50, ColorV2.Blue200),
     textSizeSmall: {
       padding: undefined,
       fontSize: undefined
@@ -2684,11 +2941,11 @@ function overrideButton(theme) {
       '&$disabled': {
         border: undefined
       },
-      '&[data-color="error"]': outlinedVariant(Color.Red300, Color.Red300, Color.Red100, Color.Red100, Color.Red300, Color.Red300, Color.Red100, Color.Red50, Color.Red300, Color.White),
-      '&[data-color="success"]': outlinedVariant(Color.Green300, Color.Green300, Color.Green100, Color.Green100, Color.Green300, Color.Green300, Color.Green100, Color.Green50, Color.Green300, Color.White),
-      '&[data-color="white"]': outlinedVariant(Color.White, Color.White50, Color.White50, Color.White40, Color.White, Color.White50, Color.White40, Color.White10, Color.White50, Color.Transparent)
+      '&[data-color="error"]': outlinedVariant(ColorV2.Red300, ColorV2.Red300, ColorV2.Red100, ColorV2.Red100, ColorV2.Red300, ColorV2.Red300, ColorV2.Red100, ColorV2.Red50, ColorV2.Red300, ColorV2.White),
+      '&[data-color="success"]': outlinedVariant(ColorV2.Green300, ColorV2.Green300, ColorV2.Green100, ColorV2.Green100, ColorV2.Green300, ColorV2.Green300, ColorV2.Green100, ColorV2.Green50, ColorV2.Green300, ColorV2.White),
+      '&[data-color="white"]': outlinedVariant(ColorV2.White, ColorV2.White50, ColorV2.White50, ColorV2.White40, ColorV2.White, ColorV2.White50, ColorV2.White40, ColorV2.White10, ColorV2.White50, ColorV2.Transparent)
     },
-    outlinedPrimary: outlinedVariant(Color.Dark500, Color.Silver500, Color.Silver500, Color.Silver400, Color.Blue300, Color.Blue300, Color.Blue100, Color.Blue50, Color.Dark200, Color.White),
+    outlinedPrimary: outlinedVariant(ColorV2.Dark500, ColorV2.Silver500, ColorV2.Silver500, ColorV2.Silver400, ColorV2.Blue300, ColorV2.Blue300, ColorV2.Blue100, ColorV2.Blue50, ColorV2.Dark200, ColorV2.White),
     outlinedSizeSmall: {
       padding: undefined,
       fontSize: undefined
@@ -2722,11 +2979,11 @@ function overrideButton(theme) {
         boxShadow: undefined,
         backgroundColor: undefined
       },
-      '&[data-color="error"]': containedVariant(Color.White, Color.Red300, Color.Red100, Color.Red500, Color.White, Color.Red100),
-      '&[data-color="success"]': containedVariant(Color.White, Color.Green300, Color.Green100, Color.Green500, Color.White, Color.Green100),
-      '&[data-color="white"]': containedVariant(Color.White, Color.White20, Color.White40, Color.White40, Color.White50, Color.White08)
+      '&[data-color="error"]': containedVariant(ColorV2.White, ColorV2.Red300, ColorV2.Red100, ColorV2.Red500, ColorV2.White, ColorV2.Red100),
+      '&[data-color="success"]': containedVariant(ColorV2.White, ColorV2.Green300, ColorV2.Green100, ColorV2.Green500, ColorV2.White, ColorV2.Green100),
+      '&[data-color="white"]': containedVariant(ColorV2.White, ColorV2.White20, ColorV2.White40, ColorV2.White40, ColorV2.White50, ColorV2.White08)
     },
-    containedPrimary: containedVariant(Color.White, Color.Blue300, Color.Blue100, Color.Blue500, Color.White, Color.Blue100),
+    containedPrimary: containedVariant(ColorV2.White, ColorV2.Blue300, ColorV2.Blue100, ColorV2.Blue500, ColorV2.White, ColorV2.Blue100),
     containedSizeSmall: {
       padding: undefined,
       fontSize: undefined
@@ -2760,7 +3017,7 @@ function overrideCheckbox(theme) {
         height: "17",
         x: "3.5",
         y: "3.5",
-        fill: Color.White,
+        fill: ColorV2.White,
         stroke: "currentColor",
         rx: "1.5"
       })
@@ -2774,7 +3031,7 @@ function overrideCheckbox(theme) {
         fill: "currentColor",
         rx: "2"
       }), /*#__PURE__*/jsx("path", {
-        fill: Color.White,
+        fill: ColorV2.White,
         d: "M15.73 8l-.63.63c-1.43 1.43-2.94 3.05-4.37 4.5l-1.9-1.57-.7-.57L7 12.38l.7.57 2.53 2.09.63.52.58-.58c1.6-1.62 3.35-3.5 4.93-5.08l.63-.63L15.73 8z"
       })]
     }),
@@ -2787,14 +3044,14 @@ function overrideCheckbox(theme) {
         fill: "currentIcon",
         rx: "2"
       }), /*#__PURE__*/jsx("path", {
-        fill: Color.White,
+        fill: ColorV2.White,
         d: "M7 11h10v2H7v-2z"
       })]
     })
   };
   theme.overrides.MuiCheckbox = {
     root: {
-      color: Color.Dark100,
+      color: ColorV2.Dark100,
       width: theme.spacing(3),
       height: theme.spacing(3),
       marginRight: theme.spacing(1),
@@ -2803,7 +3060,7 @@ function overrideCheckbox(theme) {
       marginBottom: theme.spacing(0.5),
       padding: 0,
       '&:hover': {
-        backgroundColor: Color.Blue10
+        backgroundColor: ColorV2.Blue10
       },
       '&.MuiButtonBase-root': {
         borderRadius: theme.spacing(0.5)
@@ -2811,11 +3068,11 @@ function overrideCheckbox(theme) {
     },
     colorPrimary: {
       '&$checked$disabled': {
-        color: Color.Silver500
+        color: ColorV2.Silver500
       },
       '&:hover:not($checked)': {
-        color: Color.Dark100,
-        backgroundColor: Color.Blue10
+        color: ColorV2.Dark100,
+        backgroundColor: ColorV2.Blue10
       }
     }
   };
@@ -2841,10 +3098,10 @@ function overrideChip(theme) {
       color: undefined,
       height: undefined,
       borderRadius: 4,
-      backgroundColor: Color.Silver200,
+      backgroundColor: ColorV2.Silver200,
       '&$disabled': {
         opacity: undefined,
-        color: Color.Dark100
+        color: ColorV2.Dark100
       }
     }),
     sizeSmall: {
@@ -2866,16 +3123,16 @@ function overrideChip(theme) {
         boxShadow: undefined
       },
       '&:focus': {
-        boxShadow: "0 0 0 2px ".concat(Color.Dark30)
+        boxShadow: "0 0 0 2px ".concat(ColorV2.Dark30)
       },
       '&:active, &:hover': {
-        backgroundColor: Color.Silver400
+        backgroundColor: ColorV2.Silver400
       }
     },
     deletable: {
       '&:focus': {
         backgroundColor: undefined,
-        boxShadow: "0 0 0 2px ".concat(Color.Silver400)
+        boxShadow: "0 0 0 2px ".concat(ColorV2.Silver400)
       }
     },
     deleteIcon: {
@@ -2885,12 +3142,12 @@ function overrideChip(theme) {
       transition: theme.transitions.create('background-color'),
       '&:active, &:hover, &:focus': {
         '& > svg': {
-          backgroundColor: Color.Silver400
+          backgroundColor: ColorV2.Silver400
         }
       },
       '& > svg': {
         borderRadius: '50%',
-        color: Color.Dark100,
+        color: ColorV2.Dark100,
         fontSize: '1em'
       }
     },
@@ -2905,7 +3162,7 @@ function overrideChip(theme) {
       }
     },
     icon: {
-      color: Color.Dark100,
+      color: ColorV2.Dark100,
       fontSize: '1em',
       marginRight: undefined
     },
@@ -2977,36 +3234,36 @@ function overrideDrawer(theme) {
 function overrideIconButton(theme) {
   theme.overrides.MuiIconButton = {
     root: {
-      color: Color.Dark100,
-      backgroundColor: Color.Transparent,
+      color: ColorV2.Dark100,
+      backgroundColor: ColorV2.Transparent,
       transition: theme.transitions.create(['color', 'background-color'], {
         duration: theme.transitions.duration.short
       }),
       '&:hover': {
-        backgroundColor: Color.Transparent
+        backgroundColor: ColorV2.Transparent
       },
       '&:active': {
-        color: Color.Dark500
+        color: ColorV2.Dark500
       },
       '&:hover ': {
-        color: Color.Dark300
+        color: ColorV2.Dark300
       },
       '&:focus': {
-        backgroundColor: Color.Silver400
+        backgroundColor: ColorV2.Silver400
       },
       '&$disabled': {
-        color: Color.Silver500
+        color: ColorV2.Silver500
       }
     },
     colorPrimary: {
       '&:active': {
-        color: Color.Blue500
+        color: ColorV2.Blue500
       },
       '&:hover ': {
-        color: Color.Blue300
+        color: ColorV2.Blue300
       },
       '&:focus': {
-        backgroundColor: Color.Blue50
+        backgroundColor: ColorV2.Blue50
       }
     },
     edgeEnd: {
@@ -3031,21 +3288,21 @@ function overrideLink(theme) {
       backgroundSize: '100% 1px',
       backgroundRepeat: 'repeat-x',
       backgroundPosition: '0 100%',
-      backgroundColor: Color.Transparent,
+      backgroundColor: ColorV2.Transparent,
       '&:focus': {
         outline: 'none'
       },
       '&:disabled': {
-        color: Color.Dark100,
-        backgroundImage: line(Color.Silver500),
+        color: ColorV2.Dark100,
+        backgroundImage: line(ColorV2.Silver500),
         '&:focus, &:hover, &:active': {
-          color: Color.Dark100,
-          backgroundImage: line(Color.Silver500)
+          color: ColorV2.Dark100,
+          backgroundImage: line(ColorV2.Silver500)
         }
       },
       '&.MuiLink-underlineAlways': {
         textDecoration: 'none',
-        backgroundImage: line(Color.Silver500),
+        backgroundImage: line(ColorV2.Silver500),
         '&:hover, &:active': {
           backgroundImage: line('currentColor')
         }
@@ -3072,8 +3329,8 @@ function overrideLink(theme) {
       },
       '&.MuiTypography-colorTextPrimary, &.MuiTypography-colorTextSecondary': {
         '&:focus, &:hover, &:active': {
-          color: Color.Blue500,
-          backgroundImage: line(Color.Blue500)
+          color: ColorV2.Blue500,
+          backgroundImage: line(ColorV2.Blue500)
         }
       }
     },
@@ -3097,10 +3354,10 @@ function overrideList(theme) {
   theme.overrides.MuiListItem = {
     root: {
       '&$selected, &$selected:hover': {
-        backgroundColor: Color.Blue50
+        backgroundColor: ColorV2.Blue50
       },
       '& .MuiTouchRipple-root': {
-        color: Color.Blue100
+        color: ColorV2.Blue100
       }
     }
   };
@@ -3120,7 +3377,7 @@ function overrideMenu(theme) {
   };
   theme.overrides.MuiMenu = {
     paper: {
-      border: "1px solid ".concat(Color.Silver400)
+      border: "1px solid ".concat(ColorV2.Silver400)
     }
   };
   theme.overrides.MuiMenuItem = {
@@ -3135,30 +3392,30 @@ function overridePagination(theme) {
   var props = {};
   var overrides = {
     root: {
-      color: Color.Dark500
+      color: ColorV2.Dark500
     },
     page: {
       '&:hover': {
-        backgroundColor: Color.Silver200
+        backgroundColor: ColorV2.Silver200
       },
       '&$focusVisible': {
         borderRadius: 4,
-        backgroundColor: Color.White,
-        border: "1px solid ".concat(Color.Blue30)
+        backgroundColor: ColorV2.White,
+        border: "1px solid ".concat(ColorV2.Blue30)
       },
       '&$selected': {
-        backgroundColor: Color.Silver400,
+        backgroundColor: ColorV2.Silver400,
         '&:hover, &$focusVisible': {
-          backgroundColor: Color.Silver500
+          backgroundColor: ColorV2.Silver500
         },
         '&$disabled': {
-          color: Color.Dark100,
-          backgroundColor: Color.Silver400
+          color: ColorV2.Dark100,
+          backgroundColor: ColorV2.Silver400
         }
       },
       '&$disabled': {
         opacity: undefined,
-        color: Color.Dark100
+        color: ColorV2.Dark100
       }
     }
   };
@@ -3178,7 +3435,7 @@ function overridePaper(theme) {
   };
   theme.overrides.MuiPaper = {
     elevation0: {
-      border: "1px solid ".concat(Color.Silver400)
+      border: "1px solid ".concat(ColorV2.Silver400)
     }
   };
 }
@@ -3199,7 +3456,7 @@ function overrideRadio(theme) {
         cx: "12",
         cy: "12",
         r: "9",
-        fill: Color.White,
+        fill: ColorV2.White,
         stroke: "currentColor"
       })
     }),
@@ -3214,13 +3471,13 @@ function overrideRadio(theme) {
         cx: "12",
         cy: "12",
         r: "4",
-        fill: Color.White
+        fill: ColorV2.White
       })]
     })
   };
   theme.overrides.MuiRadio = {
     root: {
-      color: Color.Dark100,
+      color: ColorV2.Dark100,
       width: theme.spacing(3),
       height: theme.spacing(3),
       marginRight: theme.spacing(1),
@@ -3231,10 +3488,10 @@ function overrideRadio(theme) {
     },
     colorPrimary: {
       '&$checked$disabled': {
-        color: Color.Silver500
+        color: ColorV2.Silver500
       },
       '&:hover:not($checked)': {
-        color: Color.Dark100
+        color: ColorV2.Dark100
       }
     }
   };
@@ -3299,7 +3556,7 @@ function overrideSvgIcon(theme) {
       fontSize: 'var(--mui-svg-icon-size, 32px)'
     },
     colorAction: {
-      color: Color.Dark100
+      color: ColorV2.Dark100
     }
   };
 }
@@ -3324,7 +3581,7 @@ function overrideSwitch(theme) {
     },
     track: {
       opacity: undefined,
-      boxShadow: "0 0 0 0 ".concat(Color.Transparent),
+      boxShadow: "0 0 0 0 ".concat(ColorV2.Transparent),
       transition: theme.transitions.create(['box-shadow', 'background-color'], {
         duration: theme.transitions.duration.shortest
       }),
@@ -3334,7 +3591,7 @@ function overrideSwitch(theme) {
       }
     },
     thumb: {
-      color: Color.White,
+      color: ColorV2.White,
       boxShadow: undefined,
       width: theme.spacing(3),
       height: theme.spacing(3),
@@ -3368,24 +3625,24 @@ function overrideSwitch(theme) {
         '&:hover': {
           backgroundColor: undefined,
           '& + $track': {
-            backgroundColor: Color.Blue500
+            backgroundColor: ColorV2.Blue500
           }
         }
       },
       '& + $track': {
-        backgroundColor: Color.Silver500
+        backgroundColor: ColorV2.Silver500
       },
       '&$disabled + $track': {
-        backgroundColor: Color.Dark30
+        backgroundColor: ColorV2.Dark30
       },
       '&$checked$disabled + $track': {
-        backgroundColor: Color.Blue30
+        backgroundColor: ColorV2.Blue30
       },
       '&:hover + $track': {
-        backgroundColor: Color.Dark100
+        backgroundColor: ColorV2.Dark100
       },
       '&.Mui-focusVisible + $track': {
-        boxShadow: "0 0 0 3px ".concat(Color.Blue30)
+        boxShadow: "0 0 0 3px ".concat(ColorV2.Blue30)
       }
     }
   };
@@ -3403,7 +3660,7 @@ function overrideTabs(theme) {
     },
     scrollButtons: {
       opacity: 1,
-      color: Color.Dark100,
+      color: ColorV2.Dark100,
       width: theme.spacing(4),
       transition: theme.transitions.create('opacity', {
         duration: theme.transitions.duration.short
@@ -3423,9 +3680,9 @@ function overrideTabs(theme) {
       }
     }),
     textColorPrimary: {
-      color: Color.Dark500,
+      color: ColorV2.Dark500,
       '&:hover, &:focus': {
-        color: Color.Blue300
+        color: ColorV2.Blue300
       }
     }
   };
@@ -3449,7 +3706,7 @@ function overrideTextField(theme) {
   };
   theme.overrides.MuiFormLabel = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      color: Color.Dark500,
+      color: ColorV2.Dark500,
       '&.MuiFormLabel-root': {
         fontSize: theme.spacing(2),
         [sm]: {
@@ -3470,36 +3727,36 @@ function overrideTextField(theme) {
   theme.overrides.MuiInputBase = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       '&$disabled': {
-        backgroundColor: Color.Silver30
+        backgroundColor: ColorV2.Silver30
       },
       '&$error': {
-        borderColor: Color.Red500
+        borderColor: ColorV2.Red500
       },
       '&.MuiOutlinedInput-root': {
         '& fieldset': {
-          borderColor: Color.Silver500
+          borderColor: ColorV2.Silver500
         },
         '&:hover fieldset': {
-          borderColor: Color.Dark100
+          borderColor: ColorV2.Dark100
         },
         '&.Mui-focused fieldset': {
-          borderColor: Color.Blue500
+          borderColor: ColorV2.Blue500
         },
         '&.Mui-error fieldset': {
-          borderColor: Color.Red500
+          borderColor: ColorV2.Red500
         },
         '&.Mui-error:hover fieldset': {
-          borderColor: Color.Red500
+          borderColor: ColorV2.Red500
         },
         '&.Mui-disabled fieldset': {
-          borderColor: Color.Silver400
+          borderColor: ColorV2.Silver400
         }
       }
     }),
     input: {
       textOverflow: 'ellipsis',
       '&::placeholder': {
-        color: Color.Dark100,
+        color: ColorV2.Dark100,
         opacity: 1
       },
       '&.MuiInputBase-input': {
@@ -3570,7 +3827,7 @@ function overrideTextField(theme) {
     },
     notchedOutline: {
       top: 0,
-      borderColor: Color.Silver500,
+      borderColor: ColorV2.Silver500,
       '& legend': {
         display: 'none'
       }
@@ -3583,7 +3840,7 @@ function overrideTextField(theme) {
     icon: {
       top: 'calc(50% - 0.5em)',
       '$disabled &': {
-        color: Color.Dark100
+        color: ColorV2.Dark100
       },
       fontSize: theme.spacing(3),
       [sm]: {
@@ -3641,10 +3898,10 @@ function overrideTextField(theme) {
   };
   theme.overrides.MuiFormHelperText = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      color: Color.Dark300,
+      color: ColorV2.Dark300,
       marginTop: theme.spacing(0.5),
       '&.Mui-error': {
-        color: Color.Red500
+        color: ColorV2.Red500
       },
       '&.MuiFormHelperText-root': {
         fontSize: theme.spacing(2),
@@ -3681,7 +3938,7 @@ function overrideTooltip(theme) {
   theme.overrides.MuiTooltip = {
     tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       padding: theme.spacing(1, 1.5),
-      backgroundColor: Color.Dark500
+      backgroundColor: ColorV2.Dark500
     }),
     popperArrow: {
       '&[x-placement*="top"] $arrow': {
@@ -3706,7 +3963,7 @@ function overrideTooltip(theme) {
       }
     },
     arrow: {
-      color: Color.Dark500,
+      color: ColorV2.Dark500,
       fontSize: theme.spacing(1)
     }
   };
@@ -3822,19 +4079,28 @@ function overrideTypography(theme) {
   };
   theme.overrides.MuiTypography = {
     colorError: {
-      color: Color.Red500
+      color: ColorV2.Red500
     },
     colorPrimary: {
-      color: Color.Blue500
+      color: ColorV2.Blue500
     }
   };
 }
 
-function createSuperDispatchTheme() {
+var GlobalStyles = /*#__PURE__*/createGlobalStyle(_ref => {
+  var {
+    theme
+  } = _ref;
+  var color = theme.palette.type === 'dark' ? ColorDarkInternal : ColorLightInternal;
+  return "\n    :root{\n      --sd-white: ".concat(color.White, ";\n      --sd-white-50: ").concat(color.White50, ";\n      --sd-white-40: ").concat(color.White40, ";\n      --sd-white-20: ").concat(color.White20, ";\n      --sd-white-10: ").concat(color.White10, ";\n      --sd-white-08: ").concat(color.White08, ";\n      --sd-transparent: ").concat(color.Transparent, ";\n\n      --sd-black: ").concat(color.Black, ";\n      --sd-black-50: ").concat(color.Black50, ";\n      --sd-black-20: ").concat(color.Black20, ";\n\n      --sd-dark-30: ").concat(color.Dark30, ";\n      --sd-blue-30: ").concat(color.Blue30, ";\n      --sd-green-30: ").concat(color.Green30, ";\n      --sd-red-30: ").concat(color.Red30, ";\n      --sd-silver-30: ").concat(color.Silver30, ";\n\n      --sd-blue-10: ").concat(color.Blue10, ";\n      --sd-red-10: ").concat(color.Red10, ";\n\n      /* Legacy Neutral Colors */\n      --sd-grey-100: ").concat(color.Grey100, "; /* @deprecated Use Dark100 */\n      --sd-grey-200: ").concat(color.Grey200, "; /* @deprecated Use Dark200 */\n      --sd-grey-300: ").concat(color.Grey300, "; /* @deprecated Use Dark300 */\n      --sd-grey-400: ").concat(color.Grey400, "; /* @deprecated Use Dark400 */\n      --sd-grey-450: ").concat(color.Grey450, "; /* @deprecated Use Dark450 */\n      --sd-grey-500: ").concat(color.Grey500, "; /* @deprecated Use Dark500 */\n\n      --sd-dark-200: ").concat(color.Dark200, "; /* @deprecated */\n      --sd-dark-400: ").concat(color.Dark400, "; /* @deprecated */\n      --sd-dark-450: ").concat(color.Dark450, "; /* @deprecated */\n\n      --sd-silver-100: ").concat(color.Silver100, "; /* @deprecated */\n      --sd-silver-300: ").concat(color.Silver300, "; /* @deprecated */\n\n      /* Legacy Extended Palette */\n      --sd-blue-75: ").concat(color.Blue75, "; /* @deprecated */\n      --sd-blue-100: ").concat(color.Blue100, "; /* @deprecated */\n      --sd-blue-200: ").concat(color.Blue200, "; /* @deprecated */\n      --sd-blue-400: ").concat(color.Blue400, "; /* @deprecated */\n\n      --sd-green-75: ").concat(color.Green75, "; /* @deprecated */\n      --sd-green-100: ").concat(color.Green100, "; /* @deprecated */\n      --sd-green-200: ").concat(color.Green200, "; /* @deprecated */\n      --sd-green-400: ").concat(color.Green400, "; /* @deprecated */\n\n      --sd-purple-75: ").concat(color.Purple75, "; /* @deprecated */\n      --sd-purple-100: ").concat(color.Purple100, "; /* @deprecated */\n      --sd-purple-200: ").concat(color.Purple200, "; /* @deprecated */\n      --sd-purple-400: ").concat(color.Purple400, "; /* @deprecated */\n\n      --sd-red-75: ").concat(color.Red75, "; /* @deprecated */\n      --sd-red-100: ").concat(color.Red100, "; /* @deprecated */\n      --sd-red-200: ").concat(color.Red200, "; /* @deprecated */\n      --sd-red-400: ").concat(color.Red400, "; /* @deprecated */\n\n      --sd-teal-75: ").concat(color.Teal75, "; /* @deprecated */\n      --sd-teal-100: ").concat(color.Teal100, "; /* @deprecated */\n      --sd-teal-200: ").concat(color.Teal200, "; /* @deprecated */\n      --sd-teal-400: ").concat(color.Teal400, "; /* @deprecated */\n\n      --sd-yellow-75: ").concat(color.Yellow75, "; /* @deprecated */\n      --sd-yellow-100: ").concat(color.Yellow100, "; /* @deprecated */\n      --sd-yellow-200: ").concat(color.Yellow200, "; /* @deprecated */\n      --sd-yellow-400: ").concat(color.Yellow400, "; /* @deprecated */\n      --sd-dark-50: ").concat(color.Dark50, ";\n      /* extended palette */\n    \n      --sd-blue-50: ").concat(color.Blue50, ";\n      --sd-blue-500: ").concat(color.Blue500, ";\n      --sd-blue-300: ").concat(color.Blue300, ";\n      --sd-green-300: ").concat(color.Green300, ";\n      --sd-green-500: ").concat(color.Green500, ";\n      --sd-green-50: ").concat(color.Green50, ";\n      --sd-yellow-300: ").concat(color.Yellow300, ";\n      --sd-yellow-500: ").concat(color.Yellow500, ";\n      --sd-yellow-50: ").concat(color.Yellow50, ";\n      --sd-red-300: ").concat(color.Red300, ";\n      --sd-red-500: ").concat(color.Red500, ";\n      --sd-red-50: ").concat(color.Red50, ";\n      --sd-purple-300: ").concat(color.Purple300, ";\n      --sd-purple-500: ").concat(color.Purple500, ";\n      --sd-purple-50: ").concat(color.Purple50, ";\n      --sd-teal-300: ").concat(color.Teal300, ";\n      --sd-teal-500: ").concat(color.Teal500, ";\n      --sd-teal-50: ").concat(color.Teal50, ";\n      --sd-silver-500: ").concat(color.Silver500, ";\n      --sd-silver-200: ").concat(color.Silver200, ";\n      --sd-silver-400: ").concat(color.Silver400, ";\n      --sd-dark-100: ").concat(color.Dark100, ";\n      --sd-dark-300: ").concat(color.Dark300, ";\n      --sd-dark-500: ").concat(color.Dark500, ";\n    }\n  ");
+});
+
+function createSuperDispatchTheme(type) {
   var breakpoints = createBreakpoints({});
   var theme = createTheme({
     breakpoints,
     palette: {
+      type,
       primary: {
         main: Color.Blue300
       },
@@ -3914,24 +4180,26 @@ function ThemeProvider(_ref) {
   var {
     modifier,
     children,
+    mode,
     injectFirst = true
   } = _ref;
-  var theme = useConstant(() => {
-    var nextTheme = createSuperDispatchTheme();
+  var theme = useMemo(() => {
+    var nextTheme = createSuperDispatchTheme(mode);
     return !modifier ? nextTheme : modifier(nextTheme);
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- modifier may update on every render
+  }, [mode]);
   return /*#__PURE__*/jsx(StylesProvider, {
     injectFirst: injectFirst,
     generateClassName: generateClassName,
     children: /*#__PURE__*/jsxs(ThemeProvider$1, {
       theme: theme,
-      children: [/*#__PURE__*/jsx(CssBaseline, {}), /*#__PURE__*/jsx(ThemeProvider$2, {
+      children: [/*#__PURE__*/jsx(CssBaseline, {}), /*#__PURE__*/jsxs(ThemeProvider$2, {
         theme: theme,
-        children: /*#__PURE__*/jsx(ResponsiveContextProvider, {
+        children: [/*#__PURE__*/jsx(GlobalStyles, {}), /*#__PURE__*/jsx(ResponsiveContextProvider, {
           children: /*#__PURE__*/jsx(SnackbarStackProvider, {
             children: children
           })
-        })
+        })]
       })]
     })
   });
@@ -4036,5 +4304,5 @@ function ExitTransitionPlaceholder(_ref) {
   return renderChildren(children);
 }
 
-export { AdaptiveToolbar, AdaptiveVerticalToolbar, AvatarButton, Button, CardButton, CheckboxField, CheckboxGroupField, Color, Column, Columns, DescriptionList, DescriptionListItem, DrawerActions, DrawerContent, DrawerList, DrawerTitle, DropdownButton, ExitTransitionPlaceholder, GridStack, InfoCard, InfoTooltip, Inline, InlineGrid, NumberField, OverflowText, PatternField, RadioField, RadioFieldCard, RadioGroupField, ResponsiveContextProvider, Snackbar, SnackbarContent, SnackbarStackConsumer, SnackbarStackProvider, Stack, Tag, ThemeProvider, Tiles, VisibilityObserver, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
+export { AdaptiveToolbar, AdaptiveVerticalToolbar, AvatarButton, Button, CardButton, CheckboxField, CheckboxGroupField, Color, ColorDarkInternal, ColorLightInternal, ColorV2, Column, Columns, DescriptionList, DescriptionListItem, DrawerActions, DrawerContent, DrawerList, DrawerTitle, DropdownButton, ExitTransitionPlaceholder, GridStack, InfoCard, InfoTooltip, Inline, InlineGrid, NumberField, OverflowText, PatternField, RadioField, RadioFieldCard, RadioGroupField, ResponsiveContextProvider, Snackbar, SnackbarContent, SnackbarStackConsumer, SnackbarStackProvider, Stack, Tag, ThemeProvider, Tiles, VisibilityObserver, assignRef, isColorProp, isColorPropV2, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
 //# sourceMappingURL=index.js.map