@elliemae/ds-form 2.2.0-next.3 → 2.3.0-alpha.1

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/MenuItem/components/SubmenuItem/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { describe } from 'react-desc';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { ChevronRight } from '@elliemae/ds-icons';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { MenuItemT, defaultProps, itemProps } from '../../props';\nimport { StyledItemLabel } from './styled';\nimport { StyledSubmenuItemWrapper } from '../styled';\n\nconst SubmenuItem = (props: MenuItemT): JSX.Element => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n\n  const {\n    dsId,\n    label,\n    isSelected,\n    isActive,\n    onClick,\n    isFocus,\n    rightAddon,\n    options,\n    selectedOptions,\n    innerRef,\n    onMouseEnter,\n    onMouseLeave,\n    onKeyDown,\n    onOptionClick,\n    onClickOutside,\n    wrapperStyles,\n    minWidth,\n    maxHeight,\n    render,\n  } = propsWithDefault;\n\n  // If we don't delay the opening of the poppers, the position will not be placed correctly\n  // That why we delay it for the next render using the useEffect hook\n  const [delayedIsOpened, setDelayedIsOpened] = useState(false);\n\n  useEffect(() => {\n    setDelayedIsOpened(isSelected);\n  }, [isSelected]);\n\n  const timeoutRef = useRef<NodeJS.Timeout>(null);\n\n  const onMouseEnterHandler = useCallback(\n    (e) => {\n      if (rightAddon !== 'ellipsis') {\n        if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n        else if (!isSelected) onClick(e);\n        timeoutRef.current = null;\n      }\n      if (e.target) onMouseEnter(e);\n    },\n    [isSelected, onClick, onMouseEnter, rightAddon],\n  );\n\n  const onMouseLeaveHandler = useCallback(\n    (e) => {\n      if (rightAddon !== 'ellipsis') {\n        if (timeoutRef.current === null) {\n          timeoutRef.current = setTimeout(() => {\n            timeoutRef.current = null;\n            onClick(e);\n          }, 300);\n        }\n      }\n      onMouseLeave(e);\n    },\n    [onClick, onMouseLeave, rightAddon],\n  );\n\n  return (\n    <DSDropdownMenuV2\n      isOpened={delayedIsOpened}\n      options={options}\n      onOptionClick={onOptionClick}\n      startPlacementPreference=\"right-start\"\n      placementOrderPreference={['right-start', 'right-end', 'left-start', 'left-end']}\n      selectedOptions={selectedOptions}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onClickOutside={onClickOutside}\n      customOffset={[0, 1]}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n    >\n      <StyledSubmenuItemWrapper\n        aria-selected={isSelected}\n        pr={0}\n        id={dsId}\n        role=\"option\"\n        isSelected={isSelected}\n        isActive={isActive}\n        isFocus={isFocus}\n        onClick={onClick}\n        ref={innerRef}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      >\n        {render ? (\n          render(props)\n        ) : (\n          <Grid cols={['auto', 'min-content']}>\n            <StyledItemLabel>{label}</StyledItemLabel>\n\n            <DSButtonV2\n              buttonType=\"icon\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n            >\n              {rightAddon === 'ellipsis' ? <MoreOptionsVert /> : <ChevronRight />}\n            </DSButtonV2>\n          </Grid>\n        )}\n        <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n          Submenu. To open this submenu press the Right Arrow key.\n        </span>\n      </StyledSubmenuItemWrapper>\n    </DSDropdownMenuV2>\n  );\n};\n\nSubmenuItem.propTypes = itemProps;\nconst SubmenuItemWithSchema = describe(SubmenuItem);\nSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SubmenuItem, SubmenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAgE;AAChE,wBAAyB;AACzB,qBAAqB;AACrB,uBAA2B;AAC3B,sBAAgC;AAChC,uBAA6B;AAC7B,6BAAiC;AACjC,8BAA6E;AAC7E,mBAAmD;AACnD,oBAAgC;AAChC,qBAAyC;AAEzC,MAAM,cAAc,CAAC,UAAkC;AACrD,QAAM,mBAAmB,0DAA6B,OAAO;AAE7D,8DAA+B,kBAAkB;AAEjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAIJ,QAAM,CAAC,iBAAiB,sBAAsB,2BAAS;AAEvD,8BAAU,MAAM;AACd,uBAAmB;AAAA,KAClB,CAAC;AAEJ,QAAM,aAAa,yBAAuB;AAE1C,QAAM,sBAAsB,8BAC1B,CAAC,MAAM;AACL,QAAI,eAAe,YAAY;AAC7B,UAAI,WAAW,YAAY;AAAM,qBAAa,WAAW;AAAA,eAChD,CAAC;AAAY,gBAAQ;AAC9B,iBAAW,UAAU;AAAA;AAEvB,QAAI,EAAE;AAAQ,mBAAa;AAAA,KAE7B,CAAC,YAAY,SAAS,cAAc;AAGtC,QAAM,sBAAsB,8BAC1B,CAAC,MAAM;AACL,QAAI,eAAe,YAAY;AAC7B,UAAI,WAAW,YAAY,MAAM;AAC/B,mBAAW,UAAU,WAAW,MAAM;AACpC,qBAAW,UAAU;AACrB,kBAAQ;AAAA,WACP;AAAA;AAAA;AAGP,iBAAa;AAAA,KAEf,CAAC,SAAS,cAAc;AAG1B,SACE,mDAAC,yCAAD;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,0BAAyB;AAAA,IACzB,0BAA0B,CAAC,eAAe,aAAa,cAAc;AAAA,IACrE;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd;AAAA,IACA,cAAc,CAAC,GAAG;AAAA,IAClB,eAAe,KAAK,eAAe,GAAG;AAAA,IACtC;AAAA,IACA;AAAA,KAEA,mDAAC,yCAAD;AAAA,IACE,iBAAe;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,cAAc;AAAA,IACd,cAAc;AAAA,IACd,oBAAkB,wBAAwB;AAAA,KAEzC,SACC,OAAO,SAEP,mDAAC,qBAAD;AAAA,IAAM,MAAM,CAAC,QAAQ;AAAA,KACnB,mDAAC,+BAAD,MAAkB,QAElB,mDAAC,6BAAD;AAAA,IACE,YAAW;AAAA,IACX,SAAS,CAAC,MAAM;AACd,QAAE;AACF,cAAQ;AAAA;AAAA,KAGT,eAAe,aAAa,mDAAC,iCAAD,QAAsB,mDAAC,+BAAD,SAIzD,mDAAC,QAAD;AAAA,IAAM,IAAI,wBAAwB;AAAA,IAAQ,OAAO,EAAE,SAAS;AAAA,KAAU;AAAA;AAQ9E,YAAY,YAAY;AACxB,MAAM,wBAAwB,gCAAS;AACvC,sBAAsB,YAAY;",
+  "names": []
+}

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

