npm - @luminati-io/uikit - Versions diffs - 5.2.9 → 5.2.11-beta.0 - Mend

@luminati-io/uikit 5.2.9 → 5.2.11-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/umd/uikit.development.js +525 -482
package/dist/umd/uikit.development.js.map +1 -1
package/dist/umd/uikit.production.min.js +24 -24
package/package.json +1 -1

package/dist/umd/uikit.development.js CHANGED Viewed

@@ -33488,25 +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,
-    font_family = _useTheme.font_family,
-    font_weight = _useTheme.font_weight,
-    font_size = _useTheme.font_size,
-    line_height = _useTheme.line_height;
-  var HeaderXl = {
+  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 = {
+  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: '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, {
@@ -33519,21 +33526,24 @@ var useStyles = function useStyles(_ref) {
           md: 40,
           lg: 48
         };
-        var borderColor = color.gray_7;
+        var borderColor = color.border;
         var boxShadow = 'none';
-        var foreColor = color.gray_11_50;
-        var backgroundColor = color.white;
+        var foreColor = color.text_teritary;
+        var backgroundColor = color.bg;
         var cursor = 'text';
         if (isDisabled) {
-          foreColor = color.gray_9;
-          borderColor = color.gray_6;
-          backgroundColor = color.gray_2;
+          foreColor = color.text_disabled;
+          borderColor = color.border_disabled;
+          backgroundColor = color.bg_fill_teritary;
           cursor = 'default';
-        } else if (selectProps['aria-invalid']) borderColor = color.red_11;else if (isFocused) {
-          borderColor = color.blue_11;
-          boxShadow = "0px 0px 0px 2px rgba(0, 106, 220, 0.4)";
+        } else if (selectProps['aria-invalid']) borderColor = color.border_error;else if (isFocused) {
+          borderColor = color.border_primary;
+          boxShadow = shadow.primary;
         }
-        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), LabelSm), {}, {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelSm), {}, {
+          '&:hover': _objectSpread(_objectSpread({}, baseStyles['&:hover']), {}, {
+            borderColor: color.border_accent
+          }),
           minHeight: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(height[size] || height.sm),
           padding: "".concat(_shared__WEBPACK_IMPORTED_MODULE_3__.inputVerticalPadding, "px ").concat(_shared__WEBPACK_IMPORTED_MODULE_3__.inputHorizontalPadding, "px"),
           color: foreColor,
@@ -33550,7 +33560,7 @@ var useStyles = function useStyles(_ref) {
       },
       placeholder: function placeholder(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          color: color.gray_11
+          color: color.text_quaternary
         });
       },
       menu: function menu(baseStyles) {
@@ -33581,64 +33591,63 @@ var useStyles = function useStyles(_ref) {
         });
       },
       groupHeading: function groupHeading(baseStyles) {
-        return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          /* Label/base */
-          fontFamily: font_family.sans,
-          fontStyle: 'normal',
-          fontWeight: font_weight.regular,
-          fontSize: font_size.md,
-          lineHeight: line_height.none,
-          color: color.gray_11,
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelBase), {}, {
+          color: color.text_quaternary,
           textTransform: undefined
         });
       },
       option: function option(baseStyles, _ref3) {
         var isFocused = _ref3.isFocused,
           isDisabled = _ref3.isDisabled;
-        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), LabelSm), {}, {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelSm), {}, {
           display: 'flex',
           alignItems: 'center',
           gap: '8px',
           height: '40px',
-          backgroundColor: isFocused ? color.gray_2 : undefined,
-          color: isDisabled ? color.gray_9 : color.gray_11_50,
+          backgroundColor: isFocused ? color.bg_fill_secondary : undefined,
+          color: isDisabled ? color.text_disabled : color.text_teritary,
           '&:hover': {
-            backgroundColor: color.gray_2
+            backgroundColor: color.bg_fill_secondary
           }
         });
       },
       multiValue: function multiValue(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          backgroundColor: undefined,
-          border: "1px solid ".concat(color.gray_6),
+          backgroundColor: color.bg,
+          border: "1px solid ".concat(color.border),
           borderRadius: '4px'
         });
       },
       multiValueLabel: function multiValueLabel(baseStyles) {
-        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), LabelSm), {}, {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelSm), {}, {
           borderRadius: '4px',
           padding: '4px 4px 4px 8px',
-          color: color.gray_11_25
+          color: color.text
         });
       },
       multiValueRemove: function multiValueRemove(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          borderRadius: '4px',
-          color: color.gray_11,
+          borderRadius: '16px',
           cursor: 'pointer',
+          backgroundColor: color.icon_button_bg,
+          color: color.icon_button_icon_default,
+          ':active': {
+            color: color.icon_button_icon_active,
+            backgroundColor: color.icon_button_bg_active
+          },
           ':hover': {
-            backgroundColor: undefined,
-            color: color.gray_11_50
+            color: color.icon_button_icon_hover,
+            backgroundColor: color.icon_button_bg_hover
           }
         });
       },
       noOptionsMessage: function noOptionsMessage(baseStyles) {
-        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), HeaderXl), {}, {
-          color: color.gray_9
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), headerXl), {}, {
+          color: color.text_quaternary
         });
       }
     });
-  }, [styles, size, color, font_family, font_weight, font_size, line_height]);
+  }, [styles, size, theme]);
 };
 /***/ }),
