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

package/cjs/InputProtected/DSInputProtected.js

@@ -5,12 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var reactDesc = require('react-desc');
-var LockUnlocked = require('@elliemae/ds-icons/LockUnlocked');
-var LockLocked = require('@elliemae/ds-icons/LockLocked');
-var VisibleView = require('@elliemae/ds-icons/VisibleView');
-var InvisibleHide = require('@elliemae/ds-icons/InvisibleHide');
+var dsIcons = require('@elliemae/ds-icons');
 var DSButton = require('@elliemae/ds-button');
 var DSInputGroup = require('../InputGroup/DSInputGroup.js');
 var DSInputMask = require('../InputMask/DSInputMask.js');
@@ -24,22 +27,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var LockUnlocked__default = /*#__PURE__*/_interopDefaultLegacy(LockUnlocked);
-var LockLocked__default = /*#__PURE__*/_interopDefaultLegacy(LockLocked);
-var VisibleView__default = /*#__PURE__*/_interopDefaultLegacy(VisibleView);
-var InvisibleHide__default = /*#__PURE__*/_interopDefaultLegacy(InvisibleHide);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 const _excluded = ["leftAddon", "rightAddon", "onChange", "value", "readOnly", "mask", "type", "placeholderChar"];
 
 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__default['default'](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; }
