@superdispatch/ui-lab 0.31.1 → 0.33.0

package/dist-node/index.js

@@ -28,7 +28,7 @@ function colorMixin(textColor, iconColor, backgroundColor, buttonHoverColor) {
 var StyledAlert = /*#__PURE__*/styled__default(lab.Alert).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(ui.Color.Green500, ui.Color.Green300, ui.Color.Green50, ui.Color.Green400), /*#__PURE__*/colorMixin(ui.Color.Blue500, ui.Color.Blue300, ui.Color.Blue50, ui.Color.Blue400), /*#__PURE__*/colorMixin(ui.Color.Yellow500, ui.Color.Yellow300, ui.Color.Yellow50, ui.Color.Yellow400), /*#__PURE__*/colorMixin(ui.Color.Red500, ui.Color.Red300, ui.Color.Red50, ui.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(ui.ColorV2.Green500, ui.ColorV2.Green300, ui.ColorV2.Green50, ui.ColorV2.Green400), /*#__PURE__*/colorMixin(ui.ColorV2.Blue500, ui.ColorV2.Blue300, ui.ColorV2.Blue50, ui.ColorV2.Blue400), /*#__PURE__*/colorMixin(ui.ColorV2.Yellow500, ui.ColorV2.Yellow300, ui.ColorV2.Yellow50, ui.ColorV2.Yellow400), /*#__PURE__*/colorMixin(ui.ColorV2.Red500, ui.ColorV2.Red300, ui.ColorV2.Red50, ui.ColorV2.Red400));
 function toMaterialSeverity(severity) {
   return severity === 'info' ? 'info' : severity === 'caution' ? 'warning' : severity === 'critical' ? 'error' : 'success';
 }
@@ -60,10 +60,10 @@ if (process.env.NODE_ENV !== "production") Alert.displayName = "Alert";
 var _excluded = ["children"],
   _excluded2 = ["in"];
 function enterMixin(border) {
-  return styled.css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], ui.Color.Dark500, ui.Color.White, border);
+  return styled.css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], ui.ColorV2.Dark500, ui.ColorV2.White, border);
 }
 function enterAnimation(border) {
-  return styled.keyframes(["0%{min-height:0;color:", ";background-color:", ";}50%{min-height:56px;color:", ";background-color:", ";}70%{min-height:56px;color:", ";background-color:", ";}100%{", "}"], ui.Color.White, ui.Color.Dark500, ui.Color.White, ui.Color.Dark500, ui.Color.White, ui.Color.Dark500, enterMixin(border));
+  return styled.keyframes(["0%{min-height:0;color:", ";background-color:", ";}50%{min-height:56px;color:", ";background-color:", ";}70%{min-height:56px;color:", ";background-color:", ";}100%{", "}"], ui.ColorV2.White, ui.ColorV2.Dark500, ui.ColorV2.White, ui.ColorV2.Dark500, ui.ColorV2.White, ui.ColorV2.Dark500, enterMixin(border));
 }
 var CustomTransition = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -87,7 +87,7 @@ var BannerContent = /*#__PURE__*/styled__default(CustomTransition).withConfig({
   var {
     border = 'bottom'
   } = _ref2;
-  return styled.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;}"], ui.Color.White, ui.Color.White, enterAnimation(border), enterMixin(border), enterMixin(border));
+  return styled.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;}"], ui.ColorV2.White, ui.ColorV2.White, enterAnimation(border), enterMixin(border), enterMixin(border));
 });
 var Banner = /*#__PURE__*/react.forwardRef((_ref3, ref) => {
   var {
@@ -127,7 +127,7 @@ function createRuleNormalizer(rules) {
 //
 
 function normalizeColor(input) {
-  return ui.isColorProp(input) ? ui.Color[input] : undefined;
+  return ui.isColorPropV2(input) ? ui.ColorV2[input] : undefined;
 }
 
 //
@@ -271,7 +271,7 @@ var _excluded$1 = ["icon", "children", "variant", "active", "disabled", "fullWid
 var ButtonRoot = /*#__PURE__*/styled__default(core.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:", ";}}"], ui.Color.Silver500, ui.Color.Dark100, ui.Color.White, ui.Color.Silver500, ui.Color.Silver400, ui.Color.Green300, ui.Color.Green100, ui.Color.Green300, ui.Color.Green300, ui.Color.Green300, ui.Color.Green50, ui.Color.Red300, ui.Color.Red100, ui.Color.Red300, ui.Color.Red300, ui.Color.Red300, ui.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:", ";}}"], ui.ColorV2.Silver500, ui.ColorV2.Dark100, ui.ColorV2.White, ui.ColorV2.Silver500, ui.ColorV2.Silver400, ui.ColorV2.Green300, ui.ColorV2.Green100, ui.ColorV2.Green300, ui.ColorV2.Green300, ui.ColorV2.Green300, ui.ColorV2.Green50, ui.ColorV2.Red300, ui.ColorV2.Red100, ui.ColorV2.Red300, ui.ColorV2.Red300, ui.ColorV2.Red300, ui.ColorV2.Red50);
 var ButtonArea = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
       icon,
@@ -316,15 +316,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 = ui.Color.Transparent,
+    textColor = ui.ColorV2.Transparent,
     textColorHovered = textColor,
     textColorDisabled = textColor,
     iconColor = textColor,
-    outlineColor = ui.Color.Transparent,
-    borderColor = ui.Color.Transparent,
+    outlineColor = ui.ColorV2.Transparent,
+    borderColor = ui.ColorV2.Transparent,
     borderColorHovered = borderColor,
     borderColorDisabled = borderColor,
-    backgroundColor = ui.Color.Transparent,
+    backgroundColor = ui.ColorV2.Transparent,
     backgroundColorHovered = backgroundColor,
     backgroundColorActive = backgroundColorHovered,
     backgroundColorDisabled = backgroundColor
@@ -354,13 +354,13 @@ function createButtonVariables(size, _ref) {
 }
 function getDefaultVariables(size) {
   return createButtonVariables(size, {
-    textColor: ui.Color.White,
-    outlineColor: ui.Color.Blue30,
-    backgroundColor: ui.Color.Blue300,
-    textColorHovered: ui.Color.White,
-    backgroundColorHovered: ui.Color.Blue500,
-    backgroundColorActive: ui.Color.Blue400,
-    backgroundColorDisabled: ui.Color.Blue30
+    textColor: ui.ColorV2.White,
+    outlineColor: ui.ColorV2.Blue30,
+    backgroundColor: ui.ColorV2.Blue300,
+    textColorHovered: ui.ColorV2.White,
+    backgroundColorHovered: ui.ColorV2.Blue500,
+    backgroundColorActive: ui.ColorV2.Blue400,
+    backgroundColorDisabled: ui.ColorV2.Blue30
   });
 }
 function getPrimaryVariables(size) {
@@ -368,62 +368,62 @@ function getPrimaryVariables(size) {
 }
 function getNeutralVariables(size) {
   return createButtonVariables(size, {
-    textColor: ui.Color.Dark500,
-    borderColor: ui.Color.Silver500,
-    outlineColor: ui.Color.Blue30,
-    backgroundColor: ui.Color.White,
-    textColorHovered: ui.Color.Blue500,
-    borderColorHovered: ui.Color.Blue500,
-    backgroundColorHovered: ui.Color.Blue50,
-    backgroundColorActive: ui.Color.Blue75,
-    textColorDisabled: ui.Color.Silver500,
-    iconColor: ui.Color.Dark100
+    textColor: ui.ColorV2.Dark500,
+    borderColor: ui.ColorV2.Silver500,
+    outlineColor: ui.ColorV2.Blue30,
+    backgroundColor: ui.ColorV2.White,
+    textColorHovered: ui.ColorV2.Blue500,
+    borderColorHovered: ui.ColorV2.Blue500,
+    backgroundColorHovered: ui.ColorV2.Blue50,
+    backgroundColorActive: ui.ColorV2.Blue75,
+    textColorDisabled: ui.ColorV2.Silver500,
+    iconColor: ui.ColorV2.Dark100
   });
 }
 function getCriticalVariables(size) {
   return createButtonVariables(size, {
-    textColor: ui.Color.Red500,
-    borderColor: ui.Color.Red500,
-    outlineColor: ui.Color.Red30,
-    backgroundColor: ui.Color.Red50,
-    backgroundColorHovered: ui.Color.Red75,
-    backgroundColorActive: ui.Color.Red10,
-    textColorDisabled: ui.Color.Red30,
-    borderColorDisabled: ui.Color.Red30,
-    backgroundColorDisabled: ui.Color.Red50
+    textColor: ui.ColorV2.Red500,
+    borderColor: ui.ColorV2.Red500,
+    outlineColor: ui.ColorV2.Red30,
+    backgroundColor: ui.ColorV2.Red50,
+    backgroundColorHovered: ui.ColorV2.Red75,
+    backgroundColorActive: ui.ColorV2.Red10,
+    textColorDisabled: ui.ColorV2.Red30,
+    borderColorDisabled: ui.ColorV2.Red30,
+    backgroundColorDisabled: ui.ColorV2.Red50
   });
 }
 function getTextVariables(size) {
   return createButtonVariables(size, {
-    textColor: ui.Color.Blue500,
-    outlineColor: ui.Color.Blue30,
-    textColorHovered: ui.Color.Blue500,
-    backgroundColorHovered: ui.Color.Blue50,
-    backgroundColorActive: ui.Color.Blue75,
-    textColorDisabled: ui.Color.Blue30
+    textColor: ui.ColorV2.Blue500,
+    outlineColor: ui.ColorV2.Blue30,
+    textColorHovered: ui.ColorV2.Blue500,
+    backgroundColorHovered: ui.ColorV2.Blue50,
+    backgroundColorActive: ui.ColorV2.Blue75,
+    textColorDisabled: ui.ColorV2.Blue30
   });
 }
 function getInvertedVariables(size) {
   return createButtonVariables(size, {
-    textColor: ui.Color.White,
-    outlineColor: ui.Color.White40,
-    backgroundColor: ui.Color.White20,
-    textColorHovered: ui.Color.White,
-    backgroundColorHovered: ui.Color.White40,
-    backgroundColorActive: ui.Color.White20,
-    textColorDisabled: ui.Color.White50,
-    backgroundColorDisabled: ui.Color.White08
+    textColor: ui.ColorV2.White,
+    outlineColor: ui.ColorV2.White40,
+    backgroundColor: ui.ColorV2.White20,
+    textColorHovered: ui.ColorV2.White,
+    backgroundColorHovered: ui.ColorV2.White40,
+    backgroundColorActive: ui.ColorV2.White20,
+    textColorDisabled: ui.ColorV2.White50,
+    backgroundColorDisabled: ui.ColorV2.White08
   });
 }
 function getSuccessVariables(size) {
   return createButtonVariables(size, {
-    textColor: ui.Color.White,
-    outlineColor: ui.Color.Green30,
-    backgroundColor: ui.Color.Green300,
-    backgroundColorHovered: ui.Color.Green500,
-    backgroundColorActive: ui.Color.Green500,
-    textColorDisabled: ui.Color.White,
-    backgroundColorDisabled: ui.Color.Green30
+    textColor: ui.ColorV2.White,
+    outlineColor: ui.ColorV2.Green30,
+    backgroundColor: ui.ColorV2.Green300,
+    backgroundColorHovered: ui.ColorV2.Green500,
+    backgroundColorActive: ui.ColorV2.Green500,
+    textColorDisabled: ui.ColorV2.White,
+    backgroundColorDisabled: ui.ColorV2.Green30
   });
 }
 var ButtonRoot$1 = /*#__PURE__*/styled__default.button.withConfig({
@@ -437,7 +437,7 @@ var ButtonRoot$1 = /*#__PURE__*/styled__default.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 styled.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, ui.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 styled.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, ui.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__default.span.withConfig({
   displayName: "Button__ButtonLabel",
@@ -665,16 +665,16 @@ function mergeStyles(styles) {
 var _excluded$4 = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
 var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
   inherit: 'inherit',
-  primary: ui.Color.Dark500,
-  secondary: ui.Color.Dark300,
-  'light-gray': ui.Color.Dark100,
-  white: ui.Color.White,
-  blue: ui.Color.Blue500,
-  green: ui.Color.Green500,
-  purple: ui.Color.Purple500,
-  red: ui.Color.Red500,
-  teal: ui.Color.Teal500,
-  yellow: ui.Color.Yellow500
+  primary: ui.ColorV2.Dark500,
+  secondary: ui.ColorV2.Dark300,
+  'light-gray': ui.ColorV2.Dark100,
+  white: ui.ColorV2.White,
+  blue: ui.ColorV2.Blue500,
+  green: ui.ColorV2.Green500,
+  purple: ui.ColorV2.Purple500,
+  red: ui.ColorV2.Red500,
+  teal: ui.ColorV2.Teal500,
+  yellow: ui.ColorV2.Yellow500
 });
 var VARIANT_TYPE_MAPPING = {
   'heading-1': 'h1',
@@ -787,7 +787,7 @@ var DescriptionItemIcon = /*#__PURE__*/styled__default.div.withConfig({
   var {
     theme
   } = _ref;
-  return styled.css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], ui.Color.Dark100, descriptionItemIconMixin(20), theme.breakpoints.up('sm'), descriptionItemIconMixin(16));
+  return styled.css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], ui.ColorV2.Dark100, descriptionItemIconMixin(20), theme.breakpoints.up('sm'), descriptionItemIconMixin(16));
 });
 var DescriptionItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
   var {
@@ -840,7 +840,7 @@ if (process.env.NODE_ENV !== "production") DescriptionItem.displayName = "Descri
 var DottedLine = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DescriptionLineItem__DottedLine",
   componentId: "SD__sc-1ixx5h8-0"
-})(["border-bottom:1px dotted ", ";margin:0px 8px;height:7px;"], ui.Color.Silver400);
+})(["border-bottom:1px dotted ", ";margin:0px 8px;height:7px;"], ui.ColorV2.Silver400);
 var DescriptionLineItem = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
     title,
