@luminati-io/uikit 5.2.10 → 6.0.0

package/dist/umd/uikit.development.js

@@ -31150,7 +31150,7 @@ var DefaultTooltip = function DefaultTooltip(props) {
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TooltipWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TooltipHeader, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Label, {
     variant: "base",
-    color: "text_teritary"
+    color: "text_tertiary"
   }, "".concat(getX(nearestDatum.key, nearestDatum === null || nearestDatum === void 0 ? void 0 : nearestDatum.datum)))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TooltipContent, null, series.filter(function (name) {
     return name;
   }).map(function (name) {
@@ -31169,7 +31169,7 @@ var DefaultTooltip = function DefaultTooltip(props) {
       color: "text_quaternary"
     }, name)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Label, {
       variant: "sm",
-      color: "text_teritary"
+      color: "text_tertiary"
     }, value));
   })));
 };
@@ -31253,7 +31253,7 @@ var useChartTheme = function useChartTheme(palette) {
       fontWeight: 400 // regular,
     };
     var smallLabelProps = {
-      fill: color.text_teritary,
+      fill: color.text_tertiary,
       fontSize: 12,
       // xs
       fontFamily: font_family.sans,
@@ -33488,33 +33488,32 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 var useStyles = function useStyles(_ref) {
   var styles = _ref.styles,
     size = _ref.size;
-  var _useTheme = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.useTheme)(),
-    color = _useTheme.color,
-    shadow = _useTheme.shadow,
-    font_family = _useTheme.font_family,
-    font_weight = _useTheme.font_weight,
-    font_size = _useTheme.font_size,
-    line_height = _useTheme.line_height;
+  var theme = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.useTheme)();
+  var color = theme.color,
+    shadow = theme.shadow,
+    font_family = theme.font_family,
+    font_weight = theme.font_weight,
+    font_size = theme.font_size;
   var headerXl = {
     fontFamily: font_family.sans,
     fontStyle: 'normal',
     fontWeight: font_weight.medium,
     fontSize: font_size.lg,
-    lineHeight: line_height.none
+    lineHeight: 'normal' // line_height.none,
   };
   var labelSm = {
     fontFamily: font_family.sans,
     fontStyle: 'normal',
     fontWeight: font_weight.regular,
     fontSize: font_size.sm,
-    lineHeight: line_height.none
+    lineHeight: 'normal' // line_height.none,
   };
   var labelBase = {
     fontFamily: font_family.sans,
     fontStyle: 'normal',
     fontWeight: font_weight.regular,
     fontSize: font_size.md,
-    lineHeight: line_height.none
+    lineHeight: 'normal' // line_height.none,
   };
   return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return (0,_util_with_user_styles__WEBPACK_IMPORTED_MODULE_4__.withUserStyles)(styles, {
@@ -33529,7 +33528,7 @@ var useStyles = function useStyles(_ref) {
         };
         var borderColor = color.border;
         var boxShadow = 'none';
-        var foreColor = color.text_teritary;
+        var foreColor = color.text_tertiary;
         var backgroundColor = color.bg;
         var cursor = 'text';
         if (isDisabled) {
@@ -33606,7 +33605,7 @@ var useStyles = function useStyles(_ref) {
           gap: '8px',
           height: '40px',
           backgroundColor: isFocused ? color.bg_fill_secondary : undefined,
-          color: isDisabled ? color.text_disabled : color.text_teritary,
+          color: isDisabled ? color.text_disabled : color.text_tertiary,
           '&:hover': {
             backgroundColor: color.bg_fill_secondary
           }
@@ -33648,7 +33647,7 @@ var useStyles = function useStyles(_ref) {
         });
       }
     });
-  }, [styles, size, color, shadow, font_family, font_weight, font_size, line_height]);
+  }, [styles, size, theme]);
 };
 
 /***/ }),
@@ -34441,11 +34440,11 @@ var DraggableItem = function DraggableItem(props) {
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Dragger, null, !disableDrag && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_4__.Icon, {
     name: "DragAndDrop",
     size: "xs",
-    color: "gray_9",
+    color: "icon",
     verticalAlign: "sub"
   })), name && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Truncated_label, {
     variant: "lg",
-    color: "gray_11_50"
+    color: "text_tertiary"
   }, name), children);
 };
 DraggableItem.displayName = 'DraggableItem';
@@ -34459,11 +34458,11 @@ var DraggedContainer = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(
   componentId: "sc-167vnen-0"
 })(["border-radius:4px;&:hover{background-color:", ";}", ""], function (_ref2) {
   var color = _ref2.theme.color;
-  return color.gray_2;
+  return color.bg_fill;
 }, function (_ref3) {
   var $dragging = _ref3.$dragging,
     color = _ref3.theme.color;
-  return $dragging && (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["background-color:", ";"], color.gray_3);
+  return $dragging && (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["background-color:", " !important;"], color.bg_fill_secondary);
 });
 var Truncated_label = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_typography__WEBPACK_IMPORTED_MODULE_3__.Label).withConfig({
   displayName: "Truncated_label",
@@ -35191,20 +35190,19 @@ var useStyles = function useStyles(_ref) {
   var styles = _ref.styles,
     size = _ref.size,
     menuPortalTarget = _ref.menuPortalTarget;
-  var _useTheme = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.useTheme)(),
-    color = _useTheme.color,
-    spacing = _useTheme.spacing,
-    line_height = _useTheme.line_height,
-    font_size = _useTheme.font_size,
-    font_weight = _useTheme.font_weight,
-    font_family = _useTheme.font_family,
-    shadow = _useTheme.shadow;
+  var theme = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.useTheme)();
+  var color = theme.color,
+    spacing = theme.spacing,
+    font_size = theme.font_size,
+    font_weight = theme.font_weight,
+    font_family = theme.font_family,
+    shadow = theme.shadow;
   var labelSm = {
     fontFamily: font_family.sans,
     fontStyle: 'normal',
     fontWeight: font_weight.regular,
     fontSize: font_size.sm,
-    lineHeight: line_height.none
+    lineHeight: 'normal' // line_height.none,
   };
   return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return (0,_util_with_user_styles__WEBPACK_IMPORTED_MODULE_5__.withUserStyles)(styles, {
@@ -35219,7 +35217,7 @@ var useStyles = function useStyles(_ref) {
         };
         var borderColor = color.border;
         var boxShadow = 'none';
-        var foreColor = color.text_teritary;
+        var foreColor = color.text_tertiary;
         var backgroundColor = color.bg;
         var cursor = 'text';
         if (isDisabled) {
@@ -35320,7 +35318,7 @@ var useStyles = function useStyles(_ref) {
         });
       }
     });
-  }, [styles, size, menuPortalTarget, color, spacing, line_height, font_size, font_weight, font_family, shadow]);
+  }, [styles, size, menuPortalTarget, theme]);
 };
 
 /***/ }),
@@ -36373,7 +36371,7 @@ var CountrySelect = function CountrySelect(_ref) {
       no_wrap: true
     }, _getCountryLabel(opt)), !!countryCallingCode && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
       variant: "sm",
