@redsift/table 6.1.0-alpha.0 → 6.2.0

package/index.js

@@ -1,5 +1,6 @@
+import { GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
+export { GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from '@mui/x-data-grid-pro';
 import React, { forwardRef, useRef } from 'react';
-import { GridToolbarContainer, GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
 import styled, { css } from 'styled-components';
 
 function ownKeys(object, enumerableOnly) {
@@ -167,6 +168,181 @@ class LicenseInfo {
 
 }
 
+/** Component Type. */
+
+/**
+ * JS falsy values.
+ * (excluding `NaN` as it can't be distinguished from `number`)
+ */
+
+/** Get types of the values of a record. */
+
+/**
+ * Color palette.
+ */
+const ColorPalette = {
+  primary: 'primary',
+  secondary: 'secondary',
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
+  success: 'success'
+};
+
+// Material Design Icons v7.0.96
+var mdiChevronDown = "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z";
+var mdiChevronRight = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z";
+var mdiChevronUp = "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z";
+var mdiFilterVariant = "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z";
+
+/**
+ * Component size.
+ */
+const IconSize = {
+  large: 'large',
+  medium: 'medium',
+  small: 'small'
+};
+
+/**
+ * Component style.
+ */
+const StyledIcon = styled.span`
+  font-style: normal;
+  position: relative;
+
+  ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return $color && Object.keys(ColorPalette).indexOf($color) !== -1 ? css`
+    color: var(--redsift-color-${$color}-main);
+  ` : css`
+    color: ${$color || css`var(--redsift-color-action-active)`};
+  `;
+}}
+
+  ${_ref2 => {
+  let {
+    $size
+  } = _ref2;
+  switch ($size) {
+    case IconSize.large:
+      return css`
+          font-size: 35px;
+          height: 35px;
+          line-height: 35px;
+          width: 35px;
+      
+          & .redsift-badge-standard {
+            position: absolute;
+            right: -23px;
+            top: 0px;
+          }
+        
+          & .redsift-badge-dot {
+            position: absolute;
+            right: -7px;
+            top: 4px;
+          }
+        `;
+    case IconSize.small:
+      return css`
+          font-size: 20px;
+          height: 20px;
+          line-height: 20px;
+          width: 20px;
+      
+          & .redsift-badge-standard {
+            position: absolute;
+            right: -24px;
+            top: -8px;
+          }
+        
+          & .redsift-badge-dot {
+            position: absolute;
+            right: -8px;
+            top: 1px;
+          }
+        `;
+    case IconSize.medium:
+    default:
+      return css`
+          font-size: 24px;
+          height: 24px;
+          line-height: 24px;
+          width: 24px;
+      
+          & .redsift-badge-standard {
+            position: absolute;
+            right: -24px;
+            top: -6px;
+          }
+        
+          & .redsift-badge-dot {
+            position: absolute;
+            right: -8px;
+            top: 2px;
+          }
+        `;
+  }
+}}
+`;
+
+const _excluded$2 = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
+const COMPONENT_NAME$3 = 'RedSiftIcon';
+const CLASSNAME$3 = 'redsift-icon';
+const DEFAULT_PROPS$2 = {
+  size: IconSize.medium
+};
+
+/**
+ * The Icon component.
+ */
+const Icon = /*#__PURE__*/forwardRef((props, ref) => {
+  const iconRef = ref || useRef();
+  let {
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
+      badge,
+      className,
+      color,
+      icon,
+      size,
+      svgProps
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+  if (!ariaHidden) {
+    ariaHidden = undefined;
+  }
+  return /*#__PURE__*/React.createElement(StyledIcon, _extends({}, forwardedProps, {
+    $color: color,
+    $size: size,
+    "aria-hidden": ariaLabel ? ariaHidden || undefined : true,
+    "aria-label": ariaLabel,
+    className: classNames(Icon.className, className),
+    ref: iconRef
+  }), /*#__PURE__*/React.createElement("svg", _extends({}, svgProps, {
+    "aria-hidden": ariaLabel ? ariaHidden || undefined : true,
+    "aria-label": ariaLabel,
+    focusable: "false",
+    height: "1em",
+    preserveAspectRatio: "xMidYMid meet",
+    role: "img",
+    style: {
+      verticalAlign: '-0.125em'
+    },
+    viewBox: "0 0 24 24",
+    width: "1em"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: icon,
+    fill: "currentColor"
+  })), badge ? badge : null);
+});
+Icon.className = CLASSNAME$3;
+Icon.defaultProps = DEFAULT_PROPS$2;
+Icon.displayName = COMPONENT_NAME$3;
+
 /**
  * Component style.
  */
@@ -180,6 +356,8 @@ const StyledDataGrid = styled.div`
     `;
 }}
 
+  width: 100%;
+
   .MuiDataGrid-root {
     font-family: var(--redsift-typography-datagrid-font-family);
     border: none;
@@ -205,15 +383,6 @@ const StyledDataGrid = styled.div`
     display: none;
   }
 
-  .MuiDataGrid-toolbarContainer {
-    font-family: var(--redsift-typography-datagrid-font-family);
-
-    button {
-      font-family: var(--redsift-typography-datagrid-font-family);
-      color: #000000;
-    }
-  }
-
   .MuiTablePagination-root {
     .MuiTablePagination-selectLabel {
       font-family: var(--redsift-typography-datagrid-font-family);
@@ -240,8 +409,46 @@ const StyledDataGrid = styled.div`
   }
 `;
 
+/**
+ * Component style.
+ */
+const GridToolbarWrapper = styled.div`
+  .MuiButtonBase-root-JobBs.MuiButton-root {
+    svg {
+      path {
+        fill: var(--redsift-color-primary-main);
+      }
+    }
+  }
+
+  .MuiDataGrid-toolbarContainer {
+    font-family: var(--redsift-typography-datagrid-font-family);
+
+    button {
+      font-family: var(--redsift-typography-datagrid-font-family);
+      font-size: var(--redsift-typography-button-large-font-size);
+      line-height: var(--redsift-typography-button-large-line-height);
+      color: var(--redsift-color-primary-main);
+      border-radius: 0px;
+      padding: 6px 8px;
+
+      .MuiButton-startIcon {
+        margin-left: 0px;
+
+        svg {
+          color: var(--redsift-color-primary-main);
+        }
+      }
+    }
+
+    button:hover {
+      background: var(--redsift-color-primary-outlined-hover);
+    }
+  }
+`;
+
 const Toolbar = () => {
-  return /*#__PURE__*/React.createElement(GridToolbarContainer, null, /*#__PURE__*/React.createElement(GridToolbarColumnsButton, null), /*#__PURE__*/React.createElement(GridToolbarFilterButton, null), /*#__PURE__*/React.createElement(GridToolbarDensitySelector, null), /*#__PURE__*/React.createElement(GridToolbarExport, {
+  return /*#__PURE__*/React.createElement(GridToolbarWrapper, null, /*#__PURE__*/React.createElement(GridToolbarContainer, null, /*#__PURE__*/React.createElement(GridToolbarFilterButton, null), /*#__PURE__*/React.createElement(GridToolbarColumnsButton, null), /*#__PURE__*/React.createElement(GridToolbarDensitySelector, null), /*#__PURE__*/React.createElement(GridToolbarExport, {
     csvOptions: {
       allColumns: true,
       fileName: 'csv',
@@ -255,16 +462,36 @@ const Toolbar = () => {
     printOptions: {
       disableToolbarButton: true
     }
-  }));
+  })));
 };
 
-const _excluded = ["className", "hideToolbar", "license", "$height"];
-const COMPONENT_NAME = 'RedSiftDataGrid';
-const CLASSNAME = 'redsift-data-grid';
-const DEFAULT_PROPS = {
-  license: process.env.MUI_LICENSE_KEY || '',
+const _excluded$1 = ["className", "hideToolbar", "license", "$height"];
+const COMPONENT_NAME$2 = 'RedSiftDataGrid';
+const CLASSNAME$2 = 'redsift-data-grid';
+const DEFAULT_PROPS$1 = {
+  license: process.env.MUI_LICENSE_KEY,
   $height: '500px'
 };
+const ColumnSortedAscendingIcon = () => /*#__PURE__*/React.createElement(Icon, {
+  icon: mdiChevronUp,
+  size: 'small'
+});
+const ColumnSortedDescendingIcon = () => /*#__PURE__*/React.createElement(Icon, {
+  icon: mdiChevronDown,
+  size: 'small'
+});
+const DetailPanelExpandIcon = () => /*#__PURE__*/React.createElement(Icon, {
+  icon: mdiChevronRight,
+  size: 'small'
+});
+const DetailPanelCollapseIcon = () => /*#__PURE__*/React.createElement(Icon, {
+  icon: mdiChevronDown,
+  size: 'small'
+});
+const ColumnFilteredIcon = () => /*#__PURE__*/React.createElement(Icon, {
+  icon: mdiFilterVariant,
+  size: 'small'
+});
 const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   const datagridRef = ref || useRef();
   const {
@@ -273,21 +500,353 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       license,
       $height
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
   LicenseInfo.setLicenseKey(license);
   return /*#__PURE__*/React.createElement(StyledDataGrid, {
     ref: datagridRef,
     className: classNames(DataGrid.className, className),
     $height: $height
   }, /*#__PURE__*/React.createElement(DataGridPro, _extends({}, forwardedProps, {
-    components: _objectSpread2(_objectSpread2({}, props.components), !hideToolbar && {
+    components: _objectSpread2(_objectSpread2({
+      ColumnFilteredIcon,
+      ColumnSortedAscendingIcon,
+      ColumnSortedDescendingIcon,
+      DetailPanelExpandIcon,
+      DetailPanelCollapseIcon,
+      OpenFilterButtonIcon: ColumnFilteredIcon
+    }, props.components), !hideToolbar && {
       Toolbar
     })
   })));
 });
-DataGrid.className = CLASSNAME;
-DataGrid.defaultProps = DEFAULT_PROPS;
-DataGrid.displayName = COMPONENT_NAME;
+DataGrid.className = CLASSNAME$2;
+DataGrid.defaultProps = DEFAULT_PROPS$1;
+DataGrid.displayName = COMPONENT_NAME$2;
+
+/** Get types of the values of a record. */
+
+/**
+ * Component variant.
+ */
+const ShieldVariant = {
+  success: 'success',
+  successLocked: 'successLocked',
+  successUnlocked: 'successUnlocked',
+  fail: 'fail',
+  failLocked: 'failLocked',
+  failUnlocked: 'failUnlocked',
+  warning: 'warning',
+  warningLocked: 'warningLocked',
+  warningUnlocked: 'warningUnlocked',
+  noData: 'noData',
+  ignored: 'ignored',
+  email: 'email',
+  question: 'question'
+};
+
+const StyledShield = styled.div`
+  display: flex;
+  margin: 0 8px;
+`;
+
+const LockedIcon = _ref => {
+  let {
+    color
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16.36",
+    height: "19.63",
+    viewBox: "0 0 20 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10 0L0 4.36364V10.9091C0 16.9636 4.26667 22.6255 10 24C15.7333 22.6255 20 16.9636 20 10.9091V4.36364L10 0Z",
+    fill: color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.5 9.66667H12.9167V8.5C12.9167 6.89 11.61 5.58333 10 5.58333C8.39 5.58333 7.08333 6.89 7.08333 8.5V9.66667H6.5C5.85833 9.66667 5.33333 10.1917 5.33333 10.8333V16.6667C5.33333 17.3083 5.85833 17.8333 6.5 17.8333H13.5C14.1417 17.8333 14.6667 17.3083 14.6667 16.6667V10.8333C14.6667 10.1917 14.1417 9.66667 13.5 9.66667ZM10 14.9167C9.35833 14.9167 8.83333 14.3917 8.83333 13.75C8.83333 13.1083 9.35833 12.5833 10 12.5833C10.6417 12.5833 11.1667 13.1083 11.1667 13.75C11.1667 14.3917 10.6417 14.9167 10 14.9167ZM11.8083 9.66667H8.19167V8.5C8.19167 7.5025 9.0025 6.69167 10 6.69167C10.9975 6.69167 11.8083 7.5025 11.8083 8.5V9.66667Z",
+    fill: "white"
+  }));
+};
+
+const UnlockedIcon = _ref => {
+  let {
+    color
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16.36",
+    height: "19.63",
+    viewBox: "0 0 20 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10 0L0 4.36364V10.9091C0 16.9636 4.26667 22.6255 10 24C15.7333 22.6255 20 16.9636 20 10.9091V4.36364L10 0Z",
+    fill: color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10 14.9167C10.6417 14.9167 11.1667 14.3917 11.1667 13.75C11.1667 13.1083 10.6417 12.5833 10 12.5833C9.35833 12.5833 8.83333 13.1083 8.83333 13.75C8.83333 14.3917 9.35833 14.9167 10 14.9167ZM13.5 9.66667H12.9167V8.5C12.9167 6.89 11.61 5.58334 10 5.58334C8.39 5.58334 7.08333 6.89 7.08333 8.5H8.19167C8.19167 7.5025 9.0025 6.69167 10 6.69167C10.9975 6.69167 11.8083 7.5025 11.8083 8.5V9.66667H6.5C5.85833 9.66667 5.33333 10.1917 5.33333 10.8333V16.6667C5.33333 17.3083 5.85833 17.8333 6.5 17.8333H13.5C14.1417 17.8333 14.6667 17.3083 14.6667 16.6667V10.8333C14.6667 10.1917 14.1417 9.66667 13.5 9.66667ZM13.5 16.6667H6.5V10.8333H13.5V16.6667Z",
+    fill: "white"
+  }));
+};
+
+const SuccessIcon = _ref => {
+  let {
+    color
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16.36",
+    height: "19.63",
+    viewBox: "0 0 20 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10 0L0 4.36364V10.9091C0 16.9636 4.26667 22.6255 10 24C15.7333 22.6255 20 16.9636 20 10.9091V4.36364L10 0Z",
+    fill: color
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 16.5711L16.4853 8.08579L15.0711 6.67158L8 13.7426L5.17157 10.9142L3.75736 12.3284L8 16.5711Z",
+    fill: "white"
+  }));
+};
+
+const WarningIcon = _ref => {
+  let {
+    color
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16.36",
+    height: "19.63",
+    viewBox: "0 0 20 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10 0L0 4.36364V10.9091C0 16.9636 4.26667 22.6255 10 24C15.7333 22.6255 20 16.9636 20 10.9091V4.36364L10 0Z",
+    fill: color
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 5C10.7177 5 11.3804 5.38457 11.7365 6.00772L15.7365 13.0077C16.0902 13.6267 16.0877 14.3872 15.7298 15.0039C15.372 15.6205 14.7129 16 14 16H6C5.28706 16 4.62802 15.6205 4.27018 15.0039C3.91234 14.3872 3.9098 13.6267 4.26351 13.0077L8.26351 6.00772C8.6196 5.38457 9.28229 5 10 5ZM10 7L6 14H14L10 7Z",
+    fill: "white"
+  }));
+};
+
+const FailIcon = _ref => {
+  let {
+    color
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16.36",
+    height: "19.63",
+    viewBox: "0 0 20 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10 0L0 4.36364V10.9091C0 16.9636 4.26667 22.6255 10 24C15.7333 22.6255 20 16.9636 20 10.9091V4.36364L10 0Z",
+    fill: color
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9 15V5H11V15H9Z",
+    fill: "white"
+  }));
+};
+
+const NoDataIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "16.36",
+  height: "19.63",
+  viewBox: "0 0 20 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M10 0L0 4.36364V10.9091C0 16.9636 4.26667 22.6255 10 24C15.7333 22.6255 20 16.9636 20 10.9091V4.36364L10 0Z",
+  fill: "#BDBDBD"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M16 13H4V11H16V13Z",
+  fill: "white"
+}));
+
+const IgnoredIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "16.36",
+  height: "19.63",
+  viewBox: "0 0 20 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M10 0L0 4.36364V10.9091C0 16.9636 4.26667 22.6255 10 24C15.7333 22.6255 20 16.9636 20 10.9091V4.36364L10 0Z",
+  fill: "#BDBDBD"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M10 6.16666C6.78 6.16666 4.16667 8.77999 4.16667 12C4.16667 15.22 6.78 17.8333 10 17.8333C13.22 17.8333 15.8333 15.22 15.8333 12C15.8333 8.77999 13.22 6.16666 10 6.16666ZM5.33333 12C5.33333 9.42166 7.42167 7.33332 10 7.33332C11.0792 7.33332 12.0708 7.70082 12.8583 8.31916L6.31917 14.8583C5.70083 14.0708 5.33333 13.0792 5.33333 12ZM10 16.6667C8.92083 16.6667 7.92917 16.2992 7.14167 15.6808L13.6808 9.14166C14.2992 9.92916 14.6667 10.9208 14.6667 12C14.6667 14.5783 12.5783 16.6667 10 16.6667Z",
+  fill: "white"
+}));
+
+const QuestionIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "16.36",
+  height: "19.63",
+  viewBox: "0 0 20 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M10 0L0 4.36364V10.9091C0 16.9636 4.26667 22.6255 10 24C15.7333 22.6255 20 16.9636 20 10.9091V4.36364L10 0Z",
+  fill: "#BDBDBD"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M9 17H11V15H9V17ZM10 5C7.79 5 6 6.79 6 9H8C8 7.9 8.9 7 10 7C11.1 7 12 7.9 12 9C12 11 9 10.75 9 14H11C11 11.75 14 11.5 14 9C14 6.79 12.21 5 10 5Z",
+  fill: "white"
+}));
+
+const EmailIcon = _ref => {
+  let {
+    color
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16.36",
+    height: "19.63",
+    viewBox: "0 0 20 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10 0L0 4.36364V10.9091C0 16.9636 4.26667 22.6255 10 24C15.7333 22.6255 20 16.9636 20 10.9091V4.36364L10 0Z",
+    fill: color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.6667 6.33334H5.33333C4.69167 6.33334 4.1725 6.85834 4.1725 7.50001L4.16667 14.5C4.16667 15.1417 4.69167 15.6667 5.33333 15.6667H14.6667C15.3083 15.6667 15.8333 15.1417 15.8333 14.5V7.50001C15.8333 6.85834 15.3083 6.33334 14.6667 6.33334ZM14.6667 14.5H5.33333V8.66668L10 11.5833L14.6667 8.66668V14.5ZM10 10.4167L5.33333 7.50001H14.6667L10 10.4167Z",
+    fill: "white"
+  }));
+};
+
+const COMPONENT_NAME$1 = 'RedSiftShield';
+const CLASSNAME$1 = 'redsift-shield';
+const DEFAULT_PROPS = {
+  variant: ShieldVariant.success
+};
+const colors = {
+  success: '#4caf50',
+  warning: '#FCBB54',
+  error: '#e06354',
+  primary: '#0075da'
+};
+
+/**
+ * Variant map to icon.
+ */
+const shieldVariantIcons = {
+  success: /*#__PURE__*/React.createElement(SuccessIcon, {
+    color: colors.success
+  }),
+  successLocked: /*#__PURE__*/React.createElement(LockedIcon, {
+    color: colors.success
+  }),
+  successUnlocked: /*#__PURE__*/React.createElement(UnlockedIcon, {
+    color: colors.success
+  }),
+  fail: /*#__PURE__*/React.createElement(FailIcon, {
+    color: colors.error
+  }),
+  failLocked: /*#__PURE__*/React.createElement(LockedIcon, {
+    color: colors.error
+  }),
+  failUnlocked: /*#__PURE__*/React.createElement(UnlockedIcon, {
+    color: colors.error
+  }),
+  warning: /*#__PURE__*/React.createElement(WarningIcon, {
+    color: colors.warning
+  }),
+  warningLocked: /*#__PURE__*/React.createElement(LockedIcon, {
+    color: colors.warning
+  }),
+  warningUnlocked: /*#__PURE__*/React.createElement(UnlockedIcon, {
+    color: colors.warning
+  }),
+  noData: /*#__PURE__*/React.createElement(NoDataIcon, null),
+  ignored: /*#__PURE__*/React.createElement(IgnoredIcon, null),
+  email: /*#__PURE__*/React.createElement(EmailIcon, {
+    color: colors.primary
+  }),
+  question: /*#__PURE__*/React.createElement(QuestionIcon, null)
+};
+
+/**
+ * The Shield component.
+ */
+const Shield = /*#__PURE__*/forwardRef((props, ref) => {
+  const shieldRef = ref || useRef();
+  const {
+    className,
+    variant
+  } = props;
+  return /*#__PURE__*/React.createElement(StyledShield, {
+    className: classNames(Shield.className, `${Shield.className}-${variant}`, className),
+    ref: shieldRef
+  }, shieldVariantIcons[variant]);
+});
+Shield.className = CLASSNAME$1;
+Shield.defaultProps = DEFAULT_PROPS;
+Shield.displayName = COMPONENT_NAME$1;
+
+const StyledTextCell = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .redsift-shield {
+    margin: 0 8px 0 0;
+  }
+
+  > .redsift-icon {
+    margin: 0 8px 0 0;
+    width: 16px;
+  }
+`;
+const StyledTextCellText = styled.div`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  width: 100%;
+`;
+
+const _excluded = ["badge", "children", "className", "leftIcon", "leftIconColor", "rightIcon", "rightIconColor", "shieldVariant"];
+const COMPONENT_NAME = 'RedSiftDataGridCell';
+const CLASSNAME = 'redsift-datagrid-cell';
+
+/**
+ * The Cell component.
+ */
+const TextCell = /*#__PURE__*/forwardRef((props, ref) => {
+  const textCellRef = ref || useRef();
+  const {
+      badge,
+      children,
+      className,
+      leftIcon,
+      leftIconColor,
+      rightIcon,
+      rightIconColor,
+      shieldVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(StyledTextCell, _extends({}, forwardedProps, {
+    className: classNames(TextCell.className, className),
+    ref: textCellRef
+  }), /*#__PURE__*/React.createElement(React.Fragment, null, shieldVariant ? /*#__PURE__*/React.createElement(Shield, {
+    variant: shieldVariant
+  }) : null, leftIcon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: leftIcon,
+    "aria-hidden": "true",
+    size: "small",
+    color: leftIconColor
+  }) : null, /*#__PURE__*/React.createElement(StyledTextCellText, null, children), badge ? badge : null, rightIcon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: rightIcon,
+    "aria-hidden": "true",
+    size: "small",
+    color: rightIconColor
+  }) : null));
+});
+TextCell.className = CLASSNAME;
+TextCell.displayName = COMPONENT_NAME;
 
-export { DataGrid, Toolbar };
+export { DataGrid, Shield, ShieldVariant, TextCell, Toolbar };
 //# sourceMappingURL=index.js.map