@luminati-io/uikit 3.0.9 → 3.0.11

package/dist/umd/uikit.development.js

@@ -20267,7 +20267,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /*jslint react:true*/
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["animated", "showGridRows", "showGridColumns", "numTicks", "xAxis", "yAxis", "formatValue", "margin", "stacked", "showTooltip", "tooltipContent"];
+var _excluded = ["animated", "showGridRows", "showGridColumns", "numTicks", "xAxis", "yAxis", "formatValue", "margin", "stacked", "showTooltip", "tooltipContent", "onPointerMove", "onPointerOut", "onPointerUp", "onPointerDown", "pointerEventsDataKey"];
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -20313,7 +20313,12 @@ var AreaChart = function AreaChart(props) {
     stacked = props.stacked,
     showTooltip = props.showTooltip,
     _props$tooltipContent = props.tooltipContent,
-    tooltipContent = _props$tooltipContent === void 0 ? _tooltip__WEBPACK_IMPORTED_MODULE_6__["default"] : _props$tooltipContent;
+    tooltipContent = _props$tooltipContent === void 0 ? _tooltip__WEBPACK_IMPORTED_MODULE_6__["default"] : _props$tooltipContent,
+    onPointerMove = props.onPointerMove,
+    onPointerOut = props.onPointerOut,
+    onPointerUp = props.onPointerUp,
+    onPointerDown = props.onPointerDown,
+    pointerEventsDataKey = props.pointerEventsDataKey;
   var _getAnimatedOrUnanima = (0,_get_components__WEBPACK_IMPORTED_MODULE_3__.getAnimatedOrUnanimatedComponents)(animated),
     XYChart = _getAnimatedOrUnanima.XYChart,
     Grid = _getAnimatedOrUnanima.Grid,
@@ -20329,7 +20334,12 @@ var AreaChart = function AreaChart(props) {
     yScale: config.y,
     width: width,
     height: height,
-    margin: margin
+    margin: margin,
+    onPointerMove: onPointerMove,
+    onPointerOut: onPointerOut,
+    onPointerUp: onPointerUp,
+    onPointerDown: onPointerDown,
+    pointerEventsDataKey: pointerEventsDataKey
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Grid, {
     key: "grid-".concat(animationTrajectory) // force animate on update
     ,
@@ -20399,6 +20409,11 @@ var Area = function Area(props) {
     stacked = props.stacked,
     showTooltip = props.showTooltip,
     tooltipContent = props.tooltipContent,
+    onPointerMove = props.onPointerMove,
+    onPointerOut = props.onPointerOut,
+    onPointerUp = props.onPointerUp,
+    onPointerDown = props.onPointerDown,
+    pointerEventsDataKey = props.pointerEventsDataKey,
     rest = _objectWithoutProperties(props, _excluded);
   var chartProps = {
     animated: animated,
@@ -20411,7 +20426,12 @@ var Area = function Area(props) {
     margin: margin,
     stacked: stacked,
     showTooltip: showTooltip,
-    tooltipContent: tooltipContent
+    tooltipContent: tooltipContent,
+    onPointerMove: onPointerMove,
+    onPointerOut: onPointerOut,
+    onPointerUp: onPointerUp,
+    onPointerDown: onPointerDown,
+    pointerEventsDataKey: pointerEventsDataKey
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_chart_container__WEBPACK_IMPORTED_MODULE_2__["default"], _extends({}, rest, {
     Chart: AreaChart,
@@ -20461,7 +20481,12 @@ Area.propTypes = {
   }),
   stacked: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   showTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
-  tooltipContent: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().element), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)])
+  tooltipContent: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().element), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)]),
+  onPointerMove: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onPointerOut: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onPointerUp: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onPointerDown: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  pointerEventsDataKey: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['all', 'nearest'])
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Area);
 