@@ -33804,9 +33813,11 @@ var CompareToCalendar = function CompareToCalendar(props) {
     gap: "04"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
     icon: "ChevronLeft",
-    variant: "ghost",
+    size: "xs",
     onClick: onBack
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_7__.Header, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_7__.Label, {
+    variant: "lg",
+    color: "text",
     no_wrap: true
   }, "Compare to date")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_date_picker__WEBPACK_IMPORTED_MODULE_8__.StyledDayPicker, {
     fixedWeeks: true,
@@ -34037,12 +34048,15 @@ var borderRadius = '4px';
 var DayPickerWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
   displayName: "DayPickerWrapper",
   componentId: "sc-1gurvxq-0"
-})(["margin:0;padding:", " 0;box-sizing:border-box;background:white;border-radius:4px;box-shadow:", ";"], function (_ref3) {
+})(["margin:0;padding:", " 0;box-sizing:border-box;background:", ";border-radius:4px;box-shadow:", ";"], function (_ref3) {
   var spacing = _ref3.theme.spacing;
   return spacing['02'];
 }, function (_ref4) {
-  var box_shadow = _ref4.theme.box_shadow;
-  return box_shadow.md;
+  var color = _ref4.theme.color;
+  return color.bg_elevated;
+}, function (_ref5) {
+  var shadow = _ref5.theme.shadow;
+  return shadow.medium;
 });
 var StyledDayPicker = function StyledDayPicker(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(DayPickerStyles, _extends({}, props, {
@@ -34055,69 +34069,72 @@ var StyledDayPicker = function StyledDayPicker(props) {
 var DayPickerStyles = styled_components__WEBPACK_IMPORTED_MODULE_3___default()(react_day_picker__WEBPACK_IMPORTED_MODULE_2__.DayPicker).withConfig({
   displayName: "DayPickerStyles",
   componentId: "sc-1gurvxq-1"
-})([".rdp-months{display:flex;}.rdp-month{padding:", " ", ";}.rdp-caption{display:flex;flex-direction:row;align-items:center;padding:", " ", ";gap:10px;}.rdp-caption_start:not(.rdp-caption_end){border-right:1px solid ", ";.rdp-caption{flex-direction:row-reverse;}}.rdp-caption_label{width:100%;text-align:center;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";}.rdp-nav{display:flex;flex-direction:row;gap:10px;}.rdp-nav_button{display:flex;align-items:center;justify-content:center;border:0 none;border-radius:4px;cursor:pointer;width:20px;height:20px;background-color:", ";.rdp-nav_icon{color:", ";}&:hover:not(:disabled){background-color:", ";}&:active:not(:disabled){background-color:", ";.rdp-nav_icon{color:", ";}}&:disabled{.rdp-nav_icon{color:", ";}cursor:not-allowed;}}.rdp-table{border-collapse:collapse;}.rdp-head_cell{box-sizing:border-box;min-width:32px;max-width:32px;height:32px;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";}.rdp-cell{padding:0;}"], function (_ref5) {
-  var spacing = _ref5.theme.spacing;
-  return spacing['03'];
-}, function (_ref6) {
+})([".rdp-months{display:flex;}.rdp-month{padding:", " ", ";}.rdp-caption{display:flex;flex-direction:row;align-items:center;padding:", " ", ";gap:10px;}.rdp-caption_start:not(.rdp-caption_end){border-right:1px solid ", ";.rdp-caption{flex-direction:row-reverse;}}.rdp-caption_label{width:100%;text-align:center;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";}.rdp-nav{display:flex;flex-direction:row;gap:10px;}.rdp-nav_button{display:flex;align-items:center;justify-content:center;border:0 none;border-radius:4px;cursor:pointer;width:20px;height:20px;background-color:", ";.rdp-nav_icon{color:", ";}&:hover:not(:disabled){background-color:", ";.rdp-nav_icon{color:", ";}}&:active:not(:disabled){background-color:", ";.rdp-nav_icon{color:", ";}}&:disabled{.rdp-nav_icon{color:", ";}cursor:not-allowed;}}.rdp-table{border-collapse:collapse;}.rdp-head_cell{box-sizing:border-box;min-width:32px;max-width:32px;height:32px;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";}.rdp-cell{padding:0;}"], function (_ref6) {
   var spacing = _ref6.theme.spacing;
-  return spacing['04'];
+  return spacing['03'];
 }, function (_ref7) {
   var spacing = _ref7.theme.spacing;
-  return spacing['03'];
+  return spacing['04'];
 }, function (_ref8) {
   var spacing = _ref8.theme.spacing;
-  return spacing['04'];
+  return spacing['03'];
 }, function (_ref9) {
-  var color = _ref9.theme.color;
-  return color.gray_4;
+  var spacing = _ref9.theme.spacing;
+  return spacing['04'];
 }, function (_ref10) {
-  var font_family = _ref10.theme.font_family;
-  return font_family.sans;
+  var color = _ref10.theme.color;
+  return color.border_secondary;
 }, function (_ref11) {
-  var font_weight = _ref11.theme.font_weight;
-  return font_weight.regular;
+  var font_family = _ref11.theme.font_family;
+  return font_family.sans;
 }, function (_ref12) {
-  var font_size = _ref12.theme.font_size;
-  return font_size.sm;
+  var font_weight = _ref12.theme.font_weight;
+  return font_weight.regular;
 }, function (_ref13) {
-  var line_height = _ref13.theme.line_height;
-  return line_height.none;
+  var font_size = _ref13.theme.font_size;
+  return font_size.sm;
 }, function (_ref14) {
-  var color = _ref14.theme.color;
-  return color.gray_11_50;
+  var line_height = _ref14.theme.line_height;
+  return line_height.none;
 }, function (_ref15) {
   var color = _ref15.theme.color;
-  return color.white;
+  return color.text_secondary;
 }, function (_ref16) {
   var color = _ref16.theme.color;
-  return color.gray_9;
+  return color.icon_button_bg;
 }, function (_ref17) {
   var color = _ref17.theme.color;
-  return color.gray_2;
+  return color.icon_button_icon_default;
 }, function (_ref18) {
   var color = _ref18.theme.color;
-  return color.blue_4;
+  return color.icon_button_bg_hover;
 }, function (_ref19) {
   var color = _ref19.theme.color;
-  return color.blue_11;
+  return color.icon_button_icon_hover;
 }, function (_ref20) {
   var color = _ref20.theme.color;
-  return color.gray_7;
+  return color.icon_button_bg_active;
 }, function (_ref21) {
-  var font_family = _ref21.theme.font_family;
-  return font_family.sans;
+  var color = _ref21.theme.color;
+  return color.icon_button_icon_active;
 }, function (_ref22) {
-  var font_weight = _ref22.theme.font_weight;
-  return font_weight.regular;
+  var color = _ref22.theme.color;
+  return color.icon_button_icon_disabled;
 }, function (_ref23) {
-  var font_size = _ref23.theme.font_size;
-  return font_size.xs;
+  var font_family = _ref23.theme.font_family;
+  return font_family.sans;
 }, function (_ref24) {
-  var line_height = _ref24.theme.line_height;
-  return line_height.none;
+  var font_weight = _ref24.theme.font_weight;
+  return font_weight.regular;
 }, function (_ref25) {
-  var color = _ref25.theme.color;
-  return color.gray_11;
+  var font_size = _ref25.theme.font_size;
+  return font_size.xs;
+}, function (_ref26) {
+  var line_height = _ref26.theme.line_height;
+  return line_height.none;
+}, function (_ref27) {
+  var color = _ref27.theme.color;
+  return color.text_quaternary;
 });
 var Day = function Day(props) {
   var buttonRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
@@ -34137,76 +34154,76 @@ Day.displayName = 'Day';
 var DayWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
   displayName: "DayWrapper",
   componentId: "sc-1gurvxq-2"
-})(["padding:0;background-color:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";.rdp-day{display:flex;flex-direction:column;justify-content:center;align-items:center;width:32px;height:32px;box-sizing:border-box;border-radius:", ";border:1px solid ", ";background-color:", ";cursor:pointer;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";&:hover:not(:disabled){border:1px solid ", ";}&:disabled{color:", ";cursor:not-allowed;}}.rdp-day_today{color:", ";font-weight:", ";}.rdp-day_selected{background-color:", ";border:1px solid ", ";color:", ";}.rdp-day_range_middle{background-color:", ";border:1px solid ", ";color:", ";&.rdp-day_today{color:", ";}}"], function (_ref26) {
-  var $mod = _ref26.$mod,
-    color = _ref26.theme.color;
-  return $mod.selected ? color.blue_3 : color.white;
-}, function (_ref27) {
-  var $mod = _ref27.$mod;
-  return $mod.range_middle || $mod.range_end && !$mod.range_start ? '0' : borderRadius;
-}, function (_ref28) {
-  var $mod = _ref28.$mod;
-  return $mod.range_middle || $mod.range_end && !$mod.range_start ? '0' : borderRadius;
+})(["padding:0;background-color:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";.rdp-day{display:flex;flex-direction:column;justify-content:center;align-items:center;width:32px;height:32px;box-sizing:border-box;border-radius:", ";border:1px solid ", ";background-color:", ";cursor:pointer;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";&:hover:not(:disabled){border:1px solid ", ";}&:disabled{color:", ";cursor:not-allowed;}}.rdp-day_today{color:", ";font-weight:", ";}.rdp-day_selected{background-color:", ";border:1px solid ", ";color:", ";}.rdp-day_range_middle{background-color:", ";border:1px solid ", ";color:", ";&.rdp-day_today{color:", ";}}"], function (_ref28) {
+  var $mod = _ref28.$mod,
+    color = _ref28.theme.color;
+  return $mod.selected ? color.bg_fill_primary_hover : color.bg_elevated;
 }, function (_ref29) {
   var $mod = _ref29.$mod;
-  return $mod.range_middle || $mod.range_start && !$mod.range_end ? '0' : borderRadius;
+  return $mod.range_middle || $mod.range_end && !$mod.range_start ? '0' : borderRadius;
 }, function (_ref30) {
   var $mod = _ref30.$mod;
+  return $mod.range_middle || $mod.range_end && !$mod.range_start ? '0' : borderRadius;
+}, function (_ref31) {
+  var $mod = _ref31.$mod;
   return $mod.range_middle || $mod.range_start && !$mod.range_end ? '0' : borderRadius;
-}, borderRadius, function (_ref31) {
-  var color = _ref31.theme.color;
-  return color.white;
 }, function (_ref32) {
-  var color = _ref32.theme.color;
-  return color.white;
-}, function (_ref33) {
-  var font_family = _ref33.theme.font_family;
-  return font_family.sans;
+  var $mod = _ref32.$mod;
+  return $mod.range_middle || $mod.range_start && !$mod.range_end ? '0' : borderRadius;
+}, borderRadius, function (_ref33) {
+  var color = _ref33.theme.color;
+  return color.bg_elevated;
 }, function (_ref34) {
-  var font_weight = _ref34.theme.font_weight;
-  return font_weight.regular;
+  var color = _ref34.theme.color;
+  return color.bg_elevated;
 }, function (_ref35) {
-  var font_size = _ref35.theme.font_size;
-  return font_size.xs;
+  var font_family = _ref35.theme.font_family;
+  return font_family.sans;
 }, function (_ref36) {
-  var line_height = _ref36.theme.line_height;
-  return line_height.none;
+  var font_weight = _ref36.theme.font_weight;
+  return font_weight.regular;
 }, function (_ref37) {
-  var color = _ref37.theme.color;
-  return color.gray_11_50;
+  var font_size = _ref37.theme.font_size;
+  return font_size.xs;
 }, function (_ref38) {
-  var color = _ref38.theme.color;
-  return color.blue_10;
+  var line_height = _ref38.theme.line_height;
+  return line_height.none;
 }, function (_ref39) {
   var color = _ref39.theme.color;
-  return color.gray_7;
+  return color.text_secondary;
 }, function (_ref40) {
   var color = _ref40.theme.color;
-  return color.blue_11;
+  return color.border_primary_hover;
 }, function (_ref41) {
-  var font_weight = _ref41.theme.font_weight;
-  return font_weight.semibold;
+  var color = _ref41.theme.color;
+  return color.text_disabled;
 }, function (_ref42) {
   var color = _ref42.theme.color;
-  return color.blue_10;
+  return color.text_primary;
 }, function (_ref43) {
-  var color = _ref43.theme.color;
-  return color.blue_10;
+  var font_weight = _ref43.theme.font_weight;
+  return font_weight.semibold;
 }, function (_ref44) {
   var color = _ref44.theme.color;
-  return color.white;
+  return color.bg_fill_primary_hover;
 }, function (_ref45) {
   var color = _ref45.theme.color;
-  return color.blue_3;
+  return color.bg_fill_primary_hover;
 }, function (_ref46) {
   var color = _ref46.theme.color;
-  return color.blue_3;
+  return color.text_white;
 }, function (_ref47) {
   var color = _ref47.theme.color;
-  return color.gray_11_50;
+  return color.bg_fill_primary_hover;
 }, function (_ref48) {
   var color = _ref48.theme.color;
-  return color.blue_11;
+  return color.bg_fill_primary_hover;
+}, function (_ref49) {
+  var color = _ref49.theme.color;
+  return color.text_secondary;
+}, function (_ref50) {
+  var color = _ref50.theme.color;
+  return color.text_primary;
 });
 var getDateText = function getDateText(props) {
   var value = props.value,
@@ -34695,7 +34712,7 @@ var ClearIndicator = function ClearIndicator(_ref) {
     height: "18px",
     viewBox: ic.viewBox,
     style: {
-      color: color.gray_9,
+      color: color.icon,
       cursor: 'pointer'
     }
   }, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("use", {
@@ -34945,7 +34962,7 @@ var DropdownIndicator = function DropdownIndicator(_ref) {
     height: "18px",
     viewBox: ic.viewBox,
     style: {
-      color: color.gray_9,
+      color: isDisabled ? color.icon_disabled : color.icon,
       cursor: isDisabled ? 'default' : 'pointer'
     }
   }, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("use", {
@@ -35128,8 +35145,8 @@ var StyledItem = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_menu_
   var selected = _ref.selected,
     $focused = _ref.$focused,
     color = _ref.theme.color;
-  if (selected) return color.blue_3;
-  if ($focused) return color.gray_2;
+  if (selected) return color.bg_fill_primary_secondary;
+  if ($focused) return color.bg_fill_secondary;
 });
 /***/ }),
@@ -35173,14 +35190,20 @@ 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,
-    box_shadow = _useTheme.box_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: '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, {
       control: function control(baseStyles, _ref2) {
@@ -35192,29 +35215,26 @@ var useStyles = function useStyles(_ref) {
           md: 40,
           lg: 48
         };
-        var borderColor = color.gray_7;
+        var borderColor = color.border;
         var boxShadow = 'none';
-        var foreColor = color.gray_11_50;
-        var backgroundColor = color.white;
+        var foreColor = color.text_teritary;
+        var backgroundColor = color.bg;
         var cursor = 'text';
         if (isDisabled) {
-          foreColor = color.gray_9;
-          borderColor = color.gray_6;
-          backgroundColor = color.gray_2;
+          foreColor = color.text_disabled;
+          borderColor = color.border_disabled;
+          backgroundColor = color.bg_fill_teritary;
           cursor = 'default';
-        } else if (selectProps['aria-invalid']) borderColor = color.red_11;else if (isFocused) {
-          borderColor = color.blue_11;
-          boxShadow = "0px 0px 0px 2px rgba(0, 106, 220, 0.4)";
+        } else if (selectProps['aria-invalid']) borderColor = color.border_error;else if (isFocused) {
+          borderColor = color.border_primary;
+          boxShadow = shadow.primary;
         }
-        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelSm), {}, {
+          '&:hover': _objectSpread(_objectSpread({}, baseStyles['&:hover']), {}, {
+            borderColor: color.border_accent
+          }),
           minHeight: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(height[size] || height.sm),
           padding: "".concat(_shared__WEBPACK_IMPORTED_MODULE_4__.inputVerticalPadding, "px ").concat(_shared__WEBPACK_IMPORTED_MODULE_4__.inputHorizontalPadding, "px"),
-          /* Label/sm */
-          fontFamily: font_family.sans,
-          fontStyle: 'normal',
-          fontWeight: font_weight.regular,
-          fontSize: font_size.sm,
-          lineHeight: line_height.none,
           color: foreColor,
           backgroundColor: backgroundColor,
           borderColor: borderColor,
@@ -35229,7 +35249,7 @@ var useStyles = function useStyles(_ref) {
       },
       placeholder: function placeholder(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          color: color.gray_11
+          color: color.text_quaternary
         });
       },
       indicatorsContainer: function indicatorsContainer(baseStyles) {
@@ -35245,9 +35265,9 @@ var useStyles = function useStyles(_ref) {
           minWidth: 'fit-content',
           maxWidth: '540px',
           width: '100%',
-          backgroundColor: color.white,
+          backgroundColor: color.bg_elevated,
           borderRadius: spacing['02'],
-          boxShadow: box_shadow.md,
+          boxShadow: shadow.medium,
           zIndex: menuPortalTarget ? baseStyles.zIndex : _constants__WEBPACK_IMPORTED_MODULE_3__.Z_INDEX.dropdown
         });
       },
@@ -35256,45 +35276,49 @@ var useStyles = function useStyles(_ref) {
           zIndex: _constants__WEBPACK_IMPORTED_MODULE_3__.Z_INDEX.dropdown
         });
       },
+      singleValue: function singleValue(baseStyles) {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelSm), {}, {
+          color: color.text
+        });
+      },
       multiValue: function multiValue(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          backgroundColor: color.gray_3,
-          borderRadius: spacing['02']
+          backgroundColor: color.bg,
+          border: "1px solid ".concat(color.border),
+          borderRadius: '4px'
         });
       },
       multiValueLabel: function multiValueLabel(baseStyles) {
-        return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          /* Label/sm */
-          fontFamily: font_family.sans,
-          fontStyle: 'normal',
-          fontWeight: font_weight.regular,
-          fontSize: font_size.sm,
-          lineHeight: line_height.none,
-          color: color.gray_11_25,
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelSm), {}, {
+          color: color.text,
           paddingLeft: spacing['02'],
           paddingRight: spacing['00']
         });
       },
       multiValueRemove: function multiValueRemove(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          borderRadius: spacing['02'],
-          color: color.gray_11,
+          borderRadius: '16px',
           cursor: 'pointer',
+          backgroundColor: color.icon_button_bg,
+          color: color.icon_button_icon_default,
+          ':active': {
+            color: color.icon_button_icon_active,
+            backgroundColor: color.icon_button_bg_active
+          },
           ':hover': {
-            backgroundColor: color.gray_3,
-            color: color.gray_11_50
+            color: color.icon_button_icon_hover,
+            backgroundColor: color.icon_button_bg_hover
           }
         });
       },