+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__default["default"](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 ADDON_ICON_OPTIONS = {
-  LockUnlocked: /*#__PURE__*/_jsx__default['default'](LockUnlocked__default['default'], {}),
-  LockLocked: /*#__PURE__*/_jsx__default['default'](LockLocked__default['default'], {}),
-  VisibleView: /*#__PURE__*/_jsx__default['default'](VisibleView__default['default'], {}),
-  InvisibleHide: /*#__PURE__*/_jsx__default['default'](InvisibleHide__default['default'], {})
+  LockUnlocked: /*#__PURE__*/_jsx__default["default"](dsIcons.LockUnlocked, {}),
+  LockLocked: /*#__PURE__*/_jsx__default["default"](dsIcons.LockLocked, {}),
+  VisibleView: /*#__PURE__*/_jsx__default["default"](dsIcons.VisibleView, {}),
+  InvisibleHide: /*#__PURE__*/_jsx__default["default"](dsIcons.InvisibleHide, {})
 };
 
 const DSInputProtected = _ref => {
@@ -53,7 +52,7 @@ const DSInputProtected = _ref => {
     type,
     placeholderChar = undefined
   } = _ref,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   const left = leftAddon && ADDON_ICON_OPTIONS[leftAddon];
   const right = rightAddon && ADDON_ICON_OPTIONS[rightAddon];
@@ -69,16 +68,16 @@ const DSInputProtected = _ref => {
   const handleRight = React.useCallback(() => {
     setHidden(!inputHidden);
   }, [rightAddon, inputHidden]);
-  return /*#__PURE__*/_jsx__default['default']("div", {}, void 0, /*#__PURE__*/_jsx__default['default'](DSInputGroup['default'], {
-    leftAddon: left ? /*#__PURE__*/_jsx__default['default'](DSButton__default['default'], {
-      "aria-label": `${inputLocked ? 'Allow' : 'Disallow'} Edition`,
+  return /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputGroup["default"], {
+    leftAddon: left ? /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      "aria-label": "".concat(inputLocked ? 'Allow' : 'Disallow', " Edition"),
       buttonType: "secondary",
       icon: ADDON_ICON_OPTIONS[inputLocked ? options.LEFT_ADDON_OPTIONS.LockUnlocked : options.LEFT_ADDON_OPTIONS.LockLocked],
       onClick: handleLeft
     }) : undefined,
     readOnly: left ? inputLocked : readOnly,
-    rightAddon: right ? /*#__PURE__*/_jsx__default['default'](DSButton__default['default'], {
-      "aria-label": `${inputHidden ? 'Show' : 'Hide'} Characters`,
+    rightAddon: right ? /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      "aria-label": "".concat(inputHidden ? 'Show' : 'Hide', " Characters"),
       buttonType: "secondary",
       icon: ADDON_ICON_OPTIONS[inputHidden ? options.RIGHT_ADDON_OPTIONS.VisibleView : options.RIGHT_ADDON_OPTIONS.InvisibleHide],
       onClick: handleRight,
@@ -97,10 +96,9 @@ const DSInputProtected = _ref => {
 };
 
 DSInputProtected.defaultProps = defaultProps.defaultProps;
-const InputProtectedWithSchema = reactDesc.describe(DSInputProtected);
-InputProtectedWithSchema.propTypes = props.inputProtectedProps;
+const DSInputProtectedWithSchema = reactDesc.describe(DSInputProtected);
+DSInputProtectedWithSchema.propTypes = props.inputProtectedProps;
 
-exports.LEFT_ADDON_OPTIONS = options.LEFT_ADDON_OPTIONS;
-exports.RIGHT_ADDON_OPTIONS = options.RIGHT_ADDON_OPTIONS;
-exports.InputProtectedWithSchema = InputProtectedWithSchema;
-exports['default'] = DSInputProtected;
+exports.DSInputProtected = DSInputProtected;
+exports.DSInputProtectedWithSchema = DSInputProtectedWithSchema;
+exports["default"] = DSInputProtected;

package/cjs/InputProtected/index.js

@@ -7,7 +7,8 @@ var options = require('./options.js');
 
 
 
-exports.InputProtectedWithSchema = DSInputProtected.InputProtectedWithSchema;
-exports.default = DSInputProtected['default'];
+exports.DSInputProtected = DSInputProtected.DSInputProtected;
+exports.DSInputProtectedWithSchema = DSInputProtected.DSInputProtectedWithSchema;
+exports["default"] = DSInputProtected.DSInputProtected;
 exports.LEFT_ADDON_OPTIONS = options.LEFT_ADDON_OPTIONS;
 exports.RIGHT_ADDON_OPTIONS = options.RIGHT_ADDON_OPTIONS;

package/cjs/InputProtected/props.js

@@ -18,8 +18,7 @@ const inputProtectedProps = {
    * PlaceholderChar: The placeholder character represents the fillable spot in the mask.
    * The default placeholder character is underscore, _.
    */
-  placeholderChar: reactDesc.PropTypes.string.description(`The placeholder character represents the fillable spot in the mask.
-  * The default placeholder character is underscore, _.`)
+  placeholderChar: reactDesc.PropTypes.string.description("The placeholder character represents the fillable spot in the mask.\n  * The default placeholder character is underscore, _.")
 };
 
 exports.inputProtectedProps = inputProtectedProps;

package/cjs/LargeInputText/DSLargeInputText.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
@@ -18,44 +23,48 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 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__default['default'](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 = dsClassnames.aggregatedClasses('div')('counter', 'textarea', ({
-  limitError
-}) => ({
-  'limit-error': limitError
-}));
+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__default["default"](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 = dsClassnames.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 = React.useMemo(() => characterLimitCounter < String(value).length && characterLimitCounter > 0, [characterLimitCounter, value]);
   const {
     cssClassName,
@@ -76,8 +85,8 @@ const DSLargeInputText = ({
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, containerProps), {}, {
-      className: `${cssClassName} ${className}`,
-      children: /*#__PURE__*/_jsx__default['default']("div", {
+      className: "".concat(cssClassName, " ").concat(className),
+      children: /*#__PURE__*/_jsx__default["default"]("div", {
         className: classNameBlock('wrapper')
       }, void 0, /*#__PURE__*/jsxRuntime.jsx("textarea", {
         ref: innerRef,
@@ -110,12 +119,12 @@ const DSLargeInputText = ({
         value: value,
         tabIndex: tabIndex
       }))
-    })), characterLimitCounter > 0 && /*#__PURE__*/_jsx__default['default'](CounterArea, {
+    })), characterLimitCounter > 0 && /*#__PURE__*/_jsx__default["default"](CounterArea, {
       classProps: {
         limitError
       },
       "data-testid": "counter-area"
-    }, void 0, `${limitError ? `${errorLimit} ${characterLimitCounter} characters.   ` : ''}${String(value).length} / ${characterLimitCounter}`)]
+    }, void 0, "".concat(limitError ? "".concat(errorLimit, " ").concat(characterLimitCounter, " characters.   ") : '').concat(String(value).length, " / ").concat(characterLimitCounter))]
   });
 };
 
@@ -124,4 +133,4 @@ const DSLargeInputTextWithSchema = reactDesc.describe(DSLargeInputText).descript
 DSLargeInputTextWithSchema.propTypes = props.props;
 
 exports.DSLargeInputTextWithSchema = DSLargeInputTextWithSchema;
-exports['default'] = DSLargeInputText;
+exports["default"] = DSLargeInputText;

package/cjs/LargeInputText/index.js

@@ -7,4 +7,4 @@ var DSLargeInputText = require('./DSLargeInputText.js');
 
 
 exports.DSLargeInputTextWithSchema = DSLargeInputText.DSLargeInputTextWithSchema;
-exports.default = DSLargeInputText['default'];
+exports["default"] = DSLargeInputText["default"];

package/cjs/MenuItem/components/MenuItem/index.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var Grid = require('@elliemae/ds-grid');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var props = require('../../props.js');
+var styled = require('../styled.js');
+var styled$1 = require('./styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+const MenuItem = props$1 => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.itemProps);
+  const {
+    dsId,
+    label,
+    isSelected,
+    onClick,
+    isFocus,
+    isActive,
+    innerRef,
+    onMouseEnter,
+    onMouseLeave,
+    wrapperStyles
+  } = propsWithDefault;
+  return /*#__PURE__*/jsxRuntime.jsx(styled.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__default["default"](Grid__default["default"], {}, void 0, /*#__PURE__*/_jsx__default["default"](styled$1.StyledItemLabel, {}, void 0, label))
+  });
+};
+
+const MenuItemWithSchema = reactDesc.describe(MenuItem);
+MenuItemWithSchema.propTypes = props.itemProps;
+
+exports.MenuItem = MenuItem;
+exports.MenuItemWithSchema = MenuItemWithSchema;

package/cjs/MenuItem/components/MenuItem/styled.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledItemLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1f7cz5s-0"
+})(["display:grid;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+
+exports.StyledItemLabel = StyledItemLabel;

package/cjs/MenuItem/components/MultiMenuItem/MultiMenuItem.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var dsControlledForm = require('@elliemae/ds-controlled-form');
+var props = require('../../props.js');
+var styled$1 = require('./styled.js');
+var styled = require('../styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const MultiMenuItem = props => {
+  const {
+    dsId,
+    value,
+    label,
+    disabled,
+    isSelected,
+    isActive,
+    onClick,
+    isFocus,
+    innerRef,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
+    wrapperStyles,
+    render
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(styled.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__default["default"](styled$1.StyledItemContent, {}, void 0, render ? render(props) : /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledCheckbox, {
+      disabled: disabled,
+      checked: isSelected,
+      onMouseDown: onMouseDown,
+      name: value,
+      ariaLabel: label,
+      label: label,
+      id: value,
+      onChange: onClick
+    }))
+  });
+};
+
+MultiMenuItem.defaultProps = props.defaultProps;
+const MultiMenuItemWithSchema = reactDesc.describe(MultiMenuItem);
+MultiMenuItemWithSchema.propTypes = props.itemProps;
+
+exports.MultiMenuItem = MultiMenuItem;
+exports.MultiMenuItemWithSchema = MultiMenuItemWithSchema;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledItemContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1stlix4-0"
+})(["display:flex;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+
+exports.StyledItemContent = StyledItemContent;

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var Grid = require('@elliemae/ds-grid');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var props = require('./props.js');
+var styled = require('./styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+const Section = props$1 => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.itemProps);
+  const {
+    label,
+    wrapperStyles,
+    innerRef,
+    render
+  } = props$1;
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledSectionWrapper, {
+    style: wrapperStyles,
+    ref: innerRef,
+    children: render ? render(props$1) : /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {}, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledGroupLabel, {}, void 0, label))
+  });
+};
+
+const MenuSectionItemWithSchema = reactDesc.describe(Section);
+MenuSectionItemWithSchema.propTypes = props.itemProps;
+
+exports.Section = Section;

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const defaultProps = {
+  label: '',
+  wrapperStyles: {}
+};
+const itemProps = {
+  label: reactDesc.PropTypes.string.description('').defaultValue('')
+};
+
+exports.defaultProps = defaultProps;
+exports.itemProps = itemProps;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var styledSystem = require('styled-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledGroupLabel = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-6xya9j-0"
+})(["font-family:12px;color:", ";"], props => props.theme.colors.neutral[500]);
+const StyledSectionWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
+  componentId: "sc-6xya9j-1"
+})(["", " ", " list-style:none;padding:0px 16px;height:24px;display:flex;align-items:center;"], styledSystem.position, styledSystem.layout);
+
+exports.StyledGroupLabel = StyledGroupLabel;
+exports.StyledSectionWrapper = StyledSectionWrapper;