@@ -20494,7 +20519,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /*jslint react:true*/
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["animated", "showGridRows", "showGridColumns", "numTicks", "xAxis", "yAxis", "formatValue", "margin", "horizontal", "stacked", "showAnnotations", "showTooltip", "tooltipContent"];
+var _excluded = ["animated", "showGridRows", "showGridColumns", "numTicks", "xAxis", "yAxis", "formatValue", "margin", "horizontal", "stacked", "showAnnotations", "showTooltip", "tooltipContent", "onPointerMove", "onPointerOut", "onPointerUp", "onPointerDown", "pointerEventsDataKey"];
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -20541,7 +20566,12 @@ var BarChart = function BarChart(props) {
     showAnnotations = props.showAnnotations,
     showTooltip = props.showTooltip,
     _props$tooltipContent = props.tooltipContent,
-    tooltipContent = _props$tooltipContent === void 0 ? _tooltip__WEBPACK_IMPORTED_MODULE_5__["default"] : _props$tooltipContent;
+    tooltipContent = _props$tooltipContent === void 0 ? _tooltip__WEBPACK_IMPORTED_MODULE_5__["default"] : _props$tooltipContent,
+    onPointerMove = props.onPointerMove,
+    onPointerOut = props.onPointerOut,
+    onPointerUp = props.onPointerUp,
+    onPointerDown = props.onPointerDown,
+    pointerEventsDataKey = props.pointerEventsDataKey;
   var _getAnimatedOrUnanima = (0,_get_components__WEBPACK_IMPORTED_MODULE_4__.getAnimatedOrUnanimatedComponents)(animated),
     XYChart = _getAnimatedOrUnanima.XYChart,
     Grid = _getAnimatedOrUnanima.Grid,
@@ -20565,7 +20595,12 @@ var BarChart = function BarChart(props) {
     yScale: config.y,
     width: width,
     height: height,
-    margin: margin
+    margin: margin,
+    onPointerMove: onPointerMove,
+    onPointerOut: onPointerOut,
+    onPointerUp: onPointerUp,
+    onPointerDown: onPointerDown,
+    pointerEventsDataKey: pointerEventsDataKey
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Grid, {
     key: "grid-".concat(animationTrajectory) // force animate on update
     ,
@@ -20581,7 +20616,14 @@ var BarChart = function BarChart(props) {
       xAccessor: lineData.accessors[horizontal ? 'yAccessor' : 'xAccessor'],
       yAccessor: lineData.accessors[horizontal ? 'xAccessor' : 'yAccessor'],
       colorAccessor: lineData.accessors.colorAccessor
-    }, lineData.barProps));
+    }, lineData.barProps, {
+      onFocus: function onFocus() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return console.log(args);
+      }
+    }));
   })), !!showAnnotations && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_bar_annotation__WEBPACK_IMPORTED_MODULE_2__.AnnotationGroup, null, data.map(function (lineData) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_bar_annotation__WEBPACK_IMPORTED_MODULE_2__.Annotation, {
       key: lineData.name,
@@ -20640,6 +20682,11 @@ var Bar = function Bar(props) {
     showAnnotations = props.showAnnotations,
     showTooltip = props.showTooltip,
     tooltipContent = props.tooltipContent,
+    onPointerMove = props.onPointerMove,
+    onPointerOut = props.onPointerOut,
+    onPointerUp = props.onPointerUp,
+    onPointerDown = props.onPointerDown,
+    pointerEventsDataKey = props.pointerEventsDataKey,
     rest = _objectWithoutProperties(props, _excluded);
   var chartProps = {
     animated: animated,
@@ -20654,7 +20701,12 @@ var Bar = function Bar(props) {
     stacked: stacked,
     showAnnotations: showAnnotations,
     showTooltip: showTooltip,
-    tooltipContent: tooltipContent
+    tooltipContent: tooltipContent,
+    onPointerMove: onPointerMove,
+    onPointerOut: onPointerOut,
+    onPointerUp: onPointerUp,
+    onPointerDown: onPointerDown,
+    pointerEventsDataKey: pointerEventsDataKey
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_chart_container__WEBPACK_IMPORTED_MODULE_3__["default"], _extends({}, rest, {
     Chart: BarChart,
@@ -20706,7 +20758,12 @@ Bar.propTypes = {
   stacked: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   showAnnotations: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   showTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
-  tooltipContent: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().element), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)])
+  tooltipContent: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().element), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)]),
+  onPointerMove: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onPointerOut: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onPointerUp: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onPointerDown: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  pointerEventsDataKey: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['all', 'nearest'])
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Bar);
 