-      option: function option(baseStyles, state) {
-        var backgroundColor = baseStyles.backgroundColor;
-        if (state.selected) backgroundColor = color.blue_3;
+      option: function option(baseStyles, _ref3) {
+        var selected = _ref3.selected;
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          backgroundColor: backgroundColor
+          backgroundColor: selected ? color.bg_fill_primary_secondary : baseStyles.backgroundColor
         });
       }
     });
-  }, [styles, size, menuPortalTarget, color, spacing, line_height, font_size, font_weight, font_family, box_shadow]);
+  }, [styles, size, menuPortalTarget, theme]);
 };
 /***/ }),
@@ -35449,7 +35473,6 @@ var isValueChild = function isValueChild(child) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   ERROR_COLOR: () => (/* binding */ ERROR_COLOR),
 /* harmony export */   FILE_STATUS: () => (/* binding */ FILE_STATUS)
 /* harmony export */ });
 // LICENSE_CODE ZON
@@ -35462,7 +35485,6 @@ var FILE_STATUS = {
   SUCCESS: 'success',
   ERROR: 'error'
 };
-var ERROR_COLOR = 'red_10';
 /***/ }),
@@ -35627,11 +35649,16 @@ var border = function border(color) {
 var UploadBaseContainer = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
   displayName: "UploadBaseContainer",
   componentId: "sc-1e3miai-0"
-})(["background-image:", ";&:hover{cursor:pointer;}border-radius:4px;"], function (_ref) {
+})(["background-image:", ";background-color:", ";&:hover{cursor:pointer;}border-radius:4px;"], function (_ref) {
   var $isHovered = _ref.$isHovered,
     $invalid = _ref.$invalid,
     color = _ref.theme.color;
-  return border($invalid ? color.red_11 : $isHovered ? color.blue_11 : color.gray_6);
+  return border($invalid ? color.border_error : $isHovered ? color.border_primary : color.border);
+}, function (_ref2) {
+  var $isHovered = _ref2.$isHovered,
+    $invalid = _ref2.$invalid,
+    color = _ref2.theme.color;
+  return $invalid ? color.bg : $isHovered ? color.bg_fill_primary_secondary : color.bg;
 });
 var UploadBase = function UploadBase(props) {
   var label = props.label,
@@ -35704,14 +35731,14 @@ var UploadBase = function UploadBase(props) {
     gap: "02"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_5__.Icon, {
     name: "Upload",
-    color: "blue_11",
+    color: "link_primary",
     size: "xs"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
-    color: "blue_11"
+    color: "link_primary"
   }, "Upload file")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
-    color: "gray_11"
+    color: "text_quaternary"
   }, "or drag and drop")), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
