@superdispatch/ui-lab 0.31.0 → 0.32.0

package/dist-web/index.js

@@ -1,6 +1,6 @@
 import { CheckCircle, Info, Error as Error$1, Warning, Image, Refresh, Delete, Menu, ExpandMore, MenuOpen, ArrowBack, OpenInNew } from '@material-ui/icons';
 import { Alert as Alert$1 } from '@material-ui/lab';
-import { Color, parseResponsiveProp, isColorProp, parseSpaceProp, Stack, Inline, mergeRefs, useUID, isEmptyReactNode, Columns, Column, CardButton, useResponsiveValue, useCollapseBreakpoint } from '@superdispatch/ui';
+import { ColorV2, parseResponsiveProp, isColorPropV2, parseSpaceProp, Stack, Inline, mergeRefs, useUID, isEmptyReactNode, Columns, Column, CardButton, useResponsiveValue, useCollapseBreakpoint } from '@superdispatch/ui';
 import { forwardRef, useState, useEffect, Children, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -21,7 +21,7 @@ function colorMixin(textColor, iconColor, backgroundColor, buttonHoverColor) {
 var StyledAlert = /*#__PURE__*/styled(Alert$1).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';
 }
@@ -53,10 +53,10 @@ if (process.env.NODE_ENV !== "production") Alert.displayName = "Alert";
 var _excluded = ["children"],
   _excluded2 = ["in"];
 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 {
@@ -80,7 +80,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));
 });
 var Banner = /*#__PURE__*/forwardRef((_ref3, ref) => {
   var {
@@ -120,7 +120,7 @@ function createRuleNormalizer(rules) {
 //
 
 function normalizeColor(input) {
-  return isColorProp(input) ? Color[input] : undefined;
+  return isColorPropV2(input) ? ColorV2[input] : undefined;
 }
 
 //
@@ -264,7 +264,7 @@ var _excluded$1 = ["icon", "children", "variant", "active", "disabled", "fullWid
 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);
 var ButtonArea = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
       icon,
@@ -309,15 +309,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
@@ -347,13 +347,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) {
@@ -361,62 +361,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$1 = /*#__PURE__*/styled.button.withConfig({
@@ -430,7 +430,7 @@ var ButtonRoot$1 = /*#__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",
@@ -658,16 +658,16 @@ function mergeStyles(styles) {
 var _excluded$4 = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
 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',
@@ -780,7 +780,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));
 });
 var DescriptionItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
@@ -833,7 +833,7 @@ if (process.env.NODE_ENV !== "production") DescriptionItem.displayName = "Descri
 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);
 var DescriptionLineItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     title,
@@ -879,7 +879,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) {
@@ -1075,7 +1075,7 @@ 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",
@@ -1151,11 +1151,11 @@ var _excluded$7 = ["active", "hasBadge"];
 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"
@@ -1163,7 +1163,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);
 function NavbarBottomBar(_ref) {
   var {
     items,
@@ -1215,7 +1215,7 @@ function NavbarBottomBar(_ref) {
 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);
 var NavbarLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "NavbarItem__NavbarLabel",
   componentId: "SD__sc-1pvzq3w-1"
@@ -1223,7 +1223,7 @@ 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$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarItem__IconWrapper",
   componentId: "SD__sc-1pvzq3w-3"
@@ -1269,11 +1269,11 @@ 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$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarAccordion__IconWrapper",
   componentId: "SD__sc-1s7g3kw-3"
@@ -1370,7 +1370,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"
@@ -1378,7 +1378,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);
 function NavbarMenuItem(_ref4) {
   var {
     label,
@@ -1401,7 +1401,7 @@ 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);
 function NavbarList(_ref5) {
   var {
     header,
@@ -1545,7 +1545,7 @@ var _excluded$8 = ["title", "subtitle", "children"];
 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);
 function NavbarAvatar(_ref) {
   var {
       title,
@@ -1587,20 +1587,20 @@ function NavbarAvatar(_ref) {
 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$1 = /*#__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);
 function NavbarMenu(_ref2) {
   var {
     items,
@@ -1643,7 +1643,7 @@ function NavbarMenu(_ref2) {
             verticalAlign: "center",
             children: [item.icon, /*#__PURE__*/jsx(Typography, {
               style: {
-                color: Color.Dark500
+                color: ColorV2.Dark500
               },
               children: item.label
             })]
@@ -1657,11 +1657,11 @@ function NavbarMenu(_ref2) {
 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"
@@ -1924,12 +1924,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);
 var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     action,