@superdispatch/ui 0.50.2 → 0.50.6

package/dist-node/index.js

@@ -66,7 +66,7 @@ var CaretButton = /*#__PURE__*/styled__default(Button).withConfig({
   var {
     variant
   } = _ref;
-  return variant === 'contained' && "border-left: 1px solid ".concat(exports.ColorDynamic.Blue500);
+  return variant === 'contained' && "border-left: 1px solid ".concat(ColorDynamic.Blue500);
 });
 var DropdownButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var _anchorRef$current2;
@@ -84,7 +84,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var anchorRef = React.useRef(null);
   function handleClick(event) {
     setOpen(false);
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    onClick === null || onClick === void 0 || onClick(event);
   }
   function handleToggle() {
     setOpen(prevOpen => !prevOpen);
@@ -271,14 +271,14 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               children: [/*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
                 onClick: event => {
                   var _item$onClick;
-                  (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+                  (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, event);
                   setMenuButtonRef(undefined);
                 },
                 children: item.label
               }, item.key), (_item$dropdown = item.dropdown) === null || _item$dropdown === void 0 ? void 0 : _item$dropdown.map(dropdownItem => /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
                 onClick: event => {
                   var _dropdownItem$onClick;
-                  (_dropdownItem$onClick = dropdownItem.onClick) === null || _dropdownItem$onClick === void 0 ? void 0 : _dropdownItem$onClick.call(dropdownItem, event);
+                  (_dropdownItem$onClick = dropdownItem.onClick) === null || _dropdownItem$onClick === void 0 || _dropdownItem$onClick.call(dropdownItem, event);
                   setMenuButtonRef(undefined);
                 },
                 children: dropdownItem.label
@@ -401,7 +401,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           return [/*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
             onClick: event => {
               var _item$onClick;
-              (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+              (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, event);
               setMenuButtonRef(undefined);
             },
             children: renderMenuItem(item)
@@ -414,11 +414,13 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName = "AdaptiveVerticalToolbar";
 
 // `Color`: Represents the primary color palette with various shades and opacities.
+//    - Includes legacy colors marked as deprecated.
+//   - To update a color, modify the hex or rgba value associated with the desired color name.
 
-// `ColorDark`: Represents the color palette for dark themes.
-//     - Tailored for dark theme usage.
-//     - Update colors by modifying the associated values.
-(function (Color) {
+var Color = /*#__PURE__*/function (Color) {
+  //
+  // ???
+  //
   Color["White"] = "#fff";
   Color["White50"] = "rgba(255, 255, 255, 0.5)";
   Color["White40"] = "rgba(255, 255, 255, 0.4)";
@@ -429,48 +431,94 @@ if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName =
   Color["Black"] = "#000";
   Color["Black50"] = "rgba(0, 0, 0, 0.5)";
   Color["Black20"] = "rgba(0, 0, 0, 0.2)";
+  //Colors with 30% opacity
   Color["Dark30"] = "rgba(143, 148, 158, 0.3)";
   Color["Blue30"] = "rgba(0, 112, 245, 0.3)";
   Color["Green30"] = "rgba(3, 135, 47, 0.3)";
   Color["Red30"] = "rgba(229, 35, 13, 0.3)";
   Color["Silver30"] = "rgba(225, 229, 234, 0.3)";
+  //Colors with 10% opacity
   Color["Blue10"] = "rgba(0, 112, 245, 0.1)";
   Color["Red10"] = "rgba(195, 25, 9, 0.1)";
+  //
+  // Legacy Neutral Colors
+  //
+  /**@deprecated Use Dark100 */
   Color["Grey100"] = "#8F949E";
+  /**@deprecated Use Dark200 */
   Color["Grey200"] = "#6A707C";
+  /**@deprecated Use Dark300 */
   Color["Grey300"] = "#5B6371";
+  /**@deprecated Use Dark400 */
   Color["Grey400"] = "#323C4E";
+  /**@deprecated Use Dark450 */
   Color["Grey450"] = "#222F44";
+  /**@deprecated Use Dark500 */
   Color["Grey500"] = "#192334";
+  /** @deprecated */
   Color["Dark200"] = "#6A707C";
+  /** @deprecated */
   Color["Dark400"] = "#323C4E";
+  /** @deprecated */
   Color["Dark450"] = "#222F44";
+  /** @deprecated */
   Color["Silver100"] = "#F6F7F8";
+  /** @deprecated */
   Color["Silver300"] = "#E8ECF0";
+  //
+  // Legacy Extended Palette
+  //
+  /** @deprecated */
   Color["Blue75"] = "#CCE5FF";
+  /** @deprecated */
   Color["Blue100"] = "#A8D1FF";
+  /** @deprecated */
   Color["Blue200"] = "#66ADFF";
+  /** @deprecated */
   Color["Blue400"] = "#0063DB";
+  /** @deprecated */
   Color["Green75"] = "#C8F4D1";
+  /** @deprecated */
   Color["Green100"] = "#90EAAE";
+  /** @deprecated */
   Color["Green200"] = "#5DDA87";
+  /** @deprecated */
   Color["Green400"] = "#1E8F46";
+  /** @deprecated */
   Color["Purple75"] = "#DCDBF5";
+  /** @deprecated */
   Color["Purple100"] = "#CBC8EE";
+  /** @deprecated */
   Color["Purple200"] = "#A7A1E8";
+  /** @deprecated */
   Color["Purple400"] = "#473ABB";
+  /** @deprecated */
   Color["Red75"] = "#FDD9D3";
+  /** @deprecated */
   Color["Red100"] = "#FDC2BA";
+  /** @deprecated */
   Color["Red200"] = "#FE988B";
+  /** @deprecated */
   Color["Red400"] = "#D9210D";
+  /** @deprecated */
   Color["Teal75"] = "#BEEDF9";
+  /** @deprecated */
   Color["Teal100"] = "#91E3F8";
+  /** @deprecated */
   Color["Teal200"] = "#61D3EF";
+  /** @deprecated */
   Color["Teal400"] = "#008DB8";
+  /** @deprecated */
   Color["Yellow75"] = "#FFF1C2";
+  /** @deprecated */
   Color["Yellow100"] = "#FFE494";
+  /** @deprecated */
   Color["Yellow200"] = "#FFDC6B";
+  /** @deprecated */
   Color["Yellow400"] = "#FFA91F";
+  //
+  // Neutral Colors
+  //
   Color["Dark50"] = "rgba(25, 35, 52, 0.5)";
   Color["Dark100"] = "#8F949E";
   Color["Dark300"] = "#5B6371";
@@ -479,6 +527,9 @@ if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName =
   Color["Silver400"] = "#E1E5EA";
   Color["Silver500"] = "#C4CDD5";
   Color["Silver400Alpha30"] = "rgba(225, 229, 234, 0.3)";
+  //
+  // Extended Palette
+  //
   Color["Blue50"] = "#EBF4FF";
   Color["Blue300"] = "#0070F5";
   Color["Blue500"] = "#0063DB";
@@ -498,12 +549,17 @@ if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName =
   Color["Yellow50"] = "#FFF7DC";
   Color["Yellow300"] = "#E8671C";
   Color["Yellow500"] = "#B84807";
-})(exports.Color || (exports.Color = {}));
+  return Color;
+}({});
 