-    color: "gray_9"
+    color: "text_disabled"
   }, label)));
 };
 UploadBase.displayName = 'UploadBase';
@@ -35776,7 +35803,7 @@ var UploadItemContainer = styled_components__WEBPACK_IMPORTED_MODULE_1___default
 })(["border:1px solid ", ";border-radius:4px;"], function (_ref) {
   var $error = _ref.$error,
     color = _ref.theme.color;
-  return $error ? color[_constants__WEBPACK_IMPORTED_MODULE_8__.ERROR_COLOR] : color.gray_4;
+  return $error ? color.border_error : color.border_secondary;
 });
 var InfoContainer = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_layout__WEBPACK_IMPORTED_MODULE_3__.Flex).attrs({
   flex_direction: 'column',
@@ -35812,7 +35839,7 @@ var UploadItem = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().memo(
     status: status
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(InfoContainer, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
     variant: "sm_medium",
-    color: "black_1"
+    color: "text"
   }, fileInfoFormatter(props)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_upload_item_state__WEBPACK_IMPORTED_MODULE_7__.UploadItemState, {
     status: status,
     antiVirusScanText: antiVirusScanText,
@@ -35821,8 +35848,7 @@ var UploadItem = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().memo(
     error: error
   }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_5__.IconButton, {
     icon: "Trash",
-    variant: "icon",
-    size: "md",
+    size: "xs",
     onClick: onDelete
   }));
 });
