@superdispatch/ui 0.33.0 → 0.35.0

package/dist-src/avatar/AvatarOverrides.js

@@ -1,5 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 export function overrideAvatar(theme) {
   theme.overrides.MuiAvatar = {
     root: _objectSpread(_objectSpread({}, theme.typography.h5), {}, {
@@ -12,8 +12,8 @@ export function overrideAvatar(theme) {
       }
     }),
     colorDefault: {
-      color: ColorV2.Dark300,
-      backgroundColor: ColorV2.Silver300
+      color: ColorDynamic.Dark300,
+      backgroundColor: ColorDynamic.Silver300
     }
   };
 }

package/dist-src/avatar-button/AvatarButton.js

@@ -6,7 +6,7 @@ import { Avatar, ButtonBase, CircularProgress } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = /*#__PURE__*/makeStyles(theme => {
   var sm = theme.breakpoints.up('sm');
@@ -15,19 +15,19 @@ var useStyles = /*#__PURE__*/makeStyles(theme => {
       borderRadius: '50%',
       '&[disabled], &[aria-busy="true"]': {
         '& > $overlay': {
-          backgroundColor: ColorV2.White50
+          backgroundColor: ColorDynamic.White50
         }
       },
       '&:not([disabled])[aria-busy="false"]': {
         '&:hover, &:focus': {
           '&$withIcon > $overlay': {
-            backgroundColor: ColorV2.Dark50,
+            backgroundColor: ColorDynamic.Dark50,
             '& > svg': {
               opacity: 1
             }
           },
           '&:not($withIcon) > $overlay': {
-            backgroundColor: ColorV2.Black20
+            backgroundColor: ColorDynamic.Black20
           }
         }
       }
@@ -42,11 +42,11 @@ var useStyles = /*#__PURE__*/makeStyles(theme => {
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: '50%',
-      backgroundColor: ColorV2.Transparent,
+      backgroundColor: ColorDynamic.Transparent,
       transition: theme.transitions.create('background-color'),
       '& > svg': {
         opacity: 0,
-        color: ColorV2.White,
+        color: ColorDynamic.White,
         transition: theme.transitions.create('opacity'),
         fontSize: theme.spacing(3),
         [sm]: {
@@ -58,7 +58,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => {
       top: 0,
       left: 0,
       position: 'absolute',
-      color: ColorV2.Blue500,
+      color: ColorDynamic.Blue500,
       fontSize: theme.spacing(5),
       [sm]: {
         fontSize: theme.spacing(4)

package/dist-src/button/ButtonOverrides.js

@@ -1,14 +1,14 @@
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 function outlineShadow() {
   var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorV2.Transparent;
+  var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorDynamic.Transparent;
   return "0 0 0 ".concat(size, "px ").concat(color);
 }
 function textVariant(text, outline, background, progress) {
   return {
     color: text,
     boxShadow: outlineShadow(),
-    backgroundColor: ColorV2.Transparent,
+    backgroundColor: ColorDynamic.Transparent,
     '&:hover': {
       backgroundColor: background
     },
@@ -22,7 +22,7 @@ function textVariant(text, outline, background, progress) {
     '&$disabled': {
       color: outline,
       boxShadow: outlineShadow(),
-      backgroundColor: ColorV2.Transparent
+      backgroundColor: ColorDynamic.Transparent
     },
     '&$disabled[aria-busy="true"]': {
       color: progress
@@ -30,7 +30,7 @@ function textVariant(text, outline, background, progress) {
   };
 }
 function outlinedBorder(borderColor) {
-  var outlineColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorV2.Transparent;
+  var outlineColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorDynamic.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) {
@@ -160,11 +160,11 @@ export function overrideButton(theme) {
     },
     text: {
       padding: undefined,
-      '&[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)
+      '&[data-color="error"]': textVariant(ColorDynamic.Red300, ColorDynamic.Red100, ColorDynamic.Red50, ColorDynamic.Red200),
+      '&[data-color="success"]': textVariant(ColorDynamic.Green300, ColorDynamic.Green100, ColorDynamic.Green50, ColorDynamic.Green200),
+      '&[data-color="white"]': textVariant(ColorDynamic.White, ColorDynamic.White50, ColorDynamic.White10, ColorDynamic.White50)
     },
-    textPrimary: textVariant(ColorV2.Blue300, ColorV2.Blue100, ColorV2.Blue50, ColorV2.Blue200),
+    textPrimary: textVariant(ColorDynamic.Blue300, ColorDynamic.Blue100, ColorDynamic.Blue50, ColorDynamic.Blue200),
     textSizeSmall: {
       padding: undefined,
       fontSize: undefined
@@ -179,11 +179,11 @@ export function overrideButton(theme) {
       '&$disabled': {
         border: undefined
       },
-      '&[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)
+      '&[data-color="error"]': outlinedVariant(ColorDynamic.Red300, ColorDynamic.Red300, ColorDynamic.Red100, ColorDynamic.Red100, ColorDynamic.Red300, ColorDynamic.Red300, ColorDynamic.Red100, ColorDynamic.Red50, ColorDynamic.Red300, ColorDynamic.White),
+      '&[data-color="success"]': outlinedVariant(ColorDynamic.Green300, ColorDynamic.Green300, ColorDynamic.Green100, ColorDynamic.Green100, ColorDynamic.Green300, ColorDynamic.Green300, ColorDynamic.Green100, ColorDynamic.Green50, ColorDynamic.Green300, ColorDynamic.White),
+      '&[data-color="white"]': outlinedVariant(ColorDynamic.White, ColorDynamic.White50, ColorDynamic.White50, ColorDynamic.White40, ColorDynamic.White, ColorDynamic.White50, ColorDynamic.White40, ColorDynamic.White10, ColorDynamic.White50, ColorDynamic.Transparent)
     },
-    outlinedPrimary: outlinedVariant(ColorV2.Dark500, ColorV2.Silver500, ColorV2.Silver500, ColorV2.Silver400, ColorV2.Blue300, ColorV2.Blue300, ColorV2.Blue100, ColorV2.Blue50, ColorV2.Dark200, ColorV2.White),
+    outlinedPrimary: outlinedVariant(ColorDynamic.Dark500, ColorDynamic.Silver500, ColorDynamic.Silver500, ColorDynamic.Silver400, ColorDynamic.Blue300, ColorDynamic.Blue300, ColorDynamic.Blue100, ColorDynamic.Blue50, ColorDynamic.Dark200, ColorDynamic.White),
     outlinedSizeSmall: {
       padding: undefined,
       fontSize: undefined
@@ -217,11 +217,11 @@ export function overrideButton(theme) {
         boxShadow: undefined,
         backgroundColor: undefined
       },
-      '&[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)
+      '&[data-color="error"]': containedVariant(ColorDynamic.White, ColorDynamic.Red300, ColorDynamic.Red100, ColorDynamic.Red500, ColorDynamic.White, ColorDynamic.Red100),
+      '&[data-color="success"]': containedVariant(ColorDynamic.White, ColorDynamic.Green300, ColorDynamic.Green100, ColorDynamic.Green500, ColorDynamic.White, ColorDynamic.Green100),
+      '&[data-color="white"]': containedVariant(ColorDynamic.White, ColorDynamic.White20, ColorDynamic.White40, ColorDynamic.White40, ColorDynamic.White50, ColorDynamic.White08)
     },
-    containedPrimary: containedVariant(ColorV2.White, ColorV2.Blue300, ColorV2.Blue100, ColorV2.Blue500, ColorV2.White, ColorV2.Blue100),
+    containedPrimary: containedVariant(ColorDynamic.White, ColorDynamic.Blue300, ColorDynamic.Blue100, ColorDynamic.Blue500, ColorDynamic.White, ColorDynamic.Blue100),
     containedSizeSmall: {
       padding: undefined,
       fontSize: undefined

package/dist-src/card-button/CardButton.js

@@ -5,7 +5,7 @@ import { ButtonBase, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
   root: {
@@ -14,7 +14,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
     alignItems: 'center',
     flexDirection: 'column',
     justifyContent: 'center',
-    backgroundColor: ColorV2.White,
+    backgroundColor: ColorDynamic.White,
     border: '1px dashed',
     borderRadius: theme.spacing(0.5),
     padding: theme.spacing(1.5),
@@ -22,27 +22,30 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
     transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
   },
   disabled: {
-    color: ColorV2.Dark200,
-    borderColor: ColorV2.Silver500,
-    backgroundColor: ColorV2.Silver100
+    color: ColorDynamic.Dark100,
+    borderColor: ColorDynamic.Silver500,
+    backgroundColor: ColorDynamic.Silver400Alpha30,
+    '& $hint': {
+      color: ColorDynamic.Dark100
+    }
   },
   error: {
-    color: ColorV2.Red500,
-    borderColor: ColorV2.Red500,
-    backgroundColor: ColorV2.Red50,
+    color: ColorDynamic.Red500,
+    borderColor: ColorDynamic.Red500,
+    backgroundColor: ColorDynamic.Red50,
     '&:focus': {
-      backgroundColor: ColorV2.Red75
+      backgroundColor: ColorDynamic.Red300Aplha20
     }
   },
   primary: {
-    color: ColorV2.Blue500,
-    borderColor: ColorV2.Silver500,
+    color: ColorDynamic.Blue500,
+    borderColor: ColorDynamic.Silver500,
     '&:focus': {
-      backgroundColor: ColorV2.Blue50
+      backgroundColor: ColorDynamic.Blue50
     },
     '&:hover, &:active': {
-      borderColor: ColorV2.Blue300,
-      backgroundColor: ColorV2.Blue50
+      borderColor: ColorDynamic.Blue300,
+      backgroundColor: ColorDynamic.Blue50
     }
   },
   sizeSmall: {

package/dist-src/checkbox/CheckboxField.js

@@ -4,7 +4,7 @@ var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText"
 import { Checkbox, FormControl as FormControlMui, FormControlLabel, FormHelperText as FormHelperTextMui } from '@material-ui/core';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var FormControl = /*#__PURE__*/styled(FormControlMui).withConfig({
   displayName: "CheckboxField__FormControl",
@@ -13,7 +13,7 @@ var FormControl = /*#__PURE__*/styled(FormControlMui).withConfig({
 var FormHelperText = /*#__PURE__*/styled(FormHelperTextMui).withConfig({
   displayName: "CheckboxField__FormHelperText",
   componentId: "SD__sc-1wxu0g6-1"
-})(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], ColorV2.Dark300, ColorV2.Red500);
+})(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], ColorDynamic.Dark300, ColorDynamic.Red500);
 export var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
       label,

package/dist-src/checkbox/CheckboxGroudField.js

@@ -4,16 +4,16 @@ var _excluded = ["FormGroupProps", "label", "FormLabelProps", "helperText", "For
 import { FormControl, FormGroup, FormHelperText as FormHelperTextMui, FormLabel as FormLabelMui } from '@material-ui/core';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var FormLabel = /*#__PURE__*/styled(FormLabelMui).withConfig({
   displayName: "CheckboxGroudField__FormLabel",
   componentId: "SD__sc-1lihyfy-0"
-})(["margin-bottom:8px;color:", ";font-weight:600;"], ColorV2.Dark300);
+})(["margin-bottom:8px;color:", ";font-weight:600;"], ColorDynamic.Dark300);
 var FormHelperText = /*#__PURE__*/styled(FormHelperTextMui).withConfig({
   displayName: "CheckboxGroudField__FormHelperText",
   componentId: "SD__sc-1lihyfy-1"
-})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], ColorV2.Dark300, ColorV2.Red500);
+})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], ColorDynamic.Dark300, ColorDynamic.Red500);
 export var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
       FormGroupProps: formGroupProps,

package/dist-src/checkbox/CheckboxOverrides.js

@@ -1,5 +1,5 @@
 import { SvgIcon } from '@material-ui/core';
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function overrideCheckbox(theme) {
   theme.props.MuiCheckbox = {
@@ -10,7 +10,7 @@ export function overrideCheckbox(theme) {
         height: "17",
         x: "3.5",
         y: "3.5",
-        fill: ColorV2.White,
+        fill: ColorDynamic.White,
         stroke: "currentColor",
         rx: "1.5"
       })
@@ -24,7 +24,7 @@ export function overrideCheckbox(theme) {
         fill: "currentColor",
         rx: "2"
       }), /*#__PURE__*/_jsx("path", {
-        fill: ColorV2.White,
+        fill: ColorDynamic.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"
       })]
     }),
@@ -37,14 +37,14 @@ export function overrideCheckbox(theme) {
         fill: "currentIcon",
         rx: "2"
       }), /*#__PURE__*/_jsx("path", {
-        fill: ColorV2.White,
+        fill: ColorDynamic.White,
         d: "M7 11h10v2H7v-2z"
       })]
     })
   };
   theme.overrides.MuiCheckbox = {
     root: {
-      color: ColorV2.Dark100,
+      color: ColorDynamic.Dark100,
       width: theme.spacing(3),
       height: theme.spacing(3),
       marginRight: theme.spacing(1),
@@ -53,7 +53,7 @@ export function overrideCheckbox(theme) {
       marginBottom: theme.spacing(0.5),
       padding: 0,
       '&:hover': {
-        backgroundColor: ColorV2.Blue10
+        backgroundColor: ColorDynamic.Blue10
       },
       '&.MuiButtonBase-root': {
         borderRadius: theme.spacing(0.5)
@@ -61,11 +61,11 @@ export function overrideCheckbox(theme) {
     },
     colorPrimary: {
       '&$checked$disabled': {
-        color: ColorV2.Silver500
+        color: ColorDynamic.Silver500
       },
       '&:hover:not($checked)': {
-        color: ColorV2.Dark100,
-        backgroundColor: ColorV2.Blue10
+        color: ColorDynamic.Dark100,
+        backgroundColor: ColorDynamic.Blue10
       }
     }
   };

package/dist-src/chip/ChipOverrides.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { SvgIcon } from '@material-ui/core';
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function overrideChip(theme) {
   var sm = theme.breakpoints.up('sm');
@@ -22,10 +22,10 @@ export function overrideChip(theme) {
       color: undefined,
       height: undefined,
       borderRadius: 4,
-      backgroundColor: ColorV2.Silver200,
+      backgroundColor: ColorDynamic.Silver200,
       '&$disabled': {
         opacity: undefined,
-        color: ColorV2.Dark100
+        color: ColorDynamic.Dark100
       }
     }),
     sizeSmall: {
@@ -47,16 +47,16 @@ export function overrideChip(theme) {
         boxShadow: undefined
       },
       '&:focus': {
-        boxShadow: "0 0 0 2px ".concat(ColorV2.Dark30)
+        boxShadow: "0 0 0 2px ".concat(ColorDynamic.Dark30)
       },
       '&:active, &:hover': {
-        backgroundColor: ColorV2.Silver400
+        backgroundColor: ColorDynamic.Silver400
       }
     },
     deletable: {
       '&:focus': {
         backgroundColor: undefined,
-        boxShadow: "0 0 0 2px ".concat(ColorV2.Silver400)
+        boxShadow: "0 0 0 2px ".concat(ColorDynamic.Silver400)
       }
     },
     deleteIcon: {
@@ -66,12 +66,12 @@ export function overrideChip(theme) {
       transition: theme.transitions.create('background-color'),
       '&:active, &:hover, &:focus': {
         '& > svg': {
-          backgroundColor: ColorV2.Silver400
+          backgroundColor: ColorDynamic.Silver400
         }
       },
       '& > svg': {
         borderRadius: '50%',
-        color: ColorV2.Dark100,
+        color: ColorDynamic.Dark100,
         fontSize: '1em'
       }
     },
@@ -86,7 +86,7 @@ export function overrideChip(theme) {
       }
     },
     icon: {
-      color: ColorV2.Dark100,
+      color: ColorDynamic.Dark100,
       fontSize: '1em',
       marginRight: undefined
     },

package/dist-src/description-list/DescriptionList.js

@@ -6,7 +6,7 @@ import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { OverflowText } from "../overflow-text/OverflowText.js";
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 import { isEmptyReactNode } from "../utils/isEmptyReactNode.js";
 import { useUID } from "../utils/useUID.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,7 +34,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
     display: 'inline-flex',
     marginRight: theme.spacing(1),
     '& > .MuiSvgIcon-root': {
-      color: ColorV2.Dark100,
+      color: ColorDynamic.Dark100,
       fontSize: theme.spacing(3),
       [theme.breakpoints.up('sm')]: {
         fontSize: theme.spacing(2)

package/dist-src/drawer/DrawerActions.js

@@ -5,7 +5,7 @@ import { AppBar, Toolbar } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 import { VisibilityObserver } from "../utils/VisibilityObserver.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
@@ -18,7 +18,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
       borderBottom: 'none',
       transition: theme.transitions.create(['border-color']),
       '&:not($appBarSticky)': {
-        borderTopColor: ColorV2.Transparent
+        borderTopColor: ColorDynamic.Transparent
       }
     }
   },

package/dist-src/drawer/DrawerTitle.js

@@ -5,7 +5,7 @@ import { AppBar, Grid, Toolbar, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 import { VisibilityObserver } from "../utils/VisibilityObserver.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
@@ -16,7 +16,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
       borderRight: 'none',
       transition: theme.transitions.create(['border-color']),
       '&:not($appBarSticky)': {
-        borderBottomColor: ColorV2.Transparent
+        borderBottomColor: ColorDynamic.Transparent
       }
     }
   },

package/dist-src/dropdown-button/DropdownButton.js

@@ -5,7 +5,7 @@ import { ButtonGroup, MenuList, Popover } from '@material-ui/core';
 import * as React from 'react';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { ColorV2, mergeRefs, useUID } from "../index.js";
+import { ColorDynamic, mergeRefs, useUID } from "../index.js";
 import { Button } from "../button/Button.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function CaretDownIcon() {
@@ -24,7 +24,7 @@ var CaretButton = /*#__PURE__*/styled(Button).withConfig({
   var {
     variant
   } = _ref;
-  return variant === 'contained' && "border-left: 1px solid ".concat(ColorV2.Blue500);
+  return variant === 'contained' && "border-left: 1px solid ".concat(ColorDynamic.Blue500);
 });
 export var DropdownButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var _anchorRef$current2;

package/dist-src/icon-button/IconButtonOverrides.js

@@ -1,37 +1,37 @@
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 export function overrideIconButton(theme) {
   theme.overrides.MuiIconButton = {
     root: {
-      color: ColorV2.Dark100,
-      backgroundColor: ColorV2.Transparent,
+      color: ColorDynamic.Dark100,
+      backgroundColor: ColorDynamic.Transparent,
       transition: theme.transitions.create(['color', 'background-color'], {
         duration: theme.transitions.duration.short
       }),
       '&:hover': {
-        backgroundColor: ColorV2.Transparent
+        backgroundColor: ColorDynamic.Transparent
       },
       '&:active': {
-        color: ColorV2.Dark500
+        color: ColorDynamic.Dark500
       },
       '&:hover ': {
-        color: ColorV2.Dark300
+        color: ColorDynamic.Dark300
       },
       '&:focus': {
-        backgroundColor: ColorV2.Silver400
+        backgroundColor: ColorDynamic.Silver400
       },
       '&$disabled': {
-        color: ColorV2.Silver500
+        color: ColorDynamic.Silver500
       }
     },
     colorPrimary: {
       '&:active': {
-        color: ColorV2.Blue500
+        color: ColorDynamic.Blue500
       },
       '&:hover ': {
-        color: ColorV2.Blue300
+        color: ColorDynamic.Blue300
       },
       '&:focus': {
-        backgroundColor: ColorV2.Blue50
+        backgroundColor: ColorDynamic.Blue50
       }
     },
     edgeEnd: {

package/dist-src/link/LinkOverrides.js

@@ -1,4 +1,4 @@
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 function line(color) {
   return "linear-gradient(to right, ".concat(color, " 0%, ").concat(color, " 100%)");
 }
@@ -12,21 +12,21 @@ export function overrideLink(theme) {
       backgroundSize: '100% 1px',
       backgroundRepeat: 'repeat-x',
       backgroundPosition: '0 100%',
-      backgroundColor: ColorV2.Transparent,
+      backgroundColor: ColorDynamic.Transparent,
       '&:focus': {
         outline: 'none'
       },
       '&:disabled': {
-        color: ColorV2.Dark100,
-        backgroundImage: line(ColorV2.Silver500),
+        color: ColorDynamic.Dark100,
+        backgroundImage: line(ColorDynamic.Silver500),
         '&:focus, &:hover, &:active': {
-          color: ColorV2.Dark100,
-          backgroundImage: line(ColorV2.Silver500)
+          color: ColorDynamic.Dark100,
+          backgroundImage: line(ColorDynamic.Silver500)
         }
       },
       '&.MuiLink-underlineAlways': {
         textDecoration: 'none',
-        backgroundImage: line(ColorV2.Silver500),
+        backgroundImage: line(ColorDynamic.Silver500),
         '&:hover, &:active': {
           backgroundImage: line('currentColor')
         }
@@ -53,8 +53,8 @@ export function overrideLink(theme) {
       },
       '&.MuiTypography-colorTextPrimary, &.MuiTypography-colorTextSecondary': {
         '&:focus, &:hover, &:active': {
-          color: ColorV2.Blue500,
-          backgroundImage: line(ColorV2.Blue500)
+          color: ColorDynamic.Blue500,
+          backgroundImage: line(ColorDynamic.Blue500)
         }
       }
     },

package/dist-src/list/ListOverrides.js

@@ -1,12 +1,12 @@
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 export function overrideList(theme) {
   theme.overrides.MuiListItem = {
     root: {
       '&$selected, &$selected:hover': {
-        backgroundColor: ColorV2.Blue50
+        backgroundColor: ColorDynamic.Blue50
       },
       '& .MuiTouchRipple-root': {
-        color: ColorV2.Blue100
+        color: ColorDynamic.Blue100
       }
     }
   };

package/dist-src/menu/MenuOverrides.js

@@ -1,5 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 export function overrideMenu(theme) {
   theme.props.MuiMenu = {
     getContentAnchorEl: null,
@@ -14,7 +14,7 @@ export function overrideMenu(theme) {
   };
   theme.overrides.MuiMenu = {
     paper: {
-      border: "1px solid ".concat(ColorV2.Silver400)
+      border: "1px solid ".concat(ColorDynamic.Silver400)
     }
   };
   theme.overrides.MuiMenuItem = {

package/dist-src/overflow-text/OverflowText.js

@@ -6,7 +6,7 @@ import { Tooltip, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef, useState } from 'react';
-import { ColorV2 } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 import { VisibilityObserver } from "../utils/VisibilityObserver.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
@@ -16,7 +16,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
     transition: theme.transitions.create('border'),
     '&$truncated': {
       cursor: 'pointer',
-      borderBottomColor: ColorV2.Silver500
+      borderBottomColor: ColorDynamic.Silver500
     }
   },
   truncated: {},