@@ -886,7 +886,7 @@ var StyledCardButton = /*#__PURE__*/styled__default(ui.CardButton).withConfig({
     status
   } = _ref;
   return {
-    backgroundColor: status === 'active' ? ui.Color.Blue50 : undefined
+    backgroundColor: status === 'active' ? ui.ColorV2.Blue50 : undefined
   };
 });
 function UploadRejection(_ref2) {
@@ -1082,7 +1082,7 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
           size: "small",
           children: /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircle, {
             fontSize: "small",
-            htmlColor: ui.Color.Green300
+            htmlColor: ui.ColorV2.Green300
           })
         }) : canDelete ? /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
           title: "Delete",
@@ -1158,11 +1158,11 @@ var _excluded$7 = ["active", "hasBadge"];
 var StyledBottomNavigation = /*#__PURE__*/styled__default(core.BottomNavigation).withConfig({
   displayName: "NavbarBottomBar__StyledBottomNavigation",
   componentId: "SD__sc-9z6v3k-0"
-})(["background:", ";"], ui.Color.Dark500);
+})(["background:", ";"], ui.ColorV2.Dark500);
 var StyledBottomNavigationAction = /*#__PURE__*/styled__default(core.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;}}"], ui.Color.Silver500, ui.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;}}"], ui.ColorV2.Silver500, ui.ColorV2.White);
 var IconWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarBottomBar__IconWrapper",
   componentId: "SD__sc-9z6v3k-2"