@@ -35876,14 +35902,14 @@ var UploadItemIcon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().m
   if (icon) return icon;
   var iconProps = {
     size: 'sm',
-    color: 'blue_11'
+    color: 'icon_primary'
   };
   if (status == _constants__WEBPACK_IMPORTED_MODULE_3__.FILE_STATUS.UPLOADING) iconProps.name = 'Spinner2';else if (status == _constants__WEBPACK_IMPORTED_MODULE_3__.FILE_STATUS.SCANNING) iconProps.name = 'Spinner';else if (status == _constants__WEBPACK_IMPORTED_MODULE_3__.FILE_STATUS.SUCCESS) {
     iconProps.name = 'Document';
-    iconProps.color = 'gray_9';
+    iconProps.color = 'icon';
   } else if (status == _constants__WEBPACK_IMPORTED_MODULE_3__.FILE_STATUS.ERROR) {
     iconProps.name = 'Warning';
-    iconProps.color = _constants__WEBPACK_IMPORTED_MODULE_3__.ERROR_COLOR;
+    iconProps.color = 'icon_error';
   }
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_2__.Icon, iconProps);
 });
@@ -35938,18 +35964,22 @@ var UploadItemState = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().
   if (status == _constants__WEBPACK_IMPORTED_MODULE_4__.FILE_STATUS.UPLOADING) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_progress__WEBPACK_IMPORTED_MODULE_3__.ProgressBar, {
     progress: progress
   });
-  if (status == _constants__WEBPACK_IMPORTED_MODULE_4__.FILE_STATUS.SUCCESS) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Label, {
-    variant: "xs",
-    color: "gray_10"
-  }, formatBytes(size));
+  if (status == _constants__WEBPACK_IMPORTED_MODULE_4__.FILE_STATUS.SUCCESS) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Label, {
+      variant: "xs",
+      color: "text_quaternary"
+    }, formatBytes(size));
+  }
   if (status == _constants__WEBPACK_IMPORTED_MODULE_4__.FILE_STATUS.ERROR) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Paragraph, {
     variant: "xs",
-    color: _constants__WEBPACK_IMPORTED_MODULE_4__.ERROR_COLOR
+    color: "text_error"
   }, error);
-  if (status == _constants__WEBPACK_IMPORTED_MODULE_4__.FILE_STATUS.SCANNING) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Label, {
-    variant: "xs",
-    color: "gray_11"
-  }, antiVirusScanText);
+  if (status == _constants__WEBPACK_IMPORTED_MODULE_4__.FILE_STATUS.SCANNING) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Label, {
+      variant: "xs",
+      color: "text_quaternary"
+    }, antiVirusScanText);
+  }
   return null;
 });
 UploadItemState.displayName = 'UploadItemState';
@@ -36188,7 +36218,7 @@ var NumberField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forw
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
     name: "ChevronUp",
     size: "xxs",
-    color: "gray_9"
+    color: "icon"
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "down",
     onClick: stepDown,
@@ -36198,7 +36228,7 @@ var NumberField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forw
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
     name: "ChevronDown",
     size: "xxs",
-    color: "gray_9"
+    color: "icon"
   }))));
 });
 NumberField.displayName = 'NumberField';
@@ -36218,19 +36248,19 @@ var Buttons = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withC
   componentId: "sc-13mfzjc-2"
 })(["position:absolute;top:0;right:0;display:flex;flex-direction:column;border-top-right-radius:4px;border-bottom-right-radius:4px;height:100%;div[role=\"button\"]{box-sizing:border-box;min-height:0;height:50%;background:", ";border-left:1px solid ", ";padding:2px 4px;display:flex;align-items:center;cursor:pointer;&.up{border-top-right-radius:4px;}&.down{border-bottom-right-radius:4px;border-top:1px solid ", ";}&:hover{background:", ";svg{color:", ";}}}"], function (_ref2) {
   var color = _ref2.theme.color;
-  return color.white;
+  return color.bg;
 }, function (_ref3) {
   var color = _ref3.theme.color;
-  return color.gray_6;
+  return color.border;
 }, function (_ref4) {
   var color = _ref4.theme.color;
-  return color.gray_6;
+  return color.border;
 }, function (_ref5) {
   var color = _ref5.theme.color;
-  return color.gray_3;
+  return color.bg_fill_secondary;
 }, function (_ref6) {
   var color = _ref6.theme.color;
-  return color.gray_11_25;
+  return color.icon_accent;
 });
 /***/ }),
