@elliemae/ds-pills 2.2.0-alpha.2 → 2.2.0-beta.0

package/cjs/components/styled.js

@@ -1,235 +1,85 @@
-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, {
-  StyledDropdownPillWrapper: () => StyledDropdownPillWrapper,
-  StyledInputPillWrapper: () => StyledInputPillWrapper,
-  StyledLabelPillWrapper: () => StyledLabelPillWrapper,
-  StyledPillButton: () => StyledPillButton,
-  StyledPillGroup: () => StyledPillGroup,
-  StyledReadonlyPillWrapper: () => StyledReadonlyPillWrapper,
-  StyledRemovablePillWrapper: () => StyledRemovablePillWrapper,
-  StyledSpanWithTooltip: () => StyledSpanWithTooltip,
-  StyledValuePillWrapper: () => StyledValuePillWrapper
-});
-var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_system = __toESM(require("@elliemae/ds-system"));
-var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-const borderOutside = (color, size = 1, zIndex = 2, borderRadius = "12px") => import_ds_system.css`
-  :after {
-    content: ' ';
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: ${size}px solid ${color};
-    border-top-left-radius: ${borderRadius};
-    border-top-right-radius: ${borderRadius};
-    border-bottom-left-radius: ${borderRadius};
-    border-bottom-right-radius: ${borderRadius};
-    pointer-events: none;
-    z-index: ${zIndex};
-  }
-`;
-const commonPillWrapperCss = import_ds_system.css`
-  height: ${(props) => props?.size === "m" ? "24px" : "18px"};
-
-  position: relative;
-
-  width: fit-content;
-
-  background-color: ${(props) => props.theme.colors.brand[200]};
-
-  outline: none;
-
-  white-space: nowrap;
-
-  padding: 0px 12px 0 12px;
-  border-radius: 12px;
-
-  font-size: 13px;
-  line-height: 1;
-  color: ${(props) => props.theme.colors.brand[800]};
-  ${(props) => borderOutside(props.theme.colors.brand[300])};
-`;
-const StyledLabelPillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  ${commonPillWrapperCss}
-
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-  padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
-`;
-const StyledValuePillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  ${commonPillWrapperCss}
-
-  font-weight: ${(props) => props.theme.fontWeights.regular};
-  padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
-`;
-const StyledInputPillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  ${commonPillWrapperCss}
+'use strict';
 
-  background: ${(props) => props.theme.colors.neutral["000"]};
-  padding: 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-  ${({ value, theme }) => borderOutside(value === "" ? theme.colors.neutral[400] : theme.colors.brand[500])}
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var Grid = require('@elliemae/ds-grid');
+var dsButton = require('@elliemae/ds-button');
 
-  :focus-within {
-    ${(props) => props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : ""}
-  }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  :active {
-    ${(props) => props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : ""}
-  }
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 
-  & .em-ds-input {
-    outline: none !important;
-    border: none !important;
-    box-shadow: none !important;
-    border-radius: 0 !important;
-    height: 100%;
-    background: transparent;
-    width: ${(props) => `${props.inputWidth + (props.value === "" ? 24 : 0)}px`};
-    padding: 0;
-    margin: 0 0 0 8px;
-  }
+var _templateObject, _templateObject2;
+// Common CSS
+// =============================================================================
 