@@ -1170,7 +1170,7 @@ var IconWrapper = /*#__PURE__*/styled__default.div.withConfig({
 var IconLabel = /*#__PURE__*/styled__default.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;"], ui.Color.White, ui.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;"], ui.ColorV2.White, ui.ColorV2.Red300);
 function NavbarBottomBar(_ref) {
   var {
     items,
@@ -1222,7 +1222,7 @@ function NavbarBottomBar(_ref) {
 var NavbarBadge = /*#__PURE__*/styled__default.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:", ";}"], ui.Color.White, ui.Color.Blue300, ui.Color.White, ui.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:", ";}"], ui.ColorV2.White, ui.ColorV2.Blue300, ui.ColorV2.White, ui.ColorV2.Red500);
 var NavbarLabel = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "NavbarItem__NavbarLabel",
   componentId: "SD__sc-1pvzq3w-1"
@@ -1230,7 +1230,7 @@ var NavbarLabel = /*#__PURE__*/styled__default.span.withConfig({
 var NavbarItemRoot = /*#__PURE__*/styled__default.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:", ";}"], ui.Color.White, ui.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:", ";}"], ui.ColorV2.White, ui.ColorV2.Blue300);
 var IconWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarItem__IconWrapper",
   componentId: "SD__sc-1pvzq3w-3"