@@ -21529,7 +21586,7 @@ __webpack_require__.r(__webpack_exports__);
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _excluded = ["label", "numTicks", "formatTick", "labelOffset"],
   _excluded2 = ["label", "numTicks", "formatTick", "labelOffset"],
-  _excluded3 = ["animated", "showGridRows", "showGridColumns", "numTicks", "xAxis", "yAxis", "formatValue", "margin", "showTooltip", "tooltipContent", "curveType"];
+  _excluded3 = ["animated", "showGridRows", "showGridColumns", "numTicks", "xAxis", "yAxis", "formatValue", "margin", "showTooltip", "tooltipContent", "curveType", "onPointerMove", "onPointerOut", "onPointerUp", "onPointerDown", "pointerEventsDataKey"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -21575,7 +21632,12 @@ var LineChart = function LineChart(props) {
     _props$tooltipContent = props.tooltipContent,
     tooltipContent = _props$tooltipContent === void 0 ? _tooltip__WEBPACK_IMPORTED_MODULE_5__["default"] : _props$tooltipContent,
     _props$curveType = props.curveType,
-    curveType = _props$curveType === void 0 ? '' : _props$curveType;
+    curveType = _props$curveType === void 0 ? '' : _props$curveType,
+    onPointerMove = props.onPointerMove,
+    onPointerOut = props.onPointerOut,
+    onPointerUp = props.onPointerUp,
+    onPointerDown = props.onPointerDown,
+    pointerEventsDataKey = props.pointerEventsDataKey;
   var _getAnimatedOrUnanima = (0,_get_components__WEBPACK_IMPORTED_MODULE_4__.getAnimatedOrUnanimatedComponents)(animated),
     XYChart = _getAnimatedOrUnanima.XYChart,
     Grid = _getAnimatedOrUnanima.Grid,
@@ -21605,7 +21667,12 @@ var LineChart = function LineChart(props) {
     yScale: yScale,
     width: width,
     height: height,
-    margin: margin
+    margin: margin,
+    onPointerMove: onPointerMove,
+    onPointerOut: onPointerOut,
+    onPointerUp: onPointerUp,
+    onPointerDown: onPointerDown,
+    pointerEventsDataKey: pointerEventsDataKey
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Grid, {
     key: "grid-".concat(animationTrajectory) // force animate on update
     ,
@@ -21667,6 +21734,11 @@ var Line = function Line(props) {
     showTooltip = props.showTooltip,
     tooltipContent = props.tooltipContent,
     curveType = props.curveType,
+    onPointerMove = props.onPointerMove,
+    onPointerOut = props.onPointerOut,
+    onPointerUp = props.onPointerUp,
+    onPointerDown = props.onPointerDown,
+    pointerEventsDataKey = props.pointerEventsDataKey,
     rest = _objectWithoutProperties(props, _excluded3);
   var chartProps = {
     animated: animated,
@@ -21679,7 +21751,12 @@ var Line = function Line(props) {
     margin: margin,
     showTooltip: showTooltip,
     tooltipContent: tooltipContent,
-    curveType: curveType
+    curveType: curveType,
+    onPointerMove: onPointerMove,
+    onPointerOut: onPointerOut,
+    onPointerUp: onPointerUp,
+    onPointerDown: onPointerDown,
+    pointerEventsDataKey: pointerEventsDataKey
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_chart_container__WEBPACK_IMPORTED_MODULE_2__["default"], _extends({}, rest, {
     Chart: LineChart,
@@ -21729,7 +21806,12 @@ Line.propTypes = {
   }),
   showTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   tooltipContent: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().element), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)]),
-  curveType: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['basis', 'basisClosed', 'basisOpen', 'step', 'stepAfter', 'stepBefore', 'bundle', 'linear', 'linearClosed', 'cardinal', 'cardinalClosed', 'cardinalOpen', 'catmullRom', 'catmullRomClosed', 'catmullRomOpen', 'monotoneX', 'monotoneY', 'natural'])
+  curveType: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['basis', 'basisClosed', 'basisOpen', 'step', 'stepAfter', 'stepBefore', 'bundle', 'linear', 'linearClosed', 'cardinal', 'cardinalClosed', 'cardinalOpen', 'catmullRom', 'catmullRomClosed', 'catmullRomOpen', 'monotoneX', 'monotoneY', 'natural']),
+  onPointerMove: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onPointerOut: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onPointerUp: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onPointerDown: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  pointerEventsDataKey: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['all', 'nearest'])
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Line);
 
