@luminati-io/uikit 3.0.8 → 3.0.10

package/dist/umd/uikit.development.js

@@ -22194,14 +22194,17 @@ __webpack_require__.r(__webpack_exports__);
 
 
 var CodeBlock = function CodeBlock(props) {
-  var header = props.header,
+  var className = props.className,
+    header = props.header,
     code = props.code,
     lang = props.lang,
     max_height = props.max_height,
     themeProp = props.theme,
     lineNumbers = props.lineNumbers,
-    copyButton = props.copyButton;
+    copyButton = props.copyButton,
+    onCopy = props.onCopy;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CodeBlockWrapper, {
+    className: className,
     "data-testid": "code_block"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CodeBlockHeader, {
     $theme: themeProp
@@ -22211,7 +22214,8 @@ var CodeBlock = function CodeBlock(props) {
     code: code,
     theme: themeProp,
     lineNumbers: lineNumbers,
-    copyButton: copyButton
+    copyButton: copyButton,
+    onCopy: onCopy
   }));
 };
 CodeBlock.displayName = 'CodeBlock';
@@ -22291,7 +22295,8 @@ var CodeSnippet = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     themeProp = props.theme,
     lineNumbers = props.lineNumbers,
     copyButton = props.copyButton,
-    loading = props.loading;
+    loading = props.loading,
+    onCopy = props.onCopy;
   var codeRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CodeBlockBody, {
     ref: ref,
@@ -22307,7 +22312,8 @@ var CodeSnippet = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
   }), !!copyButton && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_copy_button__WEBPACK_IMPORTED_MODULE_6__["default"], {
     code: code,
     theme: themeProp,
-    codeRef: codeRef
+    codeRef: codeRef,
+    onCopy: onCopy
   })), !!loading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_skeleton__WEBPACK_IMPORTED_MODULE_7__["default"], {
     theme: themeProp
   }));
@@ -22334,15 +22340,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);
 
 /***/ }),
@@ -22395,7 +22399,8 @@ var icon = _icons__WEBPACK_IMPORTED_MODULE_2__["default"].Copy;
 var CopyButton = function CopyButton(props) {
   var code = props.code,
     themeProp = props.theme,
-    codeRef = props.codeRef;
+    codeRef = props.codeRef,
+    onCopy = props.onCopy;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(STATE.READY),
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
@@ -22413,6 +22418,7 @@ var CopyButton = function CopyButton(props) {
       success: function success() {
         setState(STATE.SUCCESS);
         resetText();
+        onCopy === null || onCopy === void 0 ? void 0 : onCopy();
       },
       error: function error() {
         setState(STATE.ERROR);
@@ -23444,7 +23450,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; }
@@ -23462,10 +23468,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
@@ -23473,7 +23483,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,
@@ -23485,21 +23496,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);
@@ -23512,12 +23530,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';
@@ -23533,6 +23551,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);
 
 /***/ }),
@@ -23829,7 +23851,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,
@@ -24006,7 +24031,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),
@@ -25245,6 +25270,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
@@ -25291,7 +25317,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'
@@ -25839,6 +25865,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
@@ -26000,7 +26027,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 = {
@@ -27937,7 +27964,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; }
@@ -27994,10 +28021,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,
@@ -28060,12 +28089,17 @@ var Provider = function Provider(props) {
       pageSize: _pageSize
     });
   }, [manualPagination, totalCount, pageIndex, _pageSize]);
+  var _LoadingComp = useComp(loadingText, LoadingComp);
+  var _NoDataComp = useComp(noDataText, NoDataComp);
+  console.log(_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';
@@ -28110,7 +28144,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);
@@ -28131,6 +28167,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, {
@@ -28141,12 +28184,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);
 
 /***/ }),
@@ -28471,6 +28508,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 ***!
@@ -29931,6 +30007,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
 
 
@@ -29947,6 +30024,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
+
 var Table = function Table(props) {
   var className = props.className,
     rowDensity = props.rowDensity,
@@ -29969,8 +30047,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;
@@ -31193,14 +31271,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
@@ -31211,7 +31291,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);