-      color: "text_teritary"
+      color: "text_tertiary"
     }, "+", countryCallingCode));
   }, [_getCountryLabel, _getCountryCallingCode, _getCountryFlag]);
   var filterOption = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_ref3, inputValue) {
@@ -36596,7 +36594,7 @@ var useStyles = function useStyles(size) {
           fontWeight: font_weight.regular,
           fontSize: font_size.sm,
           lineHeight: line_height.none,
-          color: isDisabled ? color.text_disabled : color.text_teritary,
+          color: isDisabled ? color.text_disabled : color.text_tertiary,
           backgroundColor: isDisabled ? color.bg_fill_teritary : color.bg,
           borderColor: isDisabled ? color.border_disabled : color.border,
           cursor: isDisabled ? 'default' : 'text',
@@ -36652,7 +36650,7 @@ var useStyles = function useStyles(size) {
           isDisabled = _ref11.isDisabled;
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
           backgroundColor: isFocused ? color.bg_fill_secondary : undefined,
-          color: isDisabled ? color.text_disabled : color.text_teritary,
+          color: isDisabled ? color.text_disabled : color.text_tertiary,
           '&:hover': {
             backgroundColor: color.bg_fill_secondary
           }
@@ -36945,39 +36943,24 @@ var RadioWrapper = styled_components__WEBPACK_IMPORTED_MODULE_0___default().div.
 var RadioControl = styled_components__WEBPACK_IMPORTED_MODULE_0___default().div.withConfig({
   displayName: "RadioControl",
   componentId: "sc-7im0vh-1"
-})(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1.5px solid;border-radius:50%;", " &:after{content:'';border-radius:50%;}", ""], function (props) {
-  var s = props.size == 'sm' ? 16 : 20;
-  return (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["min-width:", ";max-width:", ";height:", ";&:after{width:", ";height:", ";}"], (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(s), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(s), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(s), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(s / 2), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(s / 2));
-}, function (_ref2) {
-  var checked = _ref2.checked,
-    disabled = _ref2.disabled,
+})(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1.5px solid;border-radius:50%;", " ", ""], function (_ref2) {
+  var size = _ref2.size,
     color = _ref2.theme.color;
-  var borderColor, hoverBorderColor, activeBorderColor;
-  var activeOutlineColor;
-  var backgroundColor, hoverBackgroundColor, activeBackgroundColor;
-  var beforeColor, hoverBeforeColor, activeBeforeColor;
+  var p = size == 'sm' ? 16 : 20;
+  return (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["min-width:", ";max-width:", ";height:", ";background-color:", ";&:after{content:'';border-radius:50%;width:", ";height:", ";}"], (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(p), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(p), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(p), color.bg, (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(p / 2), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(p / 2));
+}, function (_ref3) {
+  var checked = _ref3.checked,
+    disabled = _ref3.disabled,
+    _ref3$theme = _ref3.theme,
+    color = _ref3$theme.color,
+    shadow = _ref3$theme.shadow;
   if (disabled) {
-    borderColor = hoverBorderColor = activeBorderColor = color.gray_8;
-    backgroundColor = hoverBackgroundColor = activeBackgroundColor = color.white;
-    if (checked) beforeColor = hoverBeforeColor = activeBeforeColor = color.gray_6;
-  } else {
-    if (checked) {
-      borderColor = activeBorderColor = color.blue_11;
-      backgroundColor = hoverBackgroundColor = activeBackgroundColor = color.white;
-      beforeColor = activeBeforeColor = color.blue_11;
-      hoverBorderColor = color.blue_10;
-      hoverBackgroundColor = color.white;
-      hoverBeforeColor = color.blue_10;
-      activeOutlineColor = color.blue_5;
-    } else {
-      borderColor = color.gray_9;
-      backgroundColor = activeBackgroundColor = color.white;
-      hoverBorderColor = color.gray_10;
-      hoverBackgroundColor = color.gray_3;
-      activeBorderColor = color.blue_11;
-    }
+    return (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["border-color:", ";&:after{background-color:", ";}"], color.border_info, checked ? color.border_info : color.bg);
   }
-  return (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["border-color:", ";background-color:", ";&:after{background-color:", ";}&:hover{border-color:", ";background-color:", ";}&:hover:after{background-color:", ";}&:active{border-color:", ";background-color:", ";", "}&:active:after{background-color:", ";}"], borderColor, backgroundColor, beforeColor, hoverBorderColor, hoverBackgroundColor, hoverBeforeColor, activeBorderColor, activeBackgroundColor, activeOutlineColor && "box-shadow: 0 0 0 3px ".concat(activeOutlineColor, ";"), activeBeforeColor);
+  if (checked) {
+    return (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["border-color:", ";&:after{background-color:", ";}&:hover{border-color:", ";&:after{background-color:", ";}}&:active{border-color:", ";box-shadow:", ";&:after{background-color:", ";}}"], color.bg_fill_primary, color.bg_fill_primary, color.bg_fill_primary_hover, color.bg_fill_primary_hover, color.bg_fill_primary, shadow.primary, color.bg);
+  }
+  return (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["border-color:", ";&:after{background-color:", ";}&:hover{border-color:", ";background-color:", ";&:after{background-color:", ";}}&:active{border-color:", ";&:active:after{background-color:", ";}}"], color.border_accent, color.bg, color.border_accent, color.bg_component_hover, color.bg_component_hover, color.icon_primary, color.bg);
 });
 var GroupWrapper = styled_components__WEBPACK_IMPORTED_MODULE_0___default()(_layout__WEBPACK_IMPORTED_MODULE_1__.Flex).withConfig({
   displayName: "GroupWrapper",
@@ -37189,7 +37172,7 @@ var Radio = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef
     }),
     variant: "sm",
     id: labelId,
-    color: disabled ? 'gray_9' : 'gray_11_50'
+    color: disabled ? 'text_disabled' : 'text'
   }, label)));
 });
 Radio.displayName = 'Radio';
@@ -37232,7 +37215,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /*jslint react:true*/
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["options", "classNamePrefix", "rounded", "disabled", "size"];
+var _excluded = ["options", "classNamePrefix", "rounded", "disabled", "size"],
+  _excluded2 = ["label", "tag", "tagVariant", "description", "disabled", "img"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -37256,28 +37240,28 @@ var RadioTabStyled = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_r
   componentId: "sc-1cp95by-0"
 })(["", "{gap:0;border:1px solid ", ";border-radius:", ";}", "{padding:12px;border-bottom:1px solid ", ";&:hover{background-color:", ";}&:last-child{border:none;}}"], _common__WEBPACK_IMPORTED_MODULE_7__.GroupWrapper, function (_ref) {
   var color = _ref.theme.color;
-  return color.gray_6;
+  return color.border;
 }, function (_ref2) {
   var $rounded = _ref2.$rounded;
   return $rounded ? '4px' : '0';
 }, _common__WEBPACK_IMPORTED_MODULE_7__.RadioWrapper, function (_ref3) {
   var color = _ref3.theme.color;
-  return color.gray_6;
+  return color.border;
 }, function (_ref4) {
   var color = _ref4.theme.color;
-  return color.gray_2;
+  return color.bg_fill;
 });
 var Img = styled_components__WEBPACK_IMPORTED_MODULE_2___default().img.withConfig({
   displayName: "Img",
   componentId: "sc-1cp95by-1"
 })(["max-width:60px;"]);
-var RadioTabLabel = function RadioTabLabel(props) {
-  var label = props.label,
-    tag = props.tag,
-    tagVariant = props.tagVariant,
-    description = props.description,
-    disabled = props.disabled,
-    img = props.img;
+var RadioTabLabel = function RadioTabLabel(_ref5) {
+  var label = _ref5.label,
+    tag = _ref5.tag,
+    tagVariant = _ref5.tagVariant,
+    description = _ref5.description,
+    disabled = _ref5.disabled,
+    img = _ref5.img;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_4__.Flex, {
     gap: "04",
     align_items: "center"
@@ -37291,37 +37275,50 @@ var RadioTabLabel = function RadioTabLabel(props) {
     align_items: "center"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
     variant: "lg",
-    color: disabled ? 'gray_10' : 'gray_11_50'
+    color: disabled ? 'text_disabled' : 'text'
   }, label), tag && tagVariant == 'badge' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_badge__WEBPACK_IMPORTED_MODULE_5__.Badge, {
     variant: "positive"
   }, tag) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
     variant: "sm",
-    color: "green_11"
+    color: "text_success"
   }, tag)), description && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Paragraph, {
     variant: "lg_snug",
-    color: disabled ? 'gray_9' : 'gray_11'
+    color: disabled ? 'text_disabled' : 'text_quaternary'
   }, description)));
 };
 var radioTabPrefix = 'radioTab';
-var RadioTab = function RadioTab(_ref5) {
-  var options = _ref5.options,
-    classNamePrefix = _ref5.classNamePrefix,
-    rounded = _ref5.rounded,
-    disabled = _ref5.disabled,
-    _ref5$size = _ref5.size,
-    size = _ref5$size === void 0 ? 'sm' : _ref5$size,
-    rest = _objectWithoutProperties(_ref5, _excluded);
+var RadioTab = function RadioTab(_ref6) {
+  var options = _ref6.options,
+    classNamePrefix = _ref6.classNamePrefix,
+    rounded = _ref6.rounded,
+    _disabled = _ref6.disabled,
+    _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 'sm' : _ref6$size,
+    rest = _objectWithoutProperties(_ref6, _excluded);
   var cnPrefix = classNamePrefix ? "".concat(classNamePrefix, "_").concat(radioTabPrefix) : radioTabPrefix;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RadioTabStyled, _extends({}, rest, {
     $rounded: rounded,
     size: size,
-    disabled: disabled,
+    disabled: _disabled,
     classNamePrefix: cnPrefix,
-    options: options.map(function (o) {
-      return _objectSpread(_objectSpread({}, o), {}, {
-        label: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RadioTabLabel, _extends({}, o, {
-          disabled: disabled || o.disabled
-        }))
+    options: options.map(function (_ref7) {
+      var label = _ref7.label,
+        tag = _ref7.tag,
+        tagVariant = _ref7.tagVariant,
+        description = _ref7.description,
+        disabled = _ref7.disabled,
+        img = _ref7.img,
+        option = _objectWithoutProperties(_ref7, _excluded2);
+      return _objectSpread(_objectSpread({}, option), {}, {
+        disabled: disabled,
+        label: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RadioTabLabel, {
+          label: label,
+          tag: tag,
+          tagVariant: tagVariant,
+          description: description,
+          img: img,
+          disabled: _disabled || disabled
+        })
       });
     })
   }));
@@ -37661,7 +37658,7 @@ var InputContentWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default
 var InputWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "InputWrapper",
   componentId: "sc-r60v1b-7"
-})(["position:relative;width:100%;border:1px solid;border-radius:4px;box-sizing:border-box;font-family:", ";padding:", "px ", "px;overflow:auto;display:flex;gap:8px;align-items:", ";border-left-width:1px;border-right-width:1px;border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";", " ", ""], function (_ref12) {
+})(["position:relative;width:100%;border:1px solid;border-radius:4px;box-sizing:border-box;font-family:", ";padding:", "px ", "px;overflow:auto;display:flex;gap:8px;align-items:", ";border-left-width:1px;border-right-width:1px;border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";", " ", " box-shadow:", ";"], function (_ref12) {
   var font_family = _ref12.theme.font_family;
   return font_family.sans;
 }, inputVerticalPadding, inputHorizontalPadding, function (_ref13) {
@@ -37682,24 +37679,15 @@ var InputWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.
   var $disabled = _ref14.$disabled,
     $invalid = _ref14.$invalid,
     $active = _ref14.$active,
-    _ref14$theme = _ref14.theme,
-    color = _ref14$theme.color,
-    shadow = _ref14$theme.shadow;
-  var borderColor = color.border;
-  var boxShadow = 'none';
-  var foreColor = color.text;
-  var backgroundColor = color.bg;
-  var cursor = 'text';
+    color = _ref14.theme.color;
   if ($disabled) {
-    foreColor = color.text_disabled;
-    borderColor = color.border_disabled;
-    backgroundColor = color.bg_fill_teritary;
-    cursor = 'default';
-  } else if ($invalid) borderColor = color.border_error;else if ($active) {
-    borderColor = color.border_primary;
-    boxShadow = shadow.primary;
+    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["cursor:default;background-color:", ";border-color:", ";color:", ";"], color.bg_fill_teritary, color.border_disabled, color.text_disabled);
   }
-  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["cursor:", ";background-color:", ";border-color:", ";color:", ";box-shadow:", ";"], cursor, backgroundColor, borderColor, foreColor, boxShadow);
+  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["cursor:text;background-color:", ";color:", ";border-color:", ";&:hover{border-color:", ";}"], color.bg, color.text_tertiary, $invalid ? color.border_error : $active ? color.border_primary : color.border, color.border_accent);
+}, function (_ref15) {
+  var $active = _ref15.$active,
+    shadow = _ref15.theme.shadow;
+  return $active ? shadow.primary : null;
 });
 var HelperText = function HelperText(props) {
   var children = props.children,
@@ -37822,7 +37810,7 @@ Textarea.displayName = 'Textarea';
 var Area = styled_components__WEBPACK_IMPORTED_MODULE_2___default().textarea.withConfig({
   displayName: "Area",
   componentId: "sc-1qhmytd-0"
-})(["padding:0;outline:none;border:0;flex-grow:1;width:100%;color:inherit;resize:none;background:inherit;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";::placeholder{color:", ";}"], function (_ref2) {
+})(["padding:0;outline:none;border:0;flex-grow:1;width:100%;color:inherit;resize:none;background:inherit;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";::placeholder{color:", ";}"], function (_ref2) {
   var font_family = _ref2.theme.font_family;
   return font_family.sans;
 }, function (_ref3) {
@@ -37836,10 +37824,7 @@ var Area = styled_components__WEBPACK_IMPORTED_MODULE_2___default().textarea.wit
   return line_height.none;
 }, function (_ref6) {
   var color = _ref6.theme.color;
-  return color.gray_11_50;
-}, function (_ref7) {
-  var color = _ref7.theme.color;
-  return color.gray_8;
+  return color.text_quaternary;
 });
 
 /***/ }),
