@elliemae/ds-form 2.0.0-rc.1 → 2.0.0-rc.13

package/esm/Input/InputImpl.js

@@ -1,6 +1,6 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
@@ -54,12 +54,10 @@ const noop = () => null;
 class InputImpl extends Component {
   constructor(props) {
     super(props);
+    this.ref = void 0;
+    this.refTooltip = void 0;
 
-    _defineProperty(this, "ref", void 0);
-
-    _defineProperty(this, "refTooltip", void 0);
-
-    _defineProperty(this, "handleOnChange", e => {
+    this.handleOnChange = e => {
       const {
         onChange,
         max
@@ -75,9 +73,9 @@ class InputImpl extends Component {
           isEllipsisOn: this.ref.current.offsetWidth < this.ref.current.scrollWidth
         });
       }
-    });
+    };
 
-    _defineProperty(this, "handleBlur", e => {
+    this.handleBlur = e => {
       const {
         onBlur,
         onChange,
@@ -99,9 +97,9 @@ class InputImpl extends Component {
       this.setState({
         active: false
       });
-    });
+    };
 
-    _defineProperty(this, "handleFocus", e => {
+    this.handleFocus = e => {
       const {
         onFocus
       } = this.props;
@@ -109,30 +107,30 @@ class InputImpl extends Component {
       this.setState({
         active: true
       });
-    });
+    };
 
-    _defineProperty(this, "handleMouseEnter", () => {
+    this.handleMouseEnter = () => {
       if (!this.state.showTooltip) {
         this.setState({
           showTooltip: true
         });
       }
-    });
+    };
 
-    _defineProperty(this, "handleMouseLeave", () => {
+    this.handleMouseLeave = () => {
       if (this.state.showTooltip) {
         this.setState({
           showTooltip: false
         });
       }
-    });
+    };
 
-    _defineProperty(this, "setWidth", () => {
+    this.setWidth = () => {
       const client = this.refTooltip.current.getBoundingClientRect();
       this.setState({
         width: client.width
       });
-    });
+    };
 
     this.state = {
       width: -1,

package/esm/InputGroup/AddonWrapper.js

@@ -1,11 +1,11 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { Component } from 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { jsxs } from 'react/jsx-runtime';
@@ -19,8 +19,7 @@ const InputAddon = aggregatedClasses('span')(blockName, 'addon');
 class AddonWrapper extends Component {
   constructor() {
     super(...arguments);
-
-    _defineProperty(this, "state", {});
+    this.state = {};
   }
 
   render() {
@@ -40,7 +39,6 @@ class AddonWrapper extends Component {
   }
 
 }
-
-_defineProperty(AddonWrapper, "defaultProps", {});
+AddonWrapper.defaultProps = {};
 
 export { AddonWrapper as default };

package/esm/InputMask/DSInputMaskDeprecated.js

@@ -88,12 +88,10 @@ class DSInputMaskDeprecated extends Component {
 
     super(props);
     _this = this;
+    this.lastkey = null;
+    this.lastkeycode = null;
 
-    _defineProperty(this, "lastkey", null);
-
-    _defineProperty(this, "lastkeycode", null);
-
-    _defineProperty(this, "conformValue", function (rawValueOrEvent, currentCaretPosition) {
+    this.conformValue = function (rawValueOrEvent, currentCaretPosition) {
       let {
         skipCaretPositioning = false,
         skipOnChangeCallback = false
@@ -205,9 +203,9 @@ class DSInputMaskDeprecated extends Component {
         if (!skipOnChangeCallback) onChange(event);
         if (!skipCaretPositioning) setTimeout(() => setCaretPosition(_this.inputref, caretPos));
       });
-    });
+    };
 
-    _defineProperty(this, "handleOnChange", e => {
+    this.handleOnChange = e => {
       var _e$target;
 
       const rawValue = (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '';
@@ -216,9 +214,9 @@ class DSInputMaskDeprecated extends Component {
       } = e.target;
       const currentCaretPosition = selectionEnd;
       this.conformValue(rawValue, currentCaretPosition);
-    });
+    };
 
-    _defineProperty(this, "handleKeyDown", e => {
+    this.handleKeyDown = e => {
       e.stopPropagation();
       const {
         onKeyDown
@@ -226,9 +224,9 @@ class DSInputMaskDeprecated extends Component {
       this.lastkey = e.key;
       this.lastkeycode = e.keyCode;
       onKeyDown(e);
-    });
+    };
 
-    _defineProperty(this, "handleBlur", e => {
+    this.handleBlur = e => {
       const {
         onBlur
       } = this.props;
@@ -236,7 +234,7 @@ class DSInputMaskDeprecated extends Component {
         focus: false
       });
       onBlur(e);
-    });
+    };
 
     this.inputref = /*#__PURE__*/React.createRef();
     this.state = {

package/esm/MenuItem/components/MenuItem/index.js

@@ -10,7 +10,7 @@ import { jsx } from 'react/jsx-runtime';
 
 const MenuItem = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, MenuItemWithSchema.toTypescript());
+  useValidateTypescriptPropTypes(propsWithDefault, itemProps);
   const {
     dsId,
     label,

package/esm/MenuItem/components/MultiMenuItem/MultiMenuItem.js

@@ -26,6 +26,7 @@ const MultiMenuItem = props => {
   } = props;
   return /*#__PURE__*/jsx(StyledGlobalMenuItemWrapper, {
     id: dsId,
+    disabled: disabled,
     isActive: isActive,
     isSelected: isSelected,
     isFocus: isFocus,

package/esm/MenuItem/components/Section/index.js

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 
 const Section = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, MenuSectionItemWithSchema.toTypescript());
+  useValidateTypescriptPropTypes(propsWithDefault, itemProps);
   const {
     label,
     wrapperStyles,

package/esm/MenuItem/components/Section/styled.js

@@ -6,6 +6,6 @@ const StyledGroupLabel = /*#__PURE__*/styled.span.withConfig({
 })(["font-family:12px;color:", ";"], props => props.theme.colors.neutral[500]);
 const StyledSectionWrapper = /*#__PURE__*/styled.li.withConfig({
   componentId: "sc-6xya9j-1"
-})(["", " ", " list-style:none;padding:0px 16px;"], position, layout);
+})(["", " ", " list-style:none;padding:0px 16px;height:24px;display:flex;align-items:center;"], position, layout);
 
 export { StyledGroupLabel, StyledSectionWrapper };

package/esm/MenuItem/components/Separator/styled.js

@@ -3,9 +3,9 @@ import { position, layout } from 'styled-system';
 
 const StyledSeparator = /*#__PURE__*/styled.hr.withConfig({
   componentId: "sc-1xat2d9-0"
-})(["border:none;height:1px;background-color:", ";;"], props => props.theme.colors.neutral[500]);
+})(["border:0;border-top:1px solid #697489;margin:4px 0px;padding:0;"]);
 const StyledSeparatorWrapper = /*#__PURE__*/styled.li.withConfig({
   componentId: "sc-1xat2d9-1"
-})(["list-style:none;margin:0px 16px;", " ", ""], position, layout);
+})(["list-style:none;padding:0px 16px;", " ", ""], position, layout);
 
 export { StyledSeparator, StyledSeparatorWrapper };

package/esm/MenuItem/components/SingleMenuItem/SingleMenuItem.js

@@ -5,7 +5,6 @@ import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text'
 import { Checkmark } from '@elliemae/ds-icons';
 import Grid from '@elliemae/ds-grid';
 import { itemProps, defaultProps } from '../../props.js';
-import { StyledItemChecked, StyledItemLabel } from './styled.js';
 import { StyledGlobalMenuItemWrapper } from '../styled.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -42,15 +41,16 @@ const SingleMenuItem = props => {
     pr: render ? 0 : 40,
     "data-testid": dataTestid,
     children: render ? render(props) : /*#__PURE__*/_jsx(Grid, {
-      cols: ['min-content', 'auto'],
+      cols: ['16px', 'auto'],
       height: "16px",
-      gutter: "xxs"
-    }, void 0, /*#__PURE__*/_jsx(StyledItemChecked, {}, void 0, isSelected && /*#__PURE__*/_jsx(Checkmark, {
+      gutter: "xxs",
+      alignItems: "center"
+    }, void 0, /*#__PURE__*/_jsx("div", {}, void 0, isSelected && /*#__PURE__*/_jsx(Checkmark, {
       size: "s",
       color: ['brand-primary', '600']
-    })), /*#__PURE__*/_jsx(StyledItemLabel, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    })), /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
       value: label
-    })))
+    }))
   });
 };
 

