@commercetools-uikit/data-table-manager 12.2.1 → 12.2.5

package/dist/commercetools-uikit-data-table-manager.esm.js

@@ -9,10 +9,9 @@ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import { useState, useMemo, useCallback, cloneElement } from 'react';
 import Spacings from '@commercetools-uikit/spacings';
-import { jsx } from '@emotion/react';
-import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
 import _toConsumableArray from '@babel/runtime-corejs3/helpers/esm/toConsumableArray';
 import _styled from '@emotion/styled/base';
@@ -49,7 +48,7 @@ var UPDATE_ACTIONS = {
 var COLUMN_MANAGER = 'columnManager';
 var DISPLAY_SETTINGS = 'displaySettings';
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$2() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 var HeaderContainer = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "e16v1mgb0"
@@ -62,40 +61,52 @@ var HeaderContainer = _styled("div", process.env.NODE_ENV === "production" ? {
 } : {
   name: "1bhm8h2",
   styles: "display:flex;flex:1;justify-content:space-between",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNldHRpbmdzLWNvbnRhaW5lci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVa0MiLCJmaWxlIjoic2V0dGluZ3MtY29udGFpbmVyLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBBY2Nlc3NpYmxlQnV0dG9uIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2FjY2Vzc2libGUtYnV0dG9uJztcbmltcG9ydCBDb2xsYXBzaWJsZU1vdGlvbiBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb2xsYXBzaWJsZS1tb3Rpb24nO1xuaW1wb3J0IENhcmQgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvY2FyZCc7XG5pbXBvcnQgU3BhY2luZ3MgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MnO1xuaW1wb3J0IFRleHQgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdGV4dCc7XG5pbXBvcnQgeyBDbG9zZUljb24gfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pY29ucyc7XG5cbmNvbnN0IEhlYWRlckNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXg6IDE7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbmA7XG5cbmNvbnN0IFNldHRpbmdzQ29udGFpbmVyID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IGludGwgPSB1c2VJbnRsKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8Q29sbGFwc2libGVNb3Rpb24gaXNEZWZhdWx0Q2xvc2VkPXtmYWxzZX0+XG4gICAgICB7KHsgcmVnaXN0ZXJDb250ZW50Tm9kZSwgY29udGFpbmVyU3R5bGVzIH0pID0+IChcbiAgICAgICAgPENhcmQgdHlwZT1cImZsYXRcIiB0aGVtZT17cHJvcHMuY29udGFpbmVyVGhlbWV9PlxuICAgICAgICAgIDxTcGFjaW5ncy5TdGFjayBzY2FsZT1cInhzXCI+XG4gICAgICAgICAgICA8SGVhZGVyQ29udGFpbmVyPlxuICAgICAgICAgICAgICA8VGV4dC5IZWFkbGluZSBhcz1cImgzXCIgaW50bE1lc3NhZ2U9e3Byb3BzLnRpdGxlfSAvPlxuICAgICAgICAgICAgICA8QWNjZXNzaWJsZUJ1dHRvblxuICAgICAgICAgICAgICAgIG9uQ2xpY2s9e3Byb3BzLm9uQ2xvc2V9XG4gICAgICAgICAgICAgICAgbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShwcm9wcy5jbG9zZUJ1dHRvbkxhYmVsKX1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxDbG9zZUljb24gc2l6ZT1cIm1lZGl1bVwiIC8+XG4gICAgICAgICAgICAgIDwvQWNjZXNzaWJsZUJ1dHRvbj5cbiAgICAgICAgICAgIDwvSGVhZGVyQ29udGFpbmVyPlxuICAgICAgICAgICAgPFNwYWNpbmdzLlN0YWNrIHNjYWxlPVwieHNcIj5cbiAgICAgICAgICAgICAgPFNwYWNpbmdzLkluc2V0IHNjYWxlPVwic1wiPlxuICAgICAgICAgICAgICAgIDxkaXYgc3R5bGU9e2NvbnRhaW5lclN0eWxlc30+XG4gICAgICAgICAgICAgICAgICA8ZGl2IHJlZj17cmVnaXN0ZXJDb250ZW50Tm9kZX0+e3Byb3BzLmNoaWxkcmVufTwvZGl2PlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICA8L1NwYWNpbmdzLkluc2V0PlxuICAgICAgICAgICAgICB7KHByb3BzLnNlY29uZGFyeUJ1dHRvbiB8fCBwcm9wcy5wcmltYXJ5QnV0dG9uKSAmJiAoXG4gICAgICAgICAgICAgICAgPFNwYWNpbmdzLklubGluZSBqdXN0aWZ5Q29udGVudD1cImZsZXgtZW5kXCI+XG4gICAgICAgICAgICAgICAgICB7cHJvcHMuc2Vjb25kYXJ5QnV0dG9ufVxuICAgICAgICAgICAgICAgICAge3Byb3BzLnByaW1hcnlCdXR0b259XG4gICAgICAgICAgICAgICAgPC9TcGFjaW5ncy5JbmxpbmU+XG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICA8L1NwYWNpbmdzLlN0YWNrPlxuICAgICAgICAgIDwvU3BhY2luZ3MuU3RhY2s+XG4gICAgICAgIDwvQ2FyZD5cbiAgICAgICl9XG4gICAgPC9Db2xsYXBzaWJsZU1vdGlvbj5cbiAgKTtcbn07XG5cblNldHRpbmdzQ29udGFpbmVyLmRpc3BsYXlOYW1lID0gJ1NldHRpbmdzQ29udGFpbmVyJztcblNldHRpbmdzQ29udGFpbmVyLnByb3BUeXBlcyA9IHtcbiAgdGl0bGU6IFByb3BUeXBlcy5zaGFwZSh7XG4gICAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgICBkZWZhdWx0TWVzc2FnZTogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICB9KS5pc1JlcXVpcmVkLFxuICBjbG9zZUJ1dHRvbkxhYmVsOiBQcm9wVHlwZXMuc2hhcGUoe1xuICAgIGlkOiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG4gICAgZGVmYXVsdE1lc3NhZ2U6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgfSkuaXNSZXF1aXJlZCxcbiAgb25DbG9zZTogUHJvcFR5cGVzLmZ1bmMuaXNSZXF1aXJlZCxcbiAgcHJpbWFyeUJ1dHRvbjogUHJvcFR5cGVzLmVsZW1lbnQsXG4gIHNlY29uZGFyeUJ1dHRvbjogUHJvcFR5cGVzLmVsZW1lbnQsXG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZS5pc1JlcXVpcmVkLFxuICBjb250YWluZXJUaGVtZTogUHJvcFR5cGVzLm9uZU9mKFsnbGlnaHQnLCAnZGFyayddKSxcbn07XG5TZXR0aW5nc0NvbnRhaW5lci5kZWZhdWx0UHJvcHMgPSB7XG4gIGNvbnRhaW5lclRoZW1lOiAnZGFyaycsXG59O1xuXG5leHBvcnQgZGVmYXVsdCBTZXR0aW5nc0NvbnRhaW5lcjtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 });
 
 var SettingsContainer = function SettingsContainer(props) {
   var intl = useIntl();
   return jsx(CollapsibleMotion, {
-    isDefaultClosed: false
-  }, function (_ref) {
-    var registerContentNode = _ref.registerContentNode,
-        containerStyles = _ref.containerStyles;
-    return jsx(Card, {
-      type: "flat",
-      theme: props.containerTheme
-    }, jsx(Spacings.Stack, {
-      scale: "xs"
-    }, jsx(HeaderContainer, null, jsx(Text.Headline, {
-      as: "h3",
-      intlMessage: props.title
-    }), jsx(AccessibleButton, {
-      onClick: props.onClose,
-      label: intl.formatMessage(props.closeButtonLabel)
-    }, jsx(CloseIcon, {
-      size: "medium"
-    }))), jsx(Spacings.Stack, {
-      scale: "xs"
-    }, jsx(Spacings.Inset, {
-      scale: "s"
-    }, jsx("div", {
-      style: containerStyles
-    }, jsx("div", {
-      ref: registerContentNode
-    }, props.children))), (props.secondaryButton || props.primaryButton) && jsx(Spacings.Inline, {
-      justifyContent: "flex-end"
-    }, props.secondaryButton, props.primaryButton))));
+    isDefaultClosed: false,
+    children: function children(_ref) {
+      var registerContentNode = _ref.registerContentNode,
+          containerStyles = _ref.containerStyles;
+      return jsx(Card, {
+        type: "flat",
+        theme: props.containerTheme,
+        children: jsxs(Spacings.Stack, {
+          scale: "xs",
+          children: [jsxs(HeaderContainer, {
+            children: [jsx(Text.Headline, {
+              as: "h3",
+              intlMessage: props.title
+            }), jsx(AccessibleButton, {
+              onClick: props.onClose,
+              label: intl.formatMessage(props.closeButtonLabel),
+              children: jsx(CloseIcon, {
+                size: "medium"
+              })
+            })]
+          }), jsxs(Spacings.Stack, {
+            scale: "xs",
+            children: [jsx(Spacings.Inset, {
+              scale: "s",
+              children: jsx("div", {
+                style: containerStyles,
+                children: jsx("div", {
+                  ref: registerContentNode,
+                  children: props.children
+                })
+              })
+            }), (props.secondaryButton || props.primaryButton) && jsxs(Spacings.Inline, {
+              justifyContent: "flex-end",
+              children: [props.secondaryButton, props.primaryButton]
+            })]
+          })]
+        })
+      });
+    }
   });
 };
 
@@ -118,8 +129,9 @@ SettingsContainer.propTypes = process.env.NODE_ENV !== "production" ? {
 SettingsContainer.defaultProps = {
   containerTheme: 'dark'
 };
+var SettingsContainer$1 = SettingsContainer;
 
-var messages = defineMessages({
+var messages$3 = defineMessages({
   title: {
     id: 'UIKit.DataTableManager.DensityManager.title',
     description: 'Title for the density manager component.',
@@ -171,51 +183,73 @@ var DensityManager = function DensityManager(props) {
   var intl = useIntl();
   var textWrappingOption = props.isWrappingText ? SHOW_HIDE_ON_DEMAND : WRAPPED_TEXT_VISIBLE;
   var densityDisplayOption = props.isCondensed ? DENSITY_COMPACT : DENSITY_DEFAULT;
-  return jsx(SettingsContainer, {
-    title: messages.title,
-    closeButtonLabel: messages.closeButtonLabel,
+  return jsx(SettingsContainer$1, {
+    title: messages$3.title,
+    closeButtonLabel: messages$3.closeButtonLabel,
     onClose: props.onClose,
     primaryButton: props.primaryButton,
     secondaryButton: props.secondaryButton,
-    containerTheme: props.managerTheme
-  }, jsx(Grid, {
-    gridGap: customProperties.spacingM,
-    gridTemplateColumns: "repeat(2, 1fr)"
-  }, jsx(Grid.Item, null, jsx(Spacings.Stack, {
-    scale: "s"
-  }, jsx(FieldLabel, {
-    title: intl.formatMessage(messages.textWrappingSubtitle)
-  }), jsx(AccessibleHiden, null, jsx("label", {
-    htmlFor: "text-wrapping-0"
-  }, "Select radio option: display full text"), jsx("label", {
-    htmlFor: "text-wrapping-1"
-  }, "Select radio option: display full previews")), jsx(RadioInput.Group, {
-    id: "text-wrapping",
-    name: "text-wrapping",
-    value: textWrappingOption,
-    onChange: props.onTextWrappingChange
-  }, jsx(RadioInput.Option, {
-    value: WRAPPED_TEXT_VISIBLE
-  }, intl.formatMessage(messages.textWrappingAllWrapVisibleOption)), jsx(RadioInput.Option, {
-    value: SHOW_HIDE_ON_DEMAND
-  }, intl.formatMessage(messages.textWrappingShowHideOnDemandOption))))), jsx(Grid.Item, null, jsx(Spacings.Stack, {
-    scale: "s"
-  }, jsx(FieldLabel, {
-    title: intl.formatMessage(messages.densityDisplaySubtitle)
-  }), jsx(AccessibleHiden, null, jsx("label", {
-    htmlFor: "density-display-0"
-  }, "Select radio option: density default"), jsx("label", {
-    htmlFor: "density-display-1"
-  }, "Select radio option: density compact")), jsx(RadioInput.Group, {
-    id: "density-display",
-    name: "density-display",
-    value: densityDisplayOption,
-    onChange: props.onDensityDisplayChange
-  }, jsx(RadioInput.Option, {
-    value: DENSITY_DEFAULT
-  }, intl.formatMessage(messages.densityDisplayDefaultOption)), jsx(RadioInput.Option, {
-    value: DENSITY_COMPACT
-  }, intl.formatMessage(messages.densityDisplayCompactOption)))))));
+    containerTheme: props.managerTheme,
+    children: jsxs(Grid, {
+      gridGap: customProperties.spacingM,
+      gridTemplateColumns: "repeat(2, 1fr)",
+      children: [jsx(Grid.Item, {
+        children: jsxs(Spacings.Stack, {
+          scale: "s",
+          children: [jsx(FieldLabel, {
+            title: intl.formatMessage(messages$3.textWrappingSubtitle)
+          }), jsxs(AccessibleHiden, {
+            children: [jsx("label", {
+              htmlFor: "text-wrapping-0",
+              children: "Select radio option: display full text"
+            }), jsx("label", {
+              htmlFor: "text-wrapping-1",
+              children: "Select radio option: display full previews"
+            })]
+          }), jsxs(RadioInput.Group, {
+            id: "text-wrapping",
+            name: "text-wrapping",
+            value: textWrappingOption,
+            onChange: props.onTextWrappingChange,
+            children: [jsx(RadioInput.Option, {
+              value: WRAPPED_TEXT_VISIBLE,
+              children: intl.formatMessage(messages$3.textWrappingAllWrapVisibleOption)
+            }), jsx(RadioInput.Option, {
+              value: SHOW_HIDE_ON_DEMAND,
+              children: intl.formatMessage(messages$3.textWrappingShowHideOnDemandOption)
+            })]
+          })]
+        })
+      }), jsx(Grid.Item, {
+        children: jsxs(Spacings.Stack, {
+          scale: "s",
+          children: [jsx(FieldLabel, {
+            title: intl.formatMessage(messages$3.densityDisplaySubtitle)
+          }), jsxs(AccessibleHiden, {
+            children: [jsx("label", {
+              htmlFor: "density-display-0",
+              children: "Select radio option: density default"
+            }), jsx("label", {
+              htmlFor: "density-display-1",
+              children: "Select radio option: density compact"
+            })]
+          }), jsxs(RadioInput.Group, {
+            id: "density-display",
+            name: "density-display",
+            value: densityDisplayOption,
+            onChange: props.onDensityDisplayChange,
+            children: [jsx(RadioInput.Option, {
+              value: DENSITY_DEFAULT,
+              children: intl.formatMessage(messages$3.densityDisplayDefaultOption)
+            }), jsx(RadioInput.Option, {
+              value: DENSITY_COMPACT,
+              children: intl.formatMessage(messages$3.densityDisplayCompactOption)
+            })]
+          })]
+        })
+      })]
+    })
+  });
 };
 
 DensityManager.displayName = 'DensityManager';
@@ -233,6 +267,7 @@ DensityManager.propTypes = process.env.NODE_ENV !== "production" ? {
   onClose: PropTypes.func.isRequired,
   managerTheme: PropTypes.oneOf(['light', 'dark'])
 } : {};
+var DisplaySettingsManager = DensityManager;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -247,6 +282,7 @@ var DraggingSmall = _styled("small", process.env.NODE_ENV === "production" ? {
 } : {
   name: "1fhyj3b",
   styles: "&:hover{cursor:grab;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyYWdnYWJsZS10YWcuc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVrQyIsImZpbGUiOiJkcmFnZ2FibGUtdGFnLnN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuY29uc3QgRHJhZ2dpbmdTbWFsbCA9IHN0eWxlZC5zbWFsbGBcbiAgJjpob3ZlciB7XG4gICAgY3Vyc29yOiBncmFiO1xuICB9XG5gO1xuXG5jb25zdCBEcmFnZ2luZ0NvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gICR7RHJhZ2dpbmdTbWFsbH07XG5gO1xuXG5leHBvcnQgZGVmYXVsdCBEcmFnZ2luZ0NvbnRhaW5lcjtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
 });
 
@@ -255,7 +291,13 @@ var DraggingContainer = _styled("div", process.env.NODE_ENV === "production" ? {
 } : {
   target: "ed3a5rx0",
   label: "DraggingContainer"
-})(DraggingSmall, ";");
+})(DraggingSmall, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyYWdnYWJsZS10YWcuc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVFvQyIsImZpbGUiOiJkcmFnZ2FibGUtdGFnLnN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuY29uc3QgRHJhZ2dpbmdTbWFsbCA9IHN0eWxlZC5zbWFsbGBcbiAgJjpob3ZlciB7XG4gICAgY3Vyc29yOiBncmFiO1xuICB9XG5gO1xuXG5jb25zdCBEcmFnZ2luZ0NvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gICR7RHJhZ2dpbmdTbWFsbH07XG5gO1xuXG5leHBvcnQgZGVmYXVsdCBEcmFnZ2luZ0NvbnRhaW5lcjtcbiJdfQ== */"));
+
+var DraggingContainer$1 = DraggingContainer;
+
+function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$3(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var DraggableTag = function DraggableTag(props) {
   var handleRemoveColumn = function handleRemoveColumn() {
@@ -265,21 +307,27 @@ var DraggableTag = function DraggableTag(props) {
   return jsx(Draggable, {
     draggableId: props.column.key,
     index: props.index,
-    isDragDisabled: props.isDisabled
-  }, function (provided) {
-    return jsx(Spacings.Inset, {
-      scale: "xs"
-    }, jsx(DraggingContainer, _extends({
-      ref: provided.innerRef
-    }, provided.draggableProps, provided.dragHandleProps), jsx(Tag, {
-      onRemove: props.onRemove ? handleRemoveColumn : undefined,
-      isDisabled: props.isDisabled
-    }, jsx(Spacings.Inline, {
-      alignItems: "center"
-    }, jsx(DragIcon, {
-      "data-testid": "drag-icon",
-      size: "medium"
-    }), props.column.label))), provided.placeholder);
+    isDragDisabled: props.isDisabled,
+    children: function children(provided) {
+      return jsxs(Spacings.Inset, {
+        scale: "xs",
+        children: [jsx(DraggingContainer$1, _objectSpread$3(_objectSpread$3(_objectSpread$3({
+          ref: provided.innerRef
+        }, provided.draggableProps), provided.dragHandleProps), {}, {
+          children: jsx(Tag, {
+            onRemove: props.onRemove ? handleRemoveColumn : undefined,
+            isDisabled: props.isDisabled,
+            children: jsxs(Spacings.Inline, {
+              alignItems: "center",
+              children: [jsx(DragIcon, {
+                "data-testid": "drag-icon",
+                size: "medium"
+              }), props.column.label]
+            })
+          })
+        })), provided.placeholder]
+      });
+    }
   });
 };
 
@@ -293,15 +341,18 @@ DraggableTag.propTypes = process.env.NODE_ENV !== "production" ? {
   onRemove: PropTypes.func,
   isDisabled: PropTypes.bool
 } : {};
+var DraggableTag$1 = DraggableTag;
 
 var TagContainerEditable = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "ecy2q1d0"
 } : {
   target: "ecy2q1d0",
   label: "TagContainerEditable"
-})("background-color:", customProperties.backgroundColorForInput, ";border:", customProperties.borderRadius1, " solid ", customProperties.colorNeutral60, ";border-radius:", customProperties.borderRadius6, ";padding:", customProperties.spacingS, ";height:", customProperties.constraint7, ";overflow:auto;");
+})("background-color:", customProperties.backgroundColorForInput, ";border:", customProperties.borderRadius1, " solid ", customProperties.colorNeutral60, ";border-radius:", customProperties.borderRadius6, ";padding:", customProperties.spacingS, ";height:", customProperties.constraint7, ";overflow:auto;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZy1jb250YWluZXItZWRpdGFibGUuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR3VDIiwiZmlsZSI6InRhZy1jb250YWluZXItZWRpdGFibGUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxuY29uc3QgVGFnQ29udGFpbmVyRWRpdGFibGUgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXR9O1xuICBib3JkZXI6ICR7dmFycy5ib3JkZXJSYWRpdXMxfSBzb2xpZCAke3ZhcnMuY29sb3JOZXV0cmFsNjB9O1xuICBib3JkZXItcmFkaXVzOiAke3ZhcnMuYm9yZGVyUmFkaXVzNn07XG4gIHBhZGRpbmc6ICR7dmFycy5zcGFjaW5nU307XG4gIGhlaWdodDogJHt2YXJzLmNvbnN0cmFpbnQ3fTtcbiAgb3ZlcmZsb3c6IGF1dG87XG5gO1xuXG5leHBvcnQgZGVmYXVsdCBUYWdDb250YWluZXJFZGl0YWJsZTtcbiJdfQ== */"));
 
-var messages$1 = defineMessages({
+var TagContainerEditable$1 = TagContainerEditable;
+
+var messages$2 = defineMessages({
   loadMoreAttributesHint: {
     id: 'UIKit.DataTableManager.ColumnManager.DroppablePanel.loadMoreAttributesHint',
     description: 'Indicate that the user can use the search input to load more attributes',
@@ -311,37 +362,43 @@ var messages$1 = defineMessages({
 
 var DroppablePanel = function DroppablePanel(props) {
   return jsx(Droppable, {
-    droppableId: props.droppableId
-  }, function (provided) {
-    var _context;
-
-    return jsx(TagContainerEditable, {
-      "data-testid": props.droppableId,
-      ref: provided.innerRef
-    }, props.columns.length === 0 ? jsx(Spacings.Inset, {
-      scale: "s"
-    }, jsx(Text.Detail, {
-      tone: "secondary"
-    }, props.noColumnsText)) : jsx(React.Fragment, null, _mapInstanceProperty(_context = props.columns).call(_context, function (column, index) {
-      var _context2;
-
-      return jsx(DraggableTag, {
-        key: _concatInstanceProperty(_context2 = "".concat(column.key, "-")).call(_context2, index),
-        column: column,
-        index: index,
-        onRemove: props.onRemove ? function () {
-          var _context3, _context4, _context5;
-
-          return props.onRemove(_concatInstanceProperty(_context3 = []).call(_context3, _toConsumableArray(_sliceInstanceProperty(_context4 = props.columns).call(_context4, 0, index)), _toConsumableArray(_sliceInstanceProperty(_context5 = props.columns).call(_context5, index + 1))));
-        } : undefined,
-        isDisabled: props.isDisabled
+    droppableId: props.droppableId,
+    children: function children(provided) {
+      var _context;
+
+      return jsxs(TagContainerEditable$1, {
+        "data-testid": props.droppableId,
+        ref: provided.innerRef,
+        children: [props.columns.length === 0 ? jsx(Spacings.Inset, {
+          scale: "s",
+          children: jsx(Text.Detail, {
+            tone: "secondary",
+            children: props.noColumnsText
+          })
+        }) : jsxs(Fragment, {
+          children: [_mapInstanceProperty(_context = props.columns).call(_context, function (column, index) {
+            var _context2;
+
+            return jsx(DraggableTag$1, {
+              column: column,
+              index: index,
+              onRemove: props.onRemove ? function () {
+                var _context3, _context4, _context5;
+
+                return props.onRemove(_concatInstanceProperty(_context3 = []).call(_context3, _toConsumableArray(_sliceInstanceProperty(_context4 = props.columns).call(_context4, 0, index)), _toConsumableArray(_sliceInstanceProperty(_context5 = props.columns).call(_context5, index + 1))));
+              } : undefined,
+              isDisabled: props.isDisabled
+            }, _concatInstanceProperty(_context2 = "".concat(column.key, "-")).call(_context2, index));
+          }), props.isSearchable && jsx(Spacings.Inset, {
+            scale: "xs",
+            children: jsx(Text.Detail, {
+              tone: "secondary",
+              intlMessage: messages$2.loadMoreAttributesHint
+            })
+          })]
+        }), provided.placeholder]
       });
-    }), props.isSearchable && jsx(Spacings.Inset, {
-      scale: "xs"
-    }, jsx(Text.Detail, {
-      tone: "secondary",
-      intlMessage: messages$1.loadMoreAttributesHint
-    }))), provided.placeholder);
+    }
   });
 };
 
@@ -357,8 +414,9 @@ DroppablePanel.propTypes = process.env.NODE_ENV !== "production" ? {
   isDisabled: PropTypes.bool,
   onRemove: PropTypes.func
 } : {};
+var DroppablePanel$1 = DroppablePanel;
 
-var messages$2 = defineMessages({
+var messages$1 = defineMessages({
   title: {
     id: 'UIKit.DataTableManager.ColumnManager.title',
     description: 'Title for the column manager component.',
@@ -394,6 +452,10 @@ var messages$2 = defineMessages({
 var HIDDEN_COLUMNS_PANEL = 'hidden-columns-panel';
 var SELECTED_COLUMNS_PANEL = 'selected-columns-panel';
 
+function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context4; _forEachInstanceProperty(_context4 = ownKeys$2(Object(source), true)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context5; _forEachInstanceProperty(_context5 = ownKeys$2(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var DroppableContainer = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "e6ge22w0"
 } : {
@@ -401,7 +463,7 @@ var DroppableContainer = _styled("div", process.env.NODE_ENV === "production" ?
   label: "DroppableContainer"
 })("width:100%;position:relative;max-width:", customProperties.constraint10, ";cursor:", function (props) {
   return props.isDragging ? 'grabbing' : 'auto';
-}, ";");
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbHVtbi1zZXR0aW5ncy1tYW5hZ2VyLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCcUMiLCJmaWxlIjoiY29sdW1uLXNldHRpbmdzLW1hbmFnZXIuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB1c2VNZW1vLCB1c2VDYWxsYmFjaywgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHJlcXVpcmVkSWYgZnJvbSAncmVhY3QtcmVxdWlyZWQtaWYnO1xuaW1wb3J0IHsgdXNlSW50bCB9IGZyb20gJ3JlYWN0LWludGwnO1xuaW1wb3J0IHsgRHJhZ0Ryb3BDb250ZXh0IH0gZnJvbSAncmVhY3QtYmVhdXRpZnVsLWRuZCc7XG5pbXBvcnQgZGVib3VuY2UgZnJvbSAnZGVib3VuY2UtcHJvbWlzZSc7XG5pbXBvcnQgZGlmZmVyZW5jZVdpdGggZnJvbSAnbG9kYXNoL2RpZmZlcmVuY2VXaXRoJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IEFzeW5jU2VsZWN0SW5wdXQgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvYXN5bmMtc2VsZWN0LWlucHV0JztcbmltcG9ydCBGaWVsZExhYmVsIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ZpZWxkLWxhYmVsJztcbmltcG9ydCBTcGFjaW5ncyBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncyc7XG5pbXBvcnQge1xuICBFeWVDcm9zc2VkSWNvbixcbiAgRXllSWNvbixcbiAgU2VhcmNoSWNvbixcbn0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaWNvbnMnO1xuaW1wb3J0IERyb3BwYWJsZVBhbmVsIGZyb20gJy4uL2Ryb3BwYWJsZS1wYW5lbCc7XG5pbXBvcnQgU2V0dGluZ3NDb250YWluZXIgZnJvbSAnLi4vc2V0dGluZ3MtY29udGFpbmVyJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcbmltcG9ydCB7IEhJRERFTl9DT0xVTU5TX1BBTkVMLCBTRUxFQ1RFRF9DT0xVTU5TX1BBTkVMIH0gZnJvbSAnLi9jb25zdGFudHMnO1xuXG5jb25zdCBEcm9wcGFibGVDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICB3aWR0aDogMTAwJTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBtYXgtd2lkdGg6ICR7dmFycy5jb25zdHJhaW50MTB9O1xuICBjdXJzb3I6ICR7KHByb3BzKSA9PiAocHJvcHMuaXNEcmFnZ2luZyA/ICdncmFiYmluZycgOiAnYXV0bycpfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBoYW5kbGVDb2x1bW5zVXBkYXRlID0gKFxuICBkcmFnUmVzdWx0LFxuICBvblVwZGF0ZUNvbHVtbnMsXG4gIHNlbGVjdGVkQ29sdW1ucyxcbiAgYXZhaWxhYmxlQ29sdW1ucyxcbiAgc2V0SXNEcmFnZ2luZ1xuKSA9PiB7XG4gIHNldElzRHJhZ2dpbmcoZmFsc2UpO1xuICAvLyBJbnZhbGlkIGRyb3AgZGVzdGluYXRpb24sIGRvIG5vdGhpbmdcbiAgaWYgKCFkcmFnUmVzdWx0LmRlc3RpbmF0aW9uKSByZXR1cm47XG4gIGlmIChkcmFnUmVzdWx0LmRlc3RpbmF0aW9uLmRyb3BwYWJsZUlkID09PSBISURERU5fQ09MVU1OU19QQU5FTCkge1xuICAgIGlmIChkcmFnUmVzdWx0LnNvdXJjZS5kcm9wcGFibGVJZCA9PT0gSElEREVOX0NPTFVNTlNfUEFORUwpIHJldHVybjtcbiAgICBvblVwZGF0ZUNvbHVtbnMoW1xuICAgICAgLi4uc2VsZWN0ZWRDb2x1bW5zLnNsaWNlKDAsIGRyYWdSZXN1bHQuc291cmNlLmluZGV4KSxcbiAgICAgIC4uLnNlbGVjdGVkQ29sdW1ucy5zbGljZShkcmFnUmVzdWx0LnNvdXJjZS5pbmRleCArIDEpLFxuICAgIF0pO1xuICB9IGVsc2Uge1xuICAgIC8vIHRoZSBkZXN0aW5hdGlvbiBpcyB0aGUgc2VsZWN0ZWQgY29sdW1ucyBwYW5lbFxuXG4gICAgLy8gaXQncyBhIHN3YXAgd2hlbiB0aGUgc291cmNlIGFuZCB0aGUgZGVzdGluYXRpb24gYXJlIHRoZSBzYW1lXG4gICAgY29uc3QgaXNTd2FwID0gZHJhZ1Jlc3VsdC5zb3VyY2UuZHJvcHBhYmxlSWQgPT09IFNFTEVDVEVEX0NPTFVNTlNfUEFORUw7XG5cbiAgICBjb25zdCBpdGVtcyA9IGlzU3dhcFxuICAgICAgPyAvLyByZW1vdmUgdGhlIGRyYWdnZWQgaXRlbSBmcm9tIGl0cyBwb3NpdGlvbiBpZiBpdCBpcyBub3QgY29taW5nIGZyb21cbiAgICAgICAgLy8gdGhlIGhpZGRlbiBzZWN0aW9uIChpdCBpcyBhIHN3YXApXG4gICAgICAgIFtcbiAgICAgICAgICAuLi5zZWxlY3RlZENvbHVtbnMuc2xpY2UoMCwgZHJhZ1Jlc3VsdC5zb3VyY2UuaW5kZXgpLFxuICAgICAgICAgIC4uLnNlbGVjdGVkQ29sdW1ucy5zbGljZShkcmFnUmVzdWx0LnNvdXJjZS5pbmRleCArIDEpLFxuICAgICAgICBdXG4gICAgICA6IHNlbGVjdGVkQ29sdW1ucztcblxuICAgIGNvbnN0IGNvbHVtbnMgPSBpc1N3YXAgPyBzZWxlY3RlZENvbHVtbnMgOiBhdmFpbGFibGVDb2x1bW5zO1xuICAgIGNvbnN0IGRyYWdnZWRDb2x1bW4gPSBjb2x1bW5zLmZpbmQoXG4gICAgICAoY29sKSA9PiBjb2wua2V5ID09PSBkcmFnUmVzdWx0LmRyYWdnYWJsZUlkXG4gICAgKTtcblxuICAgIC8vIHB1c2ggdGhlIGNvbHVtbiBpbiB0aGUgbmV3IHBvc2l0aW9uXG4gICAgb25VcGRhdGVDb2x1bW5zKFtcbiAgICAgIC4uLml0ZW1zLnNsaWNlKDAsIGRyYWdSZXN1bHQuZGVzdGluYXRpb24uaW5kZXgpLFxuICAgICAgZHJhZ2dlZENvbHVtbixcbiAgICAgIC4uLml0ZW1zLnNsaWNlKGRyYWdSZXN1bHQuZGVzdGluYXRpb24uaW5kZXgpLFxuICAgIF0pO1xuICB9XG59O1xuXG5jb25zdCBEcm9wZG93bkluZGljYXRvciA9ICgpID0+IChcbiAgPFNwYWNpbmdzLklubGluZSBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+XG4gICAgPFNlYXJjaEljb24gc2NhbGU9XCJtZWRpdW1cIiBjb2xvcj1cInByaW1hcnlcIiAvPlxuICA8L1NwYWNpbmdzLklubGluZT5cbik7XG5Ecm9wZG93bkluZGljYXRvci5kaXNwbGF5TmFtZSA9ICdEcm9wZG93bkluZGljYXRvcic7XG5cbmNvbnN0IE5vdGhpbmcgPSAoKSA9PiBudWxsO1xuY29uc3Qgc2VsZWN0SW5wdXRDb21wb25lbnRzID0ge1xuICBPcHRpb246IE5vdGhpbmcsXG4gIE1lbnU6IE5vdGhpbmcsXG4gIERyb3Bkb3duSW5kaWNhdG9yLFxufTtcblxuZXhwb3J0IGNvbnN0IENvbHVtblNldHRpbmdzTWFuYWdlciA9IChwcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICBjb25zdCBbaXNEcmFnZ2luZywgc2V0SXNEcmFnZ2luZ10gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgc2VhcmNoSGlkZGVuQ29sdW1ucyB9ID0gcHJvcHM7XG5cbiAgY29uc3QgaGFuZGxlRHJhZ1N0YXJ0ID0gKCkgPT4ge1xuICAgIHNldElzRHJhZ2dpbmcodHJ1ZSk7XG4gIH07XG5cbiAgY29uc3QgaGlkZGVuQ29sdW1ucyA9IHVzZU1lbW8oXG4gICAgKCkgPT5cbiAgICAgIGRpZmZlcmVuY2VXaXRoKFxuICAgICAgICBwcm9wcy5hdmFpbGFibGVDb2x1bW5zLFxuICAgICAgICBwcm9wcy5zZWxlY3RlZENvbHVtbnMsXG4gICAgICAgIChhLCBiKSA9PiBhLmtleSA9PT0gYi5rZXlcbiAgICAgICksXG4gICAgW3Byb3BzLmF2YWlsYWJsZUNvbHVtbnMsIHByb3BzLnNlbGVjdGVkQ29sdW1uc11cbiAgKTtcblxuICBjb25zdCBoYW5kbGVEcmFnRW5kID0gdXNlQ2FsbGJhY2soXG4gICAgKGRyYWdSZXN1bHQpID0+XG4gICAgICBoYW5kbGVDb2x1bW5zVXBkYXRlKFxuICAgICAgICBkcmFnUmVzdWx0LFxuICAgICAgICBwcm9wcy5vblVwZGF0ZUNvbHVtbnMsXG4gICAgICAgIHByb3BzLnNlbGVjdGVkQ29sdW1ucyxcbiAgICAgICAgcHJvcHMuYXZhaWxhYmxlQ29sdW1ucyxcbiAgICAgICAgc2V0SXNEcmFnZ2luZ1xuICAgICAgKSxcbiAgICBbcHJvcHMub25VcGRhdGVDb2x1bW5zLCBwcm9wcy5zZWxlY3RlZENvbHVtbnMsIHByb3BzLmF2YWlsYWJsZUNvbHVtbnNdXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlSW5wdXRDaGFuZ2UgPSB1c2VDYWxsYmFjayhcbiAgICAoaW5wdXQpID0+XG4gICAgICAvLyBsb2FkT3B0aW9ucyBpcyBub3QgaW52b2tlZCB3aGVuIGlucHV0IGlzIGVtcHR5XG4gICAgICAhaW5wdXQubGVuZ3RoICYmIHNlYXJjaEhpZGRlbkNvbHVtbnMoaW5wdXQpLFxuICAgIFtzZWFyY2hIaWRkZW5Db2x1bW5zXVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPFNldHRpbmdzQ29udGFpbmVyXG4gICAgICB0aXRsZT17bWVzc2FnZXMudGl0bGV9XG4gICAgICBjbG9zZUJ1dHRvbkxhYmVsPXttZXNzYWdlcy5jbG9zZUJ1dHRvbkxhYmVsfVxuICAgICAgb25DbG9zZT17cHJvcHMub25DbG9zZX1cbiAgICAgIHByaW1hcnlCdXR0b249e3Byb3BzLnByaW1hcnlCdXR0b259XG4gICAgICBzZWNvbmRhcnlCdXR0b249e3Byb3BzLnNlY29uZGFyeUJ1dHRvbn1cbiAgICAgIGNvbnRhaW5lclRoZW1lPXtwcm9wcy5tYW5hZ2VyVGhlbWV9XG4gICAgPlxuICAgICAgPERyYWdEcm9wQ29udGV4dCBvbkRyYWdFbmQ9e2hhbmRsZURyYWdFbmR9IG9uRHJhZ1N0YXJ0PXtoYW5kbGVEcmFnU3RhcnR9PlxuICAgICAgICA8U3BhY2luZ3MuSW5saW5lIHNjYWxlPVwibVwiPlxuICAgICAgICAgIDxEcm9wcGFibGVDb250YWluZXJcbiAgICAgICAgICAgIGlzRHJhZ2dpbmc9e2lzRHJhZ2dpbmd9XG4gICAgICAgICAgICBhcmlhLWxhYmVsbGVkYnk9XCJoaWRkZW4tY29sdW1uc1wiXG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFNwYWNpbmdzLlN0YWNrPlxuICAgICAgICAgICAgICA8U3BhY2luZ3MuSW5saW5lIHNjYWxlPVwieHNcIiBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+XG4gICAgICAgICAgICAgICAgPEV5ZUNyb3NzZWRJY29uIHNpemU9XCJtZWRpdW1cIiAvPlxuICAgICAgICAgICAgICAgIDxGaWVsZExhYmVsXG4gICAgICAgICAgICAgICAgICBpZD1cImhpZGRlbi1jb2x1bW5zXCJcbiAgICAgICAgICAgICAgICAgIHRpdGxlPXtpbnRsLmZvcm1hdE1lc3NhZ2UobWVzc2FnZXMuaGlkZGVuQ29sdW1ucyl9XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgPC9TcGFjaW5ncy5JbmxpbmU+XG4gICAgICAgICAgICAgIHtwcm9wcy5hcmVIaWRkZW5Db2x1bW5zU2VhcmNoYWJsZSAmJiAoXG4gICAgICAgICAgICAgICAgPEFzeW5jU2VsZWN0SW5wdXRcbiAgICAgICAgICAgICAgICAgIHsuLi4ocHJvcHMuc2VhcmNoSGlkZGVuQ29sdW1uc1BsYWNlaG9sZGVyXG4gICAgICAgICAgICAgICAgICAgID8ge1xuICAgICAgICAgICAgICAgICAgICAgICAgcGxhY2Vob2xkZXI6IHByb3BzLnNlYXJjaEhpZGRlbkNvbHVtbnNQbGFjZWhvbGRlcixcbiAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIDogdW5kZWZpbmVkKX1cbiAgICAgICAgICAgICAgICAgIGNhY2hlT3B0aW9ucz17ZmFsc2V9XG4gICAgICAgICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAvLyB0byBhdm9pZCBwcm9wLXR5cGVzIGVycm9yXG4gICAgICAgICAgICAgICAgICAgIC8vIGFzIGBvbkNoYW5nZWAgaXMgYSByZXF1aXJlZCBwcm9wIGluXG4gICAgICAgICAgICAgICAgICAgIC8vIGBBc3luY1NlbGVjdElucHV0YFxuICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgIC8vIGxvYWRPcHRpb25zIGlzIHVzZWQgaW5zdGVhZCBvZiBvbklucHV0Q2hhbmdlXG4gICAgICAgICAgICAgICAgICAvLyBiZWNhdXNlIHRoZSBsb2FkaW5nIGluZGljYXRvciBpcyBkaXNwbGF5ZWRcbiAgICAgICAgICAgICAgICAgIC8vIG9ubHkgd2hlbiBsb2FkT3B0aW9ucyBpcyBpbnZva2VkXG4gICAgICAgICAgICAgICAgICBsb2FkT3B0aW9ucz17ZGVib3VuY2Uoc2VhcmNoSGlkZGVuQ29sdW1ucywgMzAwKX1cbiAgICAgICAgICAgICAgICAgIG9uSW5wdXRDaGFuZ2U9e2hhbmRsZUlucHV0Q2hhbmdlfVxuICAgICAgICAgICAgICAgICAgY29tcG9uZW50cz17c2VsZWN0SW5wdXRDb21wb25lbnRzfVxuICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgIDxEcm9wcGFibGVQYW5lbFxuICAgICAgICAgICAgICAgIGRyb3BwYWJsZUlkPXtISURERU5fQ09MVU1OU19QQU5FTH1cbiAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17SElEREVOX0NPTFVNTlNfUEFORUx9XG4gICAgICAgICAgICAgICAgbm9Db2x1bW5zVGV4dD17aW50bC5mb3JtYXRNZXNzYWdlKFxuICAgICAgICAgICAgICAgICAgbWVzc2FnZXMubm9IaWRkZW5Db2x1bW5zVG9TaG93XG4gICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICBjb2x1bW5zPXtoaWRkZW5Db2x1bW5zfVxuICAgICAgICAgICAgICAgIGlzU2VhcmNoYWJsZT17cHJvcHMuYXJlSGlkZGVuQ29sdW1uc1NlYXJjaGFibGV9XG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8L1NwYWNpbmdzLlN0YWNrPlxuICAgICAgICAgIDwvRHJvcHBhYmxlQ29udGFpbmVyPlxuICAgICAgICAgIDxEcm9wcGFibGVDb250YWluZXJcbiAgICAgICAgICAgIGlzRHJhZ2dpbmc9e2lzRHJhZ2dpbmd9XG4gICAgICAgICAgICBhcmlhLWxhYmVsbGVkYnk9XCJ2aXNpYmxlLWNvbHVtbnNcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxTcGFjaW5ncy5TdGFjaz5cbiAgICAgICAgICAgICAgPFNwYWNpbmdzLklubGluZSBzY2FsZT1cInhzXCIgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgICAgICAgICAgIDxFeWVJY29uIHNpemU9XCJtZWRpdW1cIiAvPlxuICAgICAgICAgICAgICAgIDxGaWVsZExhYmVsXG4gICAgICAgICAgICAgICAgICBpZD1cInZpc2libGUtY29sdW1uc1wiXG4gICAgICAgICAgICAgICAgICB0aXRsZT17aW50bC5mb3JtYXRNZXNzYWdlKG1lc3NhZ2VzLnZpc2libGVDb2x1bW5zKX1cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICA8L1NwYWNpbmdzLklubGluZT5cbiAgICAgICAgICAgICAgPERyb3BwYWJsZVBhbmVsXG4gICAgICAgICAgICAgICAgZHJvcHBhYmxlSWQ9e1NFTEVDVEVEX0NPTFVNTlNfUEFORUx9XG4gICAgICAgICAgICAgICAgZGF0YS10ZXN0aWQ9e1NFTEVDVEVEX0NPTFVNTlNfUEFORUx9XG4gICAgICAgICAgICAgICAgbm9Db2x1bW5zVGV4dD17aW50bC5mb3JtYXRNZXNzYWdlKFxuICAgICAgICAgICAgICAgICAgbWVzc2FnZXMubm9TZWxlY3RlZENvbHVtbnNUb1Nob3dcbiAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgIGNvbHVtbnM9e3Byb3BzLnNlbGVjdGVkQ29sdW1uc31cbiAgICAgICAgICAgICAgICBvblJlbW92ZT17cHJvcHMub25VcGRhdGVDb2x1bW5zfVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgPC9TcGFjaW5ncy5TdGFjaz5cbiAgICAgICAgICA8L0Ryb3BwYWJsZUNvbnRhaW5lcj5cbiAgICAgICAgPC9TcGFjaW5ncy5JbmxpbmU+XG4gICAgICA8L0RyYWdEcm9wQ29udGV4dD5cbiAgICA8L1NldHRpbmdzQ29udGFpbmVyPlxuICApO1xufTtcblxuQ29sdW1uU2V0dGluZ3NNYW5hZ2VyLmRpc3BsYXlOYW1lID0gJ0NvbHVtblNldHRpbmdzTWFuYWdlcic7XG5cbkNvbHVtblNldHRpbmdzTWFuYWdlci5wcm9wVHlwZXMgPSB7XG4gIGF2YWlsYWJsZUNvbHVtbnM6IFByb3BUeXBlcy5hcnJheU9mKFxuICAgIFByb3BUeXBlcy5zaGFwZSh7XG4gICAgICBrZXk6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgICAgIGxhYmVsOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMubm9kZV0pLmlzUmVxdWlyZWQsXG4gICAgfSlcbiAgKS5pc1JlcXVpcmVkLFxuICBzZWxlY3RlZENvbHVtbnM6IFByb3BUeXBlcy5hcnJheU9mKFxuICAgIFByb3BUeXBlcy5zaGFwZSh7XG4gICAgICBrZXk6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgICAgIGxhYmVsOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMubm9kZV0pLmlzUmVxdWlyZWQsXG4gICAgfSlcbiAgKS5pc1JlcXVpcmVkLFxuICBvblVwZGF0ZUNvbHVtbnM6IFByb3BUeXBlcy5mdW5jLmlzUmVxdWlyZWQsXG5cbiAgYXJlSGlkZGVuQ29sdW1uc1NlYXJjaGFibGU6IFByb3BUeXBlcy5ib29sLFxuICBzZWFyY2hIaWRkZW5Db2x1bW5zOiByZXF1aXJlZElmKFxuICAgIFByb3BUeXBlcy5mdW5jLFxuICAgIChwcm9wcykgPT4gcHJvcHMuYXJlSGlkZGVuQ29sdW1uc1NlYXJjaGFibGVcbiAgKSxcbiAgc2VhcmNoSGlkZGVuQ29sdW1uc1BsYWNlaG9sZGVyOiBQcm9wVHlwZXMuc3RyaW5nLFxuXG4gIG9uQ2xvc2U6IFByb3BUeXBlcy5mdW5jLFxuICBwcmltYXJ5QnV0dG9uOiBQcm9wVHlwZXMuZWxlbWVudCxcbiAgc2Vjb25kYXJ5QnV0dG9uOiBQcm9wVHlwZXMuZWxlbWVudCxcbiAgbWFuYWdlclRoZW1lOiBQcm9wVHlwZXMub25lT2YoWydsaWdodCcsICdkYXJrJ10pLFxufTtcblxuQ29sdW1uU2V0dGluZ3NNYW5hZ2VyLmRlZmF1bHRQcm9wcyA9IHtcbiAgYXZhaWxhYmxlQ29sdW1uczogW10sXG59O1xuXG5leHBvcnQgZGVmYXVsdCBDb2x1bW5TZXR0aW5nc01hbmFnZXI7XG4iXX0= */"));
 
 var handleColumnsUpdate = function handleColumnsUpdate(dragResult, onUpdateColumns, selectedColumns, availableColumns, setIsDragging) {
   setIsDragging(false); // Invalid drop destination, do nothing
@@ -435,11 +497,12 @@ var handleColumnsUpdate = function handleColumnsUpdate(dragResult, onUpdateColum
 
 var DropdownIndicator = function DropdownIndicator() {
   return jsx(Spacings.Inline, {
-    alignItems: "center"
-  }, jsx(SearchIcon, {
-    scale: "medium",
-    color: "primary"
-  }));
+    alignItems: "center",
+    children: jsx(SearchIcon, {
+      scale: "medium",
+      color: "primary"
+    })
+  });
 };
 
 DropdownIndicator.displayName = 'DropdownIndicator';
@@ -467,80 +530,91 @@ var ColumnSettingsManager = function ColumnSettingsManager(props) {
     setIsDragging(true);
   };
 
-  var hiddenColumns = React.useMemo(function () {
+  var hiddenColumns = useMemo(function () {
     return differenceWith(props.availableColumns, props.selectedColumns, function (a, b) {
       return a.key === b.key;
     });
   }, [props.availableColumns, props.selectedColumns]);
-  var handleDragEnd = React.useCallback(function (dragResult) {
+  var handleDragEnd = useCallback(function (dragResult) {
     return handleColumnsUpdate(dragResult, props.onUpdateColumns, props.selectedColumns, props.availableColumns, setIsDragging);
   }, [props.onUpdateColumns, props.selectedColumns, props.availableColumns]);
-  var handleInputChange = React.useCallback(function (input) {
+  var handleInputChange = useCallback(function (input) {
     return (// loadOptions is not invoked when input is empty
       !input.length && searchHiddenColumns(input)
     );
   }, [searchHiddenColumns]);
-  return jsx(SettingsContainer, {
-    title: messages$2.title,
-    closeButtonLabel: messages$2.closeButtonLabel,
+  return jsx(SettingsContainer$1, {
+    title: messages$1.title,
+    closeButtonLabel: messages$1.closeButtonLabel,
     onClose: props.onClose,
     primaryButton: props.primaryButton,
     secondaryButton: props.secondaryButton,
-    containerTheme: props.managerTheme
-  }, jsx(DragDropContext, {
-    onDragEnd: handleDragEnd,
-    onDragStart: handleDragStart
-  }, jsx(Spacings.Inline, {
-    scale: "m"
-  }, jsx(DroppableContainer, {
-    isDragging: isDragging,
-    "aria-labelledby": "hidden-columns"
-  }, jsx(Spacings.Stack, null, jsx(Spacings.Inline, {
-    scale: "xs",
-    alignItems: "center"
-  }, jsx(EyeCrossedIcon, {
-    size: "medium"
-  }), jsx(FieldLabel, {
-    id: "hidden-columns",
-    title: intl.formatMessage(messages$2.hiddenColumns)
-  })), props.areHiddenColumnsSearchable && jsx(AsyncSelectInput, _extends({}, props.searchHiddenColumnsPlaceholder ? {
-    placeholder: props.searchHiddenColumnsPlaceholder
-  } : undefined, {
-    cacheOptions: false,
-    onChange: function onChange() {// to avoid prop-types error
-      // as `onChange` is a required prop in
-      // `AsyncSelectInput`
-    } // loadOptions is used instead of onInputChange
-    // because the loading indicator is displayed
-    // only when loadOptions is invoked
-    ,
-    loadOptions: debounce(searchHiddenColumns, 300),
-    onInputChange: handleInputChange,
-    components: selectInputComponents
-  })), jsx(DroppablePanel, {
-    droppableId: HIDDEN_COLUMNS_PANEL,
-    "data-testid": HIDDEN_COLUMNS_PANEL,
-    noColumnsText: intl.formatMessage(messages$2.noHiddenColumnsToShow),
-    columns: hiddenColumns,
-    isSearchable: props.areHiddenColumnsSearchable
-  }))), jsx(DroppableContainer, {
-    isDragging: isDragging,
-    "aria-labelledby": "visible-columns"
-  }, jsx(Spacings.Stack, null, jsx(Spacings.Inline, {
-    scale: "xs",
-    alignItems: "center"
-  }, jsx(EyeIcon, {
-    size: "medium"
-  }), jsx(FieldLabel, {
-    id: "visible-columns",
-    title: intl.formatMessage(messages$2.visibleColumns)
-  })), jsx(DroppablePanel, {
-    droppableId: SELECTED_COLUMNS_PANEL,
-    "data-testid": SELECTED_COLUMNS_PANEL,
-    noColumnsText: intl.formatMessage(messages$2.noSelectedColumnsToShow),
-    columns: props.selectedColumns,
-    onRemove: props.onUpdateColumns
-  }))))));
+    containerTheme: props.managerTheme,
+    children: jsx(DragDropContext, {
+      onDragEnd: handleDragEnd,
+      onDragStart: handleDragStart,
+      children: jsxs(Spacings.Inline, {
+        scale: "m",
+        children: [jsx(DroppableContainer, {
+          isDragging: isDragging,
+          "aria-labelledby": "hidden-columns",
+          children: jsxs(Spacings.Stack, {
+            children: [jsxs(Spacings.Inline, {
+              scale: "xs",
+              alignItems: "center",
+              children: [jsx(EyeCrossedIcon, {
+                size: "medium"
+              }), jsx(FieldLabel, {
+                id: "hidden-columns",
+                title: intl.formatMessage(messages$1.hiddenColumns)
+              })]
+            }), props.areHiddenColumnsSearchable && jsx(AsyncSelectInput, _objectSpread$2(_objectSpread$2({}, props.searchHiddenColumnsPlaceholder ? {
+              placeholder: props.searchHiddenColumnsPlaceholder
+            } : undefined), {}, {
+              cacheOptions: false,
+              onChange: function onChange() {// to avoid prop-types error
+                // as `onChange` is a required prop in
+                // `AsyncSelectInput`
+              } // loadOptions is used instead of onInputChange
+              // because the loading indicator is displayed
+              // only when loadOptions is invoked
+              ,
+              loadOptions: debounce(searchHiddenColumns, 300),
+              onInputChange: handleInputChange,
+              components: selectInputComponents
+            })), jsx(DroppablePanel$1, {
+              droppableId: HIDDEN_COLUMNS_PANEL,
+              "data-testid": HIDDEN_COLUMNS_PANEL,
+              noColumnsText: intl.formatMessage(messages$1.noHiddenColumnsToShow),
+              columns: hiddenColumns,
+              isSearchable: props.areHiddenColumnsSearchable
+            })]
+          })
+        }), jsx(DroppableContainer, {
+          isDragging: isDragging,
+          "aria-labelledby": "visible-columns",
+          children: jsxs(Spacings.Stack, {
+            children: [jsxs(Spacings.Inline, {
+              scale: "xs",
+              alignItems: "center",
+              children: [jsx(EyeIcon, {
+                size: "medium"
+              }), jsx(FieldLabel, {
+                id: "visible-columns",
+                title: intl.formatMessage(messages$1.visibleColumns)
+              })]
+            }), jsx(DroppablePanel$1, {
+              droppableId: SELECTED_COLUMNS_PANEL,
+              "data-testid": SELECTED_COLUMNS_PANEL,
+              noColumnsText: intl.formatMessage(messages$1.noSelectedColumnsToShow),
+              columns: props.selectedColumns,
+              onRemove: props.onUpdateColumns
+            })]
+          })
+        })]
+      })
+    })
+  });
 };
 ColumnSettingsManager.displayName = 'ColumnSettingsManager';
 ColumnSettingsManager.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -566,8 +640,9 @@ ColumnSettingsManager.propTypes = process.env.NODE_ENV !== "production" ? {
 ColumnSettingsManager.defaultProps = {
   availableColumns: []
 };
+var ColumnSettingsManager$1 = ColumnSettingsManager;
 
-var messages$3 = defineMessages({
+var messages = defineMessages({
   placeholder: {
     id: 'UIKit.DataTableManager.TableSettings.placeholder',
     description: 'Placeholder for the table settings select component.',
@@ -585,20 +660,18 @@ var messages$3 = defineMessages({
   }
 });
 
-var _PropTypes$shape;
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys$1(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys$1(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$2() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 var SelectContainer = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "eh8k7x01"
 } : {
   target: "eh8k7x01",
   label: "SelectContainer"
-})("width:", customProperties.constraint4, ";");
+})("width:", customProperties.constraint4, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRhdGEtdGFibGUtc2V0dGluZ3MuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJrQyIsImZpbGUiOiJkYXRhLXRhYmxlLXNldHRpbmdzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgd2FybmluZyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3V0aWxzJztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBBY2Nlc3NpYmxlSGlkZGVuIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2FjY2Vzc2libGUtaGlkZGVuJztcbmltcG9ydCBTZWxlY3RJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zZWxlY3QtaW5wdXQnO1xuaW1wb3J0IHsgVGFibGVJY29uIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaWNvbnMnO1xuaW1wb3J0IFNwYWNpbmdzIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3NwYWNpbmdzJztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IFVQREFURV9BQ1RJT05TLCBDT0xVTU5fTUFOQUdFUiwgRElTUExBWV9TRVRUSU5HUyB9IGZyb20gJy4uL2NvbnN0YW50cyc7XG5pbXBvcnQgRGlzcGxheVNldHRpbmdzTWFuYWdlciwge1xuICBERU5TSVRZX0NPTVBBQ1QsXG4gIFNIT1dfSElERV9PTl9ERU1BTkQsXG59IGZyb20gJy4uL2Rpc3BsYXktc2V0dGluZ3MtbWFuYWdlcic7XG5pbXBvcnQgQ29sdW1uU2V0dGluZ3NNYW5hZ2VyIGZyb20gJy4uL2NvbHVtbi1zZXR0aW5ncy1tYW5hZ2VyJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcblxuLyogVGhlIGhvcml6b250YWwgY29uc3RyYWludCBpcyBzZXQgb24gdGhpcyBjb250YWluZXIgaW5zdGVhZCBvZiB0aGUgU2VsZWN0SW5wdXRcbmJlY2F1c2UgdGhlIGlucHV0IGlzIGFsd2F5cyBlbXB0eSwgYW5kIHRoZXJlZm9yZSBkb2Vzbid0IHRha2UgYW55IHNwYWNlIGJ5IGl0c2VsZlxuYnV0IHdlIHdhbnQgdG8ga2VlcCBlbm91Z2ggc3BhY2UgZm9yIHRoZSBwbGFjZWhvbGRlciB0byBiZSByZWFkYWJsZSAqL1xuY29uc3QgU2VsZWN0Q29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgd2lkdGg6ICR7Y3VzdG9tUHJvcGVydGllcy5jb25zdHJhaW50NH07XG5gO1xuXG5jb25zdCBUb3BCYXJDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBmbGV4LWdyb3c6IDE7XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0RHJvcGRvd25PcHRpb25zID0gKHtcbiAgYXJlQ29sdW1uU2V0dGluZ3NFbmFibGVkLFxuICBhcmVEaXNwbGF5U2V0dGluZ3NFbmFibGVkLFxuICBmb3JtYXRNZXNzYWdlLFxufSkgPT4gW1xuICAuLi4oYXJlQ29sdW1uU2V0dGluZ3NFbmFibGVkXG4gICAgPyBbXG4gICAgICAgIHtcbiAgICAgICAgICB2YWx1ZTogQ09MVU1OX01BTkFHRVIsXG4gICAgICAgICAgbGFiZWw6IGZvcm1hdE1lc3NhZ2UobWVzc2FnZXMuY29sdW1uTWFuYWdlck9wdGlvbiksXG4gICAgICAgIH0sXG4gICAgICBdXG4gICAgOiBbXSksXG4gIC4uLihhcmVEaXNwbGF5U2V0dGluZ3NFbmFibGVkXG4gICAgPyBbXG4gICAgICAgIHtcbiAgICAgICAgICB2YWx1ZTogRElTUExBWV9TRVRUSU5HUyxcbiAgICAgICAgICBsYWJlbDogZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5kaXNwbGF5U2V0dGluZ3NPcHRpb24pLFxuICAgICAgICB9LFxuICAgICAgXVxuICAgIDogW10pLFxuXTtcblxuZXhwb3J0IGNvbnN0IGdldE1hcHBlZENvbHVtbnMgPSAoY29sdW1ucyA9IFtdKSA9PlxuICBjb2x1bW5zLnJlZHVjZShcbiAgICAobWFwcGVkQ29sdW1ucywgY29sdW1uKSA9PiAoe1xuICAgICAgLi4ubWFwcGVkQ29sdW1ucyxcbiAgICAgIFtjb2x1bW4ua2V5XTogY29sdW1uLFxuICAgIH0pLFxuICAgIHt9XG4gICk7XG5cbmV4cG9ydCBjb25zdCBnZXRTZWxlY3RlZENvbHVtbnMgPSAobWFwcGVkQ29sdW1ucywgdmlzaWJsZUNvbHVtbnNLZXlzID0gW10pID0+XG4gIHZpc2libGVDb2x1bW5zS2V5cy5tYXAoKGNvbHVtbktleSkgPT4gbWFwcGVkQ29sdW1uc1tjb2x1bW5LZXldKTtcblxuY29uc3QgRGF0YVRhYmxlU2V0dGluZ3MgPSAocHJvcHMpID0+IHtcbiAgY29uc3QgYXJlRGlzcGxheVNldHRpbmdzRW5hYmxlZCA9IEJvb2xlYW4oXG4gICAgcHJvcHMuZGlzcGxheVNldHRpbmdzICYmICFwcm9wcy5kaXNwbGF5U2V0dGluZ3MuZGlzYWJsZURpc3BsYXlTZXR0aW5nc1xuICApO1xuICBjb25zdCBhcmVDb2x1bW5TZXR0aW5nc0VuYWJsZWQgPSBCb29sZWFuKFxuICAgIHByb3BzLmNvbHVtbk1hbmFnZXIgJiYgIXByb3BzLmNvbHVtbk1hbmFnZXIuZGlzYWJsZUNvbHVtbk1hbmFnZXJcbiAgKTtcbiAgd2FybmluZyhcbiAgICBhcmVEaXNwbGF5U2V0dGluZ3NFbmFibGVkIHx8IGFyZUNvbHVtblNldHRpbmdzRW5hYmxlZFxuICAgICAgPyB0eXBlb2YgcHJvcHMub25TZXR0aW5nc0NoYW5nZSA9PT0gJ2Z1bmN0aW9uJ1xuICAgICAgOiB0cnVlLFxuICAgIGB1aS1raXQvRGF0YVRhYmxlTWFuYWdlcjogdGhlIHByb3AgXCJvblNldHRpbmdzQ2hhbmdlXCIgaXMgcmVxdWlyZWQgd2hlbiBlaXRoZXIgdGhlIGRpc3BsYXkgc2V0dGluZ3Mgb3IgdGhlIGNvbHVtbiBzZXR0aW5ncyBhcmUgZW5hYmxlZC5gXG4gICk7XG5cbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3QgW29wZW5lZFBhbmVsSWQsIHNldE9wZW5lZFBhbmVsSWRdID0gdXNlU3RhdGUobnVsbCk7XG5cbiAgY29uc3QgZHJvcGRvd25PcHRpb25zID0gZ2V0RHJvcGRvd25PcHRpb25zKHtcbiAgICBhcmVEaXNwbGF5U2V0dGluZ3NFbmFibGVkLFxuICAgIGFyZUNvbHVtblNldHRpbmdzRW5hYmxlZCxcbiAgICBmb3JtYXRNZXNzYWdlOiBpbnRsLmZvcm1hdE1lc3NhZ2UsXG4gIH0pO1xuXG4gIGNvbnN0IGhhbmRsZURyb3Bkb3duQ2hhbmdlID0gKGV2ZW50KSA9PiBzZXRPcGVuZWRQYW5lbElkKGV2ZW50LnRhcmdldC52YWx1ZSk7XG5cbiAgY29uc3QgbWFwcGVkQ29sdW1ucyA9IGdldE1hcHBlZENvbHVtbnMoXG4gICAgYXJlQ29sdW1uU2V0dGluZ3NFbmFibGVkID8gcHJvcHMuY29sdW1uTWFuYWdlci5oaWRlYWJsZUNvbHVtbnMgOiB1bmRlZmluZWRcbiAgKTtcblxuICBjb25zdCBzZWxlY3RlZENvbHVtbnMgPSBnZXRTZWxlY3RlZENvbHVtbnMoXG4gICAgbWFwcGVkQ29sdW1ucyxcbiAgICBhcmVDb2x1bW5TZXR0aW5nc0VuYWJsZWQgPyBwcm9wcy5jb2x1bW5NYW5hZ2VyLnZpc2libGVDb2x1bW5LZXlzIDogdW5kZWZpbmVkXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlU2V0dGluZ3NQYW5lbENoYW5nZSA9ICgpID0+IHNldE9wZW5lZFBhbmVsSWQobnVsbCk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3BhY2luZ3MuU3RhY2s+XG4gICAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgPFRvcEJhckNvbnRhaW5lcj57cHJvcHMudG9wQmFyfTwvVG9wQmFyQ29udGFpbmVyPlxuICAgICAgICB7ZHJvcGRvd25PcHRpb25zLmxlbmd0aCA+IDAgJiYgKFxuICAgICAgICAgIDxTZWxlY3RDb250YWluZXI+XG4gICAgICAgICAgICA8QWNjZXNzaWJsZUhpZGRlbj5cbiAgICAgICAgICAgICAgPGxhYmVsIGh0bWxGb3I9XCJ0YWJsZS1zZXR0aW5ncy1kcm9wZG93blwiPlxuICAgICAgICAgICAgICAgIE9wZW4gdGFibGUgbWFuYWdlciBkcm9wZG93blxuICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgPC9BY2Nlc3NpYmxlSGlkZGVuPlxuICAgICAgICAgICAgPFNlbGVjdElucHV0XG4gICAgICAgICAgICAgIGlkPVwidGFibGUtc2V0dGluZ3MtZHJvcGRvd25cIlxuICAgICAgICAgICAgICAvLyB0aGUgZHJvcGRvd24gYWx3YXlzIHNob3dzIHRoZSBwbGFjZWhvbGRlciBhcyBzZWxlY3RpbmcgYW4gb3B0aW9uXG4gICAgICAgICAgICAgIC8vIHdpbGwgb3BlbiB0aGUgY29ycmVzcG9uZGluZyBwYW5lbCAoY29sdW1uIG1hbmFnZXIgb3IgZGlzcGxheSBzZXR0aW5ncylcbiAgICAgICAgICAgICAgdmFsdWU9XCJcIlxuICAgICAgICAgICAgICBwbGFjZWhvbGRlcj17aW50bC5mb3JtYXRNZXNzYWdlKG1lc3NhZ2VzLnBsYWNlaG9sZGVyKX1cbiAgICAgICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZURyb3Bkb3duQ2hhbmdlfVxuICAgICAgICAgICAgICBvcHRpb25zPXtkcm9wZG93bk9wdGlvbnN9XG4gICAgICAgICAgICAgIGljb25MZWZ0PXs8VGFibGVJY29uIC8+fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L1NlbGVjdENvbnRhaW5lcj5cbiAgICAgICAgKX1cbiAgICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICAgICAge29wZW5lZFBhbmVsSWQgPT09IERJU1BMQVlfU0VUVElOR1MgJiYgKFxuICAgICAgICA8RGlzcGxheVNldHRpbmdzTWFuYWdlclxuICAgICAgICAgIHsuLi4ocHJvcHMuZGlzcGxheVNldHRpbmdzIHx8IHt9KX1cbiAgICAgICAgICBvbkNsb3NlPXtoYW5kbGVTZXR0aW5nc1BhbmVsQ2hhbmdlfVxuICAgICAgICAgIG9uRGVuc2l0eURpc3BsYXlDaGFuZ2U9eyhldmVudCkgPT4ge1xuICAgICAgICAgICAgcHJvcHMub25TZXR0aW5nc0NoYW5nZShcbiAgICAgICAgICAgICAgVVBEQVRFX0FDVElPTlMuSVNfVEFCTEVfQ09OREVOU0VEX1VQREFURSxcbiAgICAgICAgICAgICAgZXZlbnQudGFyZ2V0LnZhbHVlID09PSBERU5TSVRZX0NPTVBBQ1RcbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfX1cbiAgICAgICAgICBvblRleHRXcmFwcGluZ0NoYW5nZT17KGV2ZW50KSA9PiB7XG4gICAgICAgICAgICBwcm9wcy5vblNldHRpbmdzQ2hhbmdlKFxuICAgICAgICAgICAgICBVUERBVEVfQUNUSU9OUy5JU19UQUJMRV9XUkFQUElOR19URVhUX1VQREFURSxcbiAgICAgICAgICAgICAgZXZlbnQudGFyZ2V0LnZhbHVlID09PSBTSE9XX0hJREVfT05fREVNQU5EXG4gICAgICAgICAgICApO1xuICAgICAgICAgIH19XG4gICAgICAgICAgbWFuYWdlclRoZW1lPXtwcm9wcy5tYW5hZ2VyVGhlbWV9XG4gICAgICAgIC8+XG4gICAgICApfVxuXG4gICAgICB7b3BlbmVkUGFuZWxJZCA9PT0gQ09MVU1OX01BTkFHRVIgJiYgKFxuICAgICAgICA8Q29sdW1uU2V0dGluZ3NNYW5hZ2VyXG4gICAgICAgICAgey4uLihwcm9wcy5jb2x1bW5NYW5hZ2VyIHx8IHt9KX1cbiAgICAgICAgICBhdmFpbGFibGVDb2x1bW5zPXtwcm9wcy5jb2x1bW5NYW5hZ2VyLmhpZGVhYmxlQ29sdW1uc31cbiAgICAgICAgICBzZWxlY3RlZENvbHVtbnM9e3NlbGVjdGVkQ29sdW1uc31cbiAgICAgICAgICBvbkNsb3NlPXtoYW5kbGVTZXR0aW5nc1BhbmVsQ2hhbmdlfVxuICAgICAgICAgIG9uVXBkYXRlQ29sdW1ucz17KG5leHRWaXNpYmxlQ29sdW1ucykgPT4ge1xuICAgICAgICAgICAgY29uc3Qga2V5c09mVmlzaWJsZUNvbHVtbnMgPSBuZXh0VmlzaWJsZUNvbHVtbnMubWFwKFxuICAgICAgICAgICAgICAodmlzaWJsZUNvbHVtbikgPT4gdmlzaWJsZUNvbHVtbi5rZXlcbiAgICAgICAgICAgICk7XG4gICAgICAgICAgICBwcm9wcy5vblNldHRpbmdzQ2hhbmdlKFxuICAgICAgICAgICAgICBVUERBVEVfQUNUSU9OUy5DT0xVTU5TX1VQREFURSxcbiAgICAgICAgICAgICAga2V5c09mVmlzaWJsZUNvbHVtbnNcbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfX1cbiAgICAgICAgICBtYW5hZ2VyVGhlbWU9e3Byb3BzLm1hbmFnZXJUaGVtZX1cbiAgICAgICAgLz5cbiAgICAgICl9XG4gICAgPC9TcGFjaW5ncy5TdGFjaz5cbiAgKTtcbn07XG5cbkRhdGFUYWJsZVNldHRpbmdzLmRpc3BsYXlOYW1lID0gJ0RhdGFUYWJsZVNldHRpbmdzJztcbkRhdGFUYWJsZVNldHRpbmdzLnByb3BUeXBlcyA9IHtcbiAgdG9wQmFyOiBQcm9wVHlwZXMubm9kZSxcbiAgb25TZXR0aW5nc0NoYW5nZTogUHJvcFR5cGVzLmZ1bmMsXG4gIGRpc3BsYXlTZXR0aW5nczogUHJvcFR5cGVzLnNoYXBlKHtcbiAgICBkaXNhYmxlRGlzcGxheVNldHRpbmdzOiBQcm9wVHlwZXMuYm9vbCxcbiAgICBpc0NvbmRlbnNlZDogUHJvcFR5cGVzLmJvb2wsXG4gICAgaXNXcmFwcGluZ1RleHQ6IFByb3BUeXBlcy5ib29sLFxuICAgIHByaW1hcnlCdXR0b246IFByb3BUeXBlcy5lbGVtZW50LFxuICAgIHNlY29uZGFyeUJ1dHRvbjogUHJvcFR5cGVzLmVsZW1lbnQsXG4gIH0pLFxuICBjb2x1bW5NYW5hZ2VyOiBQcm9wVHlwZXMuc2hhcGUoe1xuICAgIGFyZUhpZGRlbkNvbHVtbnNTZWFyY2hhYmxlOiBQcm9wVHlwZXMuYm9vbCxcbiAgICBkaXNhYmxlQ29sdW1uTWFuYWdlcjogUHJvcFR5cGVzLmJvb2wsXG4gICAgdmlzaWJsZUNvbHVtbktleXM6IFByb3BUeXBlcy5hcnJheU9mKFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCksXG4gICAgaGlkZWFibGVDb2x1bW5zOiBQcm9wVHlwZXMuYXJyYXlPZihcbiAgICAgIFByb3BUeXBlcy5zaGFwZSh7XG4gICAgICAgIGtleTogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICAgICAgICBsYWJlbDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm5vZGVdKVxuICAgICAgICAgIC5pc1JlcXVpcmVkLFxuICAgICAgfSlcbiAgICApLFxuICAgIHNlYXJjaEhpZGRlbkNvbHVtbnM6IFByb3BUeXBlcy5mdW5jLFxuICAgIHNlYXJjaEhpZGRlbkNvbHVtbnNQbGFjZWhvbGRlcjogUHJvcFR5cGVzLnN0cmluZyxcbiAgICBwcmltYXJ5QnV0dG9uOiBQcm9wVHlwZXMuZWxlbWVudCxcbiAgICBzZWNvbmRhcnlCdXR0b246IFByb3BUeXBlcy5lbGVtZW50LFxuICB9KSxcbiAgbWFuYWdlclRoZW1lOiBQcm9wVHlwZXMub25lT2YoWydsaWdodCcsICdkYXJrJ10pLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgRGF0YVRhYmxlU2V0dGluZ3M7XG4iXX0= */"));
 
 var TopBarContainer = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "eh8k7x00"
@@ -611,7 +684,8 @@ var TopBarContainer = _styled("div", process.env.NODE_ENV === "production" ? {
 } : {
   name: "1ff36h2",
   styles: "flex-grow:1",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRhdGEtdGFibGUtc2V0dGluZ3MuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJrQyIsImZpbGUiOiJkYXRhLXRhYmxlLXNldHRpbmdzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgd2FybmluZyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3V0aWxzJztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBBY2Nlc3NpYmxlSGlkZGVuIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2FjY2Vzc2libGUtaGlkZGVuJztcbmltcG9ydCBTZWxlY3RJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zZWxlY3QtaW5wdXQnO1xuaW1wb3J0IHsgVGFibGVJY29uIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaWNvbnMnO1xuaW1wb3J0IFNwYWNpbmdzIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3NwYWNpbmdzJztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IFVQREFURV9BQ1RJT05TLCBDT0xVTU5fTUFOQUdFUiwgRElTUExBWV9TRVRUSU5HUyB9IGZyb20gJy4uL2NvbnN0YW50cyc7XG5pbXBvcnQgRGlzcGxheVNldHRpbmdzTWFuYWdlciwge1xuICBERU5TSVRZX0NPTVBBQ1QsXG4gIFNIT1dfSElERV9PTl9ERU1BTkQsXG59IGZyb20gJy4uL2Rpc3BsYXktc2V0dGluZ3MtbWFuYWdlcic7XG5pbXBvcnQgQ29sdW1uU2V0dGluZ3NNYW5hZ2VyIGZyb20gJy4uL2NvbHVtbi1zZXR0aW5ncy1tYW5hZ2VyJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcblxuLyogVGhlIGhvcml6b250YWwgY29uc3RyYWludCBpcyBzZXQgb24gdGhpcyBjb250YWluZXIgaW5zdGVhZCBvZiB0aGUgU2VsZWN0SW5wdXRcbmJlY2F1c2UgdGhlIGlucHV0IGlzIGFsd2F5cyBlbXB0eSwgYW5kIHRoZXJlZm9yZSBkb2Vzbid0IHRha2UgYW55IHNwYWNlIGJ5IGl0c2VsZlxuYnV0IHdlIHdhbnQgdG8ga2VlcCBlbm91Z2ggc3BhY2UgZm9yIHRoZSBwbGFjZWhvbGRlciB0byBiZSByZWFkYWJsZSAqL1xuY29uc3QgU2VsZWN0Q29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgd2lkdGg6ICR7Y3VzdG9tUHJvcGVydGllcy5jb25zdHJhaW50NH07XG5gO1xuXG5jb25zdCBUb3BCYXJDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBmbGV4LWdyb3c6IDE7XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0RHJvcGRvd25PcHRpb25zID0gKHtcbiAgYXJlQ29sdW1uU2V0dGluZ3NFbmFibGVkLFxuICBhcmVEaXNwbGF5U2V0dGluZ3NFbmFibGVkLFxuICBmb3JtYXRNZXNzYWdlLFxufSkgPT4gW1xuICAuLi4oYXJlQ29sdW1uU2V0dGluZ3NFbmFibGVkXG4gICAgPyBbXG4gICAgICAgIHtcbiAgICAgICAgICB2YWx1ZTogQ09MVU1OX01BTkFHRVIsXG4gICAgICAgICAgbGFiZWw6IGZvcm1hdE1lc3NhZ2UobWVzc2FnZXMuY29sdW1uTWFuYWdlck9wdGlvbiksXG4gICAgICAgIH0sXG4gICAgICBdXG4gICAgOiBbXSksXG4gIC4uLihhcmVEaXNwbGF5U2V0dGluZ3NFbmFibGVkXG4gICAgPyBbXG4gICAgICAgIHtcbiAgICAgICAgICB2YWx1ZTogRElTUExBWV9TRVRUSU5HUyxcbiAgICAgICAgICBsYWJlbDogZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5kaXNwbGF5U2V0dGluZ3NPcHRpb24pLFxuICAgICAgICB9LFxuICAgICAgXVxuICAgIDogW10pLFxuXTtcblxuZXhwb3J0IGNvbnN0IGdldE1hcHBlZENvbHVtbnMgPSAoY29sdW1ucyA9IFtdKSA9PlxuICBjb2x1bW5zLnJlZHVjZShcbiAgICAobWFwcGVkQ29sdW1ucywgY29sdW1uKSA9PiAoe1xuICAgICAgLi4ubWFwcGVkQ29sdW1ucyxcbiAgICAgIFtjb2x1bW4ua2V5XTogY29sdW1uLFxuICAgIH0pLFxuICAgIHt9XG4gICk7XG5cbmV4cG9ydCBjb25zdCBnZXRTZWxlY3RlZENvbHVtbnMgPSAobWFwcGVkQ29sdW1ucywgdmlzaWJsZUNvbHVtbnNLZXlzID0gW10pID0+XG4gIHZpc2libGVDb2x1bW5zS2V5cy5tYXAoKGNvbHVtbktleSkgPT4gbWFwcGVkQ29sdW1uc1tjb2x1bW5LZXldKTtcblxuY29uc3QgRGF0YVRhYmxlU2V0dGluZ3MgPSAocHJvcHMpID0+IHtcbiAgY29uc3QgYXJlRGlzcGxheVNldHRpbmdzRW5hYmxlZCA9IEJvb2xlYW4oXG4gICAgcHJvcHMuZGlzcGxheVNldHRpbmdzICYmICFwcm9wcy5kaXNwbGF5U2V0dGluZ3MuZGlzYWJsZURpc3BsYXlTZXR0aW5nc1xuICApO1xuICBjb25zdCBhcmVDb2x1bW5TZXR0aW5nc0VuYWJsZWQgPSBCb29sZWFuKFxuICAgIHByb3BzLmNvbHVtbk1hbmFnZXIgJiYgIXByb3BzLmNvbHVtbk1hbmFnZXIuZGlzYWJsZUNvbHVtbk1hbmFnZXJcbiAgKTtcbiAgd2FybmluZyhcbiAgICBhcmVEaXNwbGF5U2V0dGluZ3NFbmFibGVkIHx8IGFyZUNvbHVtblNldHRpbmdzRW5hYmxlZFxuICAgICAgPyB0eXBlb2YgcHJvcHMub25TZXR0aW5nc0NoYW5nZSA9PT0gJ2Z1bmN0aW9uJ1xuICAgICAgOiB0cnVlLFxuICAgIGB1aS1raXQvRGF0YVRhYmxlTWFuYWdlcjogdGhlIHByb3AgXCJvblNldHRpbmdzQ2hhbmdlXCIgaXMgcmVxdWlyZWQgd2hlbiBlaXRoZXIgdGhlIGRpc3BsYXkgc2V0dGluZ3Mgb3IgdGhlIGNvbHVtbiBzZXR0aW5ncyBhcmUgZW5hYmxlZC5gXG4gICk7XG5cbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3QgW29wZW5lZFBhbmVsSWQsIHNldE9wZW5lZFBhbmVsSWRdID0gdXNlU3RhdGUobnVsbCk7XG5cbiAgY29uc3QgZHJvcGRvd25PcHRpb25zID0gZ2V0RHJvcGRvd25PcHRpb25zKHtcbiAgICBhcmVEaXNwbGF5U2V0dGluZ3NFbmFibGVkLFxuICAgIGFyZUNvbHVtblNldHRpbmdzRW5hYmxlZCxcbiAgICBmb3JtYXRNZXNzYWdlOiBpbnRsLmZvcm1hdE1lc3NhZ2UsXG4gIH0pO1xuXG4gIGNvbnN0IGhhbmRsZURyb3Bkb3duQ2hhbmdlID0gKGV2ZW50KSA9PiBzZXRPcGVuZWRQYW5lbElkKGV2ZW50LnRhcmdldC52YWx1ZSk7XG5cbiAgY29uc3QgbWFwcGVkQ29sdW1ucyA9IGdldE1hcHBlZENvbHVtbnMoXG4gICAgYXJlQ29sdW1uU2V0dGluZ3NFbmFibGVkID8gcHJvcHMuY29sdW1uTWFuYWdlci5oaWRlYWJsZUNvbHVtbnMgOiB1bmRlZmluZWRcbiAgKTtcblxuICBjb25zdCBzZWxlY3RlZENvbHVtbnMgPSBnZXRTZWxlY3RlZENvbHVtbnMoXG4gICAgbWFwcGVkQ29sdW1ucyxcbiAgICBhcmVDb2x1bW5TZXR0aW5nc0VuYWJsZWQgPyBwcm9wcy5jb2x1bW5NYW5hZ2VyLnZpc2libGVDb2x1bW5LZXlzIDogdW5kZWZpbmVkXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlU2V0dGluZ3NQYW5lbENoYW5nZSA9ICgpID0+IHNldE9wZW5lZFBhbmVsSWQobnVsbCk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3BhY2luZ3MuU3RhY2s+XG4gICAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgPFRvcEJhckNvbnRhaW5lcj57cHJvcHMudG9wQmFyfTwvVG9wQmFyQ29udGFpbmVyPlxuICAgICAgICB7ZHJvcGRvd25PcHRpb25zLmxlbmd0aCA+IDAgJiYgKFxuICAgICAgICAgIDxTZWxlY3RDb250YWluZXI+XG4gICAgICAgICAgICA8QWNjZXNzaWJsZUhpZGRlbj5cbiAgICAgICAgICAgICAgPGxhYmVsIGh0bWxGb3I9XCJ0YWJsZS1zZXR0aW5ncy1kcm9wZG93blwiPlxuICAgICAgICAgICAgICAgIE9wZW4gdGFibGUgbWFuYWdlciBkcm9wZG93blxuICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgPC9BY2Nlc3NpYmxlSGlkZGVuPlxuICAgICAgICAgICAgPFNlbGVjdElucHV0XG4gICAgICAgICAgICAgIGlkPVwidGFibGUtc2V0dGluZ3MtZHJvcGRvd25cIlxuICAgICAgICAgICAgICAvLyB0aGUgZHJvcGRvd24gYWx3YXlzIHNob3dzIHRoZSBwbGFjZWhvbGRlciBhcyBzZWxlY3RpbmcgYW4gb3B0aW9uXG4gICAgICAgICAgICAgIC8vIHdpbGwgb3BlbiB0aGUgY29ycmVzcG9uZGluZyBwYW5lbCAoY29sdW1uIG1hbmFnZXIgb3IgZGlzcGxheSBzZXR0aW5ncylcbiAgICAgICAgICAgICAgdmFsdWU9XCJcIlxuICAgICAgICAgICAgICBwbGFjZWhvbGRlcj17aW50bC5mb3JtYXRNZXNzYWdlKG1lc3NhZ2VzLnBsYWNlaG9sZGVyKX1cbiAgICAgICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZURyb3Bkb3duQ2hhbmdlfVxuICAgICAgICAgICAgICBvcHRpb25zPXtkcm9wZG93bk9wdGlvbnN9XG4gICAgICAgICAgICAgIGljb25MZWZ0PXs8VGFibGVJY29uIC8+fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L1NlbGVjdENvbnRhaW5lcj5cbiAgICAgICAgKX1cbiAgICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICAgICAge29wZW5lZFBhbmVsSWQgPT09IERJU1BMQVlfU0VUVElOR1MgJiYgKFxuICAgICAgICA8RGlzcGxheVNldHRpbmdzTWFuYWdlclxuICAgICAgICAgIHsuLi4ocHJvcHMuZGlzcGxheVNldHRpbmdzIHx8IHt9KX1cbiAgICAgICAgICBvbkNsb3NlPXtoYW5kbGVTZXR0aW5nc1BhbmVsQ2hhbmdlfVxuICAgICAgICAgIG9uRGVuc2l0eURpc3BsYXlDaGFuZ2U9eyhldmVudCkgPT4ge1xuICAgICAgICAgICAgcHJvcHMub25TZXR0aW5nc0NoYW5nZShcbiAgICAgICAgICAgICAgVVBEQVRFX0FDVElPTlMuSVNfVEFCTEVfQ09OREVOU0VEX1VQREFURSxcbiAgICAgICAgICAgICAgZXZlbnQudGFyZ2V0LnZhbHVlID09PSBERU5TSVRZX0NPTVBBQ1RcbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfX1cbiAgICAgICAgICBvblRleHRXcmFwcGluZ0NoYW5nZT17KGV2ZW50KSA9PiB7XG4gICAgICAgICAgICBwcm9wcy5vblNldHRpbmdzQ2hhbmdlKFxuICAgICAgICAgICAgICBVUERBVEVfQUNUSU9OUy5JU19UQUJMRV9XUkFQUElOR19URVhUX1VQREFURSxcbiAgICAgICAgICAgICAgZXZlbnQudGFyZ2V0LnZhbHVlID09PSBTSE9XX0hJREVfT05fREVNQU5EXG4gICAgICAgICAgICApO1xuICAgICAgICAgIH19XG4gICAgICAgICAgbWFuYWdlclRoZW1lPXtwcm9wcy5tYW5hZ2VyVGhlbWV9XG4gICAgICAgIC8+XG4gICAgICApfVxuXG4gICAgICB7b3BlbmVkUGFuZWxJZCA9PT0gQ09MVU1OX01BTkFHRVIgJiYgKFxuICAgICAgICA8Q29sdW1uU2V0dGluZ3NNYW5hZ2VyXG4gICAgICAgICAgey4uLihwcm9wcy5jb2x1bW5NYW5hZ2VyIHx8IHt9KX1cbiAgICAgICAgICBhdmFpbGFibGVDb2x1bW5zPXtwcm9wcy5jb2x1bW5NYW5hZ2VyLmhpZGVhYmxlQ29sdW1uc31cbiAgICAgICAgICBzZWxlY3RlZENvbHVtbnM9e3NlbGVjdGVkQ29sdW1uc31cbiAgICAgICAgICBvbkNsb3NlPXtoYW5kbGVTZXR0aW5nc1BhbmVsQ2hhbmdlfVxuICAgICAgICAgIG9uVXBkYXRlQ29sdW1ucz17KG5leHRWaXNpYmxlQ29sdW1ucykgPT4ge1xuICAgICAgICAgICAgY29uc3Qga2V5c09mVmlzaWJsZUNvbHVtbnMgPSBuZXh0VmlzaWJsZUNvbHVtbnMubWFwKFxuICAgICAgICAgICAgICAodmlzaWJsZUNvbHVtbikgPT4gdmlzaWJsZUNvbHVtbi5rZXlcbiAgICAgICAgICAgICk7XG4gICAgICAgICAgICBwcm9wcy5vblNldHRpbmdzQ2hhbmdlKFxuICAgICAgICAgICAgICBVUERBVEVfQUNUSU9OUy5DT0xVTU5TX1VQREFURSxcbiAgICAgICAgICAgICAga2V5c09mVmlzaWJsZUNvbHVtbnNcbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfX1cbiAgICAgICAgICBtYW5hZ2VyVGhlbWU9e3Byb3BzLm1hbmFnZXJUaGVtZX1cbiAgICAgICAgLz5cbiAgICAgICl9XG4gICAgPC9TcGFjaW5ncy5TdGFjaz5cbiAgKTtcbn07XG5cbkRhdGFUYWJsZVNldHRpbmdzLmRpc3BsYXlOYW1lID0gJ0RhdGFUYWJsZVNldHRpbmdzJztcbkRhdGFUYWJsZVNldHRpbmdzLnByb3BUeXBlcyA9IHtcbiAgdG9wQmFyOiBQcm9wVHlwZXMubm9kZSxcbiAgb25TZXR0aW5nc0NoYW5nZTogUHJvcFR5cGVzLmZ1bmMsXG4gIGRpc3BsYXlTZXR0aW5nczogUHJvcFR5cGVzLnNoYXBlKHtcbiAgICBkaXNhYmxlRGlzcGxheVNldHRpbmdzOiBQcm9wVHlwZXMuYm9vbCxcbiAgICBpc0NvbmRlbnNlZDogUHJvcFR5cGVzLmJvb2wsXG4gICAgaXNXcmFwcGluZ1RleHQ6IFByb3BUeXBlcy5ib29sLFxuICAgIHByaW1hcnlCdXR0b246IFByb3BUeXBlcy5lbGVtZW50LFxuICAgIHNlY29uZGFyeUJ1dHRvbjogUHJvcFR5cGVzLmVsZW1lbnQsXG4gIH0pLFxuICBjb2x1bW5NYW5hZ2VyOiBQcm9wVHlwZXMuc2hhcGUoe1xuICAgIGFyZUhpZGRlbkNvbHVtbnNTZWFyY2hhYmxlOiBQcm9wVHlwZXMuYm9vbCxcbiAgICBkaXNhYmxlQ29sdW1uTWFuYWdlcjogUHJvcFR5cGVzLmJvb2wsXG4gICAgdmlzaWJsZUNvbHVtbktleXM6IFByb3BUeXBlcy5hcnJheU9mKFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCksXG4gICAgaGlkZWFibGVDb2x1bW5zOiBQcm9wVHlwZXMuYXJyYXlPZihcbiAgICAgIFByb3BUeXBlcy5zaGFwZSh7XG4gICAgICAgIGtleTogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICAgICAgICBsYWJlbDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm5vZGVdKVxuICAgICAgICAgIC5pc1JlcXVpcmVkLFxuICAgICAgfSlcbiAgICApLFxuICAgIHNlYXJjaEhpZGRlbkNvbHVtbnM6IFByb3BUeXBlcy5mdW5jLFxuICAgIHNlYXJjaEhpZGRlbkNvbHVtbnNQbGFjZWhvbGRlcjogUHJvcFR5cGVzLnN0cmluZyxcbiAgICBwcmltYXJ5QnV0dG9uOiBQcm9wVHlwZXMuZWxlbWVudCxcbiAgICBzZWNvbmRhcnlCdXR0b246IFByb3BUeXBlcy5lbGVtZW50LFxuICB9KSxcbiAgbWFuYWdlclRoZW1lOiBQcm9wVHlwZXMub25lT2YoWydsaWdodCcsICdkYXJrJ10pLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgRGF0YVRhYmxlU2V0dGluZ3M7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
 var getDropdownOptions = function getDropdownOptions(_ref) {
@@ -622,16 +696,16 @@ var getDropdownOptions = function getDropdownOptions(_ref) {
       formatMessage = _ref.formatMessage;
   return _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(areColumnSettingsEnabled ? [{
     value: COLUMN_MANAGER,
-    label: formatMessage(messages$3.columnManagerOption)
+    label: formatMessage(messages.columnManagerOption)
   }] : []), _toConsumableArray(areDisplaySettingsEnabled ? [{
     value: DISPLAY_SETTINGS,
-    label: formatMessage(messages$3.displaySettingsOption)
+    label: formatMessage(messages.displaySettingsOption)
   }] : []));
 };
 var getMappedColumns = function getMappedColumns() {
   var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return _reduceInstanceProperty(columns).call(columns, function (mappedColumns, column) {
-    return _objectSpread(_objectSpread({}, mappedColumns), {}, _defineProperty({}, column.key, column));
+    return _objectSpread$1(_objectSpread$1({}, mappedColumns), {}, _defineProperty({}, column.key, column));
   }, {});
 };
 var getSelectedColumns = function getSelectedColumns(mappedColumns) {
@@ -669,42 +743,52 @@ var DataTableSettings = function DataTableSettings(props) {
     return setOpenedPanelId(null);
   };
 
-  return jsx(Spacings.Stack, null, jsx(Spacings.Inline, {
-    justifyContent: "space-between",
-    alignItems: "center"
-  }, jsx(TopBarContainer, null, props.topBar), dropdownOptions.length > 0 && jsx(SelectContainer, null, jsx(AccessibleHiden, null, jsx("label", {
-    htmlFor: "table-settings-dropdown"
-  }, "Open table manager dropdown")), jsx(SelectInput, {
-    id: "table-settings-dropdown" // the dropdown always shows the placeholder as selecting an option
-    // will open the corresponding panel (column manager or display settings)
-    ,
-    value: "",
-    placeholder: intl.formatMessage(messages$3.placeholder),
-    onChange: handleDropdownChange,
-    options: dropdownOptions,
-    iconLeft: jsx(TableIcon, null)
-  }))), openedPanelId === DISPLAY_SETTINGS && jsx(DensityManager, _extends({}, props.displaySettings || {}, {
-    onClose: handleSettingsPanelChange,
-    onDensityDisplayChange: function onDensityDisplayChange(event) {
-      props.onSettingsChange(UPDATE_ACTIONS.IS_TABLE_CONDENSED_UPDATE, event.target.value === DENSITY_COMPACT);
-    },
-    onTextWrappingChange: function onTextWrappingChange(event) {
-      props.onSettingsChange(UPDATE_ACTIONS.IS_TABLE_WRAPPING_TEXT_UPDATE, event.target.value === SHOW_HIDE_ON_DEMAND);
-    },
-    managerTheme: props.managerTheme
-  })), openedPanelId === COLUMN_MANAGER && jsx(ColumnSettingsManager, _extends({}, props.columnManager || {}, {
-    availableColumns: props.columnManager.hideableColumns,
-    selectedColumns: selectedColumns,
-    onClose: handleSettingsPanelChange,
-    onUpdateColumns: function onUpdateColumns(nextVisibleColumns) {
-      var keysOfVisibleColumns = _mapInstanceProperty(nextVisibleColumns).call(nextVisibleColumns, function (visibleColumn) {
-        return visibleColumn.key;
-      });
-
-      props.onSettingsChange(UPDATE_ACTIONS.COLUMNS_UPDATE, keysOfVisibleColumns);
-    },
-    managerTheme: props.managerTheme
-  })));
+  return jsxs(Spacings.Stack, {
+    children: [jsxs(Spacings.Inline, {
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [jsx(TopBarContainer, {
+        children: props.topBar
+      }), dropdownOptions.length > 0 && jsxs(SelectContainer, {
+        children: [jsx(AccessibleHiden, {
+          children: jsx("label", {
+            htmlFor: "table-settings-dropdown",
+            children: "Open table manager dropdown"
+          })
+        }), jsx(SelectInput, {
+          id: "table-settings-dropdown" // the dropdown always shows the placeholder as selecting an option
+          // will open the corresponding panel (column manager or display settings)
+          ,
+          value: "",
+          placeholder: intl.formatMessage(messages.placeholder),
+          onChange: handleDropdownChange,
+          options: dropdownOptions,
+          iconLeft: jsx(TableIcon, {})
+        })]
+      })]
+    }), openedPanelId === DISPLAY_SETTINGS && jsx(DisplaySettingsManager, _objectSpread$1(_objectSpread$1({}, props.displaySettings || {}), {}, {
+      onClose: handleSettingsPanelChange,
+      onDensityDisplayChange: function onDensityDisplayChange(event) {
+        props.onSettingsChange(UPDATE_ACTIONS.IS_TABLE_CONDENSED_UPDATE, event.target.value === DENSITY_COMPACT);
+      },
+      onTextWrappingChange: function onTextWrappingChange(event) {
+        props.onSettingsChange(UPDATE_ACTIONS.IS_TABLE_WRAPPING_TEXT_UPDATE, event.target.value === SHOW_HIDE_ON_DEMAND);
+      },
+      managerTheme: props.managerTheme
+    })), openedPanelId === COLUMN_MANAGER && jsx(ColumnSettingsManager$1, _objectSpread$1(_objectSpread$1({}, props.columnManager || {}), {}, {
+      availableColumns: props.columnManager.hideableColumns,
+      selectedColumns: selectedColumns,
+      onClose: handleSettingsPanelChange,
+      onUpdateColumns: function onUpdateColumns(nextVisibleColumns) {
+        var keysOfVisibleColumns = _mapInstanceProperty(nextVisibleColumns).call(nextVisibleColumns, function (visibleColumn) {
+          return visibleColumn.key;
+        });
+
+        props.onSettingsChange(UPDATE_ACTIONS.COLUMNS_UPDATE, keysOfVisibleColumns);
+      },
+      managerTheme: props.managerTheme
+    }))]
+  });
 };
 
 DataTableSettings.displayName = 'DataTableSettings';
@@ -718,44 +802,51 @@ DataTableSettings.propTypes = process.env.NODE_ENV !== "production" ? {
     primaryButton: PropTypes.element,
     secondaryButton: PropTypes.element
   }),
-  columnManager: PropTypes.shape((_PropTypes$shape = {
+  columnManager: PropTypes.shape({
     areHiddenColumnsSearchable: PropTypes.bool,
     disableColumnManager: PropTypes.bool,
     visibleColumnKeys: PropTypes.arrayOf(PropTypes.string.isRequired),
     hideableColumns: PropTypes.arrayOf(PropTypes.shape({
       key: PropTypes.string.isRequired,
       label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
-    }))
-  }, _defineProperty(_PropTypes$shape, "areHiddenColumnsSearchable", PropTypes.bool), _defineProperty(_PropTypes$shape, "searchHiddenColumns", PropTypes.func), _defineProperty(_PropTypes$shape, "searchHiddenColumnsPlaceholder", PropTypes.string), _defineProperty(_PropTypes$shape, "primaryButton", PropTypes.element), _defineProperty(_PropTypes$shape, "secondaryButton", PropTypes.element), _PropTypes$shape)),
+    })),
+    searchHiddenColumns: PropTypes.func,
+    searchHiddenColumnsPlaceholder: PropTypes.string,
+    primaryButton: PropTypes.element,
+    secondaryButton: PropTypes.element
+  }),
   managerTheme: PropTypes.oneOf(['light', 'dark'])
 } : {};
+var DataTableSettings$1 = DataTableSettings;
 
-function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys$1(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys$1(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var DataTableManager = function DataTableManager(props) {
   var areDisplaySettingsEnabled = Boolean(props.displaySettings && !props.displaySettings.disableDisplaySettings);
   var isWrappingText = areDisplaySettingsEnabled && props.displaySettings.isWrappingText;
-  var columns = React.useMemo(function () {
+  var columns = useMemo(function () {
     var _context;
 
     return _mapInstanceProperty(_context = props.columns).call(_context, function (column) {
-      return _objectSpread$1(_objectSpread$1({}, column), {}, {
+      return _objectSpread(_objectSpread({}, column), {}, {
         isTruncated: areDisplaySettingsEnabled ? isWrappingText : column.isTruncated
       });
     });
   }, [areDisplaySettingsEnabled, props.columns, isWrappingText]);
-  return jsx(Spacings.Stack, null, jsx(DataTableSettings, {
-    topBar: props.topBar,
-    onSettingsChange: props.onSettingsChange,
-    columnManager: props.columnManager,
-    displaySettings: props.displaySettings,
-    managerTheme: props.managerTheme
-  }), /*#__PURE__*/React.cloneElement(props.children, {
-    columns: columns,
-    isCondensed: areDisplaySettingsEnabled && props.displaySettings.isCondensed
-  }));
+  return jsxs(Spacings.Stack, {
+    children: [jsx(DataTableSettings$1, {
+      topBar: props.topBar,
+      onSettingsChange: props.onSettingsChange,
+      columnManager: props.columnManager,
+      displaySettings: props.displaySettings,
+      managerTheme: props.managerTheme
+    }), /*#__PURE__*/cloneElement(props.children, {
+      columns: columns,
+      isCondensed: areDisplaySettingsEnabled && props.displaySettings.isCondensed
+    })]
+  });
 };
 
 DataTableManager.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -982,9 +1073,9 @@ DataTableManager.propTypes = process.env.NODE_ENV !== "production" ? {
   managerTheme: PropTypes.oneOf(['light', 'dark'])
 } : {};
 DataTableManager.displayName = 'DataTableManager';
+var DataTableManager$1 = DataTableManager;
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.1';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.5";
 
-export default DataTableManager;
-export { UPDATE_ACTIONS, version };
+export { UPDATE_ACTIONS, DataTableManager$1 as default, version };