@@ -38139,7 +38124,7 @@ var ItemList = function ItemList(props) {
     })
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
     variant: "sm",
-    color: "gray_11_50"
+    color: "text"
   }, "".concat(extra, " more item").concat(extra > 1 ? 's' : '', " hidden"))));
 };
 var DefaultItemRenderer = function DefaultItemRenderer(props) {
@@ -38152,7 +38137,7 @@ var DefaultItemRenderer = function DefaultItemRenderer(props) {
     role: "listitem"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
     variant: "sm",
-    color: "gray_11_50"
+    color: "text"
   }, value), showRemove && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_6__.IconButton, {
     "data-action": "remove",
     title: "Remove",
@@ -38170,7 +38155,7 @@ var ItemWithHover = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(Ite
   componentId: "sc-1cige3y-1"
 })(["&:hover{background:", ";}"], function (_ref) {
   var color = _ref.theme.color;
-  return color.gray_2;
+  return color.bg_fill;
 });
 
 /***/ }),
@@ -38471,10 +38456,6 @@ var Toggle = function Toggle(_ref) {
     var checked = evt.target.checked;
     onChange === null || onChange === void 0 || onChange(checked, evt);
   }, [onChange]);
-  var color = getLabelColor({
-    disabled: disabled,
-    value: value
-  });
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ToggleLabel, _extends({}, (0,_util__WEBPACK_IMPORTED_MODULE_4__.getCommonProps)(rest), {
     $size: size
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ToggleInput, {
@@ -38486,7 +38467,7 @@ var Toggle = function Toggle(_ref) {
   }), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
     variant: "sm",
     tag: "span",
-    color: color,
+    color: disabled ? 'text_disabled' : 'text',
     no_wrap: true
   }, label));
 };
@@ -38506,65 +38487,49 @@ var ToggleInput = styled_components__WEBPACK_IMPORTED_MODULE_2___default().input
 }).withConfig({
   displayName: "ToggleInput",
   componentId: "sc-14lfe6n-1"
-})(["&&{box-sizing:border-box;width:", ";height:", ";display:flex;align-items:center;margin:0;padding:0 1px;vertical-align:top;background-color:", ";border:1px solid ", ";border-radius:25px;outline:none;outline-offset:0;cursor:pointer;appearance:none;transition:all 0.3s cubic-bezier(0.2,0.85,0.32,1.2);&:hover:not(:disabled){background-color:", ";border-color:", ";}&:focus{outline:none;outline-offset:0;background-color:", ";border-color:", ";}&:checked{background-color:", ";border-color:", ";&:hover{background-color:", ";border-color:", ";}&:focus{background-color:", ";border-color:", ";outline:3px solid ", ";}}}&::after{content:\"\";display:block;width:", ";height:", ";border-radius:50%;background-color:", ";box-shadow:0 2px 2px rgba(0,0,0,0.1);transition:all 0.3s cubic-bezier(0.2,0.85,0.32,1.2);}&:checked::after{transform:translateX(", ");}"], function (props) {
-  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)(props.$size == 'xs' ? 32 : 44);
-}, function (props) {
-  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)(props.$size == 'xs' ? 16 : 20);
-}, function (_ref2) {
-  var color = _ref2.theme.color;
-  return color.gray_5;
+})(["&&{box-sizing:border-box;width:", ";height:", ";display:flex;align-items:center;margin:0;padding:0 2px;vertical-align:top;background-color:", ";border-radius:25px;outline:none;cursor:pointer;appearance:none;transition:all 0.3s cubic-bezier(0.2,0.85,0.32,1.2);&:hover:not(:disabled){background-color:", ";}&:focus{background-color:", ";outline:3px solid ", ";}&:checked{background-color:", ";&:hover{background-color:", ";}&:focus{background-color:", ";outline:3px solid ", ";}}}&::after{content:\"\";display:block;width:", ";height:", ";border-radius:50%;background-color:", ";box-shadow:0 2px 2px rgba(0,0,0,0.1);transition:all 0.3s cubic-bezier(0.2,0.85,0.32,1.2);}&:checked::after{transform:translateX(", ");}"], function (_ref2) {
+  var $size = _ref2.$size;
+  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)($size == 'xs' ? 32 : 44);
 }, function (_ref3) {
-  var color = _ref3.theme.color;
-  return color.gray_7;
+  var $size = _ref3.$size;
+  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)($size == 'xs' ? 16 : 20);
 }, function (_ref4) {
   var color = _ref4.theme.color;
-  return color.gray_7;
+  return color.toggle_off_bg_default;
 }, function (_ref5) {
   var color = _ref5.theme.color;
-  return color.gray_8;
+  return color.toggle_off_bg_hover;
 }, function (_ref6) {
   var color = _ref6.theme.color;
-  return color.gray_9;
+  return color.toggle_off_bg_active;
 }, function (_ref7) {
   var color = _ref7.theme.color;
-  return color.gray_9;
+  return color.toggle_off_border_active;
 }, function (_ref8) {
   var color = _ref8.theme.color;
-  return color.blue_11;
+  return color.toggle_on_bg_default;
 }, function (_ref9) {
   var color = _ref9.theme.color;
-  return color.blue_11;
+  return color.toggle_on_bg_hover;
 }, function (_ref10) {
   var color = _ref10.theme.color;
-  return color.blue_10;
+  return color.toggle_on_bg_default;
 }, function (_ref11) {
   var color = _ref11.theme.color;
-  return color.blue_10;
+  return color.toggle_on_border_active;
 }, function (_ref12) {
-  var color = _ref12.theme.color;
-  return color.blue_11;
+  var $size = _ref12.$size;
+  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)($size == 'xs' ? 12 : 16);
 }, function (_ref13) {
-  var color = _ref13.theme.color;
-  return color.blue_11;
+  var $size = _ref13.$size;
+  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)($size == 'xs' ? 12 : 16);
 }, function (_ref14) {
   var color = _ref14.theme.color;
-  return color.blue_5;
-}, function (props) {
-  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)(props.$size == 'xs' ? 12 : 16);
-}, function (props) {
-  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)(props.$size == 'xs' ? 12 : 16);
+  return color.toggle_switch;
 }, function (_ref15) {
-  var color = _ref15.theme.color;
-  return color.white;
-}, function (props) {
-  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)(props.$size == 'xs' ? 15 : 23);
+  var $size = _ref15.$size;
+  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)($size == 'xs' ? 16 : 24);
 });
-var getLabelColor = function getLabelColor(props) {
-  var disabled = props.disabled,
-    value = props.value;
-  if (disabled) return value ? 'gray-11' : 'gray-9';
-  return value ? 'gray-11-50' : 'gray-11';
-};
 
 /***/ }),
 
