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

package/cjs/{LabeledPills.js → deprecated/LabeledPills.js}

@@ -13,19 +13,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-function LabeledPills({
-  children,
-  label = '',
-  leftAddon,
-  onFocusGroupSet,
-  onFocusNextGroup,
-  onFocusPreviousGroup
-}) {
-  return /*#__PURE__*/_jsx__default['default'](PillGroup.PillGroup, {
+function LabeledPills(_ref) {
+  let {
+    children,
+    label = '',
+    leftAddon,
+    onFocusGroupSet,
+    onFocusNextGroup,
+    onFocusPreviousGroup
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](PillGroup.PillGroup, {
     onFocusGroupSet: onFocusGroupSet,
     onFocusNextGroup: onFocusNextGroup,
     onFocusPreviousGroup: onFocusPreviousGroup
-  }, void 0, /*#__PURE__*/_jsx__default['default'](Pill.Pill, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Pill.Pill, {
     label: label,
     leftAddon: leftAddon,
     variant: "title",

package/cjs/{OverflowPill.js → deprecated/OverflowPill.js}

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var react = require('react');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
 var reactDesc = require('react-desc');
 var useFocusGroupItem = require('@elliemae/ds-shared/FocusGroup/useFocusGroupItem');
 var DSTooltip = require('@elliemae/ds-tooltip');
@@ -15,31 +19,32 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var useFocusGroupItem__default = /*#__PURE__*/_interopDefaultLegacy(useFocusGroupItem);
 var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
 
-function OverflowPill({
-  containerProps = {},
-  label = '',
-  options = []
-}) {
-  const ref = react.useRef(null);
-  const [tooltipIsOpen, setTooltipIsOpen] = react.useState(false);
-  const [tooltipText, setTooltipText] = react.useState('');
-  react.useEffect(() => {
+function OverflowPill(_ref) {
+  let {
+    containerProps = {},
+    label = '',
+    options = []
+  } = _ref;
+  const ref = React.useRef(null);
+  const [tooltipIsOpen, setTooltipIsOpen] = React.useState(false);
+  const [tooltipText, setTooltipText] = React.useState('');
+  React.useEffect(() => {
     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);
   }, [options]);
-  useFocusGroupItem__default['default'](ref);
-  return /*#__PURE__*/_jsx__default['default'](DSTooltip__default['default'], {
+  useFocusGroupItem__default["default"](ref);
+  return /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
     isOpen: tooltipIsOpen,
     title: tooltipText,
     zIndex: 11,
-    triggerComponent: /*#__PURE__*/_jsx__default['default'](Pill.Pill, {
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](Pill.Pill, {
       className: "overflow-pill",
       containerProps: containerProps,
       innerRef: ref,

package/cjs/{Pill.js → deprecated/Pill.js}

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -20,19 +25,22 @@ const _excluded = ["containerProps", "label", "leftAddon", "rightAddon", "varian
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const pillBlockName = 'pill';
-const PillWrapper = dsClassnames.aggregatedClasses('div')(pillBlockName, null, ({
-  size,
-  variant
-}) => ({
-  [variant]: !!variant,
-  [size]: !!size
-}));
+const PillWrapper = dsClassnames.aggregatedClasses('div')(pillBlockName, null, _ref => {
+  let {
+    size,
+    variant
+  } = _ref;
+  return {
+    [variant]: !!variant,
+    [size]: !!size
+  };
+});
 const PillLabel = dsClassnames.aggregatedClasses('span')(pillBlockName, 'label');
 const PillAddon = dsClassnames.aggregatedClasses('div')(pillBlockName, 'addon');
 
-function Pill(_ref) {
+function Pill(_ref2) {
   let {
     containerProps = {},
     label = '',
@@ -40,8 +48,8 @@ function Pill(_ref) {
     rightAddon,
     variant = 'value',
     size = 'm'
-  } = _ref,
-      otherProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+  } = _ref2,
+      otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
 
   return /*#__PURE__*/jsxRuntime.jsxs(PillWrapper, _objectSpread(_objectSpread(_objectSpread({}, containerProps), {}, {
     classProps: {
@@ -49,7 +57,7 @@ function Pill(_ref) {
       size
     }
   }, otherProps), {}, {
-    children: [leftAddon && /*#__PURE__*/_jsx__default['default'](PillAddon, {}, void 0, leftAddon), /*#__PURE__*/_jsx__default['default'](PillLabel, {}, void 0, label), rightAddon && /*#__PURE__*/_jsx__default['default'](PillAddon, {}, void 0, rightAddon)]
+    children: [leftAddon && /*#__PURE__*/_jsx__default["default"](PillAddon, {}, void 0, leftAddon), /*#__PURE__*/_jsx__default["default"](PillLabel, {}, void 0, label), rightAddon && /*#__PURE__*/_jsx__default["default"](PillAddon, {}, void 0, rightAddon)]
   }));
 }
 
@@ -77,4 +85,4 @@ DSPillWithSchema.propTypes = props;
 
 exports.DSPillWithSchema = DSPillWithSchema;
 exports.Pill = Pill;
-exports['default'] = Pill;
+exports["default"] = Pill;

package/cjs/{PillGroup.js → deprecated/PillGroup.js}

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
@@ -18,27 +23,30 @@ var FocusGroupProvider__default = /*#__PURE__*/_interopDefaultLegacy(FocusGroupP
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const pillGroupBlockName = 'pill-group';
 const Container = dsClassnames.aggregatedClasses('div')(pillGroupBlockName);
 
-const PillGroup = ({
-  containerProps = {},
-  onFocusNextGroup,
-  onFocusPreviousGroup,
-  onFocusGroupSet,
-  children
-}) => /*#__PURE__*/_jsx__default['default'](FocusGroupProvider__default['default'], {
-  keyBindings: {
-    Tab: 'next'
-  },
-  onFocusGroupSet: onFocusGroupSet,
-  onFocusNextGroup: onFocusNextGroup,
-  onFocusPreviousGroup: onFocusPreviousGroup,
-  orientation: "horizontal"
-}, void 0, /*#__PURE__*/jsxRuntime.jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
-  children: children
-})));
+const PillGroup = _ref => {
+  let {
+    containerProps = {},
+    onFocusNextGroup,
+    onFocusPreviousGroup,
+    onFocusGroupSet,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](FocusGroupProvider__default["default"], {
+    keyBindings: {
+      Tab: 'next'
+    },
+    onFocusGroupSet: onFocusGroupSet,
+    onFocusNextGroup: onFocusNextGroup,
+    onFocusPreviousGroup: onFocusPreviousGroup,
+    orientation: "horizontal"
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
+    children: children
+  })));
+};
 
 const props = {
   /** props injected to component wrapper */

package/cjs/{ReadOnlyPill.js → deprecated/ReadOnlyPill.js}

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var react = require('react');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
 var reactDesc = require('react-desc');
-var InfoCircleSmall = require('@elliemae/ds-icons/InfoCircleSmall');
+var dsIcons = require('@elliemae/ds-icons');
 var DSModal = require('@elliemae/ds-modal');
 var Popover = require('@elliemae/ds-popover');
 var Pill = require('./Pill.js');
@@ -14,54 +15,57 @@ var jsxRuntime = require('react/jsx-runtime');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var InfoCircleSmall__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleSmall);
 var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
 var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
 
-const ReadOnlyPill = ({
-  containerProps = {},
-  modalContent = '',
-  label = '',
-  leftAddon,
-  modalTitle = '',
-  tooltipText = ''
-}) => {
-  const ref = react.useRef(null);
-  const [isModalOpen, setIsModalOpen] = react.useState(false);
-  const [isTooltipOpen, setIsTooltipOpen] = react.useState(false);
+const ReadOnlyPill = _ref => {
+  let {
+    containerProps = {},
+    modalContent = '',
+    label = '',
+    leftAddon,
+    modalTitle = '',
+    tooltipText = ''
+  } = _ref;
+  const ref = React.useRef(null);
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isTooltipOpen, setIsTooltipOpen] = React.useState(false);
 
   const toggle = () => {
     setIsModalOpen(!isModalOpen);
   };
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default['default'](Pill.Pill, {
+    children: [/*#__PURE__*/_jsx__default["default"](Pill.Pill, {
       "data-testid": "read-only-pill",
       className: "removable-pill",
       containerProps: containerProps,
       innerRef: ref,
       label: label,
       leftAddon: leftAddon,
-      rightAddon: /*#__PURE__*/_jsx__default['default'](Popover__default['default'], {
+      rightAddon: /*#__PURE__*/_jsx__default["default"](Popover__default["default"], {
         isOpen: tooltipText && isTooltipOpen,
         content: tooltipText,
         placement: "top",
         showArrow: true,
-        renderTrigger: ({
-          ref
-        }) => /*#__PURE__*/_jsx__default['default'](InfoCircleSmall__default['default'], {
-          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__default["default"](dsIcons.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__default['default'](DSModal__default['default'], {
+    }), /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
       isOpen: isModalOpen,
       showClose: true,
       shouldCloseOnOverlayClick: true,

package/cjs/{RemovablePill.js → deprecated/RemovablePill.js}

@@ -3,31 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var react = require('react');
+var React = require('react');
 var reactDesc = require('react-desc');
-var utils = require('@elliemae/ds-utilities/utils');
-var CloseXsmall = require('@elliemae/ds-icons/CloseXsmall');
+var dsUtilities = require('@elliemae/ds-utilities');
+var dsIcons = require('@elliemae/ds-icons');
 var useFocusGroupItem = require('@elliemae/ds-shared/FocusGroup/useFocusGroupItem');
 var Pill = require('./Pill.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var CloseXsmall__default = /*#__PURE__*/_interopDefaultLegacy(CloseXsmall);
 var useFocusGroupItem__default = /*#__PURE__*/_interopDefaultLegacy(useFocusGroupItem);
 
-function RemovablePill({
-  containerProps = {},
-  label = '',
-  onRemove,
-  size = 'm',
-  leftAddon
-}) {
-  const ref = react.useRef(null);
+function RemovablePill(_ref) {
+  let {
+    containerProps = {},
+    label = '',
+    onRemove,
+    size = 'm',
+    leftAddon
+  } = _ref;
+  const ref = React.useRef(null);
   const {
     focusPrevious
-  } = useFocusGroupItem__default['default'](ref);
-  return /*#__PURE__*/_jsx__default['default'](Pill.Pill, {
+  } = useFocusGroupItem__default["default"](ref);
+  return /*#__PURE__*/_jsx__default["default"](Pill.Pill, {
     className: "removable-pill",
     "data-testid": "removable-pill",
     containerProps: containerProps,
@@ -36,12 +36,12 @@ function RemovablePill({
     label: label,
     leftAddon: leftAddon,
     onKeyDown: e => {
-      if (e.key === 'Backspace' && utils.isFunction(onRemove)) {
+      if (e.key === 'Backspace' && dsUtilities.isFunction(onRemove)) {
         onRemove();
-        if (utils.isFunction(focusPrevious)) focusPrevious();
+        if (dsUtilities.isFunction(focusPrevious)) focusPrevious();
       }
     },
-    rightAddon: /*#__PURE__*/_jsx__default['default'](CloseXsmall__default['default'], {
+    rightAddon: /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
       role: "button",
       "data-testid": "remove-pill-button",
       className: "remove-pill-button",

package/cjs/deprecated/index.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Pill = require('./Pill.js');
+var PillGroup = require('./PillGroup.js');
+var LabeledDropdownPills = require('./LabeledDropdownPills.js');
+var LabeledPills = require('./LabeledPills.js');
+var DropdownPill = require('./DropdownPill.js');
+var RemovablePill = require('./RemovablePill.js');
+var ReadOnlyPill = require('./ReadOnlyPill.js');
+var OverflowPill = require('./OverflowPill.js');
+
+
+
+exports.DSPillWithSchema = Pill.DSPillWithSchema;
+exports.Pill = Pill.Pill;
+exports["default"] = Pill.Pill;
+exports.Container = PillGroup.Container;
+exports.DSPillGroupWithSchema = PillGroup.DSPillGroupWithSchema;
+exports.PillGroup = PillGroup.PillGroup;
+exports.DSLabeledDropdownPillsWithSchema = LabeledDropdownPills.DSLabeledDropdownPillsWithSchema;
+exports.LabeledDropdownPills = LabeledDropdownPills.LabeledDropdownPills;
+exports.DSLabeledPillsWithSchema = LabeledPills.DSLabeledPillsWithSchema;
+exports.LabeledPills = LabeledPills.LabeledPills;
+exports.DSDropdownPillWithSchema = DropdownPill.DSDropdownPillWithSchema;
+exports.DropdownPill = DropdownPill.DropdownPill;
+exports.DSRemovablePillWithSchema = RemovablePill.DSRemovablePillWithSchema;
+exports.RemovablePill = RemovablePill.RemovablePill;
+exports.DSReadOnlyPillWithSchema = ReadOnlyPill.DSReadOnlyPillWithSchema;
+exports.ReadOnlyPill = ReadOnlyPill.ReadOnlyPill;
+exports.DSOverflowPillWithSchema = OverflowPill.DSOverflowPillWithSchema;
+exports.OverflowPill = OverflowPill.OverflowPill;

package/cjs/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/index.js

@@ -2,20 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Pill = require('./Pill.js');
-var PillGroup = require('./PillGroup.js');
-var LabeledDropdownPills = require('./LabeledDropdownPills.js');
-var LabeledPills = require('./LabeledPills.js');
-var DropdownPill = require('./DropdownPill.js');
-var RemovablePill = require('./RemovablePill.js');
-var ReadOnlyPill = require('./ReadOnlyPill.js');
-var OverflowPill = require('./OverflowPill.js');
+var Pill = require('./deprecated/Pill.js');
+var PillGroup = require('./deprecated/PillGroup.js');
+var LabeledDropdownPills = require('./deprecated/LabeledDropdownPills.js');
+var LabeledPills = require('./deprecated/LabeledPills.js');
+var DropdownPill = require('./deprecated/DropdownPill.js');
+var RemovablePill = require('./deprecated/RemovablePill.js');
+var ReadOnlyPill = require('./deprecated/ReadOnlyPill.js');
+var OverflowPill = require('./deprecated/OverflowPill.js');
+var Pill$1 = require('./components/Pill.js');
+var PillGroup$1 = require('./components/PillGroup.js');
+var PillButton = require('./components/PillButton.js');
 
 
 
 exports.DSPillWithSchema = Pill.DSPillWithSchema;
 exports.Pill = Pill.Pill;
-exports.default = Pill.Pill;
+exports["default"] = Pill.Pill;
 exports.Container = PillGroup.Container;
 exports.DSPillGroupWithSchema = PillGroup.DSPillGroupWithSchema;
 exports.PillGroup = PillGroup.PillGroup;
@@ -31,3 +34,10 @@ exports.DSReadOnlyPillWithSchema = ReadOnlyPill.DSReadOnlyPillWithSchema;
 exports.ReadOnlyPill = ReadOnlyPill.ReadOnlyPill;
 exports.DSOverflowPillWithSchema = OverflowPill.DSOverflowPillWithSchema;
 exports.OverflowPill = OverflowPill.OverflowPill;
+exports.DSPillV2 = Pill$1.DSPillV2;
+exports.DSPillV2WithSchema = Pill$1.DSPillV2WithSchema;
+exports.DSPillGroupV2 = PillGroup$1.DSPillGroupV2;
+exports.DSPillGroupV2Context = PillGroup$1.DSPillGroupV2Context;
+exports.DSPillGroupV2WithSchema = PillGroup$1.DSPillGroupV2WithSchema;
+exports.DSPillButton = PillButton.DSPillButton;
+exports.DSPillButtonWithSchema = PillButton.DSPillButtonWithSchema;

package/cjs/props.js

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

package/cjs/utils.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+
+const setMultipleRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return _ref => {
+    refs.forEach(ref => {
+      if (!ref || !_ref) return;
+
+      if (typeof ref === 'function') {
+        ref(_ref);
+        return;
+      }
+
+      if (ref) ref.current = _ref;
+    });
+  };
+};
+
+exports.setMultipleRefs = setMultipleRefs;

package/esm/components/Pill.js

@@ -0,0 +1,44 @@
+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 'react';
+import { describe } from 'react-desc';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { DSPillV2PropTypes, DSPillV2DefaultProps } from '../props.js';
+import { DropdownPill } from './types/DropdownPill.js';
+import { InputPill } from './types/InputPill.js';
+import { LabelPill } from './types/LabelPill.js';
+import { ReadOnlyPill } from './types/ReadOnlyPill.js';
+import { RemovablePill } from './types/RemovablePill.js';
+import { ValuePill } from './types/ValuePill.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const pillComponentGetter = {
+  dropdown: DropdownPill,
+  input: InputPill,
+  label: LabelPill,
+  readonly: ReadOnlyPill,
+  removable: RemovablePill,
+  value: ValuePill
+};
+
+const DSPillV2 = props => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes);
+  const {
+    type
+  } = propsWithDefaults;
+  const PillComponent = pillComponentGetter[type];
+  return /*#__PURE__*/jsx(PillComponent, _objectSpread({}, propsWithDefaults));
+};
+
+const DSPillV2WithSchema = describe(DSPillV2).description('Pill');
+DSPillV2WithSchema.propTypes = DSPillV2PropTypes;
+
+export { DSPillV2, DSPillV2WithSchema };