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

package/dist/umd/uikit.development.js

@@ -33488,33 +33488,32 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 var useStyles = function useStyles(_ref) {
   var styles = _ref.styles,
     size = _ref.size;
-  var _useTheme = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.useTheme)(),
-    color = _useTheme.color,
-    shadow = _useTheme.shadow,
-    font_family = _useTheme.font_family,
-    font_weight = _useTheme.font_weight,
-    font_size = _useTheme.font_size,
-    line_height = _useTheme.line_height;
+  var theme = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.useTheme)();
+  var color = theme.color,
+    shadow = theme.shadow,
+    font_family = theme.font_family,
+    font_weight = theme.font_weight,
+    font_size = theme.font_size;
   var headerXl = {
     fontFamily: font_family.sans,
     fontStyle: 'normal',
     fontWeight: font_weight.medium,
     fontSize: font_size.lg,
-    lineHeight: line_height.none
+    lineHeight: 'normal' // line_height.none,
   };
   var labelSm = {
     fontFamily: font_family.sans,
     fontStyle: 'normal',
     fontWeight: font_weight.regular,
     fontSize: font_size.sm,
-    lineHeight: line_height.none
+    lineHeight: 'normal' // line_height.none,
   };
   var labelBase = {
     fontFamily: font_family.sans,
     fontStyle: 'normal',
     fontWeight: font_weight.regular,
     fontSize: font_size.md,
-    lineHeight: line_height.none
+    lineHeight: 'normal' // line_height.none,
   };
   return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return (0,_util_with_user_styles__WEBPACK_IMPORTED_MODULE_4__.withUserStyles)(styles, {
@@ -33648,7 +33647,7 @@ var useStyles = function useStyles(_ref) {
         });
       }
     });
-  }, [styles, size, color, shadow, font_family, font_weight, font_size, line_height]);
+  }, [styles, size, theme]);
 };
 
 /***/ }),
@@ -35191,20 +35190,19 @@ var useStyles = function useStyles(_ref) {
   var styles = _ref.styles,
     size = _ref.size,
     menuPortalTarget = _ref.menuPortalTarget;
-  var _useTheme = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.useTheme)(),
-    color = _useTheme.color,
-    spacing = _useTheme.spacing,
-    line_height = _useTheme.line_height,
-    font_size = _useTheme.font_size,
-    font_weight = _useTheme.font_weight,
-    font_family = _useTheme.font_family,
-    shadow = _useTheme.shadow;
+  var theme = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.useTheme)();
+  var color = theme.color,
+    spacing = theme.spacing,
+    font_size = theme.font_size,
+    font_weight = theme.font_weight,
+    font_family = theme.font_family,
+    shadow = theme.shadow;
   var labelSm = {
     fontFamily: font_family.sans,
     fontStyle: 'normal',
     fontWeight: font_weight.regular,
     fontSize: font_size.sm,
-    lineHeight: line_height.none
+    lineHeight: 'normal' // line_height.none,
   };
   return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return (0,_util_with_user_styles__WEBPACK_IMPORTED_MODULE_5__.withUserStyles)(styles, {
@@ -35320,7 +35318,7 @@ var useStyles = function useStyles(_ref) {
         });
       }
     });
-  }, [styles, size, menuPortalTarget, color, spacing, line_height, font_size, font_weight, font_family, shadow]);
+  }, [styles, size, menuPortalTarget, theme]);
 };
 
 /***/ }),
@@ -36957,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);
@@ -37189,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';
@@ -37256,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",
@@ -37291,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';
@@ -37822,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) {
@@ -37836,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;
 });
 
 /***/ }),
@@ -38139,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) {
@@ -38152,7 +38149,7 @@ var DefaultItemRenderer = function DefaultItemRenderer(props) {
     role: "listitem"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
     variant: "sm",
-    color: "gray_11_50"
+    color: "text"
   }, value), showRemove && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_6__.IconButton, {
     "data-action": "remove",
     title: "Remove",
@@ -38170,7 +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;
 });
 
 /***/ }),
@@ -38471,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, {
@@ -38486,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));
 };
@@ -38506,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';
-};
 
 /***/ }),
 
@@ -40537,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
 
 
@@ -40581,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);
@@ -40595,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));
@@ -40621,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,
@@ -40672,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],
@@ -40680,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 && {
@@ -40711,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;
@@ -40731,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,
@@ -40838,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);
     });
   });
 };