@@ -39166,7 +39131,7 @@ var MenuItem = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)(fu
   }, text), !isSubMenu && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null, !!tertiaryText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_7__.Label, {
     variant: "sm",
     whiteSpace: "nowrap",
-    color: "text_teritary"
+    color: "text_tertiary"
   }, tertiaryText), !!secondaryText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(SecondaryText, null, secondaryText))), !!description && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(Description, null, description))), isSubMenu && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(SecondaryIcon, {
     subMenu: true
   }), !isSubMenu && !secondaryText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(SecondaryIcon, {
@@ -39298,7 +39263,7 @@ var SecondaryText = styled_components__WEBPACK_IMPORTED_MODULE_3___default()(_ty
 })(["margin-left:auto;"]);
 var Description = styled_components__WEBPACK_IMPORTED_MODULE_3___default()(_typography__WEBPACK_IMPORTED_MODULE_7__.Label).attrs({
   variant: 'xs',
-  color: 'text_teritary',
+  color: 'text_tertiary',
   whiteSpace: 'nowrap'
 }).withConfig({
   displayName: "Description",
@@ -39495,7 +39460,7 @@ var StyledWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_la
   componentId: "sc-1nggvo0-0"
 })(["background-color:", ";border-radius:", ";display:flex;flex-direction:column;font-family:", ";min-width:200px;max-width:", ";width:", ";"], function (_ref) {
   var color = _ref.theme.color;
-  return color.bg_elevated;
+  return color.bg;
 }, function (_ref2) {
   var spacing = _ref2.theme.spacing;
   return spacing['02'];
@@ -39747,10 +39712,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
-var _excluded = ["color"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
 
 
 
@@ -39775,42 +39737,30 @@ var ModalSubtitle = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_ty
   var color = _ref3.theme.color;
   return color.text_secondary;
 });
-var CloseButton = function CloseButton(_ref4) {
-  var _ref4$color = _ref4.color,
-    color = _ref4$color === void 0 ? 'bg_elevated' : _ref4$color,
-    props = _objectWithoutProperties(_ref4, _excluded);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledIconButton, _extends({
+var CloseButton = function CloseButton(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_4__.IconButton, _extends({
     icon: "CloseSmall",
-    size: "xs",
-    $color: color
+    size: "xs"
   }, props));
 };
-var StyledIconButton = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_icon_button__WEBPACK_IMPORTED_MODULE_4__.IconButton).withConfig({
-  displayName: "StyledIconButton",
-  componentId: "sc-1p9nv3u-1"
-})(["background-color:", ";"], function (_ref5) {
-  var $color = _ref5.$color,
-    color = _ref5.theme.color;
-  return $color && color[$color];
-});
 var ButtonsGroup = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex).attrs({
   gap: '04',
   align_items: 'center'
 }).withConfig({
   displayName: "ButtonsGroup",
-  componentId: "sc-1p9nv3u-2"
+  componentId: "sc-1p9nv3u-1"
 })([""]);
 var ModalButton = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_button__WEBPACK_IMPORTED_MODULE_3__.Button).attrs({
   size: 'sm'
 }).withConfig({
   displayName: "ModalButton",
-  componentId: "sc-1p9nv3u-3"
+  componentId: "sc-1p9nv3u-2"
 })([""]);
-var ModalHeader = function ModalHeader(_ref6) {
-  var title = _ref6.title,
-    subtitle = _ref6.subtitle,
-    onCancel = _ref6.onCancel,
-    cancelDisabled = _ref6.cancelDisabled;
+var ModalHeader = function ModalHeader(_ref4) {
+  var title = _ref4.title,
+    subtitle = _ref4.subtitle,
+    onCancel = _ref4.onCancel,
+    cancelDisabled = _ref4.cancelDisabled;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex, {
     align_items: "center",
     justify_content: "space-between",
@@ -39826,15 +39776,15 @@ ModalHeader.propTypes = {
   onCancel: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
   cancelDisabled: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
 };
-var ModalFooter = function ModalFooter(_ref7) {
-  var _ref7$okLabel = _ref7.okLabel,
-    okLabel = _ref7$okLabel === void 0 ? 'OK' : _ref7$okLabel,
-    _ref7$cancelLabel = _ref7.cancelLabel,
-    cancelLabel = _ref7$cancelLabel === void 0 ? 'Cancel' : _ref7$cancelLabel,
-    onOk = _ref7.onOk,
-    onCancel = _ref7.onCancel,
-    okDisabled = _ref7.okDisabled,
-    cancelDisabled = _ref7.cancelDisabled;
+var ModalFooter = function ModalFooter(_ref5) {
+  var _ref5$okLabel = _ref5.okLabel,
+    okLabel = _ref5$okLabel === void 0 ? 'OK' : _ref5$okLabel,
+    _ref5$cancelLabel = _ref5.cancelLabel,
+    cancelLabel = _ref5$cancelLabel === void 0 ? 'Cancel' : _ref5$cancelLabel,
+    onOk = _ref5.onOk,
+    onCancel = _ref5.onCancel,
+    okDisabled = _ref5.okDisabled,
+    cancelDisabled = _ref5.cancelDisabled;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex, {
     width: "100%",
     justify_content: "flex-end"
@@ -40484,10 +40434,10 @@ var TabContainer = styled_components__WEBPACK_IMPORTED_MODULE_2___default().butt
     color = _ref2$theme.color,
     shadow = _ref2$theme.shadow;
   if ($variant == 'underline') {
-    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:fit-content;height:24px;padding:0 16px;justify-content:center;gap:4px;color:", ";box-shadow:0px -1px 0px 0px ", " inset;&[aria-selected=true]{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&[aria-disabled=true]{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}"], color.text_teritary, color.border_secondary, color.text_primary, color.border_primary, color.text_teritary, color.border, color.text_disabled, color.border_disabled);
+    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:fit-content;height:24px;padding:0 16px;justify-content:center;gap:4px;color:", ";box-shadow:0px -1px 0px 0px ", " inset;&[aria-selected=true]{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&[aria-disabled=true]{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}"], color.text_tertiary, color.border_secondary, color.text_primary, color.border_primary, color.text_tertiary, color.border, color.text_disabled, color.border_disabled);
   }
   if ($variant == 'contain') {
-    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:fit-content;height:32px;padding:0px 8px;justify-content:center;gap:6px;border-radius:4px;background:", ";color:", ";&[aria-selected=true]{color:", ";background:", ";border:1px solid ", ";box-shadow:", ";}&:hover{color:", ";background:", ";}&[aria-disabled=true]{color:", ";background:", ";border:0 none;box-shadow:none;}"], color.bg, color.text_teritary, color.text_primary, color.bg, color.border, shadow.meduim, color.text_teritary, color.bg_fill_primary_secondary, color.text_disabled, color.bg_fill_teritary);
+    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:fit-content;height:32px;padding:0px 8px;justify-content:center;gap:6px;border-radius:4px;color:", ";&[aria-selected=true]{color:", ";background:", ";border:1px solid ", ";box-shadow:", ";}&:hover{color:", ";background:", ";}&[aria-disabled=true]{color:", ";background:", ";border:0 none;box-shadow:none;}"], color.text_tertiary, color.text_primary, color.bg, color.border, shadow.meduim, color.text_tertiary, color.bg_fill_primary_secondary, color.text_disabled, color.bg_fill_teritary);
   }
   if ($variant == 'vertical') {
     return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:200px;height:40px;padding:0 12px;justify-content:space-between;gap:4px;border-radius:0 4px 4px 0;border-left:1px solid transparent;color:", ";&[aria-selected=true]{color:", ";background:", ";border-left-color:", ";}&:hover{color:", ";border-left-color:", ";}&[aria-disabled=true]{color:", ";background:0 none;border-left-color:transparent;}"], color.text, color.text, color.bg_fill_primary_secondary, color.bg_fill_primary_secondary, color.text, color.border, color.text_disabled);
@@ -40537,15 +40487,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react_table__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-table */ "react-table");
 /* harmony import */ var react_table__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_table__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
-/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
-/* harmony import */ var _editable_columns__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./editable_columns */ "./src/table/editable_columns.js");
-/* harmony import */ var _pinned_columns__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./pinned_columns */ "./src/table/pinned_columns.js");
-/* harmony import */ var _expandable_rows__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./expandable_rows */ "./src/table/expandable_rows.js");
-/* harmony import */ var _select_rows__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./select_rows */ "./src/table/select_rows.js");
-/* harmony import */ var _row_menu__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./row_menu */ "./src/table/row_menu.js");
-/* harmony import */ var _order_logic__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./order_logic */ "./src/table/order_logic.js");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var _editable_columns__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./editable_columns */ "./src/table/editable_columns.js");
+/* harmony import */ var _pinned_columns__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./pinned_columns */ "./src/table/pinned_columns.js");
+/* harmony import */ var _expandable_rows__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./expandable_rows */ "./src/table/expandable_rows.js");
+/* harmony import */ var _select_rows__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./select_rows */ "./src/table/select_rows.js");
+/* harmony import */ var _row_menu__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./row_menu */ "./src/table/row_menu.js");
+/* harmony import */ var _order_logic__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./order_logic */ "./src/table/order_logic.js");
 // LICENSE_CODE ZON
 
 
@@ -40581,6 +40533,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
+
 var assign = Object.assign;
 var defaultContextValue = {};
 var TableContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createContext(defaultContextValue);