-// `ColorDynamic`: Represents a newer version of the color palette using CSS variables.
-//   - Designed for more dynamic theming using CSS custom properties.
-//   - Update colors by changing the CSS variable references.
-(function (ColorDark) {
+// `ColorDark`: Represents the color palette for dark themes.
+//     - Tailored for dark theme usage.
+//     - Update colors by modifying the associated values.
+
+var ColorDark = /*#__PURE__*/function (ColorDark) {
+  //
+  // ???
+  //
   ColorDark["White"] = "#151B22";
   ColorDark["White50"] = "rgba(21, 27, 34, 0.5)";
   ColorDark["White40"] = "rgba(21, 27, 34, 0.4)";
@@ -514,48 +570,94 @@ if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName =
   ColorDark["Black"] = "#000";
   ColorDark["Black50"] = "rgba(0, 0, 0, 0.5)";
   ColorDark["Black20"] = "rgba(0, 0, 0, 0.2)";
+  //Colors with 30% opacity
   ColorDark["Dark30"] = "rgba(143, 148, 158, 0.3)";
   ColorDark["Blue30"] = "rgba(0, 112, 245, 0.3)";
   ColorDark["Green30"] = "rgba(3, 135, 47, 0.3)";
   ColorDark["Red30"] = "rgba(229, 35, 13, 0.3)";
   ColorDark["Silver30"] = "rgba(225, 229, 234, 0.3)";
+  //Colors with 10% opacity
   ColorDark["Blue10"] = "rgba(0, 112, 245, 0.1)";
   ColorDark["Red10"] = "rgba(195, 25, 9, 0.1)";
+  //
+  // Legacy Neutral Colors
+  //
+  /**@deprecated Use Dark100 */
   ColorDark["Grey100"] = "#8F949E";
+  /**@deprecated Use Dark200 */
   ColorDark["Grey200"] = "#6A707C";
+  /**@deprecated Use Dark300 */
   ColorDark["Grey300"] = "#5B6371";
+  /**@deprecated Use Dark400 */
   ColorDark["Grey400"] = "#323C4E";
+  /**@deprecated Use Dark450 */
   ColorDark["Grey450"] = "#222F44";
+  /**@deprecated Use Dark500 */
   ColorDark["Grey500"] = "#192334";
+  /** @deprecated */
   ColorDark["Dark200"] = "#6A707C";
+  /** @deprecated */
   ColorDark["Dark400"] = "#323C4E";
+  /** @deprecated */
   ColorDark["Dark450"] = "#222F44";
+  /** @deprecated */
   ColorDark["Silver100"] = "#F6F7F8";
+  /** @deprecated */
   ColorDark["Silver300"] = "#E8ECF0";
+  //
+  // Legacy Extended Palette
+  //
+  /** @deprecated */
   ColorDark["Blue75"] = "#CCE5FF";
+  /** @deprecated */
   ColorDark["Blue100"] = "#A8D1FF";
+  /** @deprecated */
   ColorDark["Blue200"] = "#66ADFF";
+  /** @deprecated */
   ColorDark["Blue400"] = "#0063DB";
+  /** @deprecated */
   ColorDark["Green75"] = "#C8F4D1";
+  /** @deprecated */
   ColorDark["Green100"] = "#90EAAE";
+  /** @deprecated */
   ColorDark["Green200"] = "#5DDA87";
+  /** @deprecated */
   ColorDark["Green400"] = "#1E8F46";
+  /** @deprecated */
   ColorDark["Purple75"] = "#DCDBF5";
+  /** @deprecated */
   ColorDark["Purple100"] = "#CBC8EE";
+  /** @deprecated */
   ColorDark["Purple200"] = "#A7A1E8";
+  /** @deprecated */
   ColorDark["Purple400"] = "#473ABB";
+  /** @deprecated */
   ColorDark["Red75"] = "#FDD9D3";
+  /** @deprecated */
   ColorDark["Red100"] = "#FDC2BA";
+  /** @deprecated */
   ColorDark["Red200"] = "#FE988B";
+  /** @deprecated */
   ColorDark["Red400"] = "#D9210D";
+  /** @deprecated */
   ColorDark["Teal75"] = "#BEEDF9";
+  /** @deprecated */
   ColorDark["Teal100"] = "#91E3F8";
+  /** @deprecated */
   ColorDark["Teal200"] = "#61D3EF";
+  /** @deprecated */
   ColorDark["Teal400"] = "#008DB8";
+  /** @deprecated */
   ColorDark["Yellow75"] = "#FFF1C2";
+  /** @deprecated */
   ColorDark["Yellow100"] = "#FFE494";
+  /** @deprecated */
   ColorDark["Yellow200"] = "#FFDC6B";
+  /** @deprecated */
   ColorDark["Yellow400"] = "#FFA91F";
+  //
+  // Neutral Colors
+  //
   ColorDark["Dark50"] = "rgba(25, 35, 52, 0.5)";
   ColorDark["Dark100"] = "#6E7A8A";
   ColorDark["Dark300"] = "#AEB4BD";
@@ -564,6 +666,9 @@ if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName =
   ColorDark["Silver400"] = "#30373D";
   ColorDark["Silver500"] = "#47505B";
   ColorDark["Silver400Alpha30"] = "rgba(48, 55, 61, 0.3)";
+  //
+  // Extended Palette
+  //
   ColorDark["Blue50"] = "#0E2947";
   ColorDark["Blue300"] = "#0070F5";
   ColorDark["Blue500"] = "#55ADFF";
@@ -583,8 +688,14 @@ if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName =
   ColorDark["Yellow50"] = "#33200A";
   ColorDark["Yellow300"] = "#E8671C";
   ColorDark["Yellow500"] = "#FCA542";
-})(exports.ColorDark || (exports.ColorDark = {}));
-(function (ColorDynamic) {
+  return ColorDark;
+}({});
+
+// `ColorDynamic`: Represents a newer version of the color palette using CSS variables.
+//   - Designed for more dynamic theming using CSS custom properties.
+//   - Update colors by changing the CSS variable references.
+
+var ColorDynamic = /*#__PURE__*/function (ColorDynamic) {
   ColorDynamic["White"] = "var(--sd-white)";
   ColorDynamic["White50"] = "var(--sd-white-50)";
   ColorDynamic["White40"] = "var(--sd-white-40)";
@@ -595,48 +706,90 @@ if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName =
   ColorDynamic["Black"] = "var(--sd-black)";
   ColorDynamic["Black50"] = "var(--sd-black-50)";
   ColorDynamic["Black20"] = "var(--sd-black-20)";
+  // Colors with 30% opacity
   ColorDynamic["Dark30"] = "var(--sd-dark-30)";
   ColorDynamic["Blue30"] = "var(--sd-blue-30)";
   ColorDynamic["Green30"] = "var(--sd-green-30)";
   ColorDynamic["Red30"] = "var(--sd-red-30)";
   ColorDynamic["Silver30"] = "var(--sd-silver-30)";
+  // Colors with 10% opacity
   ColorDynamic["Blue10"] = "var(--sd-blue-10)";
   ColorDynamic["Red10"] = "var(--sd-red-10)";
+  // Legacy Neutral Colors
+  /**@deprecated Use Dark100 */
   ColorDynamic["Grey100"] = "var(--sd-grey-100)";
+  /**@deprecated Use Dark200 */
   ColorDynamic["Grey200"] = "var(--sd-grey-200)";
+  /**@deprecated Use Dark300 */
   ColorDynamic["Grey300"] = "var(--sd-grey-300)";
+  /**@deprecated Use Dark400 */
   ColorDynamic["Grey400"] = "var(--sd-grey-400)";
+  /**@deprecated Use Dark450 */
   ColorDynamic["Grey450"] = "var(--sd-grey-450)";
+  /**@deprecated Use Dark500 */
   ColorDynamic["Grey500"] = "var(--sd-grey-500)";
+  /** @deprecated */
   ColorDynamic["Dark200"] = "var(--sd-dark-200)";
+  /** @deprecated */
   ColorDynamic["Dark400"] = "var(--sd-dark-400)";
+  /** @deprecated */
   ColorDynamic["Dark450"] = "var(--sd-dark-450)";
+  /** @deprecated */
   ColorDynamic["Silver100"] = "var(--sd-silver-100)";
+  /** @deprecated */
   ColorDynamic["Silver300"] = "var(--sd-silver-300)";
+  // Legacy Extended Palette
+  /** @deprecated */
   ColorDynamic["Blue75"] = "var(--sd-blue-75)";
+  /** @deprecated */
   ColorDynamic["Blue100"] = "var(--sd-blue-100)";
+  /** @deprecated */
   ColorDynamic["Blue200"] = "var(--sd-blue-200)";
+  /** @deprecated */
   ColorDynamic["Blue400"] = "var(--sd-blue-400)";
+  /** @deprecated */
   ColorDynamic["Green75"] = "var(--sd-green-75)";
+  /** @deprecated */
   ColorDynamic["Green100"] = "var(--sd-green-100)";
+  /** @deprecated */
   ColorDynamic["Green200"] = "var(--sd-green-200)";
+  /** @deprecated */
   ColorDynamic["Green400"] = "var(--sd-green-400)";
+  /** @deprecated */
   ColorDynamic["Purple75"] = "var(--sd-purple-75)";
+  /** @deprecated */
   ColorDynamic["Purple100"] = "var(--sd-purple-100)";
+  /** @deprecated */
   ColorDynamic["Purple200"] = "var(--sd-purple-200)";
+  /** @deprecated */
   ColorDynamic["Purple400"] = "var(--sd-purple-400)";
+  /** @deprecated */
   ColorDynamic["Red75"] = "var(--sd-red-75)";
+  /** @deprecated */
   ColorDynamic["Red100"] = "var(--sd-red-100)";
+  /** @deprecated */
   ColorDynamic["Red200"] = "var(--sd-red-200)";
+  /** @deprecated */
   ColorDynamic["Red400"] = "var(--sd-red-400)";
+  /** @deprecated */
   ColorDynamic["Teal75"] = "var(--sd-teal-75)";
+  /** @deprecated */
   ColorDynamic["Teal100"] = "var(--sd-teal-100)";
+  /** @deprecated */
   ColorDynamic["Teal200"] = "var(--sd-teal-200)";
+  /** @deprecated */
   ColorDynamic["Teal400"] = "var(--sd-teal-400)";
+  /** @deprecated */
   ColorDynamic["Yellow75"] = "var(--sd-yellow-75)";
+  /** @deprecated */
   ColorDynamic["Yellow100"] = "var(--sd-yellow-100)";
+  /** @deprecated */
   ColorDynamic["Yellow200"] = "var(--sd-yellow-200)";
+  /** @deprecated */
   ColorDynamic["Yellow400"] = "var(--sd-yellow-400)";
+  //
+  // Neutral Colors
+  //
   ColorDynamic["Dark50"] = "var(--sd-dark-50)";
   ColorDynamic["Dark100"] = "var(--sd-dark-100)";
   ColorDynamic["Dark300"] = "var(--sd-dark-300)";
@@ -645,6 +798,9 @@ if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName =
   ColorDynamic["Silver400"] = "var(--sd-silver-400)";
   ColorDynamic["Silver500"] = "var(--sd-silver-500)";
   ColorDynamic["Silver400Alpha30"] = "var(--sd-silver-400-alpha-30)";
+  //
+  // Extended Palette
+  //
   ColorDynamic["Blue50"] = "var(--sd-blue-50)";
   ColorDynamic["Blue300"] = "var(--sd-blue-300)";
   ColorDynamic["Blue500"] = "var(--sd-blue-500)";
@@ -664,15 +820,16 @@ if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName =
   ColorDynamic["Yellow50"] = "var(--sd-yellow-50)";
   ColorDynamic["Yellow300"] = "var(--sd-yellow-300)";
   ColorDynamic["Yellow500"] = "var(--sd-yellow-500)";
-})(exports.ColorDynamic || (exports.ColorDynamic = {}));
+  return ColorDynamic;
+}({});
 function isColorProp(name) {
-  return typeof name == 'string' && Object.prototype.hasOwnProperty.call(exports.Color, name);
+  return typeof name == 'string' && Object.prototype.hasOwnProperty.call(Color, name);
 }
 function isColorDynamicProp(name) {
-  return typeof name == 'string' && Object.prototype.hasOwnProperty.call(exports.ColorDynamic, name);
+  return typeof name == 'string' && Object.prototype.hasOwnProperty.call(ColorDynamic, name);
 }
 function isColorPropDark(name) {
-  return typeof name == 'string' && Object.prototype.hasOwnProperty.call(exports.ColorDark, name);
+  return typeof name == 'string' && Object.prototype.hasOwnProperty.call(ColorDark, name);
 }
 
 function renderChildren(node) {
@@ -727,7 +884,7 @@ function VisibilityObserver(_ref2) {
     visibility
   });
   hooks.useValueObserver(visibility, () => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(visibility);
+    onChange === null || onChange === void 0 || onChange(visibility);
   });
   return renderChildren(children);
 }