@@ -22340,15 +22422,13 @@ var CodeBlockBody = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_la
 }).withConfig({
   displayName: "CodeBlockBody",
   componentId: "sc-13u859f-0"
-})(["background-color:", ";overflow-y:auto;::-webkit-scrollbar{height:10px;width:10px;}::-webkit-scrollbar-thumb{background-color:", ";border-radius:10px;border:0 solid transparent;background-clip:content-box;}::-webkit-scrollbar-track-piece{background:", ";}position:relative;", ""], function (props) {
+})(["background-color:", ";overflow-y:auto;::-webkit-scrollbar{height:10px;width:10px;}::-webkit-scrollbar-thumb{background-color:", ";border-radius:10px;border:0 solid transparent;background-clip:content-box;}::-webkit-scrollbar-track-piece{background:", ";}position:relative;"], function (props) {
   return _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color[props.$theme == 'white' ? 'gray_2' : 'gray_12'];
-}, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_11, function (props) {
-  return _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color[props.$theme == 'white' ? 'gray_8' : 'gray_11_50'];
-}, '' /* ${CodeBlockCopyBtn} {
-      position: sticky;
-      top: 0;
-      } */);
-
+}, function (props) {
+  return _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color[props.$theme == 'white' ? 'gray_3' : 'gray_11_50'];
+}, function (props) {
+  return _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color[props.$theme == 'white' ? 'gray_8' : 'gray_10'];
+});
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CodeSnippet);
 
 /***/ }),
@@ -23452,7 +23532,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
-var _excluded = ["variant", "disabled", "active", "icon", "tooltip", "tooltipPlacement"];
+var _excluded = ["variant", "disabled", "active", "icon", "tooltip", "tooltipPlacement", "size", "noBackColor"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -23470,10 +23550,14 @@ var IconButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwa
     icon = props.icon,
     tooltip = props.tooltip,
     tooltipPlacement = props.tooltipPlacement,
+    size = props.size,
+    noBackColor = props.noBackColor,
     rest = _objectWithoutProperties(props, _excluded);
+  size = calcSize(variant, size);
+  noBackColor = variant == 'ghost' || noBackColor;
   var ic = _icons__WEBPACK_IMPORTED_MODULE_3__["default"][icon];
   if (!ic) return null;
-  var iconSize = variant == 'icon-button' ? 18 : 16;
+  var iconSize = size == 'lg' || size == 'md' ? 18 : 16;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_5__["default"], {
     tooltip: tooltip,
     placement: tooltipPlacement
@@ -23481,7 +23565,8 @@ var IconButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwa
     ref: ref
   }, rest, {
     disabled: disabled,
-    $variant: variant,
+    $size: size,
+    $noBackColor: noBackColor,
     $active: active
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledSvg, {
     viewBox: ic.viewBox,
@@ -23493,21 +23578,28 @@ var IconButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwa
 });
 IconButton.displayName = 'IconButton';
 IconButton.defaultProps = {
-  variant: 'icon-button'
+  size: 'md'
 };
 IconButton.propTypes = {
-  variant: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['icon', 'icon-button', 'ghost']),
+  // variant: PT.oneOf(['icon', 'icon-button', 'ghost']),
   icon: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_4__.iconNames).isRequired,
   disabled: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
   active: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
   tooltip: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().node),