-  & .em-ds-input__tooltip-ref {
-    height: 100%;
-  }
-`;
-const StyledDropdownPillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  ${commonPillWrapperCss}
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-
-  padding: 0 0 0 12px;
-`;
-const StyledReadonlyPillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  ${commonPillWrapperCss}
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-  padding-right: ${(props) => props.hasIconRight ? "0 !important" : "12px"};
-  padding-left: ${(props) => props.hasIconLeft ? "0 !important" : "12px"};
-`;
-const StyledRemovablePillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  ${commonPillWrapperCss}
-  font-weight: ${(props) => props.theme.fontWeights.regular};
-  padding: 0 0 0 12px;
-`;
-const StyledPillGroup = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  width: ${({ width }) => width};
-
-  // Pill edges
-  & .ds-pill-wrapper {
-    &:not(:first-of-type) {
-      &,
-      :after,
-      :before,
-      .ds-pill-tooltip-value:after {
-        border-top-left-radius: 0px;
-        border-bottom-left-radius: 0px;
-      }
-    }
-    &:not(:last-of-type) {
-      &,
-      :after,
-      :before,
-      .ds-pill-tooltip-value:after {
-        border-top-right-radius: 0px;
-        border-bottom-right-radius: 0px;
-      }
-    }
-  }
-
-  // Pill paddings to the left / right
-  & .ds-pill-wrapper-label,
-  & .ds-pill-wrapper-value,
-  & .ds-pill-wrapper-readonly {
-    &:not(:first-of-type) {
-      padding-left: 8px;
-    }
-    &:not(:last-of-type) {
-      padding-right: 8px;
-    }
-  }
-
-  & .ds-pill-wrapper-removable:not(:first-of-type) {
-    padding-left: 8px;
-  }
-
-  & .ds-pill-wrapper-dropdown:not(:first-of-type) {
-    padding-left: 8px;
-  }
-
-  & .ds-pill-wrapper {
-    :not(:first-of-type) {
-      .ds-pill-button-left {
-        border-radius: 0px;
-      }
-      .ds-pill-button-only {
-        border-top-left-radius: 0px;
-        border-bottom-left-radius: 0px;
-      }
-    }
-    :not(:last-of-type) {
-      .ds-pill-button-right {
-        border-radius: 0px;
-      }
-      .ds-pill-button-only {
-        border-top-right-radius: 0px;
-        border-bottom-right-radius: 0px;
-      }
-    }
-  }
-`;
-const StyledSpanWithTooltip = import_styled_components.default.span`
-  outline: none;
-  :focus {
-    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}
-  }
-`;
-const StyledPillButton = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
-  display: grid;
-  place-items: center;
-
-  position: relative;
-
-  padding: 0;
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-
-  border-radius: 12px;
-
-  :focus {
-    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, "inherit")}
-  }
+const borderOutside = function (color) {
+  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  let zIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
+  let borderRadius = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '12px';
+  return dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ", "px solid ", ";\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    pointer-events: none;\n    z-index: ", ";\n  }\n"])), size, color, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
+};
 
-  cursor: pointer;
-`;
-module.exports = __toCommonJS(styled_exports);
-//# sourceMappingURL=styled.js.map
+const commonPillWrapperCss = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  height: ", ";\n\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ", ";\n\n  outline: none;\n\n  white-space: nowrap;\n\n  padding: 0px 12px 0 12px;\n  border-radius: 12px;\n\n  font-size: 13px;\n  line-height: 1;\n  color: ", ";\n  ", ";\n"])), props => (props === null || props === void 0 ? void 0 : props.size) === 'm' ? '24px' : '18px', props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => borderOutside(props.theme.colors.brand[300])); // =============================================================================
+// Pills wrappers
+// =============================================================================
+
+const StyledLabelPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-j0tlch-0"
+})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold, props => props.hasIcon ? '0px !important' : '12px');
+const StyledValuePillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-j0tlch-1"
+})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.regular, props => props.hasIcon ? '0px !important' : '12px');
+const StyledInputPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-j0tlch-2"
+})(["", " background:", ";padding:0;", ":focus-within{", "}:active{", "}& .em-ds-input{outline:none !important;border:none !important;box-shadow:none !important;border-radius:0 !important;height:100%;background:transparent;width:", ";padding:0;margin:0 0 0 8px;}& .em-ds-input__tooltip-ref{height:100%;}"], commonPillWrapperCss, props => props.theme.colors.neutral['000'], _ref => {
+  let {
+    value,
+    theme
+  } = _ref;
+  return borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500]);
+}, props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '', props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '', props => "".concat(props.inputWidth + (props.value === '' ? 24 : 0), "px"));
+const StyledDropdownPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-j0tlch-3"
+})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);
+const StyledReadonlyPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-j0tlch-4"
+})(["", " font-weight:", ";padding-right:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold, props => props.hasIconRight ? '0 !important' : '12px', props => props.hasIconLeft ? '0 !important' : '12px');
+const StyledRemovablePillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-j0tlch-5"
+})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.regular); // =============================================================================
+// Pill group
+// =============================================================================
+
+const StyledPillGroup = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-j0tlch-6"
+})(["width:", ";& .ds-pill-wrapper{&:not(:first-of-type){&,:after,:before,.ds-pill-tooltip-value:after{border-top-left-radius:0px;border-bottom-left-radius:0px;}}&:not(:last-of-type){&,:after,:before,.ds-pill-tooltip-value:after{border-top-right-radius:0px;border-bottom-right-radius:0px;}}}& .ds-pill-wrapper-label,& .ds-pill-wrapper-value,& .ds-pill-wrapper-readonly{&:not(:first-of-type){padding-left:8px;}&:not(:last-of-type){padding-right:8px;}}& .ds-pill-wrapper-removable:not(:first-of-type){padding-left:8px;}& .ds-pill-wrapper-dropdown:not(:first-of-type){padding-left:8px;}& .ds-pill-wrapper{:not(:first-of-type){.ds-pill-button-left{border-radius:0px;}.ds-pill-button-only{border-top-left-radius:0px;border-bottom-left-radius:0px;}}:not(:last-of-type){.ds-pill-button-right{border-radius:0px;}.ds-pill-button-only{border-top-right-radius:0px;border-bottom-right-radius:0px;}}}"], _ref2 => {
+  let {
+    width
+  } = _ref2;
+  return width;
+}); // =============================================================================
+// Extra stuff
+// =============================================================================
+
+const StyledSpanWithTooltip = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-j0tlch-7"
+})(["outline:none;:focus{", "}"], props => borderOutside(props.theme.colors.brand[700], 2, 3));
+const StyledPillButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
+  componentId: "sc-j0tlch-8"
+})(["display:grid;place-items:center;position:relative;padding:0;width:", ";height:", ";border-radius:12px;:focus{", "}cursor:pointer;"], props => props.width, props => props.height, props => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit'));
+
+exports.StyledDropdownPillWrapper = StyledDropdownPillWrapper;
+exports.StyledInputPillWrapper = StyledInputPillWrapper;
+exports.StyledLabelPillWrapper = StyledLabelPillWrapper;
+exports.StyledPillButton = StyledPillButton;
+exports.StyledPillGroup = StyledPillGroup;
+exports.StyledReadonlyPillWrapper = StyledReadonlyPillWrapper;
+exports.StyledRemovablePillWrapper = StyledRemovablePillWrapper;
+exports.StyledSpanWithTooltip = StyledSpanWithTooltip;
+exports.StyledValuePillWrapper = StyledValuePillWrapper;

package/cjs/components/types/DropdownPill.js

@@ -1,88 +1,86 @@
-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 DropdownPill_exports = {};
-__export(DropdownPill_exports, {
-  DropdownPill: () => DropdownPill
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_dropdownmenu = __toESM(require("@elliemae/ds-dropdownmenu"));
-var import_uid = __toESM(require("uid"));
-var import_ds_icons = __toESM(require("@elliemae/ds-icons"));
-var import_ds_truncated_tooltip_text = __toESM(require("@elliemae/ds-truncated-tooltip-text"));
-var import_styled = __toESM(require("../styled"));
-var import_utils = __toESM(require("../../utils"));
-var import_PillButton = __toESM(require("../PillButton"));
-const DropdownPill = import_react.default.memo(({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {
-  const chevronRef = (0, import_react.useRef)(null);
-  const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
-  const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
-    value: children
-  }) : import_react.default.Fragment;
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledDropdownPillWrapper, {
+'use strict';
+
+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');
+var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
+var uid = require('uid');
+var dsIcons = require('@elliemae/ds-icons');
+var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var styled = require('../styled.js');
+var utils = require('../../utils.js');
+var PillButton = require('../PillButton.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const DropdownPill = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    label,
     size,
+    labelTruncated,
+    dropdownProps,
+    innerRef,
+    ariaLabel,
+    onDropdownClick
+  } = _ref;
+  const chevronRef = React.useRef(null);
+  const pillUid = React.useMemo(() => "ds-pill-".concat(uid.uid()), []);
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+      value: children
+    });
+  } : React__default["default"].Fragment;
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledDropdownPillWrapper, {
+    size: size,
     id: pillUid,
     className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
     "data-testid": "ds-pill-wrapper",
-    cols: ["auto", "24px"],
+    cols: ['auto', '24px'],
     gutter: "2px",
     alignItems: "center",
     justifyItems: "center"
-  }, /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label), /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenuV2, {
-    placementOrderPreference: [
-      "bottom-start",
-      "bottom",
-      "bottom-end",
-      "right-end",
-      "top-start",
-      "top",
-      "top-end"
-    ],
-    ...dropdownProps,
-    onClickOutside: (e) => {
-      if (e.code === "Escape")
-        chevronRef.current.focus();
-      if (dropdownProps.onClickOutside)
-        dropdownProps.onClickOutside(e);
+  }, void 0, /*#__PURE__*/_jsx__default["default"](TextComponent, {}, void 0, label), /*#__PURE__*/jsxRuntime.jsx(DSDropdownMenu.DSDropdownMenuV2, _objectSpread(_objectSpread({
+    placementOrderPreference: ['bottom-start', 'bottom', 'bottom-end', 'right-end', 'top-start', 'top', 'top-end']
+  }, dropdownProps), {}, {
+    onClickOutside: e => {
+      if (e.code === 'Escape') chevronRef.current.focus();
+      if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
+    },
+    wrapperStyles: {
+      w: '100%',
+      h: '100%'
     },
-    wrapperStyles: { w: "100%", h: "100%" }
-  }, /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
-    className: "ds-pill-focus-point",
-    "data-testid": "ds-pill-dropdown-chevron",
-    innerRef: (0, import_utils.setMultipleRefs)(chevronRef, innerRef),
-    "aria-label": ariaLabel || label,
-    type: "right",
-    onClick: onDropdownClick
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, {
-    color: ["brand-primary", "800"],
-    width: 20,
-    height: 20
-  }))));
+    children: /*#__PURE__*/_jsx__default["default"](PillButton.DSPillButton, {
+      className: "ds-pill-focus-point",
+      "data-testid": "ds-pill-dropdown-chevron",
+      innerRef: utils.setMultipleRefs(chevronRef, innerRef),
+      "aria-label": ariaLabel || label,
+      type: "right",
+      onClick: onDropdownClick
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {
+      color: ['brand-primary', '800'],
+      width: 20,
+      height: 20
+    }))
+  })));
 });