@@ -40595,7 +40548,7 @@ var defaultIsCellEditable = function defaultIsCellEditable(_ref) {
 var defaultPageSizes = [5, 10, 20, 30];
 var Cell = function Cell(_ref2) {
   var value = _ref2.value;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Paragraph, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Paragraph, {
     variant: "sm",
     color: "gray-11-50"
   }, String(value));
@@ -40621,7 +40574,7 @@ var Provider = function Provider(_ref3) {
     NoDataComp = _ref3.NoDataComp,
     LoadingComp = _ref3.LoadingComp,
     _ref3$ExpandHandleCom = _ref3.ExpandHandleComp,
-    ExpandHandleComp = _ref3$ExpandHandleCom === void 0 ? _expandable_rows__WEBPACK_IMPORTED_MODULE_8__.ExpandHandle : _ref3$ExpandHandleCom,
+    ExpandHandleComp = _ref3$ExpandHandleCom === void 0 ? _expandable_rows__WEBPACK_IMPORTED_MODULE_9__.ExpandHandle : _ref3$ExpandHandleCom,
     _ref3$noDataText = _ref3.noDataText,
     noDataText = _ref3$noDataText === void 0 ? 'No data' : _ref3$noDataText,
     _ref3$loadingText = _ref3.loadingText,
@@ -40672,6 +40625,7 @@ var Provider = function Provider(_ref3) {
     _ref3$rowDensity = _ref3.rowDensity,
     rowDensity = _ref3$rowDensity === void 0 ? 'busy_bee' : _ref3$rowDensity,
     rest = _objectWithoutProperties(_ref3, _excluded);
+  var theme = (0,styled_components__WEBPACK_IMPORTED_MODULE_3__.useTheme)();
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
     pageCount = _useState2[0],
@@ -40680,9 +40634,9 @@ var Provider = function Provider(_ref3) {
     _useState4 = _slicedToArray(_useState3, 2),
     isDraggingRow = _useState4[0],
     setIsDraggingRow = _useState4[1];
-  var hiddenColumns = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(stateManager === null || stateManager === void 0 ? void 0 : stateManager.get('hiddenColumns'), _hiddenColumns);
-  var pinnedColumns = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(stateManager === null || stateManager === void 0 ? void 0 : stateManager.get('pinnedColumns'), _pinnedColumns);
-  var columnOrder = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(stateManager === null || stateManager === void 0 ? void 0 : stateManager.get('columnOrder'), _columnOrder);
+  var hiddenColumns = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(stateManager === null || stateManager === void 0 ? void 0 : stateManager.get('hiddenColumns'), _hiddenColumns);
+  var pinnedColumns = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(stateManager === null || stateManager === void 0 ? void 0 : stateManager.get('pinnedColumns'), _pinnedColumns);
+  var columnOrder = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(stateManager === null || stateManager === void 0 ? void 0 : stateManager.get('columnOrder'), _columnOrder);
   var initialState = assign({}, _initialState, pageSize && {
     pageSize: pageSize
   }, hiddenColumns && {
@@ -40711,10 +40665,11 @@ var Provider = function Provider(_ref3) {
     getFooterProps: getFooterProps,
     ExpandHandleComp: ExpandHandleComp,
     fullWidth: fullWidth,
-    rowDensity: rowDensity
+    rowDensity: rowDensity,
+    theme: theme
   }, rest), manualPagination && {
     pageCount: pageCount
-  }), useCanHideColumns, react_table__WEBPACK_IMPORTED_MODULE_2__.useExpanded, _expandable_rows__WEBPACK_IMPORTED_MODULE_8__.useExpandHandle, react_table__WEBPACK_IMPORTED_MODULE_2__.usePagination, fullWidth ? react_table__WEBPACK_IMPORTED_MODULE_2__.useFlexLayout : react_table__WEBPACK_IMPORTED_MODULE_2__.useBlockLayout, react_table__WEBPACK_IMPORTED_MODULE_2__.useResizeColumns, react_table__WEBPACK_IMPORTED_MODULE_2__.useColumnOrder, _pinned_columns__WEBPACK_IMPORTED_MODULE_7__.usePinnedColumns, _editable_columns__WEBPACK_IMPORTED_MODULE_6__.useEditableColumns, react_table__WEBPACK_IMPORTED_MODULE_2__.useRowSelect, _select_rows__WEBPACK_IMPORTED_MODULE_9__.useSelectRows].concat(_toConsumableArray(rowActions !== null && rowActions !== void 0 && rowActions.length ? [_row_menu__WEBPACK_IMPORTED_MODULE_10__.useRowMenu] : []), _toConsumableArray(hooks)));
+  }), useCanHideColumns, react_table__WEBPACK_IMPORTED_MODULE_2__.useExpanded, _expandable_rows__WEBPACK_IMPORTED_MODULE_9__.useExpandHandle, react_table__WEBPACK_IMPORTED_MODULE_2__.usePagination, fullWidth ? react_table__WEBPACK_IMPORTED_MODULE_2__.useFlexLayout : react_table__WEBPACK_IMPORTED_MODULE_2__.useBlockLayout, react_table__WEBPACK_IMPORTED_MODULE_2__.useResizeColumns, react_table__WEBPACK_IMPORTED_MODULE_2__.useColumnOrder, _pinned_columns__WEBPACK_IMPORTED_MODULE_8__.usePinnedColumns, _editable_columns__WEBPACK_IMPORTED_MODULE_7__.useEditableColumns, react_table__WEBPACK_IMPORTED_MODULE_2__.useRowSelect, _select_rows__WEBPACK_IMPORTED_MODULE_10__.useSelectRows].concat(_toConsumableArray(rowActions !== null && rowActions !== void 0 && rowActions.length ? [_row_menu__WEBPACK_IMPORTED_MODULE_11__.useRowMenu] : []), _toConsumableArray(hooks)));
   var _table$state = table.state,
     pageIndex = _table$state.pageIndex,
     _pageSize = _table$state.pageSize;
@@ -40731,8 +40686,8 @@ var Provider = function Provider(_ref3) {
   }, [manualPagination, totalCount, pageIndex, _pageSize]);
   var _LoadingComp = useComp(loadingText, LoadingComp);
   var _NoDataComp = useComp(noDataText, NoDataComp);
-  var orderLogic = (0,_order_logic__WEBPACK_IMPORTED_MODULE_11__.useOrderLogic)(table);
-  var expandColumnId = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(_expandColumnId, (_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.id);
+  var orderLogic = (0,_order_logic__WEBPACK_IMPORTED_MODULE_12__.useOrderLogic)(table);
+  var expandColumnId = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(_expandColumnId, (_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.id);
   var value = _objectSpread(_objectSpread({
     columnSort: columnSort,
     onColumnSortChanged: onColumnSortChanged,
@@ -40838,7 +40793,7 @@ var useCanHideColumns = function useCanHideColumns(hooks) {
     var disableHiding = instance.disableHiding,
       flatHeaders = instance.flatHeaders;
     flatHeaders.forEach(function (header) {
-      header.canHide = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(header.disableHiding === true ? false : undefined, disableHiding === true ? false : undefined, true);
+      header.canHide = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(header.disableHiding === true ? false : undefined, disableHiding === true ? false : undefined, true);
     });
   });
 };
@@ -40852,15 +40807,15 @@ var useComp = function useComp(text, Comp) {
 };
 var EmptyBody = function EmptyBody(_ref4) {
   var children = _ref4.children;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_3__.Flex, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_4__.Flex, {
     align_items: "center",
     width: "100%",
     padding_top: "04",
     padding_right: "05",
     padding_bottom: "04",
     padding_left: "05"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
-    color: "gray_11_50"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
+    color: "text_secondary"
   }, children));
 };
 
@@ -40957,13 +40912,16 @@ CustomizeButton.propTypes = {
 var PopoverContainer = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "PopoverContainer",
   componentId: "sc-1uptv2h-0"
-})(["box-shadow:", ";background:white;border-radius:4px;padding:4px 0;min-width:168px;max-width:540px;"], function (_ref) {
-  var box_shadow = _ref.theme.box_shadow;
-  return box_shadow.md;
+})(["box-shadow:", ";background:", ";border-radius:4px;padding:4px 0;min-width:168px;max-width:540px;"], function (_ref) {
+  var shadow = _ref.theme.shadow;
+  return shadow.medium;
+}, function (_ref2) {
+  var color = _ref2.theme.color;
+  return color.bg_elevated;
 });
-var Search = function Search(_ref2) {
-  var search = _ref2.search,
-    setSearch = _ref2.setSearch;
+var Search = function Search(_ref3) {
+  var search = _ref3.search,
+    setSearch = _ref3.setSearch;
   var _useTheme = (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.useTheme)(),
     spacing = _useTheme.spacing;
   var clearButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_5__.IconButton, {
@@ -40984,7 +40942,7 @@ var Search = function Search(_ref2) {
     leftInnerContent: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_4__.Icon, {
       size: "xs",
       name: "Search",
-      color: "gray_9"
+      color: "icon"
     }),
     rightInnerContent: clearButton,
     value: search,
@@ -40994,21 +40952,21 @@ var Search = function Search(_ref2) {
 var ItemsWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "ItemsWrapper",
   componentId: "sc-1uptv2h-1"
-})(["width:100%;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;", ""], function (_ref3) {
-  var $maxMenuHeight = _ref3.$maxMenuHeight,
-    scrollbars = _ref3.theme.scrollbars;
+})(["width:100%;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;", ""], function (_ref4) {
+  var $maxMenuHeight = _ref4.$maxMenuHeight,
+    scrollbars = _ref4.theme.scrollbars;
   if ($maxMenuHeight > 0) {
     return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["max-height:", ";overflow-y:auto;", ""], (0,_utils__WEBPACK_IMPORTED_MODULE_9__.toPixel)($maxMenuHeight), scrollbars.thin);
   }
 });
-var CustomizeButtonPopover = function CustomizeButtonPopover(_ref4) {
-  var searchable = _ref4.searchable,
-    search = _ref4.search,
-    setSearch = _ref4.setSearch,
-    _ref4$maxMenuHeight = _ref4.maxMenuHeight,
-    maxMenuHeight = _ref4$maxMenuHeight === void 0 ? 300 : _ref4$maxMenuHeight,
-    items = _ref4.items,
-    orderProps = _ref4.orderProps;
+var CustomizeButtonPopover = function CustomizeButtonPopover(_ref5) {
+  var searchable = _ref5.searchable,
+    search = _ref5.search,
+    setSearch = _ref5.setSearch,
+    _ref5$maxMenuHeight = _ref5.maxMenuHeight,
+    maxMenuHeight = _ref5$maxMenuHeight === void 0 ? 300 : _ref5$maxMenuHeight,
+    items = _ref5.items,
+    orderProps = _ref5.orderProps;
   var maxHeight = Number.parseInt(maxMenuHeight);
   var _maxMenuHeight = orderProps && (!maxHeight || maxHeight < 600) ? 600 : maxMenuHeight;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PopoverContainer, null, searchable && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Search, {
@@ -41022,8 +40980,8 @@ var CustomizeButtonPopover = function CustomizeButtonPopover(_ref4) {
     items: items
   })));
 };