-  tooltipPlacement: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_4__.tooltipPlacements)
+  tooltipPlacement: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_4__.tooltipPlacements),
+  size: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['xs', 'sm', 'md', 'lg']),
+  noBackColor: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool)
 };
 var StyledIconButton = styled_components__WEBPACK_IMPORTED_MODULE_1___default().button.withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-114c1w5-0"
 })(["display:flex;align-items:center;justify-content:center;border-radius:4px;padding:0;box-sizing:border-box;", " cursor:pointer;", ""], function (props) {
-  return (0,_utils__WEBPACK_IMPORTED_MODULE_4__.toSize)(props.$variant == 'icon-button' ? 36 : 24);
+  return (0,_utils__WEBPACK_IMPORTED_MODULE_4__.toSize)({
+    lg: 40,
+    md: 36,
+    sm: 28,
+    xs: 24
+  }[props.$size] || 36);
 }, function (props) {
   var backColor = 'transparent';
   var border = "1px solid ".concat(_theme__WEBPACK_IMPORTED_MODULE_6__["default"].color.gray_6);
@@ -23520,12 +23612,12 @@ var StyledIconButton = styled_components__WEBPACK_IMPORTED_MODULE_1___default().
     backColor = _theme__WEBPACK_IMPORTED_MODULE_6__["default"].color.blue_4;
     border = "1px solid ".concat(_theme__WEBPACK_IMPORTED_MODULE_6__["default"].color.blue_4);
   }
-  if (props.$variant == 'ghost') {
+  if (props.$noBackColor) {
     backColor = 'transparent';
     hoverBackColor = 'transparent';
     activeBackColor = 'transparent';
   }
-  if (props.$variant == 'icon' || props.$variant == 'ghost') {
+  if (props.$size == 'xs') {
     hoverBorder = '0 none';
     activeBorder = '0 none';
     disabledBorder = '0 none';
@@ -23541,6 +23633,10 @@ var StyledSvg = styled_components__WEBPACK_IMPORTED_MODULE_1___default().svg.wit
 }, function (props) {
   return (0,_utils__WEBPACK_IMPORTED_MODULE_4__.toSize)(props.$size);
 }, StyledIconButton, _theme__WEBPACK_IMPORTED_MODULE_6__["default"].color.gray_11_25, StyledIconButton, _theme__WEBPACK_IMPORTED_MODULE_6__["default"].color.blue_11, StyledIconButton, _theme__WEBPACK_IMPORTED_MODULE_6__["default"].color.gray_7);
+var calcSize = function calcSize(variant, size) {
+  if (!variant) return size;
+  return variant == 'icon-button' ? 'md' : 'xs';
+};
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (IconButton);
 
 /***/ }),
@@ -23837,7 +23933,10 @@ CompareTo.defaultProps = {
 };
 CompareTo.propTypes = {
   value: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().any),
-  options: prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_1___default().any))
+  options: prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_1___default().any)),
+  size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['sm', 'md', 'lg']),
+  format: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  placeholder: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 var CompareToMenuList = function CompareToMenuList(props) {
   var className = props.className,
@@ -24014,7 +24113,7 @@ DatePicker.propTypes = {
   label: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func)]),
   labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
   helperText: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func)]),
-  size: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['sm', 'md', 'lg']),
+  size: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['xs', 'sm', 'md', 'lg']),
   disabledDays: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().any),
   renderPopover: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
   isRange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
@@ -25253,6 +25352,7 @@ var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRe
   }, [onChange, minValue, maxValue]);
   var heightCalculationCallback = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
     var sizes = {
+      'xs': 28,
       'sm': 36,
       'md': 40,
       'lg': 48
@@ -25299,7 +25399,7 @@ Number.propTypes = {
   label: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)]),
   labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   helperText: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)]),