@@ -1,20 +1,48 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var styled$1 = require('../styled.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const StyledItemWrapper = /*#__PURE__*/styled__default["default"](styled$1.StyledGlobalMenuItemWrapper).withConfig({
-  componentId: "sc-1kei8ft-0"
-})(["background-color:", " !important;"], props => props.isSelected ? props.theme.colors.brand[200] : 'white');
-const StyledItemLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-1kei8ft-1"
-})(["display:grid;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
-
-exports.StyledItemLabel = StyledItemLabel;
-exports.StyledItemWrapper = StyledItemWrapper;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledItemLabel: () => StyledItemLabel,
+  StyledItemWrapper: () => StyledItemWrapper
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_styled = require("../styled");
+const StyledItemWrapper = (0, import_styled_components.default)(import_styled.StyledGlobalMenuItemWrapper)`
+  background-color: ${(props) => props.isSelected ? props.theme.colors.brand[200] : "white"} !important;
+`;
+const StyledItemLabel = import_styled_components.default.div`
+  display: grid;
+  align-items: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+`;
+module.exports = __toCommonJS(styled_exports);
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/MenuItem/components/SubmenuItem/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import styled from 'styled-components';\nimport { StyledGlobalMenuItemWrapper } from '../styled';\n\nexport const StyledItemWrapper = styled(StyledGlobalMenuItemWrapper)`\n  background-color: ${(props) => (props.isSelected ? props.theme.colors.brand[200] : 'white')} !important;\n`;\n\nexport const StyledItemLabel = styled.div`\n  display: grid;\n  align-items: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,oBAA4C;AAErC,MAAM,oBAAoB,sCAAO;AAAA,sBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAG9E,MAAM,kBAAkB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/cjs/MenuItem/components/index.js

@@ -1,22 +1,33 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var SingleMenuItem = require('./SingleMenuItem/SingleMenuItem.js');
-var MultiMenuItem = require('./MultiMenuItem/MultiMenuItem.js');
-var index = require('./MenuItem/index.js');
-var index$1 = require('./SubmenuItem/index.js');
-var index$2 = require('./Section/index.js');
-var index$3 = require('./Separator/index.js');
-
-
-
-exports.SingleMenuItem = SingleMenuItem.SingleMenuItem;
-exports.MultiMenuItem = MultiMenuItem.MultiMenuItem;
-exports.MultiMenuItemWithSchema = MultiMenuItem.MultiMenuItemWithSchema;
-exports.MenuItem = index.MenuItem;
-exports.MenuItemWithSchema = index.MenuItemWithSchema;
-exports.SubmenuItem = index$1.SubmenuItem;
-exports.SubmenuItemWithSchema = index$1.SubmenuItemWithSchema;
-exports.Section = index$2.Section;
-exports.Separator = index$3.Separator;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var components_exports = {};
+var React = __toESM(require("react"));
+__reExport(components_exports, require("./SingleMenuItem/SingleMenuItem"));
+__reExport(components_exports, require("./MultiMenuItem/MultiMenuItem"));
+__reExport(components_exports, require("./MenuItem"));
+__reExport(components_exports, require("./SubmenuItem"));
+__reExport(components_exports, require("./Section"));
+__reExport(components_exports, require("./Separator"));
+module.exports = __toCommonJS(components_exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/MenuItem/components/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './SingleMenuItem/SingleMenuItem';\nexport * from './MultiMenuItem/MultiMenuItem';\nexport * from './MenuItem';\nexport * from './SubmenuItem';\nexport * from './Section';\nexport * from './Separator';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,+BAAc;AACd,+BAAc;AACd,+BAAc;AACd,+BAAc;AACd,+BAAc;AACd,+BAAc;",
+  "names": []
+}

package/cjs/MenuItem/components/styled.js

@@ -1,40 +1,100 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var styledComponents = require('@xstyled/styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const borderOutside = function (color) {
-  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  return styled.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);
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledGlobalMenuItemWrapper: () => StyledGlobalMenuItemWrapper,
+  StyledMenuItemWrapper: () => StyledMenuItemWrapper,
+  StyledSubmenuItemWrapper: () => StyledSubmenuItemWrapper
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_styled_components2 = require("@xstyled/styled-components");
+const borderOutside = (color, width = 1) => import_styled_components.css`
+  :after {
+    display: block;
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: ${width}px solid ${color};
+    pointer-events: none;
+    z-index: 7;
+  }
+`;
+const disabledOption = () => import_styled_components.css`
+  cursor: not-allowed;
+  * {
+    cursor: not-allowed;
+  }
+`;
+const activeBorderCss = (props) => borderOutside(props.theme.colors.brand[500]);
+const focusBorderCss = (props) => borderOutside(props.theme.colors.brand[700], 2);
+const StyledGlobalMenuItemWrapper = import_styled_components.default.li`
+  cursor: pointer;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
+  display: grid;
+  align-items: center;
+  list-style: none;
+  position: relative;
+  ${import_styled_components2.position}
+  ${import_styled_components2.layout}
+  ${import_styled_components2.sizing}
+  ${import_styled_components2.space}
 
-const disabledOption = () => styled.css(["cursor:not-allowed;*{cursor:not-allowed;}"]);
-
-const activeBorderCss = props => borderOutside(props.theme.colors.brand[500]);
+  ${(props) => {
+  if (props.disabled)
+    return disabledOption();
+  if (props.isFocus)
+    return focusBorderCss(props);
+  if (props.isActive)
+    return activeBorderCss(props);
+  return "";
+}};
 
-const focusBorderCss = props => borderOutside(props.theme.colors.brand[700], 2);
+  background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : "white"};
 
-const StyledGlobalMenuItemWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
-  componentId: "sc-jyoobd-0"
-})(["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:", ";}"], styledComponents.position, styledComponents.layout, styledComponents.sizing, styledComponents.space, 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.disabled && props.theme.colors.brand[200]);
-const StyledMenuItemWrapper = /*#__PURE__*/styled__default["default"](StyledGlobalMenuItemWrapper).withConfig({
-  componentId: "sc-jyoobd-1"
-})(["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__default["default"](StyledGlobalMenuItemWrapper).withConfig({
-  componentId: "sc-jyoobd-2"
-})(["", ";padding-right:0;"], props => props.isSelected || props.isActive ? activeBorderCss(props) : '');
+  &:hover {
+    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};
+  }
+`;
+const StyledMenuItemWrapper = (0, import_styled_components.default)(StyledGlobalMenuItemWrapper)`
+  background-color: ${(props) => props.isSelected ? props.theme.colors.brand[200] : "white"} !important;
+  cursor: ${(props) => props.disabled && "not-allowed"};
+  ${(props) => props.isSelected && !props.isFocus ? activeBorderCss(props) : ""};
+`;
+const StyledSubmenuItemWrapper = (0, import_styled_components.default)(StyledGlobalMenuItemWrapper)`
+  ${(props) => props.isSelected || props.isActive ? activeBorderCss(props) : ""};
 