-var CustomizeButtonWithPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_3__.withPopover)(function (_ref5) {
-  var popover = _ref5.popover;
+var CustomizeButtonWithPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_3__.withPopover)(function (_ref6) {
+  var popover = _ref6.popover;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_5__.IconButton, {
     onClick: popover.toggle,
     tooltip: "Customize columns",
@@ -41032,18 +40990,18 @@ var CustomizeButtonWithPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_3__.withPopove
 }, CustomizeButtonPopover, {
   placement: 'bottom'
 });
-var CustomizeButtonStaticItems = function CustomizeButtonStaticItems(_ref6) {
-  var items = _ref6.items;
+var CustomizeButtonStaticItems = function CustomizeButtonStaticItems(_ref7) {
+  var items = _ref7.items;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, items.map(function (c) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CustomizeButtonItem, _extends({
       key: c.id
     }, c));
   }));
 };
-var CustomizeButtonDraggableItems = function CustomizeButtonDraggableItems(_ref7) {
-  var items = _ref7.items,
-    orders = _ref7.orders,
-    moveColumn = _ref7.moveColumn;
+var CustomizeButtonDraggableItems = function CustomizeButtonDraggableItems(_ref8) {
+  var items = _ref8.items,
+    orders = _ref8.orders,
+    moveColumn = _ref8.moveColumn;
   var sections = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
     var _orders$pinned;
     return [((_orders$pinned = orders.pinned) === null || _orders$pinned === void 0 ? void 0 : _orders$pinned.length) && {
@@ -41099,25 +41057,25 @@ var CustomizeButtonDraggableItems = function CustomizeButtonDraggableItems(_ref7
     CustomDrag: CustomizeButtonDraggableItem
   });
 };
-var CustomizeButtonDraggableItem = function CustomizeButtonDraggableItem(_ref8) {
-  var Dragger = _ref8.Dragger,
-    isDragging = _ref8.isDragging,
-    itemProps = _objectWithoutProperties(_ref8, _excluded);
+var CustomizeButtonDraggableItem = function CustomizeButtonDraggableItem(_ref9) {
+  var Dragger = _ref9.Dragger,
+    isDragging = _ref9.isDragging,
+    itemProps = _objectWithoutProperties(_ref9, _excluded);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_input__WEBPACK_IMPORTED_MODULE_6__.DragDrop.DraggableItem, {
     Dragger: Dragger,
     isDragging: isDragging
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CustomizeButtonItem, itemProps));
 };
-var CustomizeButtonItem = function CustomizeButtonItem(_ref9) {
-  var id = _ref9.id,
-    name = _ref9.name,
-    canPin = _ref9.canPin,
-    isPinned = _ref9.isPinned,
-    togglePinned = _ref9.togglePinned,
-    canHide = _ref9.canHide,
-    isVisible = _ref9.isVisible,
-    toggleHidden = _ref9.toggleHidden,
-    className = _ref9.className;
+var CustomizeButtonItem = function CustomizeButtonItem(_ref10) {
+  var id = _ref10.id,
+    name = _ref10.name,
+    canPin = _ref10.canPin,
+    isPinned = _ref10.isPinned,
+    togglePinned = _ref10.togglePinned,
+    canHide = _ref10.canHide,
+    isVisible = _ref10.isVisible,
+    toggleHidden = _ref10.toggleHidden,
+    className = _ref10.className;
   var handlePinned = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function () {
     togglePinned(!isPinned);
   }, [isPinned, togglePinned]);
@@ -41126,7 +41084,7 @@ var CustomizeButtonItem = function CustomizeButtonItem(_ref9) {
   }, [isVisible, toggleHidden]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CustomizeButtonItemWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_8__.Label, {
     variant: "sm",
-    color: isVisible ? 'gray_11_50' : 'gray_9',
+    color: isVisible ? 'text_secondary' : 'text_disabled',
     "data-label": true,
     className: className
   }, name || id), canPin && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CustomizeButtonItemAction, {
@@ -41142,14 +41100,14 @@ var CustomizeButtonItem = function CustomizeButtonItem(_ref9) {
 var CustomizeButtonItemWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "CustomizeButtonItemWrapper",
   componentId: "sc-1uptv2h-2"
-})(["margin:0;padding:8px 16px;display:flex;align-items:center;gap:4px;min-width:230px;div[data-label]{margin-right:auto;}&:hover{background-color:", ";}"], function (_ref10) {
-  var color = _ref10.theme.color;
-  return color.gray_2;
+})(["margin:0;padding:8px 16px;display:flex;align-items:center;gap:4px;min-width:230px;div[data-label]{margin-right:auto;}&:hover{background-color:", ";}"], function (_ref11) {
+  var color = _ref11.theme.color;
+  return color.bg_fill_secondary;
 });
-var CustomizeButtonItemAction = function CustomizeButtonItemAction(_ref11) {
-  var onClick = _ref11.onClick,
-    tooltip = _ref11.tooltip,
-    icon = _ref11.icon;
+var CustomizeButtonItemAction = function CustomizeButtonItemAction(_ref12) {
+  var onClick = _ref12.onClick,
+    tooltip = _ref12.tooltip,
+    icon = _ref12.icon;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CustomizeButtonItemActionWrapper, {
     onClick: onClick
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_7__.Tooltip, {
@@ -41158,7 +41116,7 @@ var CustomizeButtonItemAction = function CustomizeButtonItemAction(_ref11) {
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_4__.Icon, {
     name: icon,
     size: "xs",
-    color: "gray_9"
+    color: "icon"
   })));
 };
 var CustomizeButtonItemActionWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
@@ -41724,7 +41682,7 @@ var HeaderCell = function HeaderCell(props) {
     compact: compact
   }), compact && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
     variant: "sm",
-    color: "gray_11",
+    color: "text",
     no_wrap: true
   }, name || id), canSort && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_sort_icon__WEBPACK_IMPORTED_MODULE_9__.SortIcon, {
     visible: !!iconVisible,
@@ -41758,7 +41716,7 @@ var HeaderCellContent = styled_components__WEBPACK_IMPORTED_MODULE_2___default()
   return color.bg_primary;
 }, function (_ref3) {
   var color = _ref3.theme.color;
-  return color.gray_2;
+  return color.table_cell_hover;
 }, function (_ref4) {
   var $isLastPinned = _ref4.$isLastPinned,
     color = _ref4.theme.color;
@@ -41779,7 +41737,7 @@ var HeaderCellResizer = styled_components__WEBPACK_IMPORTED_MODULE_2___default()
   if (props.$isResizing) {
     return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["&:after{content:\" \";display:block;width:2px;height:100%;background:", ";position:absolute;bottom:0;left:4px;}"], function (_ref5) {
       var color = _ref5.theme.color;
-      return color.blue_10;
+      return color.border_primary;
     });
   }
 });
@@ -41787,7 +41745,7 @@ var renderCellContent = function renderCellContent(column, type, props) {
   var content = column[type];
   if (lodash_isString__WEBPACK_IMPORTED_MODULE_0___default()(content)) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
     variant: "sm",
-    color: "gray_11",
+    color: "text",
     no_wrap: true
   }, content);
   return column.render(type, props);
@@ -41941,19 +41899,16 @@ var MenuButton = function MenuButton(props) {
 var StyledButton = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_icon_button__WEBPACK_IMPORTED_MODULE_4__.IconButton).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1oo76mu-0"
-})(["cursor:pointer;display:flex;position:absolute;top:50%;right:8px;transform:translateY(-50%);z-index:", ";width:16px;height:16px;background-color:", ";border-radius:4px;width:16px;height:16px;&:hover:not(:disabled){background-color:", ";}"], _constants__WEBPACK_IMPORTED_MODULE_6__.Z_INDEX.headerButton, function (_ref) {
-  var color = _ref.theme.color;
-  return color.gray_6;
-}, function (_ref2) {
-  var color = _ref2.theme.color;
-  return color.gray_6;
-});
+})(["cursor:pointer;display:flex;position:absolute;top:50%;right:8px;transform:translateY(-50%);z-index:", ";width:16px;height:16px;border-radius:4px;width:16px;height:16px;"], _constants__WEBPACK_IMPORTED_MODULE_6__.Z_INDEX.headerButton);
 var MenuWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
   displayName: "MenuWrapper",
   componentId: "sc-1oo76mu-1"