-  size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['sm', 'md', 'lg'])
+  size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['xs', 'sm', 'md', 'lg'])
 };
 var NumberField = styled_components__WEBPACK_IMPORTED_MODULE_2___default().input.attrs({
   type: 'number'
@@ -25847,6 +25947,7 @@ HelperText.propTypes = {
 var useHeightCalculationCallback = function useHeightCalculationCallback(size) {
   return (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function () {
     var height = {
+      xs: 28,
       sm: 36,
       md: 40,
       lg: 48
@@ -26008,7 +26109,7 @@ Textbox.propTypes = {
   label: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)]),
   labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   helperText: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)]),
-  size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['sm', 'md', 'lg']),
+  size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['xs', 'sm', 'md', 'lg']),
   autofocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
 };
 Textbox.defaultProps = {
@@ -27945,7 +28046,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /*jslint react:true*/
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["data", "columnsSort", "pageSize", "pageSizes", "children", "stateManager", "hooks", "NoDataComp", "LoadingComp", "isLoading", "onPageChange", "manualPagination", "totalCount", "getHeaderProps", "getColumnProps", "getRowProps", "getCellProps", "getFooterProps"];
+var _excluded = ["data", "columnsSort", "pageSize", "pageSizes", "children", "stateManager", "hooks", "NoDataComp", "LoadingComp", "noDataText", "loadingText", "isLoading", "onPageChange", "manualPagination", "totalCount", "getHeaderProps", "getColumnProps", "getRowProps", "getCellProps", "getFooterProps"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -28002,10 +28103,12 @@ var Provider = function Provider(props) {
     stateManager = props.stateManager,
     _props$hooks = props.hooks,
     hooks = _props$hooks === void 0 ? [] : _props$hooks,
-    _props$NoDataComp = props.NoDataComp,
-    NoDataComp = _props$NoDataComp === void 0 ? NoDataBody : _props$NoDataComp,
-    _props$LoadingComp = props.LoadingComp,
-    LoadingComp = _props$LoadingComp === void 0 ? LoadingBody : _props$LoadingComp,
+    NoDataComp = props.NoDataComp,
+    LoadingComp = props.LoadingComp,
+    _props$noDataText = props.noDataText,
+    noDataText = _props$noDataText === void 0 ? 'No data' : _props$noDataText,
+    _props$loadingText = props.loadingText,
+    loadingText = _props$loadingText === void 0 ? 'Loading...' : _props$loadingText,
     _props$isLoading = props.isLoading,
     isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
     onPageChange = props.onPageChange,
@@ -28068,12 +28171,16 @@ var Provider = function Provider(props) {
       pageSize: _pageSize
     });
   }, [manualPagination, totalCount, pageIndex, _pageSize]);
+  var _LoadingComp = useComp(loadingText, LoadingComp);
+  var _NoDataComp = useComp(noDataText, NoDataComp);
+  var value = _objectSpread(_objectSpread({
+    columnsSort: columnsSort
+  }, table), {}, {
+    LoadingComp: _LoadingComp,
+    NoDataComp: _NoDataComp
+  });
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(TableContext.Provider, {
-    value: _objectSpread({
-      columnsSort: columnsSort,
-      NoDataComp: NoDataComp,
-      LoadingComp: LoadingComp
-    }, table)
+    value: value
   }, children);
 };
 Provider.displayName = 'Table.Provider';
@@ -28118,7 +28225,9 @@ Provider.propTypes = {
   getColumnProps: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
   getRowProps: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
   getCellProps: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  getFooterProps: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func)
+  getFooterProps: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
+  noDataText: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func)]),
+  loadingText: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func)])
 };
 var calcPageCount = function calcPageCount(totalCount, pageSize) {
   return Math.ceil(totalCount / pageSize);
@@ -28139,6 +28248,13 @@ var useCanHideColumns = function useCanHideColumns(hooks) {
   });
 };
 useCanHideColumns.pluginName = 'useCanHideColumns';
+var useComp = function useComp(text, Comp) {
+  return (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    if (Comp) return Comp;
+    if (!text || typeof text != 'string' || text.trim() == '') return text;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(EmptyBody, null, text);
+  }, [text, Comp]);
+};
 var EmptyBody = function EmptyBody(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_3__.Flex, {
@@ -28149,12 +28265,6 @@ var EmptyBody = function EmptyBody(_ref) {
     color: "gray_11_50"
   }, children));
 };
-var NoDataBody = function NoDataBody() {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(EmptyBody, null, "No data");
-};
-var LoadingBody = function LoadingBody() {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(EmptyBody, null, "Loading...");
-};
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Provider);
 
 /***/ }),
