@elliemae/ds-form 2.0.0-next.7 → 2.0.0-rc.10

package/esm/InputMask/mask_types/PhoneInputMask.js

@@ -1,6 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useRef, useState, useCallback, useLayoutEffect } from 'react';
 import DSTextBox from '../../TextBox/DSTextBox.js';
 import setCaretPosition from '../utils/setCaretPosition.js';
@@ -26,7 +31,9 @@ const conformValue = (rawValue, cursorPos, lastkeycode) => {
 
 
   const charactersToAdd = [['(', 0], [') ', 4], ['-', 9]];
-  charactersToAdd.forEach(([chars, pos]) => {
+  charactersToAdd.forEach(_ref => {
+    let [chars, pos] = _ref;
+
     if (nextMaskedValue.length > pos) {
       nextMaskedValue.splice(pos, 0, ...chars);
       if (maskedPos >= pos) maskedPos += chars.length;
@@ -34,11 +41,13 @@ const conformValue = (rawValue, cursorPos, lastkeycode) => {
   });
 
   if (lastkeycode !== 8 && maskedPos < nextMaskedValue.length) {
-    charactersToAdd.forEach(([chars, pos]) => {
+    charactersToAdd.forEach(_ref2 => {
+      let [chars, pos] = _ref2;
       if (maskedPos === pos) maskedPos += chars.length;
     });
   } else if (lastkeycode === 8 && maskedPos) {
-    charactersToAdd.forEach(([chars, pos]) => {
+    charactersToAdd.forEach(_ref3 => {
+      let [chars, pos] = _ref3;
       if (maskedPos === pos + 1) maskedPos -= chars.length;
     });
   }
@@ -49,7 +58,7 @@ const conformValue = (rawValue, cursorPos, lastkeycode) => {
   };
 };
 
-const PhoneInputMask = _ref => {
+const PhoneInputMask = _ref4 => {
   let {
     focus,
     setFocus,
@@ -82,17 +91,18 @@ const PhoneInputMask = _ref => {
     leftComponent,
     rightComponent,
     value
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = _ref4,
+      rest = _objectWithoutProperties(_ref4, _excluded);
 
   const inputRef = useRef();
   const [maskedValue, setMaskedValue] = useState(value);
-  const conform = useCallback(({
-    rawValue,
-    cursorPos,
-    lastkeycode,
-    shouldUpdateCursorPos = true
-  }) => {
+  const conform = useCallback(_ref5 => {
+    let {
+      rawValue,
+      cursorPos,
+      lastkeycode,
+      shouldUpdateCursorPos = true
+    } = _ref5;
     const {
       nextMaskedValue,
       maskedPos

package/esm/InputMask/mask_types/PhoneInternationalInputMask.js

@@ -1,6 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useRef, useState, useCallback, useLayoutEffect } from 'react';
 import DSTextBox from '../../TextBox/DSTextBox.js';
 import setCaretPosition from '../utils/setCaretPosition.js';
@@ -26,7 +31,9 @@ const conformValue = (rawValue, cursorPos, lastkeycode) => {
 
 
   const charactersToAdd = [['+1 (', 0], [') ', 7], ['-', 12]];
-  charactersToAdd.forEach(([chars, pos]) => {
+  charactersToAdd.forEach(_ref => {
+    let [chars, pos] = _ref;
+
     if (nextMaskedValue.length > pos) {
       nextMaskedValue.splice(pos, 0, ...chars);
       if (maskedPos >= pos) maskedPos += chars.length;
@@ -34,11 +41,13 @@ const conformValue = (rawValue, cursorPos, lastkeycode) => {
   });
 
   if (lastkeycode !== 8 && maskedPos < nextMaskedValue.length) {
-    charactersToAdd.forEach(([chars, pos]) => {
+    charactersToAdd.forEach(_ref2 => {
+      let [chars, pos] = _ref2;
       if (maskedPos === pos) maskedPos += chars.length;
     });
   } else if (lastkeycode === 8 && maskedPos) {
-    charactersToAdd.forEach(([chars, pos]) => {
+    charactersToAdd.forEach(_ref3 => {
+      let [chars, pos] = _ref3;
       if (maskedPos === pos + 1) maskedPos -= chars.length;
     });
   }
@@ -49,7 +58,7 @@ const conformValue = (rawValue, cursorPos, lastkeycode) => {
   };
 };
 
-const PhoneInternationalInputMask = _ref => {
+const PhoneInternationalInputMask = _ref4 => {
   let {
     focus,
     setFocus,
@@ -82,17 +91,18 @@ const PhoneInternationalInputMask = _ref => {
     leftComponent,
     rightComponent,
     value
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = _ref4,
+      rest = _objectWithoutProperties(_ref4, _excluded);
 
   const inputRef = useRef();
   const [maskedValue, setMaskedValue] = useState(value);
-  const conform = useCallback(({
-    rawValue,
-    cursorPos,
-    lastkeycode,
-    shouldUpdateCursorPos = true
-  }) => {
+  const conform = useCallback(_ref5 => {
+    let {
+      rawValue,
+      cursorPos,
+      lastkeycode,
+      shouldUpdateCursorPos = true
+    } = _ref5;
     const {
       nextMaskedValue,
       maskedPos

package/esm/InputMask/mask_types/SsnInputMask.js

@@ -1,6 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useRef, useState, useCallback, useLayoutEffect } from 'react';
 import DSTextBox from '../../TextBox/DSTextBox.js';
 import setCaretPosition from '../utils/setCaretPosition.js';
@@ -22,7 +27,9 @@ const conformValue = (rawValue, cursorPos, lastkeycode) => {
 
 
   const charactersToAdd = [['-', 3], ['-', 6]];
-  charactersToAdd.forEach(([chars, pos]) => {
+  charactersToAdd.forEach(_ref => {
+    let [chars, pos] = _ref;
+
     if (nextMaskedValue.length > pos) {
       nextMaskedValue.splice(pos, 0, ...chars);
       if (maskedPos >= pos) maskedPos += chars.length;
@@ -30,11 +37,13 @@ const conformValue = (rawValue, cursorPos, lastkeycode) => {
   });
 
   if (lastkeycode !== 8 && maskedPos < nextMaskedValue.length) {
-    charactersToAdd.forEach(([chars, pos]) => {
+    charactersToAdd.forEach(_ref2 => {
+      let [chars, pos] = _ref2;
       if (maskedPos === pos) maskedPos += chars.length;
     });
   } else if (lastkeycode === 8 && maskedPos) {
-    charactersToAdd.forEach(([chars, pos]) => {
+    charactersToAdd.forEach(_ref3 => {
+      let [chars, pos] = _ref3;
       if (maskedPos === pos + 1) maskedPos -= chars.length;
     });
   }
@@ -45,7 +54,7 @@ const conformValue = (rawValue, cursorPos, lastkeycode) => {
   };
 };
 
-const SsnInputMask = _ref => {
+const SsnInputMask = _ref4 => {
   let {
     focus,
     setFocus,
@@ -78,17 +87,18 @@ const SsnInputMask = _ref => {
     leftComponent,
     rightComponent,
     value
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = _ref4,
+      rest = _objectWithoutProperties(_ref4, _excluded);
 
   const inputRef = useRef();
   const [maskedValue, setMaskedValue] = useState(value);
-  const conform = useCallback(({
-    rawValue,
-    cursorPos,
-    lastkeycode,
-    shouldUpdateCursorPos = true
-  }) => {
+  const conform = useCallback(_ref5 => {
+    let {
+      rawValue,
+      cursorPos,
+      lastkeycode,
+      shouldUpdateCursorPos = true
+    } = _ref5;
     const {
       nextMaskedValue,
       maskedPos

package/esm/InputMask/mask_types/UsZipCodeInputMask.js

@@ -1,6 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useRef, useState, useCallback, useLayoutEffect } from 'react';
 import DSTextBox from '../../TextBox/DSTextBox.js';
 import setCaretPosition from '../utils/setCaretPosition.js';
@@ -64,12 +69,13 @@ const UsZipCodeInputMask = _ref => {
 
   const inputRef = useRef();
   const [maskedValue, setMaskedValue] = useState(value);
-  const conform = useCallback(({
-    rawValue,
-    cursorPos,
-    lastkeycode,
-    shouldUpdateCursorPos = true
-  }) => {
+  const conform = useCallback(_ref2 => {
+    let {
+      rawValue,
+      cursorPos,
+      lastkeycode,
+      shouldUpdateCursorPos = true
+    } = _ref2;
     const {
       nextMaskedValue,
       maskedPos

package/esm/InputMask/mask_types/ZipCodeSearchInputMask.js

@@ -1,6 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useRef, useState, useCallback, useLayoutEffect } from 'react';
 import DSTextBox from '../../TextBox/DSTextBox.js';
 import setCaretPosition from '../utils/setCaretPosition.js';
@@ -22,7 +27,9 @@ const conformValue = (rawValue, cursorPos, lastkeycode) => {
 
 
   const charactersToAdd = [['-', 5]];
-  charactersToAdd.forEach(([chars, pos]) => {
+  charactersToAdd.forEach(_ref => {
+    let [chars, pos] = _ref;
+
     if (nextMaskedValue.length > pos) {
       nextMaskedValue.splice(pos, 0, chars);
       if (maskedPos >= pos) maskedPos += chars.length;
@@ -30,11 +37,13 @@ const conformValue = (rawValue, cursorPos, lastkeycode) => {
   });
 
   if (lastkeycode !== 8 && maskedPos < nextMaskedValue.length) {
-    charactersToAdd.forEach(([chars, pos]) => {
+    charactersToAdd.forEach(_ref2 => {
+      let [chars, pos] = _ref2;
       if (maskedPos === pos) maskedPos += chars.length;
     });
   } else if (lastkeycode === 8 && maskedPos) {
-    charactersToAdd.forEach(([chars, pos]) => {
+    charactersToAdd.forEach(_ref3 => {
+      let [chars, pos] = _ref3;
       if (maskedPos === pos + 1) maskedPos -= chars.length;
     });
   }
@@ -45,7 +54,7 @@ const conformValue = (rawValue, cursorPos, lastkeycode) => {
   };
 };
 
-const ZipCodeSearchInputMask = _ref => {
+const ZipCodeSearchInputMask = _ref4 => {
   let {
     focus,
     setFocus,
@@ -78,17 +87,18 @@ const ZipCodeSearchInputMask = _ref => {
     leftComponent,
     rightComponent,
     value
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = _ref4,
+      rest = _objectWithoutProperties(_ref4, _excluded);
 
   const inputRef = useRef();
   const [maskedValue, setMaskedValue] = useState(value);
-  const conform = useCallback(({
-    rawValue,
-    cursorPos,
-    lastkeycode,
-    shouldUpdateCursorPos = true
-  }) => {
+  const conform = useCallback(_ref5 => {
+    let {
+      rawValue,
+      cursorPos,
+      lastkeycode,
+      shouldUpdateCursorPos = true
+    } = _ref5;
     const {
       nextMaskedValue,
       maskedPos

package/esm/InputMask/mask_types/index.js

@@ -1,3 +1,8 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';

package/esm/InputProtected/DSInputProtected.js

@@ -2,19 +2,20 @@ 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 '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 { useState, useEffect, useCallback } from 'react';
 import { describe } from 'react-desc';
-import LockUnlocked from '@elliemae/ds-icons/LockUnlocked';
-import LockLocked from '@elliemae/ds-icons/LockLocked';
-import VisibleView from '@elliemae/ds-icons/VisibleView';
-import InvisibleHide from '@elliemae/ds-icons/InvisibleHide';
+import { LockUnlocked, LockLocked, VisibleView, InvisibleHide } from '@elliemae/ds-icons';
 import DSButton from '@elliemae/ds-button';
 import DSInputGroup from '../InputGroup/DSInputGroup.js';
 import { DSInputMask } from '../InputMask/DSInputMask.js';
 import { inputProtectedProps } from './props.js';
 import { defaultProps } from './defaultProps.js';
 import { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from './options.js';
-export { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from './options.js';
 import { jsx } from 'react/jsx-runtime';
 
 const _excluded = ["leftAddon", "rightAddon", "onChange", "value", "readOnly", "mask", "type", "placeholderChar"];
@@ -84,7 +85,7 @@ const DSInputProtected = _ref => {
 };
 
 DSInputProtected.defaultProps = defaultProps;
-const InputProtectedWithSchema = describe(DSInputProtected);
-InputProtectedWithSchema.propTypes = inputProtectedProps;
+const DSInputProtectedWithSchema = describe(DSInputProtected);
+DSInputProtectedWithSchema.propTypes = inputProtectedProps;
 
-export { InputProtectedWithSchema, DSInputProtected as default };
+export { DSInputProtected, DSInputProtectedWithSchema, DSInputProtected as default };

package/esm/InputProtected/index.js

@@ -1,2 +1,2 @@
-export { InputProtectedWithSchema, default } from './DSInputProtected.js';
+export { DSInputProtected, DSInputProtectedWithSchema, DSInputProtected as default } from './DSInputProtected.js';
 export { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from './options.js';

package/esm/LargeInputText/DSLargeInputText.js

@@ -1,3 +1,8 @@
+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 { useMemo } from 'react';
@@ -10,43 +15,47 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const CounterArea = aggregatedClasses('div')('counter', 'textarea', ({
-  limitError
-}) => ({
-  'limit-error': limitError
-}));
+const CounterArea = aggregatedClasses('div')('counter', 'textarea', _ref => {
+  let {
+    limitError
+  } = _ref;
+  return {
+    'limit-error': limitError
+  };
+});
 
-const DSLargeInputText = ({
-  containerProps,
-  autoFocus,
-  className,
-  disabled,
-  name,
-  id,
-  maxLength,
-  minLength,
-  placeholder,
-  onClick,
-  onChange,
-  onFocus,
-  onBlur,
-  onKeyUp,
-  onKeyDown,
-  onPaste,
-  value,
-  hasError,
-  required,
-  readOnly,
-  resize,
-  innerRef,
-  ariaLabel,
-  ariaAutocomplete,
-  role,
-  characterLimitCounter,
-  rows,
-  errorLimit,
-  tabIndex
-}) => {
+const DSLargeInputText = _ref2 => {
+  let {
+    containerProps,
+    autoFocus,
+    className,
+    disabled,
+    name,
+    id,
+    maxLength,
+    minLength,
+    placeholder,
+    onClick,
+    onChange,
+    onFocus,
+    onBlur,
+    onKeyUp,
+    onKeyDown,
+    onPaste,
+    value,
+    hasError,
+    required,
+    readOnly,
+    resize,
+    innerRef,
+    ariaLabel,
+    ariaAutocomplete,
+    role,
+    characterLimitCounter,
+    rows,
+    errorLimit,
+    tabIndex
+  } = _ref2;
   const limitError = useMemo(() => characterLimitCounter < String(value).length && characterLimitCounter > 0, [characterLimitCounter, value]);
   const {
     cssClassName,

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

@@ -0,0 +1,45 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import Grid from '@elliemae/ds-grid';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { itemProps, defaultProps } from '../../props.js';
+import { StyledMenuItemWrapper } from '../styled.js';
+import { StyledItemLabel } from './styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+const MenuItem = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, itemProps);
+  const {
+    dsId,
+    label,
+    isSelected,
+    onClick,
+    isFocus,
+    isActive,
+    innerRef,
+    onMouseEnter,
+    onMouseLeave,
+    wrapperStyles
+  } = propsWithDefault;
+  return /*#__PURE__*/jsx(StyledMenuItemWrapper, {
+    "aria-selected": isSelected,
+    id: dsId,
+    role: "option",
+    isSelected: isSelected,
+    isActive: isActive,
+    isFocus: isFocus,
+    onClick: onClick,
+    ref: innerRef,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    style: wrapperStyles,
+    children: /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(StyledItemLabel, {}, void 0, label))
+  });
+};
+
+const MenuItemWithSchema = describe(MenuItem);
+MenuItemWithSchema.propTypes = itemProps;
+
+export { MenuItem, MenuItemWithSchema };

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledItemLabel = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1f7cz5s-0"
+})(["display:grid;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+
+export { StyledItemLabel };

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

@@ -0,0 +1,62 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import { DSControlledCheckbox } from '@elliemae/ds-controlled-form';
+import { itemProps, defaultProps } from '../../props.js';
+import { StyledItemContent } from './styled.js';
+import { StyledGlobalMenuItemWrapper } from '../styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+const MultiMenuItem = props => {
+  const {
+    dsId,
+    value,
+    label,
+    disabled,
+    isSelected,
+    isActive,
+    onClick,
+    isFocus,
+    innerRef,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
+    wrapperStyles,
+    render
+  } = props;
+  return /*#__PURE__*/jsx(StyledGlobalMenuItemWrapper, {
+    id: dsId,
+    disabled: disabled,
+    isActive: isActive,
+    isSelected: isSelected,
+    isFocus: isFocus,
+    onClick: onClick,
+    ref: innerRef,
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    tabIndex: 0,
+    role: "option",
+    className: isActive ? 'ds-list-item-active' : '',
+    "aria-selected": isSelected,
+    style: wrapperStyles,
+    pr: render ? 0 : 40,
+    "data-testid": "combobox-option",
+    children: /*#__PURE__*/_jsx(StyledItemContent, {}, void 0, render ? render(props) : /*#__PURE__*/_jsx(DSControlledCheckbox, {
+      disabled: disabled,
+      checked: isSelected,
+      onMouseDown: onMouseDown,
+      name: value,
+      ariaLabel: label,
+      label: label,
+      id: value,
+      onChange: onClick
+    }))
+  });
+};
+
+MultiMenuItem.defaultProps = defaultProps;
+const MultiMenuItemWithSchema = describe(MultiMenuItem);
+MultiMenuItemWithSchema.propTypes = itemProps;
+
+export { MultiMenuItem, MultiMenuItemWithSchema };

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledItemContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1stlix4-0"
+})(["display:flex;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+
+export { StyledItemContent };

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

@@ -0,0 +1,29 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import Grid from '@elliemae/ds-grid';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { itemProps, defaultProps } from './props.js';
+import { StyledSectionWrapper, StyledGroupLabel } from './styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+const Section = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, itemProps);
+  const {
+    label,
+    wrapperStyles,
+    innerRef,
+    render
+  } = props;
+  return /*#__PURE__*/jsx(StyledSectionWrapper, {
+    style: wrapperStyles,
+    ref: innerRef,
+    children: render ? render(props) : /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(StyledGroupLabel, {}, void 0, label))
+  });
+};
+
+const MenuSectionItemWithSchema = describe(Section);
+MenuSectionItemWithSchema.propTypes = itemProps;
+
+export { Section };

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

@@ -0,0 +1,11 @@
+import { PropTypes } from 'react-desc';
+
+const defaultProps = {
+  label: '',
+  wrapperStyles: {}
+};
+const itemProps = {
+  label: PropTypes.string.description('').defaultValue('')
+};
+
+export { defaultProps, itemProps };

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { position, layout } from 'styled-system';
+
+const StyledGroupLabel = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-6xya9j-0"
+})(["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;height:24px;display:flex;align-items:center;"], position, layout);
+
+export { StyledGroupLabel, StyledSectionWrapper };