@@ -36337,11 +36367,11 @@ var CountrySelect = function CountrySelect(_ref) {
     var countryCallingCode = _getCountryCallingCode(opt);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option, null, _getCountryFlag(opt), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
       variant: "sm",
-      color: "gray_11_25",
+      color: "text",
       no_wrap: true
     }, _getCountryLabel(opt)), !!countryCallingCode && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
       variant: "sm",
-      color: "gray_9"
+      color: "text_teritary"
     }, "+", countryCallingCode));
   }, [_getCountryLabel, _getCountryCallingCode, _getCountryFlag]);
   var filterOption = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_ref3, inputValue) {
@@ -36442,7 +36472,7 @@ var DropdownIndicator = function DropdownIndicator(_ref6) {
     height: "12px",
     viewBox: ic.viewBox,
     style: {
-      color: color.gray_9,
+      color: color.icon,
       cursor: isDisabled ? 'default' : 'pointer'
     }
   }, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("use", {
@@ -36505,13 +36535,13 @@ var SearchInput = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forw
   var SearchIcon = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_6__.Icon, {
       name: "Search",
-      color: "gray_9",
+      color: "icon",
       size: size == 'lg' ? 'sm' : 'xs'
     });
   }, [size]);
   var ClearButton = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
     return !!val && !disabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_7__.IconButton, {
-      variant: "ghost",
+      size: "xs",
       icon: "Close",
       onClick: reset
     });
@@ -36549,7 +36579,7 @@ var useStyles = function useStyles(size) {
     font_size = _useTheme2.font_size,
     line_height = _useTheme2.line_height,
     color = _useTheme2.color,
-    box_shadow = _useTheme2.box_shadow;
+    shadow = _useTheme2.shadow;
   return (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
     return {
       control: function control(baseStyles, _ref10) {
@@ -36564,9 +36594,9 @@ var useStyles = function useStyles(size) {
           fontWeight: font_weight.regular,
           fontSize: font_size.sm,
           lineHeight: line_height.none,
-          color: isDisabled ? color.gray_9 : color.gray_11_50,
-          backgroundColor: color.gray_2,
-          borderColor: isDisabled ? color.gray_6 : color.gray_7,
+          color: isDisabled ? color.text_disabled : color.text_teritary,
+          backgroundColor: isDisabled ? color.bg_fill_teritary : color.bg,
+          borderColor: isDisabled ? color.border_disabled : color.border,
           cursor: isDisabled ? 'default' : 'text',
           borderRight: '0 none',
           borderTopRightRadius: '0',
@@ -36587,9 +36617,27 @@ var useStyles = function useStyles(size) {
           minWidth: '240px',
           width: 'fit-content',
           maxWidth: '540px',
-          backgroundColor: color.white,
+          backgroundColor: color.bg_elevated,
           borderRadius: '4px',
-          boxShadow: box_shadow.md
+          boxShadow: shadow.medium
+        });
+      },
+      menuList: function menuList(baseStyles) {
+        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+          overflowX: 'hidden',
+          scrollbarColor: '#FFFFFF #DFE3E6',
+          scrollbarWidth: 'thin',
+          '&::-webkit-scrollbar': {
+            width: '4px',
+            height: '4px'
+          },
+          '&::-webkit-scrollbar-track': {
+            backgroundColor: '#FFFFFF'
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: '#DFE3E6',
+            borderRadius: '2px'
+          }
         });
       },
       menuPortal: function menuPortal(baseStyles) {
@@ -36598,13 +36646,18 @@ var useStyles = function useStyles(size) {
         });
       },
       option: function option(baseStyles, _ref11) {
-        var selected = _ref11.selected;
+        var isFocused = _ref11.isFocused,
+          isDisabled = _ref11.isDisabled;
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          backgroundColor: selected ? color.blue_3 : baseStyles.backgroundColor
+          backgroundColor: isFocused ? color.bg_fill_secondary : undefined,
+          color: isDisabled ? color.text_disabled : color.text_teritary,
+          '&:hover': {
+            backgroundColor: color.bg_fill_secondary
+          }
         });
       }
     };