@@ -40852,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));
 };
 
@@ -40984,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,
@@ -41126,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, {
@@ -41144,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,
@@ -41158,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({
@@ -41724,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,
@@ -41758,7 +41740,7 @@ var HeaderCellContent = styled_components__WEBPACK_IMPORTED_MODULE_2___default()
   return color.bg_primary;
 }, function (_ref3) {
   var color = _ref3.theme.color;
-  return color.gray_2;
+  return color.table_cell_hover;
 }, function (_ref4) {
   var $isLastPinned = _ref4.$isLastPinned,
     color = _ref4.theme.color;
@@ -41779,7 +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;
     });
   }
 });
@@ -41787,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);
@@ -41941,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) {
@@ -41969,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) {
@@ -41993,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) {
@@ -42011,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) {
@@ -42031,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) {
@@ -42048,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({
@@ -42267,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
@@ -42323,7 +42299,7 @@ var Pagination = function Pagination(_ref) {
   });
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationWrapper, {
     className: className
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationItems, childProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationControlsWrapper, null, !!onDownload && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_3__.IconButton, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationItems, childProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationControlsWrapper, null, !!onDownload && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
     icon: "Download",
     onClick: onDownload,
     tooltip: downloadTooltip,
@@ -42337,7 +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"
@@ -42364,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,
@@ -42401,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,
@@ -42444,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;
@@ -42850,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;
@@ -43158,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 = {
@@ -43181,10 +43161,11 @@ var rowMenuColumn = {
   disableResizing: true,
   disablePinning: true,
   canEdit: false,
-  width: 48,
-  minWidth: 48,
-  maxWidth: 48,
-  internalActions: {}
+  width: 32,
+  minWidth: 32,
+  maxWidth: 32,
+  internalActions: {},
+  type: 'row_action'
 };
 var useRowMenu = function useRowMenu(hooks) {
   hooks.visibleColumns.push(function (columns) {
@@ -43369,7 +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",
@@ -44007,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, {
@@ -44026,7 +44007,7 @@ var TableCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default().
   componentId: "sc-1gdt4qg-0"
 })(["background-color:", ";border-right:", ";"], function (_ref) {
   var color = _ref.theme.color;
-  return color.bg_primary;
+  return color.bg;
 }, function (_ref2) {
   var $isLastPinned = _ref2.$isLastPinned,
     color = _ref2.theme.color;
@@ -44037,30 +44018,35 @@ var ExpandedTableCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___de
   componentId: "sc-1gdt4qg-1"
 })(["position:relative;&::before{content:'';position:absolute;left:0;top:0;height:calc(100% + 1px);border-left:4px solid ", ";}"], function (_ref3) {
   var color = _ref3.theme.color;
-  return color.blue_6;
+  return color.table_nesting;
 });
+var RowActionCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
+  displayName: "RowActionCellContent",
+  componentId: "sc-1gdt4qg-2"
+})(["box-sizing:border-box;display:flex;align-items:center;padding:4px;"]);
 var CellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
   displayName: "CellContent",
-  componentId: "sc-1gdt4qg-2"
-})(["box-sizing:border-box;display:flex;align-items:center;padding:4px 16px;overflow:clip;", ""], function (props) {
-  return props.$type == 'number' ? 'text-align: right;' : null;
+  componentId: "sc-1gdt4qg-3"
+})(["box-sizing:border-box;display:flex;align-items:center;padding:4px 16px;overflow:clip;", ""], function (_ref4) {
+  var $type = _ref4.$type;
+  return $type == 'number' ? 'text-align: right;' : null;
 });
 var EditableCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(CellContent).withConfig({
   displayName: "EditableCellContent",
-  componentId: "sc-1gdt4qg-3"
-})(["padding:3px 15px;border:1px solid transparent;&:hover{background-color:", ";border-color:", ";}", ""], function (_ref4) {
-  var color = _ref4.theme.color;
-  return color.white;
-}, function (_ref5) {
+  componentId: "sc-1gdt4qg-4"
+})(["padding:3px 15px;border:1px solid transparent;&:hover{background-color:", ";border-color:", ";}", ""], function (_ref5) {
   var color = _ref5.theme.color;
-  return color.gray_9;
+  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;
 });
 
@@ -44811,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',
@@ -44821,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,
@@ -44947,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,
@@ -47465,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");
@@ -47480,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;
   };