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

package/dist/umd/uikit.development.js

@@ -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;
   };