-  }, [size, font_family, font_weight, font_size, line_height, color, box_shadow]);
+  }, [size, font_family, font_weight, font_size, line_height, color, shadow]);
 };
 var getHeight = function getHeight(size) {
   var height = {
@@ -36902,24 +36955,26 @@ var RadioControl = styled_components__WEBPACK_IMPORTED_MODULE_0___default().div.
   var backgroundColor, hoverBackgroundColor, activeBackgroundColor;
   var beforeColor, hoverBeforeColor, activeBeforeColor;
   if (disabled) {
-    borderColor = hoverBorderColor = activeBorderColor = color.gray_8;
+    borderColor = hoverBorderColor = activeBorderColor = color.border_disabled;
     backgroundColor = hoverBackgroundColor = activeBackgroundColor = color.white;
-    if (checked) beforeColor = hoverBeforeColor = activeBeforeColor = color.gray_6;
+    if (checked) {
+      beforeColor = hoverBeforeColor = activeBeforeColor = color.border_accent;
+    }
   } else {
     if (checked) {
-      borderColor = activeBorderColor = color.blue_11;
+      borderColor = activeBorderColor = color.bg_fill_primary;
       backgroundColor = hoverBackgroundColor = activeBackgroundColor = color.white;
-      beforeColor = activeBeforeColor = color.blue_11;
-      hoverBorderColor = color.blue_10;
+      beforeColor = activeBeforeColor = color.bg_fill_primary;
+      hoverBorderColor = color.bg_fill_primary_hover;
       hoverBackgroundColor = color.white;
-      hoverBeforeColor = color.blue_10;
-      activeOutlineColor = color.blue_5;
+      hoverBeforeColor = color.bg_fill_primary_hover;
+      activeOutlineColor = color.bg_fill_primary;
     } else {
-      borderColor = color.gray_9;
+      borderColor = color.border_accent;
       backgroundColor = activeBackgroundColor = color.white;
-      hoverBorderColor = color.gray_10;
-      hoverBackgroundColor = color.gray_3;
-      activeBorderColor = color.blue_11;
+      hoverBorderColor = color.border_accent;
+      hoverBackgroundColor = color.bg_fill_secondary;
+      activeBorderColor = color.icon_primary;
     }
   }
   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);
@@ -37134,7 +37189,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';
@@ -37201,16 +37256,16 @@ 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",
@@ -37236,15 +37291,15 @@ 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';
@@ -37499,10 +37554,10 @@ var Field = styled_components__WEBPACK_IMPORTED_MODULE_2___default().input.withC
   return line_height.none;
 }, function (_ref5) {
   var color = _ref5.theme.color;
-  return color.gray_11_50;
+  return color.text;
 }, function (_ref6) {
   var color = _ref6.theme.color;
-  return color.gray_8;
+  return color.text_quaternary;
 });
 var InputLabel = function InputLabel(_ref7) {
   var className = _ref7.className,
@@ -37529,7 +37584,7 @@ var InputLabel = function InputLabel(_ref7) {
     id: id,
     "data-role": "label",
     variant: variant,
-    color: "gray-11-50"
+    color: "text_secondary"
   }, t(label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(NecessityIndicator, {
     required: required,
     indicator: necessityIndicator
@@ -37542,7 +37597,7 @@ var InputLabel = function InputLabel(_ref7) {
     }),
     name: labelIcon,
     size: "xs",
-    color: "gray_9"
+    color: "icon"
   })));
 };
 InputLabel.propTypes = {
@@ -37572,7 +37627,7 @@ var Indicator = styled_components__WEBPACK_IMPORTED_MODULE_2___default().span.wi
   componentId: "sc-r60v1b-2"
 })(["color:", ";margin-left:", ";"], function (_ref9) {
   var color = _ref9.theme.color;
-  return color.gray_9;
+  return color.text_disabled;
 }, function (_ref10) {
   var spacing = _ref10.theme.spacing;
   return spacing['02'];
@@ -37580,7 +37635,7 @@ var Indicator = styled_components__WEBPACK_IMPORTED_MODULE_2___default().span.wi
 var Asterisk = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_typography__WEBPACK_IMPORTED_MODULE_8__.Label).attrs({
   tag: 'span',
   variant: 'xs',
-  color: 'red_11',
+  color: 'border_error',
   children: '*'
 }).withConfig({
   displayName: "Asterisk",
@@ -37609,9 +37664,9 @@ var InputWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.
 })(["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) {
   var font_family = _ref12.theme.font_family;
   return font_family.sans;
-}, inputVerticalPadding, inputHorizontalPadding, function (props) {
-  var _props$$verticalAlign;
-  return (_props$$verticalAlign = props.$verticalAlign) !== null && _props$$verticalAlign !== void 0 ? _props$$verticalAlign : 'normal';
+}, inputVerticalPadding, inputHorizontalPadding, function (_ref13) {
+  var $verticalAlign = _ref13.$verticalAlign;
+  return $verticalAlign !== null && $verticalAlign !== void 0 ? $verticalAlign : 'normal';
 }, function (props) {
   return props.$leftOuterContent ? '0' : '4px';
 }, function (props) {
@@ -37623,28 +37678,34 @@ var InputWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.
 }, function (props) {
   var _props$$heightCalcula;
   return (_props$$heightCalcula = props.$heightCalculationCallback) === null || _props$$heightCalcula === void 0 ? void 0 : _props$$heightCalcula.call(props);
-}, function (props) {
-  var borderColor = props.theme.color.gray_7;
+}, function (_ref14) {
+  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 color = props.theme.color.gray_11_50;
-  var backgroundColor = props.theme.color.white;
+  var foreColor = color.text;
+  var backgroundColor = color.bg;
   var cursor = 'text';
-  if (props.$disabled) {
-    color = props.theme.color.gray_9;
-    borderColor = props.theme.color.gray_6;
-    backgroundColor = props.theme.color.gray_2;
+  if ($disabled) {
+    foreColor = color.text_disabled;
+    borderColor = color.border_disabled;
+    backgroundColor = color.bg_fill_teritary;
     cursor = 'default';
-  } else if (props.$invalid) borderColor = props.theme.color.red_11;else if (props.$active) {
-    borderColor = props.theme.color.blue_11;
-    boxShadow = "0px 0px 0px 2px rgba(0, 106, 220, 0.4)";
+  } 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:", ";background-color:", ";border-color:", ";color:", ";box-shadow:", ";"], cursor, backgroundColor, borderColor, color, boxShadow);
+  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["cursor:", ";background-color:", ";border-color:", ";color:", ";box-shadow:", ";"], cursor, backgroundColor, borderColor, foreColor, boxShadow);
 });
 var HelperText = function HelperText(props) {
   var children = props.children,
     invalid = props.invalid;
   if (!children) return null;
-  var color = invalid ? 'red_11' : 'gray_11_50';
+  var color = invalid ? 'text_error' : 'text_quaternary';
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_8__.Label, {
     "data-role": "description",
     variant: "xs",
@@ -37761,7 +37822,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) {
@@ -37775,10 +37836,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;
 });
 /***/ }),
@@ -38078,7 +38136,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) {
@@ -38091,12 +38149,12 @@ 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",
     onClick: onRemove,
-    variant: "xxs",
+    size: "xs",
     icon: "CloseSmall"
   }));
 };
@@ -38109,7 +38167,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;
 });
 /***/ }),
@@ -38410,10 +38468,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, {
@@ -38425,7 +38479,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));
 };
@@ -38445,65 +38499,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';
-};
 /***/ }),
@@ -40476,15 +40514,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
@@ -40520,6 +40560,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);
@@ -40534,7 +40575,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));
@@ -40560,7 +40601,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,
@@ -40611,6 +40652,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],
@@ -40619,9 +40661,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 && {
@@ -40650,10 +40692,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;
@@ -40670,8 +40713,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,
@@ -40777,7 +40820,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);
     });
   });
 };
@@ -40791,15 +40834,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));
 };
@@ -40906,7 +40949,7 @@ var Search = function Search(_ref2) {
   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, {
-    variant: "ghost",
+    size: "xs",
     icon: "Close",
     style: {
       visibility: search ? 'visible' : 'hidden'
@@ -40923,7 +40966,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,
@@ -41065,7 +41108,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, {
@@ -41083,7 +41126,7 @@ var CustomizeButtonItemWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___
   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;
+  return color.bg_fill;
 });
 var CustomizeButtonItemAction = function CustomizeButtonItemAction(_ref11) {
   var onClick = _ref11.onClick,
@@ -41097,7 +41140,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({
@@ -41457,7 +41500,7 @@ var TableFooterRow = styled_components__WEBPACK_IMPORTED_MODULE_1___default().di
   componentId: "sc-12b7s5j-0"
 })(["border-top:1px solid ", ";"], function (_ref) {
   var color = _ref.theme.color;
-  return color.gray_3;
+  return color.border_teritary;
 });
 var FooterCell = function FooterCell(props) {
   var className = props.className,
@@ -41499,7 +41542,7 @@ var FooterCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default()
 }, function (_ref3) {
   var $isLastPinned = _ref3.$isLastPinned,
     color = _ref3.theme.color;
-  return $isLastPinned ? "2px solid ".concat(color.gray_3) : 'none';
+  return $isLastPinned ? "2px solid ".concat(color.border_teritary) : 'none';
 });
 /***/ }),
