@elliemae/ds-pills 2.0.0-alpha.10 → 2.0.0-alpha.14

package/esm/components/types/ValuePill.js

@@ -1,30 +1,45 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import React from 'react';
-import { DSTooltipV3 } from '@elliemae/ds-tooltip';
+import { DSTooltipV2 } from '@elliemae/ds-tooltip';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { StyledValuePillWrapper, StyledSpanWithTooltip } from '../styled.js';
 
-const ValuePill = /*#__PURE__*/React.memo(({
-  label,
-  tooltipValue,
-  iconLeft,
-  ariaLabel
-}) => /*#__PURE__*/_jsx(StyledValuePillWrapper, {
-  alignItems: "center",
-  className: "ds-pill-wrapper ds-pill-wrapper-value",
-  "data-testid": "ds-pill-wrapper",
-  "aria-label": ariaLabel || label,
-  cols: [iconLeft && 'min-content', 'auto'].filter(notFalse => notFalse),
-  gutter: "xxxs",
-  hasIcon: iconLeft !== null
-}, void 0, iconLeft, tooltipValue !== '' ? /*#__PURE__*/_jsx(DSTooltipV3, {
-  text: tooltipValue,
-  startPlacementPreference: "bottom"
-}, void 0, /*#__PURE__*/_jsx(StyledSpanWithTooltip, {
-  className: "ds-pill-tooltip-value",
-  tabIndex: 0
-}, void 0, label)) : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-  value: label
-})));
+const ValuePill = /*#__PURE__*/React.memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    tooltipValue,
+    iconLeft,
+    ariaLabel
+  } = _ref;
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+      value: children
+    });
+  } : React.Fragment;
+  return /*#__PURE__*/_jsx(StyledValuePillWrapper, {
+    size: size,
+    alignItems: "center",
+    className: "ds-pill-wrapper ds-pill-wrapper-value",
+    "data-testid": "ds-pill-wrapper",
+    "aria-label": ariaLabel || label,
+    cols: [iconLeft && 'min-content', 'auto'].filter(notFalse => notFalse),
+    gutter: "xxxs",
+    hasIcon: iconLeft !== null
+  }, void 0, iconLeft, tooltipValue !== '' ? /*#__PURE__*/_jsx(DSTooltipV2, {
+    title: tooltipValue,
+    triggerComponent: /*#__PURE__*/_jsx(StyledSpanWithTooltip, {
+      className: "ds-pill-tooltip-value",
+      tabIndex: 0
+    }, void 0, label)
+  }) : /*#__PURE__*/_jsx(TextComponent, {}, void 0, label));
+});
 
 export { ValuePill };

package/esm/deprecated/DropdownPill.js

@@ -1,10 +1,16 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useRef, useState } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
-import ChevronDown from '@elliemae/ds-icons/ChevronDown';
+import { ChevronDown } from '@elliemae/ds-icons';
 import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
 import { Pill } from './Pill.js';
 import { jsx } from 'react/jsx-runtime';

package/esm/deprecated/InputPill.js