package/esm/MenuItem/components/SubmenuItem/index.js

@@ -27,7 +27,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const SubmenuItem = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, SubmenuItemWithSchema.toTypescript());
+  useValidateTypescriptPropTypes(propsWithDefault, itemProps);
   const {
     dsId,
     label,

package/esm/MenuItem/components/styled.js

@@ -1,25 +1,32 @@
-import styled, { css } from 'styled-components';
-import { position, layout, space } from 'styled-system';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { css } from '@elliemae/ds-system';
+import { position, layout } from 'styled-system';
+
+var _templateObject, _templateObject2;
 
 const borderOutside = function (color) {
   let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  return css([":after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:", "px solid ", ";pointer-events:none;z-index:7;}"], width, color);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: ", "px solid ", ";\n    pointer-events: none;\n    z-index: 7;\n  }\n"])), width, color);
 };
 
+const disabledOption = () => css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n"])));
+
 const activeBorderCss = props => borderOutside(props.theme.colors.brand[500]);
 
 const focusBorderCss = props => borderOutside(props.theme.colors.brand[700], 2);
 
 const StyledGlobalMenuItemWrapper = /*#__PURE__*/styled.li.withConfig({
   componentId: "sc-jyoobd-0"
-})(["cursor:pointer;height:32px;padding-left:16px;padding-right:40px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], position, layout, space, props => {
+})(["cursor:pointer;height:32px;padding-left:16px;padding-right:16px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], position, layout, props => {
+  if (props.disabled) return disabledOption();
   if (props.isFocus) return focusBorderCss(props);
   if (props.isActive) return activeBorderCss(props);
   return '';
-}, props => props.isActive ? props.theme.colors.brand[200] : 'white', props => props.theme.colors.brand[200]);
+}, props => props.isActive ? props.theme.colors.brand[200] : 'white', props => !props.disabled && props.theme.colors.brand[200]);
 const StyledMenuItemWrapper = /*#__PURE__*/styled(StyledGlobalMenuItemWrapper).withConfig({
   componentId: "sc-jyoobd-1"
-})(["background-color:", " !important;", ";"], props => props.isSelected ? props.theme.colors.brand[200] : 'white', props => props.isSelected && !props.isFocus ? activeBorderCss(props) : '');
+})(["background-color:", " !important;cursor:", ";", ";"], props => props.isSelected ? props.theme.colors.brand[200] : 'white', props => props.disabled && 'not-allowed', props => props.isSelected && !props.isFocus ? activeBorderCss(props) : '');
 const StyledSubmenuItemWrapper = /*#__PURE__*/styled(StyledGlobalMenuItemWrapper).withConfig({
   componentId: "sc-jyoobd-2"
 })(["", ";padding-right:0;"], props => props.isSelected || props.isActive ? activeBorderCss(props) : '');