-exports.StyledGlobalMenuItemWrapper = StyledGlobalMenuItemWrapper;
-exports.StyledMenuItemWrapper = StyledMenuItemWrapper;
-exports.StyledSubmenuItemWrapper = StyledSubmenuItemWrapper;
+  padding-right: 0;
+`;
+module.exports = __toCommonJS(styled_exports);
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/MenuItem/components/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import styled, { css } from 'styled-components';\nimport {\n  layout,\n  position,\n  space,\n  sizing,\n  LayoutProps,\n  SizingProps,\n  PositionProps,\n  SpaceProps,\n} from '@xstyled/styled-components';\nimport { MenuItemT } from '../props';\n\nconst borderOutside = (color, width = 1) => css`\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: ${width}px solid ${color};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nconst disabledOption = () => css`\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n`;\n\nconst activeBorderCss = (props) => borderOutside(props.theme.colors.brand[500]);\nconst focusBorderCss = (props) => borderOutside(props.theme.colors.brand[700], 2);\n\nexport const StyledGlobalMenuItemWrapper = styled.li<\n  Pick<MenuItemT, 'isSelected' | 'isFocus' | 'isActive'> & LayoutProps & SizingProps & PositionProps & SpaceProps\n>`\n  cursor: pointer;\n  height: 32px;\n  padding-left: 16px;\n  padding-right: 16px;\n  display: grid;\n  align-items: center;\n  list-style: none;\n  position: relative;\n  ${position}\n  ${layout}\n  ${sizing}\n  ${space}\n\n  ${(props) => {\n    if (props.disabled) return disabledOption();\n    if (props.isFocus) return focusBorderCss(props);\n    if (props.isActive) return activeBorderCss(props);\n    return '';\n  }};\n\n  background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n  &:hover {\n    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledMenuItemWrapper = styled(StyledGlobalMenuItemWrapper)`\n  background-color: ${(props) => (props.isSelected ? props.theme.colors.brand[200] : 'white')} !important;\n  cursor: ${(props) => props.disabled && 'not-allowed'};\n  ${(props) => (props.isSelected && !props.isFocus ? activeBorderCss(props) : '')};\n`;\n\nexport const StyledSubmenuItemWrapper = styled(StyledGlobalMenuItemWrapper)`\n  ${(props) => (props.isSelected || props.isActive ? activeBorderCss(props) : '')};\n\n  padding-right: 0;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAA4B;AAC5B,gCASO;AAGP,MAAM,gBAAgB,CAAC,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAS9B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,iBAAiB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAO7B,MAAM,kBAAkB,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM;AAC1E,MAAM,iBAAiB,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM;AAExE,MAAM,8BAA8B,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAW9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAS,WAAO,eAAe;AACzC,MAAI,MAAM;AAAU,WAAO,gBAAgB;AAC3C,SAAO;AAAA;AAAA;AAAA,sBAGW,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,wBAG3D,CAAC,UAAU,CAAC,MAAM,YAAY,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIxE,MAAM,wBAAwB,sCAAO;AAAA,sBACtB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA,YACzE,CAAC,UAAU,MAAM,YAAY;AAAA,IACrC,CAAC,UAAW,MAAM,cAAc,CAAC,MAAM,UAAU,gBAAgB,SAAS;AAAA;AAGvE,MAAM,2BAA2B,sCAAO;AAAA,IAC3C,CAAC,UAAW,MAAM,cAAc,MAAM,WAAW,gBAAgB,SAAS;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/cjs/MenuItem/index.js