@@ -1276,11 +1276,11 @@ var NavbarAccordionLabel = /*#__PURE__*/styled__default.span.withConfig({
 var NavbarAccordionRoot = /*#__PURE__*/styled__default(core.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;}"], ui.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;}"], ui.ColorV2.White);
 var NavbarAccordionSummary = /*#__PURE__*/styled__default(core.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;}}"], ui.Color.White, ui.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;}}"], ui.ColorV2.White, ui.ColorV2.Blue300);
 var IconWrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarAccordion__IconWrapper",
   componentId: "SD__sc-1s7g3kw-3"
@@ -1377,7 +1377,7 @@ var Wrapper = /*#__PURE__*/styled__default.div.withConfig({
 var ExpandIconButton = /*#__PURE__*/styled__default(core.IconButton).withConfig({
   displayName: "NavbarList__ExpandIconButton",
   componentId: "SD__sc-19zrmxc-2"
-})(["color:", ";&&:focus{background-color:inherit;}"], ui.Color.Silver500);
+})(["color:", ";&&:focus{background-color:inherit;}"], ui.ColorV2.Silver500);
 var Footer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarList__Footer",
   componentId: "SD__sc-19zrmxc-3"
@@ -1385,7 +1385,7 @@ var Footer = /*#__PURE__*/styled__default.div.withConfig({
 var Root = /*#__PURE__*/styled__default.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:", ";}"], ui.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:", ";}"], ui.ColorV2.Dark100);
 function NavbarMenuItem(_ref4) {
   var {
     label,
@@ -1408,7 +1408,7 @@ function NavbarMenuItem(_ref4) {
 var Content = /*#__PURE__*/styled__default.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, ui.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, ui.ColorV2.Dark300);
 function NavbarList(_ref5) {
   var {
     header,
@@ -1552,7 +1552,7 @@ var _excluded$8 = ["title", "subtitle", "children"];
 var StyledTypography = /*#__PURE__*/styled__default(core.Typography).withConfig({
   displayName: "NavbarAvatar__StyledTypography",
   componentId: "SD__sc-19q2zd0-0"
-})(["color:", ";text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&:hover{color:", ";}"], ui.Color.Silver500, ui.Color.White);
+})(["color:", ";text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&:hover{color:", ";}"], ui.ColorV2.Silver500, ui.ColorV2.White);
 function NavbarAvatar(_ref) {
   var {
       title,
@@ -1594,20 +1594,20 @@ function NavbarAvatar(_ref) {
 var Divider = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarMenu__Divider",
   componentId: "SD__sc-1c8icpt-0"
-})(["border-bottom:1px solid ", ";margin:8px -16px;"], ui.Color.Silver400);
+})(["border-bottom:1px solid ", ";margin:8px -16px;"], ui.ColorV2.Silver400);
 var StyledMenuItem = /*#__PURE__*/styled__default(core.MenuItem).withConfig({
   displayName: "NavbarMenu__StyledMenuItem",
   componentId: "SD__sc-1c8icpt-1"
-})(["& svg{font-size:24px;color:", ";}"], ui.Color.Dark100);
+})(["& svg{font-size:24px;color:", ";}"], ui.ColorV2.Dark100);
 var Wrapper$1 = /*#__PURE__*/styled__default.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:", ";}"], ui.Color.Dark400, _ref => {