@@ -41663,7 +41706,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,
@@ -41687,7 +41730,7 @@ var TableHeaderRow = styled_components__WEBPACK_IMPORTED_MODULE_2___default().di
 })(["border-bottom:", ";"], function (_ref) {
   var $isLast = _ref.$isLast,
     color = _ref.theme.color;
-  return $isLast ? 'none' : "1px solid ".concat(color.gray_3);
+  return $isLast ? 'none' : "1px solid ".concat(color.border_teritary);
 });
 var HeaderCellContent = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "HeaderCellContent",
@@ -41697,11 +41740,11 @@ 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;
-  return $isLastPinned ? "2px solid ".concat(color.gray_3) : 'none';
+  return $isLastPinned ? "2px solid ".concat(color.border_teritary) : 'none';
 });
 var HeaderCellWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "HeaderCellWrapper",
@@ -41718,7 +41761,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;
     });
   }
 });
@@ -41726,7 +41769,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);
@@ -41867,7 +41910,7 @@ var MenuButton = function MenuButton(props) {
   var popover = props.popover,
     visible = props.visible;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledButton, {
-    variant: "ghost",
+    size: "xs",
     icon: "DotsHorizontal",
     tooltip: "Functions",
     tooltipPlacement: "top",
@@ -41880,18 +41923,12 @@ 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;
+})(["background:white;border-radius:4px;box-shadow:", ";"], function (_ref) {
+  var box_shadow = _ref.theme.box_shadow;
   return box_shadow.md;
 });
 var MenuPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_2__.withPopover)(MenuButton, function (p) {
@@ -41908,16 +41945,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 (_ref2) {
+  var color = _ref2.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) {
-    var color = _ref5.theme.color;
-    return color.gray_4;
-  }, function (_ref6) {
-    var color = _ref6.theme.color;
-    return color.gray_4;
+  return props.$separator && (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["padding:0;height:1px;background-color:", ";&:hover{background-color:", ";}"], function (_ref3) {
+    var color = _ref3.theme.color;
+    return color.border;
+  }, function (_ref4) {
+    var color = _ref4.theme.color;
+    return color.border;
   });
 });
 var OrderColumn = function OrderColumn(props) {
@@ -41932,11 +41969,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) {
@@ -41950,11 +41987,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) {
@@ -41970,11 +42007,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) {
@@ -41987,11 +42024,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({
@@ -42206,10 +42243,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
@@ -42262,11 +42299,11 @@ 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,
-    variant: "icon"
+    size: "xs"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationControls, childProps)));
 };
 Pagination.propTypes = {
@@ -42276,7 +42313,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"
@@ -42303,25 +42340,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,
@@ -42340,40 +42372,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,
@@ -42383,23 +42425,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;
@@ -42780,7 +42818,7 @@ var TableRow = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.with
 }, function (_ref2) {
   var $isLast = _ref2.$isLast,
     color = _ref2.theme.color;
-  return $isLast ? 'none' : "1px solid ".concat(color.gray_3);
+  return $isLast ? 'none' : "1px solid ".concat(color.border_teritary);
 }, _table_cell__WEBPACK_IMPORTED_MODULE_3__.CellContent, function (_ref3) {
   var $rowDensity = _ref3.$rowDensity;
   return {
@@ -42789,7 +42827,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;
@@ -42882,11 +42920,11 @@ var RowHoverActions = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forward
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       key: p.icon
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_2__.IconButton, _extends({}, p, {
-      variant: "icon"
+      size: "xs"
     })));
   }), draggableRows && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_2__.IconButton, _extends({
     disabled: !(draggable !== null && draggable !== void 0 ? draggable : true),
-    variant: "icon",
+    size: "xs",
     icon: "DragAndDrop"
   }, dragHandleProps))));
 });
@@ -43055,7 +43093,7 @@ var RowMenuCellPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_2__.withPopover)(funct
     "data-testid": "row-actions-toggle",
     onClick: p.popover.toggle,
     icon: "DotsHorizontal",
-    variant: "ghost",
+    size: "xs",
     className: _render_row__WEBPACK_IMPORTED_MODULE_6__.preventOnClickClass
   });
 }, function (p) {
@@ -43097,19 +43135,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 = {
@@ -43120,10 +43161,11 @@ var rowMenuColumn = {
   disableResizing: true,
   disablePinning: true,
   canEdit: false,
-  width: 56,
-  minWidth: 56,
-  maxWidth: 56,
-  internalActions: {}
+  width: 32,
+  minWidth: 32,
+  maxWidth: 32,
+  internalActions: {},
+  type: 'row_action'
 };
 var useRowMenu = function useRowMenu(hooks) {
   hooks.visibleColumns.push(function (columns) {
@@ -43308,7 +43350,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",
@@ -43738,7 +43780,7 @@ var TableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.
   componentId: "sc-ebeoik-0"
 })(["width:100%;border:1px solid ", ";border-radius:4px;overflow-x:", ";", ""], function (_ref) {
   var color = _ref.theme.color;
-  return color.gray_3;
+  return color.border_teritary;
 }, function (_ref2) {
   var $virtualized = _ref2.$virtualized;
   return $virtualized ? 'unset' : 'auto';
@@ -43946,7 +43988,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, {
@@ -43965,41 +44007,46 @@ 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;
-  return $isLastPinned ? "2px solid ".concat(color.gray_3) : 'none';
+  return $isLastPinned ? "2px solid ".concat(color.border_teritary) : 'none';
 });
 var ExpandedTableCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(TableCellContent).withConfig({
   displayName: "ExpandedTableCellContent",
   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;
+  return color.white;
+}, function (_ref6) {
+  var color = _ref6.theme.color;
+  return color.border_accent;
 }, 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) {
+  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 (_ref7) {
     var color = _ref7.theme.color;
-    return color.blue_11;
+    return color.white;
+  }, function (_ref8) {
+    var color = _ref8.theme.color;
+    return color.table_nesting;
   }) : undefined;
 });
@@ -44750,8 +44797,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',
@@ -44760,8 +44805,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,
@@ -44886,8 +44929,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,
@@ -47404,7 +47445,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");
@@ -47419,13 +47460,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;
   };