@@ -1,22 +1,28 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var SingleMenuItem = require('./components/SingleMenuItem/SingleMenuItem.js');
-var MultiMenuItem = require('./components/MultiMenuItem/MultiMenuItem.js');
-var index = require('./components/MenuItem/index.js');
-var index$1 = require('./components/SubmenuItem/index.js');
-var index$2 = require('./components/Section/index.js');
-var index$3 = require('./components/Separator/index.js');
-
-
-
-exports.SingleMenuItem = SingleMenuItem.SingleMenuItem;
-exports.MultiMenuItem = MultiMenuItem.MultiMenuItem;
-exports.MultiMenuItemWithSchema = MultiMenuItem.MultiMenuItemWithSchema;
-exports.MenuItem = index.MenuItem;
-exports.MenuItemWithSchema = index.MenuItemWithSchema;
-exports.SubmenuItem = index$1.SubmenuItem;
-exports.SubmenuItemWithSchema = index$1.SubmenuItemWithSchema;
-exports.Section = index$2.Section;
-exports.Separator = index$3.Separator;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var MenuItem_exports = {};
+var React = __toESM(require("react"));
+__reExport(MenuItem_exports, require("./components"));
+module.exports = __toCommonJS(MenuItem_exports);
+//# sourceMappingURL=index.js.map