-module.exports = __toCommonJS(DropdownPill_exports);
-//# sourceMappingURL=DropdownPill.js.map
+
+exports.DropdownPill = DropdownPill;

package/cjs/components/types/InputPill.js

@@ -1,84 +1,74 @@
-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 InputPill_exports = {};
-__export(InputPill_exports, {
-  InputPill: () => InputPill
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_uid = __toESM(require("uid"));
-var import_ds_icons = __toESM(require("@elliemae/ds-icons"));
-var import_styled = __toESM(require("../styled"));
-var import_utils = __toESM(require("../../utils"));
-var import_PillButton = __toESM(require("../PillButton"));
-const InputPill = import_react.default.memo(({ label, size, inputPlaceholder, inputWidth, inputRender, onInputChange, onInputClear, innerRef }) => {
-  const ref = (0, import_react.useRef)(null);
-  const InputComponent = (0, import_react.useMemo)(() => inputRender, [inputRender]);
-  const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
-  const onCloseIconClick = (0, import_react.useCallback)((e) => {
-    if ([void 0, "Enter", "Space"].includes(e.code)) {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var uid = require('uid');
+var dsIcons = require('@elliemae/ds-icons');
+var styled = require('../styled.js');
+var utils = require('../../utils.js');
+var PillButton = require('../PillButton.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const InputPill = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    label,
+    size,
+    inputPlaceholder,
+    inputWidth,
+    inputRender,
+    onInputChange,
+    onInputClear,
+    innerRef
+  } = _ref;
+  const ref = React.useRef(null);
+  const InputComponent = React.useMemo(() => inputRender, [inputRender]);
+  const pillUid = React.useMemo(() => "ds-pill-".concat(uid.uid()), []);
+  const onCloseIconClick = React.useCallback(e => {
+    if ([undefined, 'Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
       onInputClear(e);
       ref.current.focus();
     }
   }, [onInputClear]);
-  const [inputHasFocus, setInputHasFocus] = (0, import_react.useState)(false);
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledInputPillWrapper, {
-    size,
+  const [inputHasFocus, setInputHasFocus] = React.useState(false);
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledInputPillWrapper, {
+    size: size,
     className: "ds-pill-wrapper",
     "data-testid": "ds-pill-wrapper",
-    cols: label === "" ? ["auto"] : ["auto", "24px"],
-    inputWidth,
+    cols: label === '' ? ['auto'] : ['auto', '24px'],
+    inputWidth: inputWidth,
     value: label,
-    inputHasFocus
-  }, /* @__PURE__ */ import_react.default.createElement(InputComponent, {
+    inputHasFocus: inputHasFocus
+  }, void 0, /*#__PURE__*/_jsx__default["default"](InputComponent, {
     id: pillUid,
     className: "ds-pill-focus-point",
     "data-testid": "ds-pill-input",
-    innerRef: (0, import_utils.setMultipleRefs)(ref, innerRef),
+    innerRef: utils.setMultipleRefs(ref, innerRef),
     value: label,
     onChange: onInputChange,
     placeholder: inputPlaceholder,
     onFocus: () => setInputHasFocus(true),
     onBlur: () => setInputHasFocus(false),
     disableTooltip: false
-  }), label !== "" && /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
+  }), label !== '' && /*#__PURE__*/_jsx__default["default"](PillButton.DSPillButton, {
     id: pillUid,
     "data-testid": "ds-pill-clear-icon",
-    innerRef,
+    innerRef: innerRef,
     onClick: onCloseIconClick,
     onKeyDown: onCloseIconClick,
     "aria-label": "Clear input",
     type: "right"
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseXsmall, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
     size: "s",
-    color: ["brand-primary", "700"]
+    color: ['brand-primary', '700']
   })));
 });
-module.exports = __toCommonJS(InputPill_exports);
-//# sourceMappingURL=InputPill.js.map
+
+exports.InputPill = InputPill;