package/esm/SearchBox/withSearchable.js

@@ -3,8 +3,8 @@ import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import React, { Component } from 'react';
 import { debounce } from '@elliemae/ds-utilities';
 import { jsx } from 'react/jsx-runtime';
@@ -19,9 +19,7 @@ const withSearchable = WrappedComponent => {
   class Searchable extends Component {
     constructor(props) {
       super(props);
-
-      _defineProperty(this, "debouncedSearch", debounce(this.handleSearch, 200));
-
+      this.debouncedSearch = debounce(this.handleSearch, 200);
       this.state = {
         value: props.value
       };

package/esm/Toggle/DSToggleImpl.js

@@ -17,7 +17,7 @@ class DSToggleImpl extends Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "onDragStart", clientX => {
+    this.onDragStart = clientX => {
       const {
         startPoint,
         checked,
@@ -37,9 +37,9 @@ class DSToggleImpl extends Component {
         drag
       }); // else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position
       else this.setDragOnChange(checked); // set initial position
-    });
+    };
 
-    _defineProperty(this, "onDragStop", e => {
+    this.onDragStop = e => {
       const {
         checked
       } = this.state; // const { checked: checkedProp, } = this.props
@@ -49,25 +49,25 @@ class DSToggleImpl extends Component {
         this.setState(cleanDrag); // } else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position
       } else this.setDragOnChange(checked); // set initial position
 
-    });
+    };
 
-    _defineProperty(this, "onBlur", e => {
+    this.onBlur = e => {
       const {
         onBlur,
         id
       } = this.props;
       if (onBlur) onBlur(e, id);
-    });
+    };
 
-    _defineProperty(this, "onFocus", e => {
+    this.onFocus = e => {
       const {
         onFocus,
         id
       } = this.props;
       if (onFocus) onFocus(e, id);
-    });
+    };
 
-    _defineProperty(this, "onChange", e => {
+    this.onChange = e => {
       const {
         checked
       } = this.state;
@@ -90,26 +90,26 @@ class DSToggleImpl extends Component {
       onChange(e, id); // this.setDragOnChange(checkedProp != null ? checkedProp : newCheck) // set new position
 
       this.setDragOnChange(newCheck); // set new position
-    });
+    };
 
-    _defineProperty(this, "onMouseEnter", () => {
+    this.onMouseEnter = () => {
       this.setState({
         inside: true
       });
-    });
+    };
 
-    _defineProperty(this, "onMouseLeave", () => {
+    this.onMouseLeave = () => {
       this.setState({
         inside: false
       });
-    });
+    };
 
-    _defineProperty(this, "onMouseMove", event => {
+    this.onMouseMove = event => {
       event.preventDefault();
       this.onDragStart(event.clientX);
-    });
+    };
 
-    _defineProperty(this, "onMouseDown", event => {
+    this.onMouseDown = event => {
       this.onDragStart(event.clientX);
       this.setState({
         startPoint: event.clientX,
@@ -117,36 +117,36 @@ class DSToggleImpl extends Component {
       });
       window.addEventListener('mousemove', this.onMouseMove);
       window.addEventListener('mouseup', this.onMouseUp);
-    });
+    };
 
-    _defineProperty(this, "onMouseUp", event => {
+    this.onMouseUp = event => {
       this.onDragStop(event);
       window.removeEventListener('mousemove', this.onMouseMove);
       window.removeEventListener('mouseup', this.onMouseUp);
-    });
+    };
 
-    _defineProperty(this, "onTouchCancel", () => {
+    this.onTouchCancel = () => {
       this.setState({
         inside: false
       });
-    });
+    };
 
-    _defineProperty(this, "onTouchEnd", event => {
+    this.onTouchEnd = event => {
       event.preventDefault();
       this.onDragStop(event);
-    });
+    };
 
-    _defineProperty(this, "onTouchMove", event => {
+    this.onTouchMove = event => {
       this.onDragStart(event.touches[0].clientX);
-    });
+    };
 
-    _defineProperty(this, "onTouchStart", event => {
+    this.onTouchStart = event => {
       this.onDragStart(event.touches[0].clientX);
       this.setState({
         startPoint: event.touches[0].clientX,
         isDragging: true
       });
-    });
+    };
 
     this.state = {
       checked: props.checked || false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Form",
   "module": "./esm/index.js",
@@ -159,10 +159,6 @@
       "import": "./esm/MenuItem/components/styled.js",
       "require": "./cjs/MenuItem/components/styled.js"
     },
-    "./MenuItem/components/SingleMenuItem/styled": {
-      "import": "./esm/MenuItem/components/SingleMenuItem/styled.js",
-      "require": "./cjs/MenuItem/components/SingleMenuItem/styled.js"
-    },
     "./MenuItem/components/SingleMenuItem/SingleMenuItem": {
       "import": "./esm/MenuItem/components/SingleMenuItem/SingleMenuItem.js",
       "require": "./cjs/MenuItem/components/SingleMenuItem/SingleMenuItem.js"
@@ -519,10 +515,6 @@
       "import": "./esm/ComboBox/v3/utils/listHelper.js",
       "require": "./cjs/ComboBox/v3/utils/listHelper.js"
     },
-    "./ComboBox/v3/utils/hooks/useOnWindowResize": {
-      "import": "./esm/ComboBox/v3/utils/hooks/useOnWindowResize.js",
-      "require": "./cjs/ComboBox/v3/utils/hooks/useOnWindowResize.js"
-    },
     "./ComboBox/v3/utils/hooks/useOnElementResize": {
       "import": "./esm/ComboBox/v3/utils/hooks/useOnElementResize.js",
       "require": "./cjs/ComboBox/v3/utils/hooks/useOnElementResize.js"
@@ -571,6 +563,10 @@
       "import": "./esm/ComboBox/v3/parts/menu-list/useMenuList.js",
       "require": "./cjs/ComboBox/v3/parts/menu-list/useMenuList.js"
     },
+    "./ComboBox/v3/parts/menu-list/useItemRenderer": {
+      "import": "./esm/ComboBox/v3/parts/menu-list/useItemRenderer.js",
+      "require": "./cjs/ComboBox/v3/parts/menu-list/useItemRenderer.js"
+    },
     "./ComboBox/v3/parts/menu-list/styled": {
       "import": "./esm/ComboBox/v3/parts/menu-list/styled.js",
       "require": "./cjs/ComboBox/v3/parts/menu-list/styled.js"
@@ -583,6 +579,10 @@
       "import": "./esm/ComboBox/v3/parts/menu-list/index.js",
       "require": "./cjs/ComboBox/v3/parts/menu-list/index.js"
     },
+    "./ComboBox/v3/parts/header-list/useHeaderListHandlers": {
+      "import": "./esm/ComboBox/v3/parts/header-list/useHeaderListHandlers.js",
+      "require": "./cjs/ComboBox/v3/parts/header-list/useHeaderListHandlers.js"
+    },
     "./ComboBox/v3/parts/header-list/styled": {
       "import": "./esm/ComboBox/v3/parts/header-list/styled.js",
       "require": "./cjs/ComboBox/v3/parts/header-list/styled.js"
@@ -932,22 +932,28 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-rc.1",
-    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.1",
-    "@elliemae/ds-classnames": "2.0.0-rc.1",
-    "@elliemae/ds-grid": "2.0.0-rc.1",
-    "@elliemae/ds-icon": "2.0.0-rc.1",
-    "@elliemae/ds-icons": "2.0.0-rc.1",
-    "@elliemae/ds-menu": "2.0.0-rc.1",
-    "@elliemae/ds-overlay": "2.0.0-rc.1",
-    "@elliemae/ds-popper": "2.0.0-rc.1",
-    "@elliemae/ds-separator": "2.0.0-rc.1",
-    "@elliemae/ds-shared": "2.0.0-rc.1",
-    "@elliemae/ds-system": "2.0.0-rc.1",
-    "@elliemae/ds-text-wrapper": "2.0.0-rc.1",
-    "@elliemae/ds-tooltip": "2.0.0-rc.1",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.1",
-    "@elliemae/ds-utilities": "2.0.0-rc.1",
+    "@elliemae/ds-button": "2.0.0-rc.13",
+    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.13",
+    "@elliemae/ds-classnames": "2.0.0-rc.13",
+    "@elliemae/ds-controlled-form": "2.0.0-rc.13",
+    "@elliemae/ds-dropdownmenu": "2.0.0-rc.13",
+    "@elliemae/ds-form": "2.0.0-rc.13",
+    "@elliemae/ds-grid": "2.0.0-rc.13",
+    "@elliemae/ds-icon": "2.0.0-rc.13",
+    "@elliemae/ds-icons": "2.0.0-rc.13",
+    "@elliemae/ds-menu": "2.0.0-rc.13",
+    "@elliemae/ds-overlay": "2.0.0-rc.13",
+    "@elliemae/ds-pills": "2.0.0-rc.13",
+    "@elliemae/ds-popper": "2.0.0-rc.13",
+    "@elliemae/ds-popperjs": "2.0.0-rc.13",
+    "@elliemae/ds-props-helpers": "2.0.0-rc.13",
+    "@elliemae/ds-separator": "2.0.0-rc.13",
+    "@elliemae/ds-shared": "2.0.0-rc.13",
+    "@elliemae/ds-system": "2.0.0-rc.13",
+    "@elliemae/ds-text-wrapper": "2.0.0-rc.13",
+    "@elliemae/ds-tooltip": "2.0.0-rc.13",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.13",
+    "@elliemae/ds-utilities": "2.0.0-rc.13",
     "memoize-one": "~5.1.1",
     "moment": "~2.29.1",
     "prop-types": "~15.7.2",
@@ -955,19 +961,26 @@
     "react-measure": "~2.5.2",
     "react-popper": "~1.3.11",
     "react-select": "~4.3.0",
+    "react-virtual": "~2.8.2",
     "react-window": "~1.8.6",
     "resize-observer": "~1.0.2",
     "text-mask-core": "5.1.2",
     "uid": "~2.0.0"
   },
   "devDependencies": {
-    "styled-components": "~5.3.3"
+    "@testing-library/dom": "~8.11.1",
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
+    "styled-components": "~5.3.3",
+    "styled-system": "~5.1.5"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "~17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "styled-system": "^5.1.5"
   },
   "publishConfig": {
     "access": "public",