package/cjs/MenuItem/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MenuItem/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './components';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,6BAAc;",
+  "names": []
+}

package/cjs/MenuItem/props.js

@@ -1,28 +1,55 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var lodash = require('lodash');
-var reactDesc = require('react-desc');
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var props_exports = {};
+__export(props_exports, {
+  defaultProps: () => defaultProps,
+  itemProps: () => itemProps
+});
+var React = __toESM(require("react"));
+var import_lodash = require("lodash");
+var import_react_desc = require("react-desc");
 const defaultProps = {
-  dsId: '',
-  value: '',
-  label: '',
-  onClick: lodash.noop,
-  onKeyUp: lodash.noop,
+  dsId: "",
+  value: "",
+  label: "",
+  onClick: import_lodash.noop,
+  onKeyUp: import_lodash.noop,
   isSelected: false,
   isActive: false,
   isFocus: false,
   disabled: false,
   wrapperStyles: {},
   withVirtualization: false,
-  dataTestid: 'ds-menu-item'
+  dataTestid: "ds-menu-item"
 };
 const itemProps = {
-  value: reactDesc.PropTypes.any.description('').defaultValue(''),
-  label: reactDesc.PropTypes.string.description('').defaultValue('')
+  value: import_react_desc.PropTypes.any.description("").defaultValue(""),
+  label: import_react_desc.PropTypes.string.description("").defaultValue("")
 };
-
-exports.defaultProps = defaultProps;
-exports.itemProps = itemProps;
+module.exports = __toCommonJS(props_exports);
+//# sourceMappingURL=props.js.map