package/cjs/MenuItem/components/Separator/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('./styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _StyledSeparator;
+
+const Separator = props => {
+  const {
+    wrapperStyles,
+    innerRef,
+    render
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledSeparatorWrapper, {
+    style: wrapperStyles,
+    ref: innerRef,
+    children: render ? render(props) : _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styled.StyledSeparator, {}))
+  });
+};
+
+exports.Separator = Separator;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var styledSystem = require('styled-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledSeparator = /*#__PURE__*/styled__default["default"].hr.withConfig({
+  componentId: "sc-1xat2d9-0"
+})(["border:0;border-top:1px solid #697489;margin:4px 0px;padding:0;"]);
+const StyledSeparatorWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
+  componentId: "sc-1xat2d9-1"
+})(["list-style:none;padding:0px 16px;", " ", ""], styledSystem.position, styledSystem.layout);
+
+exports.StyledSeparator = StyledSeparator;
+exports.StyledSeparatorWrapper = StyledSeparatorWrapper;

package/cjs/MenuItem/components/SingleMenuItem/SingleMenuItem.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var dsIcons = require('@elliemae/ds-icons');
+var Grid = require('@elliemae/ds-grid');
+var props = require('../../props.js');
+var styled = require('../styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+const SingleMenuItem = props => {
+  const {
+    dsId,
+    label,
+    isSelected,
+    onClick,
+    isFocus,
+    isActive,
+    innerRef,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    wrapperStyles,
+    render,
+    dataTestid
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledGlobalMenuItemWrapper, {
+    "aria-selected": isSelected,
+    id: dsId,
+    role: "option",
+    isActive: isActive,
+    isSelected: isSelected,
+    isFocus: isFocus,
+    onClick: onClick,
+    ref: innerRef,
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    className: isActive ? 'ds-list-item-active' : '',
+    style: wrapperStyles,
+    pr: render ? 0 : 40,
+    "data-testid": dataTestid,
+    children: render ? render(props) : /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+      cols: ['16px', 'auto'],
+      height: "16px",
+      gutter: "xxs",
+      alignItems: "center"
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, isSelected && /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
+      size: "s",
+      color: ['brand-primary', '600']
+    })), /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.SimpleTruncatedTooltipText, {
+      value: label
+    }))
+  });
+};
+
+SingleMenuItem.defaultProps = props.defaultProps;
+const SingleMenuItemWithSchema = reactDesc.describe(SingleMenuItem);
+SingleMenuItemWithSchema.propTypes = props.itemProps;
+
+exports.SingleMenuItem = SingleMenuItem;