@@ -28479,6 +28589,45 @@ useEditableColumns.pluginName = 'useEditableColumns';
 
 /***/ }),
 
+/***/ "./src/table/flex_renderer.js":
+/*!************************************!*\
+  !*** ./src/table/flex_renderer.js ***!
+  \************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   flexRender: () => (/* binding */ flexRender)
+/* harmony export */ });
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+
+/**
+ * If rendering headers, cells, or footers with custom markup,
+ * use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+ */
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var flexRender = function flexRender(Comp, props) {
+  return !Comp ? null : isReactComponent(Comp) ? /*#__PURE__*/React.createElement(Comp, props) : Comp;
+};
+var isReactComponent = function isReactComponent(component) {
+  return isClassComponent(component) || typeof component === 'function' || isExoticComponent(component);
+};
+var isClassComponent = function isClassComponent(component) {
+  return typeof component === 'function' && function () {
+    var proto = Object.getPrototypeOf(component);
+    return proto.prototype && proto.prototype.isReactComponent;
+  }();
+};
+var isExoticComponent = function isExoticComponent(component) {
+  return _typeof(component) === 'object' && _typeof(component.$$typeof) === 'symbol' && ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description);
+};
+
+/***/ }),
+
 /***/ "./src/table/footer.js":
 /*!*****************************!*\
   !*** ./src/table/footer.js ***!
@@ -29939,6 +30088,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _header__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./header */ "./src/table/header.js");
 /* harmony import */ var _render_row__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./render_row */ "./src/table/render_row.js");
 /* harmony import */ var _sticky_header__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./sticky_header */ "./src/table/sticky_header.js");
+/* harmony import */ var _flex_renderer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./flex_renderer */ "./src/table/flex_renderer.js");
 // LICENSE_CODE ZON
 
 
@@ -29955,6 +30105,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
+
 var Table = function Table(props) {
   var className = props.className,
     rowDensity = props.rowDensity,
@@ -29977,8 +30128,8 @@ var Table = function Table(props) {
   var wrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();
   var tableRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();
   var body = function () {
-    if (isLoading) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(LoadingComp, null);
-    if (!page.length) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(NoDataComp, null);
+    if (isLoading) return (0,_flex_renderer__WEBPACK_IMPORTED_MODULE_11__.flexRender)(LoadingComp);
+    if (!page.length) return (0,_flex_renderer__WEBPACK_IMPORTED_MODULE_11__.flexRender)(NoDataComp);
     return page.map(function (row, i, arr) {
       prepareRow(row);
       if (row.isPinned) return null;
@@ -31201,14 +31352,16 @@ var Style = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef
       italic_sm: 'sm',
       italic_xs: 'xs',
       code: 'sm',
+      code_sm: 'sm',
       code_xxs: 'xxs',
       capitals: 'xs',
+      capitals_xs: 'xs',
       capitals_xxs: 'xxs'
     }[props.variant] || 'md',
     line_height: ['italic_lg', 'italic_sm'].includes(props.variant) ? 'snug' : 'none',
-    font_family: ['code', 'code_xxs'].includes(props.variant) ? 'mono' : 'sans',
+    font_family: ['code', 'code_sm', 'code_xxs'].includes(props.variant) ? 'mono' : 'sans',
     italic: ['italic_lg', 'italic_sm', 'italic_xs'].includes(props.variant),
-    uppercase: ['capitals', 'capitals_xxs'].includes(props.variant)
+    uppercase: ['capitals', 'capitals_xs', 'capitals_xxs'].includes(props.variant)
   });
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__["default"], _extends({
     ref: ref
@@ -31219,7 +31372,7 @@ Style.defaultProps = {
   variant: 'italic_lg'
 };
 Style.propTypes = {
-  variant: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['italic_lg', 'italic_sm', 'italic_xs', 'code', 'code_xxs', 'capitals', 'capitals_xxs']),
+  variant: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['italic_lg', 'italic_sm', 'italic_xs', 'code_sm', 'code_xxs', 'capitals_xs', 'capitals_xxs']),
   whiteSpace: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_2__.whiteSpaces)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Style);