@@ -1,11 +1,15 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';
-import CloseIcon from '@elliemae/ds-icons/CloseXsmall';
+import { CloseXsmall } from '@elliemae/ds-icons';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
-import DSInputMask from '@elliemae/ds-form/InputMask';
-import DSInput from '@elliemae/ds-form/Input';
+import { DSInput, DSInputMask } from '@elliemae/ds-form';
 import { Pill } from './Pill.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -14,12 +18,15 @@ const _excluded = ["containerProps", "placeholder", "onChange", "onRemove", "val
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const StyledInputPill = aggregatedClasses(Pill)('input-pill', null, ({
-  value
-}) => ({
-  value
-}));
-function InputPill(_ref) {
+const StyledInputPill = aggregatedClasses(Pill)('input-pill', null, _ref => {
+  let {
+    value
+  } = _ref;
+  return {
+    value
+  };
+});
+function InputPill(_ref2) {
   let {
     containerProps = {},
     placeholder = 'Enter Value',
@@ -27,8 +34,8 @@ function InputPill(_ref) {
     onRemove,
     value,
     type
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
 
   let TypeOfInput = DSInput; // TODO: implement the DSTimeInput, see how because it returns a moment()
   // TODO: implement the DSDateInput
@@ -55,7 +62,7 @@ function InputPill(_ref) {
       placeholder: placeholder,
       value: value
     }, otherProps)),
-    rightAddon: value && /*#__PURE__*/_jsx(CloseIcon, {
+    rightAddon: value && /*#__PURE__*/_jsx(CloseXsmall, {
       className: "remove-pill-button",
       "data-testid": "remove-pill-button",
       onClick: onRemove

package/esm/deprecated/LabeledDropdownPills.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';

package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js

@@ -1,8 +1,16 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import { createElement } from 'react';
-import { isFunction, addOrRemove } from '@elliemae/ds-utilities/utils';
+import { isFunction, addOrRemove } from '@elliemae/ds-utilities';
 import { PillGroup } from '../PillGroup.js';
 import { RemovablePill } from '../RemovablePill.js';
 import { DropdownPill } from '../DropdownPill.js';
@@ -66,10 +74,12 @@ function LabeledDropdownCascadeMenuPill(_ref) {
   const selectionValues = selection[selectionId] || '';
   const dropdownLabel = Array.isArray(selectionValues) ? getSubmenuOptionLabelById(options, selectionId) : selectionValues;
 
-  const handleSelectChange = ({
-    item,
-    group
-  }) => {
+  const handleSelectChange = _ref2 => {
+    let {
+      item,
+      group
+    } = _ref2;
+
     if (isFunction(onChange)) {
       const nextSelection = group ? {
         [group.id]: addOrRemove([...(selection[group.id] || [])], item, o => o.id)

package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js

@@ -1,9 +1,17 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useState, useEffect, useCallback } from 'react';
 import { find } from 'lodash';
-import { isFunction, addOrRemove } from '@elliemae/ds-utilities/utils';
+import { isFunction, addOrRemove } from '@elliemae/ds-utilities';
 import { RemovablePill } from '../RemovablePill.js';
 import { Pill } from '../Pill.js';
 import { OverflowPill } from '../OverflowPill.js';
@@ -128,7 +136,7 @@ function LabeledDropdownMultiPills(_ref) {
 
       return null;
     }), selectedOptions && selectedOptions.length > overflowQuantity && /*#__PURE__*/_jsx(OverflowPill, {
-      label: `+ ${selectedOptions.length - overflowQuantity}`,
+      label: "+ ".concat(selectedOptions.length - overflowQuantity),
       options: overflowOptions
     })]
   });

package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js

@@ -1,10 +1,16 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useState, useEffect, useLayoutEffect, useCallback } from 'react';
-import usePrevious from '@elliemae/ds-utilities/hooks/usePrevious';
-import useShouldRecalculate from '@elliemae/ds-utilities/hooks/useShouldRecalculate';
-import { isFunction, isString } from '@elliemae/ds-utilities/utils';
+import { usePrevious, useShouldRecalculate, isFunction, isString } from '@elliemae/ds-utilities';
 import { DropdownPill } from '../DropdownPill.js';
 import { InputPill } from '../InputPill.js';
 import { Pill } from '../Pill.js';
@@ -61,11 +67,12 @@ function LabeledDropdownSinglePill(_ref) {
     setOptionValue(option);
     onSelect(option);
   }, [onChange, onSelect]);
-  const onChangeInputValue = useCallback(({
-    target: {
-      value: inputValue
-    }
-  }) => {
+  const onChangeInputValue = useCallback(_ref2 => {
+    let {
+      target: {
+        value: inputValue
+      }
+    } = _ref2;
     const {
       onChangeInput
     } = optionValue;

package/esm/deprecated/LabeledDropdownPillsTypes/utils.js

@@ -1,4 +1,6 @@
-import { isEqual } from '@elliemae/ds-utilities/utils';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { isEqual } from '@elliemae/ds-utilities';
 import { omit } from 'lodash';
 
 const hasOptionChanged = (prevOptions, options) => {

package/esm/deprecated/LabeledPills.js

@@ -5,14 +5,15 @@ import { PillGroup } from './PillGroup.js';
 import { RemovablePill } from './RemovablePill.js';
 import { Pill } from './Pill.js';
 
-function LabeledPills({
-  children,
-  label = '',
-  leftAddon,
-  onFocusGroupSet,
-  onFocusNextGroup,
-  onFocusPreviousGroup
-}) {
+function LabeledPills(_ref) {
+  let {
+    children,
+    label = '',
+    leftAddon,
+    onFocusGroupSet,
+    onFocusNextGroup,
+    onFocusPreviousGroup
+  } = _ref;
   return /*#__PURE__*/_jsx(PillGroup, {
     onFocusGroupSet: onFocusGroupSet,
     onFocusNextGroup: onFocusNextGroup,

package/esm/deprecated/OverflowPill.js

@@ -1,15 +1,20 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useRef, useState, useEffect } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
 import DSTooltip from '@elliemae/ds-tooltip';
 import { Pill } from './Pill.js';
 
-function OverflowPill({
-  containerProps = {},
-  label = '',
-  options = []
-}) {
+function OverflowPill(_ref) {
+  let {
+    containerProps = {},
+    label = '',
+    options = []
+  } = _ref;
   const ref = useRef(null);
   const [tooltipIsOpen, setTooltipIsOpen] = useState(false);
   const [tooltipText, setTooltipText] = useState('');
@@ -17,9 +22,9 @@ function OverflowPill({
     let text = '';
     options.forEach(option => {
       if (!tooltipText || option === options[0]) {
-        text = `${option.label}`;
+        text = "".concat(option.label);
       } else {
-        text = text.concat(`, ${option.label}`);
+        text = text.concat(", ".concat(option.label));
       }
     });
     setTooltipText(text);

package/esm/deprecated/Pill.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -12,17 +17,20 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const pillBlockName = 'pill';
-const PillWrapper = aggregatedClasses('div')(pillBlockName, null, ({
-  size,
-  variant
-}) => ({
-  [variant]: !!variant,
-  [size]: !!size
-}));
+const PillWrapper = aggregatedClasses('div')(pillBlockName, null, _ref => {
+  let {
+    size,
+    variant
+  } = _ref;
+  return {
+    [variant]: !!variant,
+    [size]: !!size
+  };
+});
 const PillLabel = aggregatedClasses('span')(pillBlockName, 'label');
 const PillAddon = aggregatedClasses('div')(pillBlockName, 'addon');
 
-function Pill(_ref) {
+function Pill(_ref2) {
   let {
     containerProps = {},
     label = '',
@@ -30,8 +38,8 @@ function Pill(_ref) {
     rightAddon,
     variant = 'value',
     size = 'm'
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
 
   return /*#__PURE__*/jsxs(PillWrapper, _objectSpread(_objectSpread(_objectSpread({}, containerProps), {}, {
     classProps: {

package/esm/deprecated/PillGroup.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
@@ -12,23 +17,26 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const pillGroupBlockName = 'pill-group';
 const Container = aggregatedClasses('div')(pillGroupBlockName);
 
-const PillGroup = ({
-  containerProps = {},
-  onFocusNextGroup,
-  onFocusPreviousGroup,
-  onFocusGroupSet,
-  children
-}) => /*#__PURE__*/_jsx(FocusGroupProvider, {
-  keyBindings: {
-    Tab: 'next'
-  },
-  onFocusGroupSet: onFocusGroupSet,
-  onFocusNextGroup: onFocusNextGroup,
-  onFocusPreviousGroup: onFocusPreviousGroup,
-  orientation: "horizontal"
-}, void 0, /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
-  children: children
-})));
+const PillGroup = _ref => {
+  let {
+    containerProps = {},
+    onFocusNextGroup,
+    onFocusPreviousGroup,
+    onFocusGroupSet,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(FocusGroupProvider, {
+    keyBindings: {
+      Tab: 'next'
+    },
+    onFocusGroupSet: onFocusGroupSet,
+    onFocusNextGroup: onFocusNextGroup,
+    onFocusPreviousGroup: onFocusPreviousGroup,
+    orientation: "horizontal"
+  }, void 0, /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
+    children: children
+  })));
+};
 
 const props = {
   /** props injected to component wrapper */

package/esm/deprecated/ReadOnlyPill.js

@@ -1,20 +1,22 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState } from 'react';
 import { PropTypes, describe } from 'react-desc';
-import InfoCircleSmall from '@elliemae/ds-icons/InfoCircleSmall';
+import { InfoCircleSmall } from '@elliemae/ds-icons';
 import DSModal, { MODAL_TYPE_V2 } from '@elliemae/ds-modal';
 import Popover from '@elliemae/ds-popover';
 import { Pill } from './Pill.js';
 import { jsxs, Fragment } from 'react/jsx-runtime';
 
-const ReadOnlyPill = ({
-  containerProps = {},
-  modalContent = '',
-  label = '',
-  leftAddon,
-  modalTitle = '',
-  tooltipText = ''
-}) => {
+const ReadOnlyPill = _ref => {
+  let {
+    containerProps = {},
+    modalContent = '',
+    label = '',
+    leftAddon,
+    modalTitle = '',
+    tooltipText = ''
+  } = _ref;
   const ref = useRef(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
@@ -36,18 +38,21 @@ const ReadOnlyPill = ({
         content: tooltipText,
         placement: "top",
         showArrow: true,
-        renderTrigger: ({
-          ref
-        }) => /*#__PURE__*/_jsx(InfoCircleSmall, {
-          role: "button",
-          "data-testid": "read-only-info-btn",
-          className: "remove-pill-button",
-          onClick: toggle,
-          onMouseEnter: () => setIsTooltipOpen(true),
-          onMouseLeave: () => setIsTooltipOpen(false),
-          color: ['brand-primary', '600'],
-          innerRef: ref
-        })
+        renderTrigger: _ref2 => {
+          let {
+            ref
+          } = _ref2;
+          return /*#__PURE__*/_jsx(InfoCircleSmall, {
+            role: "button",
+            "data-testid": "read-only-info-btn",
+            className: "remove-pill-button",
+            onClick: toggle,
+            onMouseEnter: () => setIsTooltipOpen(true),
+            onMouseLeave: () => setIsTooltipOpen(false),
+            color: ['brand-primary', '600'],
+            innerRef: ref
+          });
+        }
       }),
       tabIndex: -1
     }), /*#__PURE__*/_jsx(DSModal, {

package/esm/deprecated/RemovablePill.js

@@ -1,18 +1,19 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useRef } from 'react';
 import { PropTypes, describe } from 'react-desc';
-import { isFunction } from '@elliemae/ds-utilities/utils';
-import CloseIcon from '@elliemae/ds-icons/CloseXsmall';
+import { isFunction } from '@elliemae/ds-utilities';
+import { CloseXsmall } from '@elliemae/ds-icons';
 import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
 import { Pill } from './Pill.js';
 
-function RemovablePill({
-  containerProps = {},
-  label = '',
-  onRemove,
-  size = 'm',
-  leftAddon
-}) {
+function RemovablePill(_ref) {
+  let {
+    containerProps = {},
+    label = '',
+    onRemove,
+    size = 'm',
+    leftAddon
+  } = _ref;
   const ref = useRef(null);
   const {
     focusPrevious
@@ -31,7 +32,7 @@ function RemovablePill({
         if (isFunction(focusPrevious)) focusPrevious();
       }
     },
-    rightAddon: /*#__PURE__*/_jsx(CloseIcon, {
+    rightAddon: /*#__PURE__*/_jsx(CloseXsmall, {
       role: "button",
       "data-testid": "remove-pill-button",
       className: "remove-pill-button",

package/esm/deprecated/index.js

@@ -1,4 +1,4 @@
-export { DSPillWithSchema, Pill } from './Pill.js';
+export { DSPillWithSchema, Pill, Pill as default } from './Pill.js';
 export { Container, DSPillGroupWithSchema, PillGroup } from './PillGroup.js';
 export { DSLabeledDropdownPillsWithSchema, LabeledDropdownPills } from './LabeledDropdownPills.js';
 export { DSLabeledPillsWithSchema, LabeledPills } from './LabeledPills.js';

package/esm/props.js

@@ -1,5 +1,5 @@
 import { PropTypes } from 'react-desc';
-import DSInput from '@elliemae/ds-form/Input';
+import { DSInput } from '@elliemae/ds-form';
 
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 const pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);
@@ -7,7 +7,9 @@ const DSPillV2PropTypes = {
   label: PropTypes.string.description('Label to show in the pill').isRequired,
   type: pillTypes.description('The type of pill that you want to render').isRequired,
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)').defaultValue(() => null),
+  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),
   ariaLabel: PropTypes.string.description('Aria label for the pill. If not provided we will use the label').defaultValue(''),
+  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),
   tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),
   iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),
   iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),
@@ -16,16 +18,23 @@ const DSPillV2PropTypes = {
   onInputChange: PropTypes.func.description('Callback triggered when user provides input to the input pill').defaultValue(() => null),
   onInputClear: PropTypes.func.description('Callback triggered when the user clears an input pill').defaultValue(() => null),
   inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),
-  dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({})
+  dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),
+  onDropdownClick: PropTypes.func.description('Callback when dropdown button is clicked or pressed').defaultValue(() => null)
 };
 const DSPillButtonPropTypes = {
   type: PropTypes.oneOf(['only', 'left', 'right']).description('The position in which this button will be placed. Only used for css styling internally').defaultValue('right'),
   width: PropTypes.string.description('Width of the button').defaultValue('100%'),
   height: PropTypes.string.description('Height of the button').defaultValue('100%')
 };
+const DSPillGroupPropTypes = {
+  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Reference to the pill group wrapper').defaultValue(() => null)
+};
 const DSPillV2DefaultProps = {
   innerRef: () => null,
   ariaLabel: '',
+  size: 'm',
+  labelTruncated: true,
   tooltipValue: '',
   iconLeft: null,
   iconRight: null,
@@ -35,12 +44,17 @@ const DSPillV2DefaultProps = {
   onInputClear: () => null,
   inputWidth: 72,
   inputRender: DSInput,
-  dropdownProps: {}
+  dropdownProps: {},
+  onDropdownClick: () => null
 };
 const DSPillButtonDefaultProps = {
   type: 'right',
   width: '100%',
   height: '100%'
 };
+const DSPillGroupDefaultProps = {
+  width: 'fit-content',
+  innerRef: () => null
+};
 
-export { DSPillButtonDefaultProps, DSPillButtonPropTypes, DSPillV2DefaultProps, DSPillV2PropTypes };
+export { DSPillButtonDefaultProps, DSPillButtonPropTypes, DSPillGroupDefaultProps, DSPillGroupPropTypes, DSPillV2DefaultProps, DSPillV2PropTypes };

package/esm/utils.js

@@ -1,14 +1,24 @@
-const setMultipleRefs = (...refs) => _ref => {
-  refs.forEach(ref => {
-    if (!ref || !_ref) return;
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 
-    if (typeof ref === 'function') {
-      ref(_ref);
-      return;
-    }
+const setMultipleRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
 
-    if (ref) ref.current = _ref;
-  });
+  return _ref => {
+    refs.forEach(ref => {
+      if (!ref || !_ref) return;
+
+      if (typeof ref === 'function') {
+        ref(_ref);
+        return;
+      }
+
+      if (ref) ref.current = _ref;
+    });
+  };
 };
 
 export { setMultipleRefs };