@@ -743,7 +900,7 @@ var useStyles$2 = /*#__PURE__*/styles.makeStyles(theme => ({
       borderBottom: 'none',
       transition: theme.transitions.create(['border-color']),
       '&:not($appBarSticky)': {
-        borderTopColor: exports.ColorDynamic.Transparent
+        borderTopColor: ColorDynamic.Transparent
       }
     }
   },
@@ -830,7 +987,7 @@ var useStyles$4 = /*#__PURE__*/styles.makeStyles(theme => ({
       borderRight: 'none',
       transition: theme.transitions.create(['border-color']),
       '&:not($appBarSticky)': {
-        borderBottomColor: exports.ColorDynamic.Transparent
+        borderBottomColor: ColorDynamic.Transparent
       }
     }
   },
@@ -1015,19 +1172,19 @@ var useStyles$5 = /*#__PURE__*/styles.makeStyles(theme => {
       borderRadius: '50%',
       '&[disabled], &[aria-busy="true"]': {
         '& > $overlay': {
-          backgroundColor: exports.ColorDynamic.White50
+          backgroundColor: ColorDynamic.White50
         }
       },
       '&:not([disabled])[aria-busy="false"]': {
         '&:hover, &:focus': {
           '&$withIcon > $overlay': {
-            backgroundColor: exports.ColorDynamic.Dark50,
+            backgroundColor: ColorDynamic.Dark50,
             '& > svg': {
               opacity: 1
             }
           },
           '&:not($withIcon) > $overlay': {
-            backgroundColor: exports.ColorDynamic.Black20
+            backgroundColor: ColorDynamic.Black20
           }
         }
       }
@@ -1042,11 +1199,11 @@ var useStyles$5 = /*#__PURE__*/styles.makeStyles(theme => {
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: '50%',
-      backgroundColor: exports.ColorDynamic.Transparent,
+      backgroundColor: ColorDynamic.Transparent,
       transition: theme.transitions.create('background-color'),
       '& > svg': {
         opacity: 0,
-        color: exports.ColorDynamic.White,
+        color: ColorDynamic.White,
         transition: theme.transitions.create('opacity'),
         fontSize: theme.spacing(3),
         [sm]: {
@@ -1058,7 +1215,7 @@ var useStyles$5 = /*#__PURE__*/styles.makeStyles(theme => {
       top: 0,
       left: 0,
       position: 'absolute',
-      color: exports.ColorDynamic.Blue500,
+      color: ColorDynamic.Blue500,
       fontSize: theme.spacing(5),
       [sm]: {
         fontSize: theme.spacing(4)
@@ -1168,7 +1325,7 @@ var useStyles$6 = /*#__PURE__*/styles.makeStyles(theme => ({
     alignItems: 'center',
     flexDirection: 'column',
     justifyContent: 'center',
-    backgroundColor: exports.ColorDynamic.White,
+    backgroundColor: ColorDynamic.White,
     border: '1px dashed',
     borderRadius: theme.spacing(0.5),
     padding: theme.spacing(1.5),
@@ -1176,30 +1333,30 @@ var useStyles$6 = /*#__PURE__*/styles.makeStyles(theme => ({
     transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
   },
   disabled: {
-    color: exports.ColorDynamic.Dark100,
-    borderColor: exports.ColorDynamic.Silver500,
-    backgroundColor: exports.ColorDynamic.Silver400Alpha30,
+    color: ColorDynamic.Dark100,
+    borderColor: ColorDynamic.Silver500,
+    backgroundColor: ColorDynamic.Silver400Alpha30,
     '& $hint': {
-      color: exports.ColorDynamic.Dark100
+      color: ColorDynamic.Dark100
     }
   },
   error: {
-    color: exports.ColorDynamic.Red500,
-    borderColor: exports.ColorDynamic.Red500,
-    backgroundColor: exports.ColorDynamic.Red50,
+    color: ColorDynamic.Red500,
+    borderColor: ColorDynamic.Red500,
+    backgroundColor: ColorDynamic.Red50,
     '&:focus': {
-      backgroundColor: exports.ColorDynamic.Red300Aplha20
+      backgroundColor: ColorDynamic.Red300Aplha20
     }
   },
   primary: {
-    color: exports.ColorDynamic.Blue500,
-    borderColor: exports.ColorDynamic.Silver500,
+    color: ColorDynamic.Blue500,
+    borderColor: ColorDynamic.Silver500,
     '&:focus': {
-      backgroundColor: exports.ColorDynamic.Blue50
+      backgroundColor: ColorDynamic.Blue50
     },
     '&:hover, &:active': {
-      borderColor: exports.ColorDynamic.Blue300,
-      backgroundColor: exports.ColorDynamic.Blue50
+      borderColor: ColorDynamic.Blue300,
+      backgroundColor: ColorDynamic.Blue50
     }
   },
   sizeSmall: {
@@ -1300,7 +1457,7 @@ var FormControl = /*#__PURE__*/styled__default(core.FormControl).withConfig({
 var FormHelperText = /*#__PURE__*/styled__default(core.FormHelperText).withConfig({
   displayName: "CheckboxField__FormHelperText",
   componentId: "SD__sc-1wxu0g6-1"
-})(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], exports.ColorDynamic.Dark300, exports.ColorDynamic.Red500);
+})(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], ColorDynamic.Dark300, ColorDynamic.Red500);
 var CheckboxField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
       label,
@@ -1336,11 +1493,11 @@ var _excluded$a = ["FormGroupProps", "label", "FormLabelProps", "helperText", "F
 var FormLabel = /*#__PURE__*/styled__default(core.FormLabel).withConfig({
   displayName: "CheckboxGroudField__FormLabel",
   componentId: "SD__sc-1lihyfy-0"
-})(["margin-bottom:8px;color:", ";font-weight:600;"], exports.ColorDynamic.Dark300);
+})(["margin-bottom:8px;color:", ";font-weight:600;"], ColorDynamic.Dark300);
 var FormHelperText$1 = /*#__PURE__*/styled__default(core.FormHelperText).withConfig({
   displayName: "CheckboxGroudField__FormHelperText",
   componentId: "SD__sc-1lihyfy-1"
-})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], exports.ColorDynamic.Dark300, exports.ColorDynamic.Red500);
+})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], ColorDynamic.Dark300, ColorDynamic.Red500);
 var CheckboxGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
       FormGroupProps: formGroupProps,
@@ -1394,11 +1551,10 @@ function useResponsiveContext() {
 }
 
 function parseResponsiveProp(prop) {
-  var _tablet, _desktop;
   if (typeof prop != 'object') return [prop, prop, prop];
   var [mobile, tablet, desktop] = prop;
-  (_tablet = tablet) !== null && _tablet !== void 0 ? _tablet : tablet = mobile;
-  (_desktop = desktop) !== null && _desktop !== void 0 ? _desktop : desktop = tablet;
+  tablet !== null && tablet !== void 0 ? tablet : tablet = mobile;
+  desktop !== null && desktop !== void 0 ? desktop : desktop = tablet;
   return [mobile, tablet, desktop];
 }
 function useResponsiveProp(prop) {
@@ -1565,7 +1721,7 @@ var useStyles$7 = /*#__PURE__*/styles.makeStyles(theme => ({
     transition: theme.transitions.create('border'),
     '&$truncated': {
       cursor: 'pointer',
-      borderBottomColor: exports.ColorDynamic.Silver500
+      borderBottomColor: ColorDynamic.Silver500
     }
   },
   truncated: {},
@@ -1615,7 +1771,7 @@ var OverflowText = /*#__PURE__*/React.forwardRef((_ref, rootRef) => {
           noWrap: true,
           onClick: event => {
             setIsOpen(true);
-            _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+            _onClick === null || _onClick === void 0 || _onClick(event);
           },
           className: clsx.clsx(styles.root, {
             [styles.truncated]: !disableUnderline && visibility === 'invisible'
@@ -1666,7 +1822,7 @@ var useStyles$8 = /*#__PURE__*/styles.makeStyles(theme => ({
     display: 'inline-flex',
     marginRight: theme.spacing(1),
     '& > .MuiSvgIcon-root': {
-      color: exports.ColorDynamic.Dark100,
+      color: ColorDynamic.Dark100,
       fontSize: theme.spacing(3),
       [theme.breakpoints.up('sm')]: {
         fontSize: theme.spacing(2)
@@ -1726,7 +1882,7 @@ var DescriptionListItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       component: "span",
       color: shouldRenderFallback && label == null ? 'textSecondary' : 'textPrimary',
       TooltipProps: _objectSpread(_objectSpread({}, contentTypographyProps === null || contentTypographyProps === void 0 ? void 0 : contentTypographyProps.TooltipProps), {}, {
-        title: (_ref3 = (_contentTypographyPro = contentTypographyProps === null || contentTypographyProps === void 0 ? void 0 : (_contentTypographyPro2 = contentTypographyProps.TooltipProps) === null || _contentTypographyPro2 === void 0 ? void 0 : _contentTypographyPro2.title) !== null && _contentTypographyPro !== void 0 ? _contentTypographyPro : content) !== null && _ref3 !== void 0 ? _ref3 : undefined
+        title: (_ref3 = (_contentTypographyPro = contentTypographyProps === null || contentTypographyProps === void 0 || (_contentTypographyPro2 = contentTypographyProps.TooltipProps) === null || _contentTypographyPro2 === void 0 ? void 0 : _contentTypographyPro2.title) !== null && _contentTypographyPro !== void 0 ? _contentTypographyPro : content) !== null && _ref3 !== void 0 ? _ref3 : undefined
       }),
       children: [label != null && /*#__PURE__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({}, labelTypographyProps), {}, {
         id: labelID,
@@ -2042,7 +2198,7 @@ function NumberInputComponent(_ref) {
         event
       } = sourceInfo;
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, event), {}, {
+      onChange === null || onChange === void 0 || onChange(_objectSpread(_objectSpread({}, event), {}, {
         target: _objectSpread(_objectSpread({}, event === null || event === void 0 ? void 0 : event.target), {}, {
           value: disableValueParsing ? values.value : values.floatValue
         })
@@ -2072,7 +2228,7 @@ function TextInputComponent(_ref2) {
         event
       } = sourceInfo;
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, event), {}, {
+      onChange === null || onChange === void 0 || onChange(_objectSpread(_objectSpread({}, event), {}, {
         target: _objectSpread(_objectSpread({}, event === null || event === void 0 ? void 0 : event.target), {}, {
           value: values.value
         })
@@ -2125,12 +2281,12 @@ var PatternField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       var {
         event
       } = sourceInfo;
-      onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, event), {}, {
+      onChange === null || onChange === void 0 || onChange(_objectSpread(_objectSpread({}, event), {}, {
         target: _objectSpread(_objectSpread({}, event === null || event === void 0 ? void 0 : event.target), {}, {
           value: values.value
         })
       }));
-      _onValueChange === null || _onValueChange === void 0 ? void 0 : _onValueChange(values, sourceInfo);
+      _onValueChange === null || _onValueChange === void 0 || _onValueChange(values, sourceInfo);
     }
   }));
 });
@@ -2145,7 +2301,7 @@ var FormControl$1 = /*#__PURE__*/styled__default(core.FormControl).withConfig({
 var FormHelperText$2 = /*#__PURE__*/styled__default(core.FormHelperText).withConfig({
   displayName: "RadioField__FormHelperText",
   componentId: "SD__sc-6ey4qt-1"
-})(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], exports.ColorDynamic.Dark300, exports.ColorDynamic.Red500);
+})(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], ColorDynamic.Dark300, ColorDynamic.Red500);
 var RadioField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
       label,
@@ -2197,13 +2353,23 @@ var Content = /*#__PURE__*/styled__default.div.withConfig({
   var {
     active
   } = _ref;
-  return active ? exports.ColorDynamic.Blue300 : exports.ColorDynamic.Silver500;
+  return active ? ColorDynamic.Blue300 : ColorDynamic.Silver500;
 });
 var Caption = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "RadioFieldCard__Caption",
   componentId: "SD__sc-5etge2-4"
 })(["padding-left:30px;"]);
-var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+var IconWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "RadioFieldCard__IconWrapper",
+  componentId: "SD__sc-5etge2-5"
+})(["display:flex;", "{padding-left:30px;}"], _ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return theme.breakpoints.down('xs');
+});
+var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  var _ref4;
   var {
       name,
       value,
@@ -2213,17 +2379,20 @@ var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       icon,
       checked,
       onChange
-    } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded$m);
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded$m);
+  var muiFormControl = core.useFormControl();
+  var disabledState = (_ref4 = disabled !== null && disabled !== void 0 ? disabled : muiFormControl === null || muiFormControl === void 0 ? void 0 : muiFormControl.disabled) !== null && _ref4 !== void 0 ? _ref4 : false;
   return /*#__PURE__*/jsxRuntime.jsx(Card, {
-    disabled: disabled,
+    disabled: disabledState,
     children: /*#__PURE__*/jsxRuntime.jsx(ClickableCard, _objectSpread(_objectSpread({
       name: name,
-      disabled: disabled
+      disabled: disabledState
     }, props), {}, {
       children: /*#__PURE__*/jsxRuntime.jsx(Content, {
         active: checked,
         children: /*#__PURE__*/jsxRuntime.jsxs(Columns, {
+          collapseBelow: "tablet",
           space: "small",
           children: [/*#__PURE__*/jsxRuntime.jsxs(Column, {
             children: [/*#__PURE__*/jsxRuntime.jsx(FormControlLabel, {
@@ -2246,7 +2415,9 @@ var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
             })]
           }), /*#__PURE__*/jsxRuntime.jsx(Column, {
             width: "content",
-            children: icon
+            children: /*#__PURE__*/jsxRuntime.jsx(IconWrapper, {
+              children: icon
+            })
           })]
         })
       })
@@ -2259,11 +2430,11 @@ var _excluded$n = ["name", "value", "onChange", "RadioGroupProps", "label", "For
 var FormLabel$1 = /*#__PURE__*/styled__default(core.FormLabel).withConfig({
   displayName: "RadioGroupField__FormLabel",
   componentId: "SD__sc-1udxviq-0"
-})(["margin-bottom:8px;color:", ";font-weight:600;"], exports.ColorDynamic.Dark300);
+})(["margin-bottom:8px;color:", ";font-weight:600;"], ColorDynamic.Dark300);
 var FormHelperText$3 = /*#__PURE__*/styled__default(core.FormHelperText).withConfig({
   displayName: "RadioGroupField__FormHelperText",
   componentId: "SD__sc-1udxviq-1"
-})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], exports.ColorDynamic.Dark300, exports.ColorDynamic.Red500);
+})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], ColorDynamic.Dark300, ColorDynamic.Red500);
 var RadioGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
       name,
@@ -2329,8 +2500,8 @@ var PaddedContent = /*#__PURE__*/styled__default.span.withConfig({
 })(["padding:2px 0 0;"]);
 var useStyles$b = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
-    color: exports.ColorDynamic.White,
-    backgroundColor: exports.ColorDynamic.Dark500,
+    color: ColorDynamic.White,
+    backgroundColor: ColorDynamic.Dark500,
     alignItems: 'flex-start',
     padding: '10px 16px',
     [theme.breakpoints.up('md')]: {
@@ -2353,17 +2524,17 @@ var useStyles$b = /*#__PURE__*/styles.makeStyles(theme => ({
     fontSize: theme.spacing(3)
   },
   closeButton: {
-    color: exports.ColorDynamic.White40,
+    color: ColorDynamic.White40,
     '&:hover, &:focus': {
-      backgroundColor: exports.ColorDynamic.White08,
-      color: exports.ColorDynamic.White40
+      backgroundColor: ColorDynamic.White08,
+      color: ColorDynamic.White40
     }
   },
   variantError: {
-    color: exports.ColorDynamic.Red500,
-    background: exports.ColorDynamic.Red50,
+    color: ColorDynamic.Red500,
+    background: ColorDynamic.Red50,
     '& $closeButton': {
-      color: exports.ColorDynamic.Red500
+      color: ColorDynamic.Red500
     }
   },
   variantSuccess: {}
@@ -2449,7 +2620,7 @@ var Snackbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     props = _objectWithoutProperties(_ref, _excluded$p);
   function handleClose(reason) {
     if (reason !== 'clickaway') {
-      onClose === null || onClose === void 0 ? void 0 : onClose(reason === 'timeout' ? 'timeout' : 'explicit');
+      onClose === null || onClose === void 0 || onClose(reason === 'timeout' ? 'timeout' : 'explicit');
     }
   }
   return /*#__PURE__*/jsxRuntime.jsx(core.Portal, {
@@ -2550,7 +2721,7 @@ function SnackbarStackProvider(_ref2) {
         children: message,
         onClose: reason => {
           removeSnackbar();
-          _onClose === null || _onClose === void 0 ? void 0 : _onClose(reason);
+          _onClose === null || _onClose === void 0 || _onClose(reason);
         }
       }));
     });
@@ -2620,65 +2791,65 @@ var useStyles$c = /*#__PURE__*/styles.makeStyles(theme => ({
   },
   variantSubtle: {
     '&$colorGrey': {
-      color: exports.ColorDynamic.Dark300,
-      backgroundColor: exports.ColorDynamic.Silver200
+      color: ColorDynamic.Dark300,
+      backgroundColor: ColorDynamic.Silver200
     },
     '&$colorDark': {
-      color: exports.ColorDynamic.Dark500,
-      backgroundColor: exports.ColorDynamic.Silver400
+      color: ColorDynamic.Dark500,
+      backgroundColor: ColorDynamic.Silver400
     },
     '&$colorBlue': {
-      color: exports.ColorDynamic.Blue500,
-      backgroundColor: exports.ColorDynamic.Blue50
+      color: ColorDynamic.Blue500,
+      backgroundColor: ColorDynamic.Blue50
     },
     '&$colorGreen': {
-      color: exports.ColorDynamic.Green500,
-      backgroundColor: exports.ColorDynamic.Green50
+      color: ColorDynamic.Green500,
+      backgroundColor: ColorDynamic.Green50
     },
     '&$colorPurple': {
-      color: exports.ColorDynamic.Purple500,
-      backgroundColor: exports.ColorDynamic.Purple50
+      color: ColorDynamic.Purple500,
+      backgroundColor: ColorDynamic.Purple50
     },
     '&$colorRed': {
-      color: exports.ColorDynamic.Red500,
-      backgroundColor: exports.ColorDynamic.Red50
+      color: ColorDynamic.Red500,
+      backgroundColor: ColorDynamic.Red50
     },
     '&$colorTeal': {
-      color: exports.ColorDynamic.Teal500,
-      backgroundColor: exports.ColorDynamic.Teal50
+      color: ColorDynamic.Teal500,
+      backgroundColor: ColorDynamic.Teal50
     },
     '&$colorYellow': {
-      color: exports.ColorDynamic.Yellow500,
-      backgroundColor: exports.ColorDynamic.Yellow50
+      color: ColorDynamic.Yellow500,
+      backgroundColor: ColorDynamic.Yellow50
     }
   },
   variantBold: {
-    color: exports.Color.White,
+    color: Color.White,
     '&$colorGrey': {
-      backgroundColor: exports.ColorDynamic.Dark300,
-      color: exports.ColorDynamic.White
+      backgroundColor: ColorDynamic.Dark300,
+      color: ColorDynamic.White
     },
     '&$colorDark': {
-      backgroundColor: exports.ColorDynamic.Dark500,
-      color: exports.ColorDynamic.White
+      backgroundColor: ColorDynamic.Dark500,
+      color: ColorDynamic.White
     },
     '&$colorBlue': {
-      backgroundColor: exports.ColorDynamic.Blue300
+      backgroundColor: ColorDynamic.Blue300
     },
     '&$colorGreen': {
-      backgroundColor: exports.ColorDynamic.Green300
+      backgroundColor: ColorDynamic.Green300
     },
     '&$colorPurple': {
-      backgroundColor: exports.ColorDynamic.Purple300
+      backgroundColor: ColorDynamic.Purple300
     },
     '&$colorRed': {
-      backgroundColor: exports.ColorDynamic.Red300
+      backgroundColor: ColorDynamic.Red300
     },
     '&$colorTeal': {
-      backgroundColor: exports.ColorDynamic.Teal300
+      backgroundColor: ColorDynamic.Teal300
     },
     '&$colorYellow': {
-      backgroundColor: exports.ColorDynamic.Yellow300
+      backgroundColor: ColorDynamic.Yellow300
     }
   },
   colorGrey: {},
@@ -2728,7 +2899,7 @@ function overrideAppBar(theme) {
 
 function overrideAutocomplete(theme) {
   var sm = theme.breakpoints.up('sm');
-  var color = theme.palette.type === 'dark' ? core.alpha(exports.Color.White, 0.08) : exports.ColorDynamic.Silver200;
+  var color = theme.palette.type === 'dark' ? core.alpha(Color.White, 0.08) : ColorDynamic.Silver200;
 
   // Remove `Object.assign` after official release of `Autocomplete`.
   Object.assign(theme.props, {
@@ -2809,22 +2980,22 @@ function overrideAvatar(theme) {
       }
     }),
     colorDefault: {
-      color: exports.ColorDynamic.Dark300,
-      backgroundColor: exports.ColorDynamic.Silver400
+      color: ColorDynamic.Dark300,
+      backgroundColor: ColorDynamic.Silver400
     }
   };
 }
 
 function outlineShadow() {
   var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : exports.ColorDynamic.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: exports.ColorDynamic.Transparent,
+    backgroundColor: ColorDynamic.Transparent,
     '&:hover': {
       backgroundColor: background
     },
@@ -2838,7 +3009,7 @@ function textVariant(text, outline, background, progress) {
     '&$disabled': {
       color: outline,
       boxShadow: outlineShadow(),
-      backgroundColor: exports.ColorDynamic.Transparent
+      backgroundColor: ColorDynamic.Transparent
     },
     '&$disabled[aria-busy="true"]': {
       color: progress
@@ -2846,7 +3017,7 @@ function textVariant(text, outline, background, progress) {
   };
 }
 function outlinedBorder(borderColor) {
-  var outlineColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : exports.ColorDynamic.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) {
@@ -2976,11 +3147,11 @@ function overrideButton(theme) {
     },
     text: {
       padding: undefined,
-      '&[data-color="error"]': textVariant(exports.ColorDynamic.Red300, exports.ColorDynamic.Red100, exports.ColorDynamic.Red50, exports.ColorDynamic.Red200),
-      '&[data-color="success"]': textVariant(exports.ColorDynamic.Green300, exports.ColorDynamic.Green100, exports.ColorDynamic.Green50, exports.ColorDynamic.Green200),
-      '&[data-color="white"]': textVariant(exports.ColorDynamic.White, exports.ColorDynamic.White50, exports.ColorDynamic.White10, exports.ColorDynamic.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(exports.ColorDynamic.Blue300, exports.ColorDynamic.Blue100, exports.ColorDynamic.Blue50, exports.ColorDynamic.Blue200),
+    textPrimary: textVariant(ColorDynamic.Blue300, ColorDynamic.Blue100, ColorDynamic.Blue50, ColorDynamic.Blue200),
     textSizeSmall: {
       padding: undefined,
       fontSize: undefined
@@ -2995,11 +3166,11 @@ function overrideButton(theme) {
       '&$disabled': {
         border: undefined
       },
-      '&[data-color="error"]': outlinedVariant(exports.ColorDynamic.Red300, exports.ColorDynamic.Red300, exports.ColorDynamic.Red100, exports.ColorDynamic.Red100, exports.ColorDynamic.Red300, exports.ColorDynamic.Red300, exports.ColorDynamic.Red100, exports.ColorDynamic.Red50, exports.ColorDynamic.Red300, exports.ColorDynamic.White),
-      '&[data-color="success"]': outlinedVariant(exports.ColorDynamic.Green300, exports.ColorDynamic.Green300, exports.ColorDynamic.Green100, exports.ColorDynamic.Green100, exports.ColorDynamic.Green300, exports.ColorDynamic.Green300, exports.ColorDynamic.Green100, exports.ColorDynamic.Green50, exports.ColorDynamic.Green300, exports.ColorDynamic.White),
-      '&[data-color="white"]': outlinedVariant(exports.ColorDynamic.White, exports.ColorDynamic.White50, exports.ColorDynamic.White50, exports.ColorDynamic.White40, exports.ColorDynamic.White, exports.ColorDynamic.White50, exports.ColorDynamic.White40, exports.ColorDynamic.White10, exports.ColorDynamic.White50, exports.ColorDynamic.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(exports.ColorDynamic.Dark500, exports.ColorDynamic.Silver500, exports.ColorDynamic.Silver500, exports.ColorDynamic.Silver400, exports.ColorDynamic.Blue300, exports.ColorDynamic.Blue300, exports.ColorDynamic.Blue100, exports.ColorDynamic.Blue50, exports.ColorDynamic.Dark200, exports.ColorDynamic.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
@@ -3033,11 +3204,11 @@ function overrideButton(theme) {
         boxShadow: undefined,
         backgroundColor: undefined
       },
-      '&[data-color="error"]': containedVariant(exports.ColorDynamic.White, exports.ColorDynamic.Red300, exports.ColorDynamic.Red100, exports.ColorDynamic.Red500, exports.ColorDynamic.White, exports.ColorDynamic.Red100),
-      '&[data-color="success"]': containedVariant(exports.ColorDynamic.White, exports.ColorDynamic.Green300, exports.ColorDynamic.Green100, exports.ColorDynamic.Green500, exports.ColorDynamic.White, exports.ColorDynamic.Green100),
-      '&[data-color="white"]': containedVariant(exports.ColorDynamic.White, exports.ColorDynamic.White20, exports.ColorDynamic.White40, exports.ColorDynamic.White40, exports.ColorDynamic.White50, exports.ColorDynamic.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(exports.ColorDynamic.White, exports.ColorDynamic.Blue300, exports.ColorDynamic.Blue100, exports.ColorDynamic.Blue500, exports.ColorDynamic.White, exports.ColorDynamic.Blue100),
+    containedPrimary: containedVariant(ColorDynamic.White, ColorDynamic.Blue300, ColorDynamic.Blue100, ColorDynamic.Blue500, ColorDynamic.White, ColorDynamic.Blue100),
     containedSizeSmall: {
       padding: undefined,
       fontSize: undefined
@@ -3071,7 +3242,7 @@ function overrideCheckbox(theme) {
         height: "17",
         x: "3.5",
         y: "3.5",
-        fill: exports.ColorDynamic.White,
+        fill: ColorDynamic.White,
         stroke: "currentColor",
         rx: "1.5"
       })
@@ -3085,7 +3256,7 @@ function overrideCheckbox(theme) {
         fill: "currentColor",
         rx: "2"
       }), /*#__PURE__*/jsxRuntime.jsx("path", {
-        fill: exports.Color.White,
+        fill: Color.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"
       })]
     }),
@@ -3098,14 +3269,14 @@ function overrideCheckbox(theme) {
         fill: "currentIcon",
         rx: "2"
       }), /*#__PURE__*/jsxRuntime.jsx("path", {
-        fill: exports.ColorDynamic.White,
+        fill: ColorDynamic.White,
         d: "M7 11h10v2H7v-2z"
       })]
     })
   };
   theme.overrides.MuiCheckbox = {
     root: {
-      color: exports.ColorDynamic.Dark100,
+      color: ColorDynamic.Dark100,
       width: theme.spacing(3),
       height: theme.spacing(3),
       marginRight: theme.spacing(1),
@@ -3114,7 +3285,7 @@ function overrideCheckbox(theme) {
       marginBottom: theme.spacing(0.5),
       padding: 0,
       '&:hover': {
-        backgroundColor: exports.ColorDynamic.Blue10
+        backgroundColor: ColorDynamic.Blue10
       },
       '&.MuiButtonBase-root': {
         borderRadius: theme.spacing(0.5)
@@ -3122,11 +3293,11 @@ function overrideCheckbox(theme) {
     },
     colorPrimary: {
       '&$checked$disabled': {
-        color: exports.ColorDynamic.Silver500
+        color: ColorDynamic.Silver500
       },
       '&:hover:not($checked)': {
-        color: exports.ColorDynamic.Dark100,
-        backgroundColor: exports.ColorDynamic.Blue10
+        color: ColorDynamic.Dark100,
+        backgroundColor: ColorDynamic.Blue10
       }
     }
   };
@@ -3152,10 +3323,10 @@ function overrideChip(theme) {
       color: undefined,
       height: undefined,
       borderRadius: 4,
-      backgroundColor: exports.ColorDynamic.Silver200,
+      backgroundColor: ColorDynamic.Silver200,
       '&$disabled': {
         opacity: undefined,
-        color: exports.ColorDynamic.Dark100
+        color: ColorDynamic.Dark100
       }
     }),
     sizeSmall: {
@@ -3177,26 +3348,26 @@ function overrideChip(theme) {
         boxShadow: undefined
       },
       '&:focus': {
-        boxShadow: "0 0 0 2px ".concat(exports.ColorDynamic.Dark30)
+        boxShadow: "0 0 0 2px ".concat(ColorDynamic.Dark30)
       },
       '&:active, &:hover': {
-        backgroundColor: exports.ColorDynamic.Silver400
+        backgroundColor: ColorDynamic.Silver400
       }
     },
     deletable: {
       '&:focus': {
         backgroundColor: undefined,
-        boxShadow: "0 0 0 2px ".concat(exports.ColorDynamic.Silver400)
+        boxShadow: "0 0 0 2px ".concat(ColorDynamic.Silver400)
       }
     },
     colorPrimary: {
       '& $deleteIcon svg': {
-        color: exports.Color.White
+        color: Color.White
       }
     },
     colorSecondary: {
       '& $deleteIcon svg': {
-        color: exports.Color.White
+        color: Color.White
       }
     },
     deleteIcon: {
@@ -3206,12 +3377,12 @@ function overrideChip(theme) {
       transition: theme.transitions.create('background-color'),
       '&:active, &:hover, &:focus': {
         '& > svg': {
-          backgroundColor: exports.ColorDynamic.Silver400
+          backgroundColor: ColorDynamic.Silver400
         }
       },
       '& > svg': {
         borderRadius: '50%',
-        color: exports.ColorDynamic.Dark100,
+        color: ColorDynamic.Dark100,
         fontSize: '1em'
       }
     },
@@ -3226,7 +3397,7 @@ function overrideChip(theme) {
       }
     },
     icon: {
-      color: exports.ColorDynamic.Dark100,
+      color: ColorDynamic.Dark100,
       fontSize: '1em',
       marginRight: undefined
     },
@@ -3299,38 +3470,38 @@ function overrideDrawer(theme) {
 function overrideIconButton(theme) {
   theme.overrides.MuiIconButton = {
     root: {
-      color: exports.ColorDynamic.Dark100,
-      backgroundColor: exports.ColorDynamic.Transparent,
+      color: ColorDynamic.Dark100,
+      backgroundColor: ColorDynamic.Transparent,
       transition: theme.transitions.create(['color', 'background-color'], {
         duration: theme.transitions.duration.short
       }),
       '&:hover': {
-        backgroundColor: exports.ColorDynamic.Transparent
+        backgroundColor: ColorDynamic.Transparent
       },
       '&:active': {
-        color: exports.ColorDynamic.Dark500
+        color: ColorDynamic.Dark500
       },
       '&:hover ': {
-        color: exports.ColorDynamic.Dark300
+        color: ColorDynamic.Dark300
       },
       '&:focus': {
-        backgroundColor: exports.ColorDynamic.Silver400
+        backgroundColor: ColorDynamic.Silver400
       },
       '&$disabled': {
-        color: exports.ColorDynamic.Silver500
+        color: ColorDynamic.Silver500
       }
     },
     colorPrimary: {
       '&:active': {
-        color: exports.ColorDynamic.Blue500
+        color: ColorDynamic.Blue500
       },
       '&:hover ': {
-        color: exports.ColorDynamic.Blue300
+        color: ColorDynamic.Blue300
       },
       '&:focus': {
-        backgroundColor: exports.ColorDynamic.Blue50
+        backgroundColor: ColorDynamic.Blue50
       },
-      color: exports.ColorDynamic.Blue500
+      color: ColorDynamic.Blue500
     },
     edgeEnd: {
       marginRight: theme.spacing(-1)
@@ -3354,21 +3525,21 @@ function overrideLink(theme) {
       backgroundSize: '100% 1px',
       backgroundRepeat: 'repeat-x',
       backgroundPosition: '0 100%',
-      backgroundColor: exports.ColorDynamic.Transparent,
+      backgroundColor: ColorDynamic.Transparent,
       '&:focus': {
         outline: 'none'
       },
       '&:disabled': {
-        color: exports.ColorDynamic.Dark100,
-        backgroundImage: line(exports.ColorDynamic.Silver500),
+        color: ColorDynamic.Dark100,
+        backgroundImage: line(ColorDynamic.Silver500),
         '&:focus, &:hover, &:active': {
-          color: exports.ColorDynamic.Dark100,
-          backgroundImage: line(exports.ColorDynamic.Silver500)
+          color: ColorDynamic.Dark100,
+          backgroundImage: line(ColorDynamic.Silver500)
         }
       },
       '&.MuiLink-underlineAlways': {
         textDecoration: 'none',
-        backgroundImage: line(exports.ColorDynamic.Silver500),
+        backgroundImage: line(ColorDynamic.Silver500),
         '&:hover, &:active': {
           backgroundImage: line('currentColor')
         }
@@ -3395,8 +3566,8 @@ function overrideLink(theme) {
       },
       '&.MuiTypography-colorTextPrimary, &.MuiTypography-colorTextSecondary': {
         '&:focus, &:hover, &:active': {
-          color: exports.ColorDynamic.Blue500,
-          backgroundImage: line(exports.ColorDynamic.Blue500)
+          color: ColorDynamic.Blue500,
+          backgroundImage: line(ColorDynamic.Blue500)
         }
       }
     },
@@ -3417,14 +3588,14 @@ function overrideLink(theme) {
 }
 
 function overrideList(theme) {
-  var color = theme.palette.type === 'dark' ? core.alpha(exports.Color.White, 0.08) : exports.ColorDynamic.Silver200;
+  var color = theme.palette.type === 'dark' ? core.alpha(Color.White, 0.08) : ColorDynamic.Silver200;
   theme.overrides.MuiListItem = {
     root: {
       '&$selected, &$selected:hover': {
-        backgroundColor: exports.ColorDynamic.Blue50
+        backgroundColor: ColorDynamic.Blue50
       },
       '& .MuiTouchRipple-root': {
-        color: exports.ColorDynamic.Blue100
+        color: ColorDynamic.Blue100
       }
     },
     button: {
@@ -3436,7 +3607,7 @@ function overrideList(theme) {
 }
 
 function overrideMenu(theme) {
-  var color = theme.palette.type === 'dark' ? core.alpha(exports.Color.White, 0.08) : exports.ColorDynamic.Silver200;
+  var color = theme.palette.type === 'dark' ? core.alpha(Color.White, 0.08) : ColorDynamic.Silver200;
   theme.props.MuiMenu = {
     getContentAnchorEl: null,
     anchorOrigin: {
@@ -3450,7 +3621,7 @@ function overrideMenu(theme) {
   };
   theme.overrides.MuiMenu = {
     paper: {
-      border: "1px solid ".concat(exports.ColorDynamic.Silver400)
+      border: "1px solid ".concat(ColorDynamic.Silver400)
     }
   };
   theme.overrides.MuiMenuItem = {
@@ -3467,10 +3638,10 @@ function overrideMenu(theme) {
 function overridePagination(theme) {
   var props = {};
   var mode = theme.palette.type;
-  var color = mode === 'dark' ? core.alpha(exports.Color.White, 0.08) : exports.ColorDynamic.Silver200;
+  var color = mode === 'dark' ? core.alpha(Color.White, 0.08) : ColorDynamic.Silver200;
   var overrides = {
     root: {
-      color: exports.ColorDynamic.Dark500
+      color: ColorDynamic.Dark500
     },
     page: {
       '&:hover': {
@@ -3478,22 +3649,22 @@ function overridePagination(theme) {
       },
       '&$focusVisible': {
         borderRadius: 4,
-        backgroundColor: exports.ColorDynamic.White,
-        border: "1px solid ".concat(exports.ColorDynamic.Blue30)
+        backgroundColor: ColorDynamic.White,
+        border: "1px solid ".concat(ColorDynamic.Blue30)
       },
       '&$selected': {
-        backgroundColor: exports.ColorDynamic.Silver400,
+        backgroundColor: ColorDynamic.Silver400,
         '&:hover, &$focusVisible': {
-          backgroundColor: exports.ColorDynamic.Silver500
+          backgroundColor: ColorDynamic.Silver500
         },
         '&$disabled': {
-          color: exports.ColorDynamic.Dark100,
-          backgroundColor: exports.ColorDynamic.Silver400
+          color: ColorDynamic.Dark100,
+          backgroundColor: ColorDynamic.Silver400
         }
       },
       '&$disabled': {
         opacity: undefined,
-        color: exports.ColorDynamic.Dark100
+        color: ColorDynamic.Dark100
       }
     }
   };
@@ -3513,7 +3684,7 @@ function overridePaper(theme) {
   };
   theme.overrides.MuiPaper = {
     elevation0: {
-      border: "1px solid ".concat(exports.ColorDynamic.Silver400)
+      border: "1px solid ".concat(ColorDynamic.Silver400)
     }
   };
 }
@@ -3534,7 +3705,7 @@ function overrideRadio(theme) {
         cx: "12",
         cy: "12",
         r: "9",
-        fill: exports.ColorDynamic.White,
+        fill: ColorDynamic.White,
         stroke: "currentColor"
       })
     }),
@@ -3549,13 +3720,13 @@ function overrideRadio(theme) {
         cx: "12",
         cy: "12",
         r: "4",
-        fill: exports.Color.White
+        fill: Color.White
       })]
     })
   };
   theme.overrides.MuiRadio = {
     root: {
-      color: exports.ColorDynamic.Dark100,
+      color: ColorDynamic.Dark100,
       width: theme.spacing(3),
       height: theme.spacing(3),
       marginRight: theme.spacing(1),
@@ -3566,10 +3737,10 @@ function overrideRadio(theme) {
     },
     colorPrimary: {
       '&$checked$disabled': {
-        color: exports.ColorDynamic.Silver500
+        color: ColorDynamic.Silver500
       },
       '&:hover:not($checked)': {
-        color: exports.ColorDynamic.Dark100
+        color: ColorDynamic.Dark100
       }
     }
   };
@@ -3634,10 +3805,10 @@ function overrideSvgIcon(theme) {
       fontSize: 'var(--mui-svg-icon-size, 32px)'
     },
     colorAction: {
-      color: exports.ColorDynamic.Dark100
+      color: ColorDynamic.Dark100
     },
     colorPrimary: {
-      color: exports.ColorDynamic.Blue500
+      color: ColorDynamic.Blue500
     }
   };
 }
@@ -3662,7 +3833,7 @@ function overrideSwitch(theme) {
     },
     track: {
       opacity: undefined,
-      boxShadow: "0 0 0 0 ".concat(exports.ColorDynamic.Transparent),
+      boxShadow: "0 0 0 0 ".concat(ColorDynamic.Transparent),
       transition: theme.transitions.create(['box-shadow', 'background-color'], {
         duration: theme.transitions.duration.shortest
       }),
@@ -3672,7 +3843,7 @@ function overrideSwitch(theme) {
       }
     },
     thumb: {
-      color: exports.Color.White,
+      color: Color.White,
       boxShadow: undefined,
       width: theme.spacing(3),
       height: theme.spacing(3),
@@ -3706,24 +3877,24 @@ function overrideSwitch(theme) {
         '&:hover': {
           backgroundColor: undefined,
           '& + $track': {
-            backgroundColor: exports.ColorDynamic.Blue500
+            backgroundColor: ColorDynamic.Blue500
           }
         }
       },
       '& + $track': {
-        backgroundColor: exports.ColorDynamic.Silver500
+        backgroundColor: ColorDynamic.Silver500
       },
       '&$disabled + $track': {
-        backgroundColor: exports.ColorDynamic.Dark30
+        backgroundColor: ColorDynamic.Dark30
       },
       '&$checked$disabled + $track': {
-        backgroundColor: exports.ColorDynamic.Blue30
+        backgroundColor: ColorDynamic.Blue30
       },
       '&:hover + $track': {
-        backgroundColor: exports.ColorDynamic.Dark100
+        backgroundColor: ColorDynamic.Dark100
       },
       '&.Mui-focusVisible + $track': {
-        boxShadow: "0 0 0 3px ".concat(exports.ColorDynamic.Blue30)
+        boxShadow: "0 0 0 3px ".concat(ColorDynamic.Blue30)
       }
     }
   };
@@ -3741,14 +3912,14 @@ function overrideTabs(theme) {
     },
     scrollButtons: {
       opacity: 1,
-      color: exports.ColorDynamic.Dark100,
+      color: ColorDynamic.Dark100,
       width: theme.spacing(4),
       transition: theme.transitions.create('opacity', {
         duration: theme.transitions.duration.short
       })
     },
     indicator: {
-      backgroundColor: exports.ColorDynamic.Blue500
+      backgroundColor: ColorDynamic.Blue500
     }
   };
   theme.overrides.MuiTab = {
@@ -3764,12 +3935,12 @@ function overrideTabs(theme) {
       }
     }),
     textColorPrimary: {
-      color: exports.ColorDynamic.Dark500,
+      color: ColorDynamic.Dark500,
       '&:hover, &:focus': {
-        color: exports.ColorDynamic.Blue500
+        color: ColorDynamic.Blue500
       },
       '&$selected': {
-        color: exports.ColorDynamic.Blue500
+        color: ColorDynamic.Blue500
       }
     }
   };
@@ -3793,7 +3964,7 @@ function overrideTextField(theme) {
   };
   theme.overrides.MuiFormLabel = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      color: exports.ColorDynamic.Dark500,
+      color: ColorDynamic.Dark500,
       '&.MuiFormLabel-root': {
         fontSize: theme.spacing(2),
         [sm]: {
@@ -3814,36 +3985,36 @@ function overrideTextField(theme) {
   theme.overrides.MuiInputBase = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       '&$disabled': {
-        backgroundColor: exports.ColorDynamic.Silver400Alpha30
+        backgroundColor: ColorDynamic.Silver400Alpha30
       },
       '&$error': {
-        borderColor: exports.ColorDynamic.Red500
+        borderColor: ColorDynamic.Red500
       },
       '&.MuiOutlinedInput-root': {
         '& fieldset': {
-          borderColor: exports.ColorDynamic.Silver500
+          borderColor: ColorDynamic.Silver500
         },
         '&:hover fieldset': {
-          borderColor: exports.ColorDynamic.Dark100
+          borderColor: ColorDynamic.Dark100
         },
         '&.Mui-focused fieldset': {
-          borderColor: exports.ColorDynamic.Blue500
+          borderColor: ColorDynamic.Blue500
         },
         '&.Mui-error fieldset': {
-          borderColor: exports.ColorDynamic.Red500
+          borderColor: ColorDynamic.Red500
         },
         '&.Mui-error:hover fieldset': {
-          borderColor: exports.ColorDynamic.Red500
+          borderColor: ColorDynamic.Red500
         },
         '&.Mui-disabled fieldset': {
-          borderColor: exports.ColorDynamic.Silver400
+          borderColor: ColorDynamic.Silver400
         }
       }
     }),
     input: {
       textOverflow: 'ellipsis',
       '&::placeholder': {
-        color: exports.ColorDynamic.Dark100,
+        color: ColorDynamic.Dark100,
         opacity: 1
       },
       '&.MuiInputBase-input': {
@@ -3914,7 +4085,7 @@ function overrideTextField(theme) {
     },
     notchedOutline: {
       top: 0,
-      borderColor: exports.ColorDynamic.Silver500,
+      borderColor: ColorDynamic.Silver500,
       '& legend': {
         display: 'none'
       }
@@ -3927,7 +4098,7 @@ function overrideTextField(theme) {
     icon: {
       top: 'calc(50% - 0.5em)',
       '$disabled &': {
-        color: exports.ColorDynamic.Dark100
+        color: ColorDynamic.Dark100
       },
       fontSize: theme.spacing(3),
       [sm]: {
@@ -3985,10 +4156,10 @@ function overrideTextField(theme) {
   };
   theme.overrides.MuiFormHelperText = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      color: exports.ColorDynamic.Dark300,
+      color: ColorDynamic.Dark300,
       marginTop: theme.spacing(0.5),
       '&.Mui-error': {
-        color: exports.ColorDynamic.Red500
+        color: ColorDynamic.Red500
       },
       '&.MuiFormHelperText-root': {
         fontSize: theme.spacing(2),
@@ -4022,8 +4193,8 @@ function overrideTooltip(theme) {
   theme.overrides.MuiTooltip = {
     tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       padding: theme.spacing(1, 1.5),
-      backgroundColor: exports.ColorDynamic.Dark500,
-      '--sd-dark-300': exports.ColorDynamic.Silver500 //tooltip secondary color(Dark300) is invisible in dark mode
+      backgroundColor: ColorDynamic.Dark500,
+      '--sd-dark-300': ColorDynamic.Silver500 //tooltip secondary color(Dark300) is invisible in dark mode
     }),
     popperArrow: {
       '&[x-placement*="top"] $arrow': {
@@ -4048,7 +4219,7 @@ function overrideTooltip(theme) {
       }
     },
     arrow: {
-      color: exports.ColorDynamic.Silver500,
+      color: ColorDynamic.Silver500,
       fontSize: theme.spacing(1)
     }
   };
@@ -4164,10 +4335,10 @@ function overrideTypography(theme) {
   };
   theme.overrides.MuiTypography = {
     colorError: {
-      color: exports.ColorDynamic.Red500
+      color: ColorDynamic.Red500
     },
     colorPrimary: {
-      color: exports.ColorDynamic.Blue500
+      color: ColorDynamic.Blue500
     }
   };
 }
@@ -4176,13 +4347,13 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_ref => {
   var {
     theme
   } = _ref;
-  var color = theme.palette.type === 'dark' ? exports.ColorDark : exports.Color;
+  var color = theme.palette.type === 'dark' ? ColorDark : Color;
   return "\n    :root{\n      color-scheme: only ".concat(theme.palette.type, ";\n      --sd-white: ").concat(color.White, ";\n      --sd-white-50: ").concat(color.White50, ";\n      --sd-white-40: ").concat(color.White40, ";\n      --sd-white-20: ").concat(color.White20, ";\n      --sd-white-10: ").concat(color.White10, ";\n      --sd-white-08: ").concat(color.White08, ";\n      --sd-transparent: ").concat(color.Transparent, ";\n\n      --sd-black: ").concat(color.Black, ";\n      --sd-black-50: ").concat(color.Black50, ";\n      --sd-black-20: ").concat(color.Black20, ";\n\n      --sd-dark-30: ").concat(color.Dark30, ";\n      --sd-blue-30: ").concat(color.Blue30, ";\n      --sd-green-30: ").concat(color.Green30, ";\n      --sd-red-30: ").concat(color.Red30, ";\n      --sd-red-300-alpha-20: ").concat(color.Red300Aplha20, ";\n      --sd-silver-30: ").concat(color.Silver30, ";\n\n      --sd-blue-10: ").concat(color.Blue10, ";\n      --sd-red-10: ").concat(color.Red10, ";\n\n      /* Legacy Neutral Colors */\n      --sd-grey-100: ").concat(color.Grey100, "; /* @deprecated Use Dark100 */\n      --sd-grey-200: ").concat(color.Grey200, "; /* @deprecated Use Dark200 */\n      --sd-grey-300: ").concat(color.Grey300, "; /* @deprecated Use Dark300 */\n      --sd-grey-400: ").concat(color.Grey400, "; /* @deprecated Use Dark400 */\n      --sd-grey-450: ").concat(color.Grey450, "; /* @deprecated Use Dark450 */\n      --sd-grey-500: ").concat(color.Grey500, "; /* @deprecated Use Dark500 */\n\n      --sd-dark-200: ").concat(color.Dark200, "; /* @deprecated */\n      --sd-dark-400: ").concat(color.Dark400, "; /* @deprecated */\n      --sd-dark-450: ").concat(color.Dark450, "; /* @deprecated */\n\n      --sd-silver-100: ").concat(color.Silver100, "; /* @deprecated */\n      --sd-silver-300: ").concat(color.Silver300, "; /* @deprecated */\n\n      /* Legacy Extended Palette */\n      --sd-blue-75: ").concat(color.Blue75, "; /* @deprecated */\n      --sd-blue-100: ").concat(color.Blue100, "; /* @deprecated */\n      --sd-blue-200: ").concat(color.Blue200, "; /* @deprecated */\n      --sd-blue-400: ").concat(color.Blue400, "; /* @deprecated */\n\n      --sd-green-75: ").concat(color.Green75, "; /* @deprecated */\n      --sd-green-100: ").concat(color.Green100, "; /* @deprecated */\n      --sd-green-200: ").concat(color.Green200, "; /* @deprecated */\n      --sd-green-400: ").concat(color.Green400, "; /* @deprecated */\n\n      --sd-purple-75: ").concat(color.Purple75, "; /* @deprecated */\n      --sd-purple-100: ").concat(color.Purple100, "; /* @deprecated */\n      --sd-purple-200: ").concat(color.Purple200, "; /* @deprecated */\n      --sd-purple-400: ").concat(color.Purple400, "; /* @deprecated */\n\n      --sd-red-75: ").concat(color.Red75, "; /* @deprecated */\n      --sd-red-100: ").concat(color.Red100, "; /* @deprecated */\n      --sd-red-200: ").concat(color.Red200, "; /* @deprecated */\n      --sd-red-400: ").concat(color.Red400, "; /* @deprecated */\n\n      --sd-teal-75: ").concat(color.Teal75, "; /* @deprecated */\n      --sd-teal-100: ").concat(color.Teal100, "; /* @deprecated */\n      --sd-teal-200: ").concat(color.Teal200, "; /* @deprecated */\n      --sd-teal-400: ").concat(color.Teal400, "; /* @deprecated */\n\n      --sd-yellow-75: ").concat(color.Yellow75, "; /* @deprecated */\n      --sd-yellow-100: ").concat(color.Yellow100, "; /* @deprecated */\n      --sd-yellow-200: ").concat(color.Yellow200, "; /* @deprecated */\n      --sd-yellow-400: ").concat(color.Yellow400, "; /* @deprecated */\n      --sd-dark-50: ").concat(color.Dark50, ";\n      /* extended palette */\n    \n      --sd-blue-50: ").concat(color.Blue50, ";\n      --sd-blue-500: ").concat(color.Blue500, ";\n      --sd-blue-300: ").concat(color.Blue300, ";\n      --sd-green-300: ").concat(color.Green300, ";\n      --sd-green-500: ").concat(color.Green500, ";\n      --sd-green-50: ").concat(color.Green50, ";\n      --sd-yellow-300: ").concat(color.Yellow300, ";\n      --sd-yellow-500: ").concat(color.Yellow500, ";\n      --sd-yellow-50: ").concat(color.Yellow50, ";\n      --sd-red-300: ").concat(color.Red300, ";\n      --sd-red-500: ").concat(color.Red500, ";\n      --sd-red-50: ").concat(color.Red50, ";\n      --sd-purple-300: ").concat(color.Purple300, ";\n      --sd-purple-500: ").concat(color.Purple500, ";\n      --sd-purple-50: ").concat(color.Purple50, ";\n      --sd-teal-300: ").concat(color.Teal300, ";\n      --sd-teal-500: ").concat(color.Teal500, ";\n      --sd-teal-50: ").concat(color.Teal50, ";\n      --sd-silver-500: ").concat(color.Silver500, ";\n      --sd-silver-200: ").concat(color.Silver200, ";\n      --sd-silver-400: ").concat(color.Silver400, ";\n      --sd-silver-400-alpha-30: ").concat(color.Silver400Alpha30, ";\n      --sd-dark-100: ").concat(color.Dark100, ";\n      --sd-dark-300: ").concat(color.Dark300, ";\n      --sd-dark-500: ").concat(color.Dark500, ";\n    }\n  ");
 });
 
 function createSuperDispatchTheme(type) {
   var breakpoints = createBreakpoints({});
-  var color = type === 'dark' ? exports.ColorDark : exports.Color;
+  var color = type === 'dark' ? ColorDark : Color;
   var theme = core.createTheme({
     breakpoints,
     palette: {
@@ -4423,6 +4594,9 @@ exports.Button = Button;
 exports.CardButton = CardButton;
 exports.CheckboxField = CheckboxField;
 exports.CheckboxGroupField = CheckboxGroupField;
+exports.Color = Color;
+exports.ColorDark = ColorDark;
+exports.ColorDynamic = ColorDynamic;
 exports.Column = Column;
 exports.Columns = Columns;
 exports.DescriptionList = DescriptionList;