-})(["background:white;border-radius:4px;box-shadow:", ";"], function (_ref3) {
-  var box_shadow = _ref3.theme.box_shadow;
-  return box_shadow.md;
+})(["border-radius:4px;box-shadow:", ";background:", ";"], function (_ref) {
+  var shadow = _ref.theme.shadow;
+  return shadow.medium;
+}, function (_ref2) {
+  var color = _ref2.theme.color;
+  return color.bg_elevated;
 });
 var MenuPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_2__.withPopover)(MenuButton, function (p) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuWrapper, {
@@ -41969,16 +41924,16 @@ var Menu = styled_components__WEBPACK_IMPORTED_MODULE_1___default().ul.withConfi
 var MenuItem = styled_components__WEBPACK_IMPORTED_MODULE_1___default().li.withConfig({
   displayName: "MenuItem",
   componentId: "sc-1oo76mu-3"
-})(["list-style:none;&:hover{background-color:", ";}", ""], function (_ref4) {
-  var color = _ref4.theme.color;
-  return color.gray_2;
+})(["list-style:none;&:hover{background-color:", ";}", ""], function (_ref3) {
+  var color = _ref3.theme.color;
+  return color.bg_fill_secondary;
 }, function (props) {
-  return props.$separator && (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["padding:0;height:1px;background-color:", ";&:hover{background-color:", ";}"], function (_ref5) {
+  return props.$separator && (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["padding:0;height:1px;background-color:", ";&:hover{background-color:", ";}"], function (_ref4) {
+    var color = _ref4.theme.color;
+    return color.border;
+  }, function (_ref5) {
     var color = _ref5.theme.color;
-    return color.gray_4;
-  }, function (_ref6) {
-    var color = _ref6.theme.color;
-    return color.gray_4;
+    return color.border;
   });
 });
 var OrderColumn = function OrderColumn(props) {
@@ -41993,11 +41948,11 @@ var OrderColumn = function OrderColumn(props) {
     onClick: handleClick
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
     name: dir == 'back' ? 'ArrowLeft' : 'ArrowRight',
-    color: "gray_9",
+    color: "icon",
     size: "xs"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
     variant: "sm",
-    color: "gray_11_50"
+    color: "text"
   }, text));
 };
 var SortColumn = function SortColumn(props) {
@@ -42011,11 +41966,11 @@ var SortColumn = function SortColumn(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(FunctionWrapper, {
     onClick: handleClick
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_sort_icon__WEBPACK_IMPORTED_MODULE_7__.SortIcon, {
-    color: "gray_9",
+    color: "icon",
     reverse: sort != 'asc'
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
     variant: "sm",
-    color: "gray_11_50"
+    color: "text"
   }, text));
 };
 var PinColumn = function PinColumn(props) {
@@ -42031,11 +41986,11 @@ var PinColumn = function PinColumn(props) {
     onClick: handleClick
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
     name: isPinned ? 'Unpin' : 'Pin',
-    color: "gray_9",
+    color: "icon",
     size: "xs"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
     variant: "sm",
-    color: "gray_11_50"
+    color: "text"
   }, text));
 };
 var HideColumn = function HideColumn(props) {
@@ -42048,11 +42003,11 @@ var HideColumn = function HideColumn(props) {
     type: "checkbox"
   }, props)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
     name: "EyeOff",
-    color: "gray_9",
+    color: "icon",
     size: "xs"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
     variant: "sm",
-    color: "gray_11_50"
+    color: "text"
   }, "Hide column"));
 };
 var FunctionWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
@@ -42267,10 +42222,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "styled-components");
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../icon_button */ "./src/icon_button.js");
-/* harmony import */ var _input__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../input */ "./src/input/index.js");
-/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
-/* harmony import */ var _link__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../link */ "./src/link/index.js");
+/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../icon */ "./src/icon.js");
+/* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icon_button */ "./src/icon_button.js");
+/* harmony import */ var _input__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../input */ "./src/input/index.js");
+/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
 /* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
 /* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./context */ "./src/table/context.js");
 // LICENSE_CODE ZON
@@ -42323,7 +42278,7 @@ var Pagination = function Pagination(_ref) {
   });
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationWrapper, {
     className: className
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationItems, childProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationControlsWrapper, null, !!onDownload && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_3__.IconButton, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationItems, childProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationControlsWrapper, null, !!onDownload && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
     icon: "Download",
     onClick: onDownload,
     tooltip: downloadTooltip,
@@ -42337,7 +42292,7 @@ Pagination.propTypes = {
 var PaginationWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "PaginationWrapper",
   componentId: "sc-1rdn0jh-0"
-})(["display:flex;flex-direction:row;align-items:center;padding:12px 16px;gap:8px;"]);
+})(["display:flex;flex-direction:row;align-items:center;padding:14px 0;justify-content:space-between;"]);
 var PaginationControlsWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "PaginationControlsWrapper",
   componentId: "sc-1rdn0jh-1"
@@ -42364,25 +42319,20 @@ var PaginationControls = function PaginationControls(_ref2) {
   });
   var from = pageIndex * pageSize + 1;
   var to = Math.min((pageIndex + 1) * pageSize, total);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, opts.length > 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_input__WEBPACK_IMPORTED_MODULE_4__.Dropdown, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_6__.Flex, {
+    align_items: "center",
+    gap: "03"
+  }, opts.length > 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_input__WEBPACK_IMPORTED_MODULE_5__.Dropdown, {
     classNamePrefix: "uikit-table-pagination",
     value: sel,
     options: opts,
     onChange: handleChange,
-    menuPortalTarget: document.body
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex, {
-    align_items: "center",
-    column_gap: "0.2em"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_7__.Label, {
-    variant: "sm",
-    color: "gray_11_50"
-  }, from, "-", to), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_7__.Label, {
-    variant: "sm",
-    color: "gray_11_50"
-  }, "of"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_7__.Label, {
+    menuPortalTarget: document.body,
+    size: "sm"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_7__.Label, {
     variant: "sm",
-    color: "gray_11_50"
-  }, total)));
+    color: "text"
+  }, from, "-", to, " of ", total));
 };
 var PaginationItems = function PaginationItems(_ref3) {
   var pageIndex = _ref3.pageIndex,
@@ -42401,40 +42351,50 @@ var PaginationItems = function PaginationItems(_ref3) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationItemsWrapper, null, canPreviousPage && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PageLink, {
     onClick: function onClick() {
       return previousPage();
-    },
-    text: "Prev"
-  }), pages, canNextPage && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PageLink, {
+    }
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
+    name: "ChevronLeft",
+    size: "xs",
+    color: "icon"
+  })), pages, canNextPage && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PageLink, {
     onClick: function onClick() {
       return nextPage();
-    },
-    text: "Next"
-  }));
+    }
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
+    name: "ChevronRight",
+    size: "xs",
+    color: "icon"
+  })));
 };
 var PaginationItemsWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "PaginationItemsWrapper",
   componentId: "sc-1rdn0jh-2"
-})(["display:flex;flex-direction:row;align-items:center;gap:8px;"]);
-var PageLink = function PageLink(_ref4) {
-  var onClick = _ref4.onClick,
-    text = _ref4.text;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_link__WEBPACK_IMPORTED_MODULE_6__.Link, {
-    as: "div",
-    variant: "secondary",
-    size: "sm",
-    onClick: onClick,
-    text: String(text),
-    style: {
-      cursor: 'pointer'
-    }
-  });
-};
-var PageLabel = function PageLabel(_ref5) {
-  var text = _ref5.text;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_7__.Label, {
-    variant: "sm",
-    color: "gray_11_50"
-  }, text);
-};
+})(["display:flex;flex-direction:row;align-items:center;gap:2px;"]);
+var PageLink = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "PageLink",
+  componentId: "sc-1rdn0jh-3"
+})(["box-sizing:border-box;display:flex;width:28px;height:28px;padding:8px;flex-direction:column;justify-content:center;align-items:center;border-radius:4px;font-family:", ";font-size:", ";font-style:normal;font-weight:", ";line-height:", ";", ""], function (_ref4) {
+  var font_family = _ref4.theme.font_family;
+  return font_family.sans;
+}, function (_ref5) {
+  var font_size = _ref5.theme.font_size;
+  return font_size.sm;
+}, function (_ref6) {
+  var font_weight = _ref6.theme.font_weight;
+  return font_weight.regular;
+}, function (_ref7) {
+  var line_height = _ref7.theme.line_height;
+  return line_height.none;
+}, function (_ref8) {
+  var $ellipsis = _ref8.$ellipsis,
+    onClick = _ref8.onClick,
+    color = _ref8.theme.color;
+  if ($ellipsis) return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["color:", ";"], color.text);
+  if (onClick) {
+    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["cursor:pointer;color:", ";&:hover{background:", ";}"], color.text, color.bg_fill_secondary);
+  }
+  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["cursor:pointer;color:", ";background:", ";"], color.text_primary, color.bg_fill_primary_secondary);
+});
 var usePages = function usePages(opt) {
   return (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
     var pageIndex = opt.pageIndex,
@@ -42444,23 +42404,19 @@ var usePages = function usePages(opt) {
       pageCount = opt.pageCount;
     var currentPage = pageIndex + 1;
     var ellipsis = function ellipsis(key) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PageLabel, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PageLink, {
         key: key,
-        text: "..."
-      });
+        $ellipsis: true
+      }, "...");
     };
     var pageItem = function pageItem(page) {
-      if (page == currentPage) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PageLabel, {
-        key: page,
-        text: page
-      });
+      var onClick = page == currentPage ? undefined : function () {
+        return gotoPage(page - 1);
+      };
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PageLink, {
         key: page,
-        onClick: function onClick() {
-          return gotoPage(page - 1);
-        },
-        text: page
-      });
+        onClick: onClick
+      }, page);
     };
     if (pageCount <= 1) return null;
     var pages;
@@ -42850,7 +42806,7 @@ var TableRow = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.with
   }[$rowDensity] || '32';
 }, _table_cell__WEBPACK_IMPORTED_MODULE_3__.TableCellContent, function (_ref4) {
   var color = _ref4.theme.color;
-  return color.gray_2;
+  return color.table_cell_hover;
 });
 var RowWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().memo(function (props) {
   var _provided$draggablePr;
@@ -43158,19 +43114,22 @@ var RowMenuButton = styled_components__WEBPACK_IMPORTED_MODULE_1___default().but
   componentId: "sc-q7kjip-0"
 })(["box-sizing:border-box;min-width:180px;display:flex;align-items:center;padding:7px 12px;gap:10px;border:0 none;background-color:unset;white-space:nowrap;"]);
 RowMenuButton.displayName = 'RowMenuButton';