+})(["width:100%;padding:8px 16px;cursor:pointer;background:", ";border-left:4px solid ", ";&:hover{border-left-color:", ";background:", ";}"], ui.ColorV2.Dark400, _ref => {
   var {
     active
   } = _ref;
-  return active ? ui.Color.Blue300 : 'transparent';
-}, ui.Color.Blue300, ui.Color.Dark400);
+  return active ? ui.ColorV2.Blue300 : 'transparent';
+}, ui.ColorV2.Blue300, ui.ColorV2.Dark400);
 function NavbarMenu(_ref2) {
   var {
     items,
@@ -1650,7 +1650,7 @@ function NavbarMenu(_ref2) {
             verticalAlign: "center",
             children: [item.icon, /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
               style: {
-                color: ui.Color.Dark500
+                color: ui.ColorV2.Dark500
               },
               children: item.label
             })]
@@ -1664,11 +1664,11 @@ function NavbarMenu(_ref2) {
 var SidebarRoot = /*#__PURE__*/styled__default.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 ", ";"], ui.Color.White, ui.Color.Silver400);
+})(["top:0;position:sticky;overflow-y:auto;overflow-x:hidden;height:100vh;background-color:", ";border-right:1px solid ", ";"], ui.ColorV2.White, ui.ColorV2.Silver400);
 var SidebarHeader = /*#__PURE__*/styled__default.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:", ";"], ui.Color.White);
+})(["top:0;z-index:2;position:sticky;padding-left:24px;padding-right:24px;padding-bottom:8px;background-color:", ";"], ui.ColorV2.White);
 var SidebarTitle = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Sidebar__SidebarTitle",
   componentId: "SD__sc-b77o22-2"
@@ -1931,12 +1931,12 @@ var SidebarMenuItemRoot = /*#__PURE__*/styled__default.div.withConfig({
     hasAvatar
   } = _ref;
   var height = hasAvatar ? 48 : 40;
-  return styled.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, ui.Color.Silver200, ui.Color.Blue300, ui.Color.Silver200);
+  return styled.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, ui.ColorV2.Silver200, ui.ColorV2.Blue300, ui.ColorV2.Silver200);
 });
 var SidebarMenuItemBadge = /*#__PURE__*/styled__default.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:", ";"], ui.Color.Dark500, ui.Color.Silver400);
+})(["font-size:12px;font-weight:500;line-height:16px;padding-left:4px;padding-right:4px;border-radius:100px;color:", ";background-color:", ";"], ui.ColorV2.Dark500, ui.ColorV2.Silver400);
 var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
   var {
     action,