package/cjs/MenuItem/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MenuItem/props.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { noop } from 'lodash';\nimport { PropTypes } from 'react-desc';\nimport { SizingProps } from '@xstyled/styled-components';\n\nexport interface MenuItemT {\n  dsId: string;\n  value: string;\n  label: string;\n  onClick: (value: any) => void;\n  onKeyUp: () => void;\n  isSelected: boolean;\n  isFocus: boolean;\n  isActive: boolean;\n  disabled: boolean;\n  rightAddon?: 'chevron' | 'ellipsis';\n  options?: unknown[];\n  innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n  selectedOptions?: unknown[];\n  onMouseDown?: React.MouseEventHandler;\n  onMouseEnter?: React.MouseEventHandler;\n  onMouseLeave?: React.MouseEventHandler;\n  onKeyDown?: React.KeyboardEventHandler;\n  wrapperStyles?: Record<string, unknown>;\n  withVirtualization?: boolean;\n  minWidth?: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  render?: (props: MenuItemT) => JSX.Element;\n  tabIndex?: number;\n  dataTestid: string;\n}\n\nexport const defaultProps: MenuItemT = {\n  dsId: '',\n  value: '',\n  label: '',\n  onClick: noop,\n  onKeyUp: noop,\n  isSelected: false,\n  isActive: false,\n  isFocus: false,\n  disabled: false,\n  wrapperStyles: {},\n  withVirtualization: false,\n  dataTestid: 'ds-menu-item',\n};\n\nexport const itemProps = {\n  value: PropTypes.any.description('').defaultValue(''),\n  label: PropTypes.string.description('').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAqB;AACrB,wBAA0B;AA8BnB,MAAM,eAA0B;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,YAAY;AAAA;AAGP,MAAM,YAAY;AAAA,EACvB,OAAO,4BAAU,IAAI,YAAY,IAAI,aAAa;AAAA,EAClD,OAAO,4BAAU,OAAO,YAAY,IAAI,aAAa;AAAA;",
+  "names": []
+}

package/cjs/Radio/Circle.js

@@ -1,30 +1,51 @@
-'use strict';
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var dsSystem = require('@elliemae/ds-system');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-const Circle = _ref => {
-  let {
-    checked,
-    theme
-  } = _ref;
-  const r = theme.breakpoints.medium.split('px')[0] - window.innerWidth >= 0 ? 6 : 4;
-  return /*#__PURE__*/_jsx__default["default"]("svg", {
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var Circle_exports = {};
+__export(Circle_exports, {
+  Circle: () => ThemedCircle,
+  default: () => Circle_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+const Circle = ({ checked, theme }) => {
+  const r = theme.breakpoints.medium.split("px")[0] - window.innerWidth >= 0 ? 6 : 4;
+  return /* @__PURE__ */ import_react.default.createElement("svg", {
     width: "100%",
     height: "100%"
-  }, void 0, /*#__PURE__*/_jsx__default["default"]("circle", {
-    className: checked ? 'checked' : 'unchecked',
-    r: r,
+  }, /* @__PURE__ */ import_react.default.createElement("circle", {
+    className: checked ? "checked" : "unchecked",
+    r,
     cx: "50%",
     cy: "50%"
   }));
 };
-
-var Circle$1 = dsSystem.withTheme(Circle);
-
-module.exports = Circle$1;
+const ThemedCircle = (0, import_ds_system.withTheme)(Circle);
+var Circle_default = ThemedCircle;
+module.exports = __toCommonJS(Circle_exports);
+//# sourceMappingURL=Circle.js.map

package/cjs/Radio/Circle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/Radio/Circle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { withTheme } from '@elliemae/ds-system';\n\nconst Circle = ({ checked, theme }) => {\n  const r =\n    theme.breakpoints.medium.split('px')[0] - window.innerWidth >= 0 ? 6 : 4;\n  return (\n    <svg width=\"100%\" height=\"100%\">\n      <circle\n        className={checked ? 'checked' : 'unchecked'}\n        r={r}\n        cx=\"50%\"\n        cy=\"50%\"\n      />\n    </svg>\n  );\n};\n\nconst ThemedCircle = withTheme(Circle);\nexport { ThemedCircle as Circle };\nexport default ThemedCircle;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAA0B;AAE1B,MAAM,SAAS,CAAC,EAAE,SAAS,YAAY;AACrC,QAAM,IACJ,MAAM,YAAY,OAAO,MAAM,MAAM,KAAK,OAAO,cAAc,IAAI,IAAI;AACzE,SACE,mDAAC,OAAD;AAAA,IAAK,OAAM;AAAA,IAAO,QAAO;AAAA,KACvB,mDAAC,UAAD;AAAA,IACE,WAAW,UAAU,YAAY;AAAA,IACjC;AAAA,IACA,IAAG;AAAA,IACH,IAAG;AAAA;AAAA;AAMX,MAAM,eAAe,gCAAU;AAE/B,IAAO,iBAAQ;",
+  "names": []
+}