-var rowMenuStyle = {
-  backgroundColor: '#fff',
-  display: 'flex',
-  alignItems: 'center',
-  position: 'sticky',
-  right: 0,
-  overflow: 'visible'
-};
 var getRowMenuCellProps = function getRowMenuCellProps(props, _ref3) {
-  var cell = _ref3.cell;
-  if (cell.column.id == 'row_menu') return [props, {
-    style: rowMenuStyle
-  }];
+  var cell = _ref3.cell,
+    instance = _ref3.instance;
+  if (cell.column.id == 'row_menu') {
+    var _instance$theme;
+    return [props, {
+      style: {
+        backgroundColor: (_instance$theme = instance.theme) === null || _instance$theme === void 0 ? void 0 : _instance$theme.color.bg,
+        display: 'flex',
+        alignItems: 'center',
+        position: 'sticky',
+        right: 0,
+        overflow: 'visible'
+      }
+    }];
+  }
   return props;
 };
 var rowMenuColumn = {
@@ -43181,10 +43140,11 @@ var rowMenuColumn = {
   disableResizing: true,
   disablePinning: true,
   canEdit: false,
-  width: 48,
-  minWidth: 48,
-  maxWidth: 48,
-  internalActions: {}
+  width: 32,
+  minWidth: 32,
+  maxWidth: 32,
+  internalActions: {},
+  type: 'row_action'
 };
 var useRowMenu = function useRowMenu(hooks) {
   hooks.visibleColumns.push(function (columns) {
@@ -43369,7 +43329,7 @@ var SortIcon = function SortIcon(_ref) {
   var _ref$visible = _ref.visible,
     visible = _ref$visible === void 0 ? true : _ref$visible,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'blue_10' : _ref$color,
+    color = _ref$color === void 0 ? 'icon_primary' : _ref$color,
     reverse = _ref.reverse;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_1__.Icon, {
     size: "xs",
@@ -44007,7 +43967,7 @@ var TableCell = function TableCell(props) {
     'tableCell--is-expanded': canExpand && isExpanded
   }), cellProps.className);
   var Wrapper = expandColumnId == columnId && (canExpand && isExpanded || depth > 0) ? ExpandedTableCellContent : TableCellContent;
-  var Content = isEditable ? EditableCellContent : CellContent;
+  var Content = type == 'row_action' ? RowActionCellContent : isEditable ? EditableCellContent : CellContent;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Wrapper, _extends({}, cellProps, {
     $isLastPinned: isLastPinned
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Content, {
@@ -44026,7 +43986,7 @@ var TableCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default().
   componentId: "sc-1gdt4qg-0"
 })(["background-color:", ";border-right:", ";"], function (_ref) {
   var color = _ref.theme.color;
-  return color.bg_primary;
+  return color.bg;
 }, function (_ref2) {
   var $isLastPinned = _ref2.$isLastPinned,
     color = _ref2.theme.color;
@@ -44037,31 +43997,32 @@ var ExpandedTableCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___de
   componentId: "sc-1gdt4qg-1"
 })(["position:relative;&::before{content:'';position:absolute;left:0;top:0;height:calc(100% + 1px);border-left:4px solid ", ";}"], function (_ref3) {
   var color = _ref3.theme.color;
-  return color.blue_6;
+  return color.table_nesting;
 });
+var RowActionCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
+  displayName: "RowActionCellContent",
+  componentId: "sc-1gdt4qg-2"
+})(["box-sizing:border-box;display:flex;align-items:center;padding:4px;"]);
 var CellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
   displayName: "CellContent",
-  componentId: "sc-1gdt4qg-2"
-})(["box-sizing:border-box;display:flex;align-items:center;padding:4px 16px;overflow:clip;", ""], function (props) {
-  return props.$type == 'number' ? 'text-align: right;' : null;
+  componentId: "sc-1gdt4qg-3"
+})(["box-sizing:border-box;display:flex;align-items:center;padding:4px 16px;overflow:clip;", ""], function (_ref4) {
+  var $type = _ref4.$type;
+  return $type == 'number' ? 'text-align: right;' : null;
 });
 var EditableCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(CellContent).withConfig({
   displayName: "EditableCellContent",
-  componentId: "sc-1gdt4qg-3"
-})(["padding:3px 15px;border:1px solid transparent;&:hover{background-color:", ";border-color:", ";}", ""], function (_ref4) {
-  var color = _ref4.theme.color;
-  return color.white;
-}, function (_ref5) {
+  componentId: "sc-1gdt4qg-4"
+})(["padding:3px 15px;border:1px solid transparent;&:hover{background-color:", ";border-color:", ";}", ""], function (_ref5) {
   var color = _ref5.theme.color;
-  return color.gray_9;
-}, function (props) {
-  return props.$isEditing ? (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["background-color:", ";border:1px solid ", " !important;box-shadow:inset 0px 0px 0px 3px rgba(0,106,220,0.4);"], function (_ref6) {
-    var color = _ref6.theme.color;
-    return color.white;
-  }, function (_ref7) {
-    var color = _ref7.theme.color;
-    return color.blue_11;
-  }) : undefined;
+  return color.table_cell_hover;
+}, function (_ref6) {
+  var color = _ref6.theme.color;
+  return color.border_accent;
+}, function (_ref7) {
+  var $isEditing = _ref7.$isEditing,
+    color = _ref7.theme.color;
+  return $isEditing ? (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["background-color:", " !important;;border:1px solid ", " !important;outline:1.5px solid ", ";"], color.bg, color.border_primary, color.border_primary) : undefined;
 });
 
 /***/ }),
@@ -44811,8 +44772,6 @@ var color = {
   gray_11_75: '#202425',
   gray_12: '#151718',
   black: '#000000',
-  black_1: '#303B45',
-  // XXX alexanderse: not exists
   aqua_9: '#3A3F42',
   aqua_10: '#15C1E6',
   purple_9: '#D4D0FF',
@@ -44821,8 +44780,6 @@ var color = {
   mint_10: '#4DD1B5'
 };
 var semanticLight = {
-  bg_primary: color.white,
-  // XXX alexanderse: remove
   bg: color.white,
   bg_elevated: color.white,
   bg_fill_primary: color.blue_11,
@@ -44845,9 +44802,10 @@ var semanticLight = {
   border_primary: color.blue_11,
   border_primary_hover: color.blue_10,
   border_error: color.red_9,
+  border_info: color.gray_8,
   text: color.gray_11_75,
   text_secondary: color.gray_11_50,
-  text_teritary: color.gray_11_25,
+  text_tertiary: color.gray_11_25,
   text_quaternary: color.gray_11,
   text_disabled: color.gray_9,
   text_primary: color.blue_11,
@@ -44947,8 +44905,6 @@ var lightTheme = _objectSpread(_objectSpread({}, baseTheme), {}, {
   color: _objectSpread(_objectSpread(_objectSpread({}, color), semanticLight), componentLight)
 });
 var semanticDark = _objectSpread(_objectSpread({}, semanticLight), {}, {
-  bg_primary: '#151718',
-  // XXX alexanderse: remove
   bg: color.gray_12,
   bg_elevated: color.gray_11_75,
   bg_fill_primary: color.blue_9,
@@ -44971,9 +44927,10 @@ var semanticDark = _objectSpread(_objectSpread({}, semanticLight), {}, {
   border_primary: color.blue_8,
   border_primary_hover: color.blue_9,
   border_error: color.red_8,
+  border_info: color.gray_11,
   text: color.gray_6,
   text_secondary: color.gray_7,
-  text_teritary: color.gray_8,
+  text_tertiary: color.gray_8,
   text_quaternary: color.gray_9,
   text_disabled: color.gray_11,
   text_primary: color.blue_8,
@@ -47465,7 +47422,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-var colorNames = Object.keys(_themes__WEBPACK_IMPORTED_MODULE_2__.color);
+var colorNames = Object.keys(_themes__WEBPACK_IMPORTED_MODULE_2__.lightTheme.color);
 var iconNames = Object.keys(_icons__WEBPACK_IMPORTED_MODULE_0__["default"]);
 var toPixel = function toPixel(value) {
   return "".concat(value, "px");
@@ -47480,13 +47437,15 @@ function fromTheme(propName, defaultValue) {
       props = _objectWithoutProperties(_ref, _excluded);
     var value = (_ref2 = (_props$propName = props[propName]) !== null && _props$propName !== void 0 ? _props$propName : props["$".concat(propName)]) !== null && _ref2 !== void 0 ? _ref2 : defaultValue;
     if (value != null) {
+      var _theme$shadow$value;
       if (propName.indexOf('padding') == 0 || propName.indexOf('margin') == 0 || ['gap', 'rowGap', 'columnGap'].includes(propName)) {
         var _theme$spacing$value;
         return (_theme$spacing$value = theme.spacing[value]) !== null && _theme$spacing$value !== void 0 ? _theme$spacing$value : value;
       }
-      if (['font_family', 'font_weight', 'font_size', 'line_height', 'letter_spacing', 'color', 'box_shadow'].includes(propName)) {
+      if (['font_family', 'font_weight', 'font_size', 'line_height', 'letter_spacing', 'color'].includes(propName)) {
         return theme[propName][value];
       }
+      if (propName == 'box_shadow') return (_theme$shadow$value = theme.shadow[value]) !== null && _theme$shadow$value !== void 0 ? _theme$shadow$value : theme.box_shadow[value];
     }
     return value;
   };