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

package/cjs/components/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');
 require('react');
 var reactDesc = require('react-desc');
@@ -33,7 +38,7 @@ const pillComponentGetter = {
 
 const DSPillV2 = props$1 => {
   const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillV2DefaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2WithSchema.toTypescript());
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.DSPillV2PropTypes);
   const {
     type
   } = propsWithDefaults;

package/cjs/components/PillButton.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 _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('react');
@@ -29,7 +34,7 @@ const typeToClassName = {
 
 const DSPillButton = props$1 => {
   const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillButtonDefaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonWithSchema.toTypescript());
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.DSPillButtonPropTypes);
 
   const {
     type,
@@ -39,7 +44,7 @@ const DSPillButton = props$1 => {
 
   return /*#__PURE__*/jsxRuntime.jsx(styled.StyledPillButton, _objectSpread(_objectSpread({}, rest), {}, {
     buttonType: "raw",
-    className: `${typeToClassName[type]} ${rest.className}`,
+    className: "".concat(typeToClassName[type], " ").concat(rest.className),
     children: children
   }));
 };

package/cjs/components/PillGroup.js

@@ -3,10 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var reactDesc = require('react-desc');
 var uid = require('uid');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var props = require('../props.js');
 var styled = require('./styled.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,12 +23,17 @@ const DSPillGroupV2Context = /*#__PURE__*/React.createContext({
   onKeyboardRemove: () => null
 });
 
-const DSPillGroupV2 = ({
-  children
-}) => {
-  const pillGroupUid = React.useMemo(() => `ds-pill-group-${uid.uid()}`, []);
+const DSPillGroupV2 = props$1 => {
+  const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillGroupDefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.DSPillGroupPropTypes);
+  const pillGroupUid = React.useMemo(() => "ds-pill-group-".concat(uid.uid()), []);
+  const {
+    children,
+    width,
+    innerRef
+  } = propsWithDefaults;
   const onKeyboardRemove = React.useCallback(pillUid => {
-    const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
+    const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
     const pillIndex = elems.findIndex(elem => elem.id === pillUid);
 
     if (pillIndex > 0) {
@@ -35,15 +46,18 @@ const DSPillGroupV2 = ({
     value: {
       onKeyboardRemove
     }
-  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledPillGroup, {
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledPillGroup, {
+    width: width,
     id: pillGroupUid,
     cols: React__default["default"].Children.map(children, () => 'auto'),
-    gutter: "2px"
-  }, void 0, children));
+    gutter: "2px",
+    ref: innerRef,
+    children: children
+  }));
 };
 
 const DSPillGroupV2WithSchema = reactDesc.describe(DSPillGroupV2);
-DSPillGroupV2WithSchema.propTypes = {};
+DSPillGroupV2WithSchema.propTypes = props.DSPillGroupPropTypes;
 
 exports.DSPillGroupV2 = DSPillGroupV2;
 exports.DSPillGroupV2Context = DSPillGroupV2Context;

package/cjs/components/styled.js

@@ -2,22 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 
-/* eslint-disable max-lines */
+var _templateObject, _templateObject2;
 // Common CSS
 // =============================================================================
 
-const borderOutside = (color, size = 1, zIndex = 2, borderRadius = '12px') => styled.css([":after{content:' ';position:absolute;top:0px;left:0px;right:0px;bottom:0px;border:", "px solid ", ";border-top-left-radius:", ";border-top-right-radius:", ";border-bottom-left-radius:", ";border-bottom-right-radius:", ";pointer-events:none;z-index:", ";}"], size, color, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
+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);
+};
 
-const commonPillWrapperCss = /*#__PURE__*/styled.css(["height:24px;position:relative;width:fit-content;background-color:", ";outline:none;padding:0px 12px 0 12px;border-radius:12px;font-size:13px;line-height:1;color:", ";", ";"], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => borderOutside(props.theme.colors.brand[300])); // =============================================================================
+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
 // =============================================================================
 
@@ -29,10 +37,13 @@ const StyledValuePillWrapper = /*#__PURE__*/styled__default["default"](Grid__def
 })(["", " 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'], ({
-  value,
-  theme
-}) => 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 => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`);
+})(["", " 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);
@@ -47,7 +58,12 @@ const StyledRemovablePillWrapper = /*#__PURE__*/styled__default["default"](Grid_
 
 const StyledPillGroup = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-6"
-})(["width:fit-content;& .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;}}}"]); // =============================================================================
+})(["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
 // =============================================================================
 

package/cjs/components/types/DropdownPill.js

@@ -2,12 +2,17 @@
 
 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 ChevronDown = require('@elliemae/ds-icons/ChevronSmallDown');
+var dsIcons = require('@elliemae/ds-icons');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var styled = require('../styled.js');
 var utils = require('../../utils.js');
@@ -19,21 +24,32 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
-var ChevronDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDown);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const DropdownPill = /*#__PURE__*/React__default["default"].memo(({
-  label,
-  dropdownProps,
-  innerRef,
-  ariaLabel
-}) => {
+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-${uid.uid()}`, []);
+  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",
@@ -41,24 +57,28 @@ const DropdownPill = /*#__PURE__*/React__default["default"].memo(({
     gutter: "2px",
     alignItems: "center",
     justifyItems: "center"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-    value: label
-  }), /*#__PURE__*/jsxRuntime.jsx(DSDropdownMenu__default["default"], _objectSpread(_objectSpread({
-    hideIfNotVisible: true,
-    onClose: () => chevronRef.current.focus(),
-    menuProps: {
-      zIndex: 100
-    }
+  }, 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), {}, {
-    triggerComponent: /*#__PURE__*/_jsx__default["default"](PillButton.DSPillButton, {
+    onClickOutside: e => {
+      if (e.code === 'Escape') chevronRef.current.focus();
+      if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
+    },
+    wrapperStyles: {
+      width: '100%',
+      height: '100%'
+    },
+    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"
-    }, void 0, /*#__PURE__*/_jsx__default["default"](ChevronDown__default["default"], {
-      color: ['brand-primary', '700'],
-      size: "s"
+      type: "right",
+      onClick: onDropdownClick
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {
+      color: ['brand-primary', '800'],
+      width: 20,
+      height: 20
     }))
   })));
 });

package/cjs/components/types/InputPill.js

@@ -3,9 +3,10 @@
 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 CloseIcon = require('@elliemae/ds-icons/CloseXsmall');
+var dsIcons = require('@elliemae/ds-icons');
 var styled = require('../styled.js');
 var utils = require('../../utils.js');
 var PillButton = require('../PillButton.js');
@@ -14,20 +15,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
 
-const InputPill = /*#__PURE__*/React__default["default"].memo(({
-  label,
-  inputPlaceholder,
-  inputWidth,
-  inputRender,
-  onInputChange,
-  onInputClear,
-  innerRef
-}) => {
+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-${uid.uid()}`, []);
+  const pillUid = React.useMemo(() => "ds-pill-".concat(uid.uid()), []);
   const onCloseIconClick = React.useCallback(e => {
     if ([undefined, 'Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
@@ -37,6 +39,7 @@ const InputPill = /*#__PURE__*/React__default["default"].memo(({
   }, [onInputClear]);
   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'],
@@ -62,7 +65,7 @@ const InputPill = /*#__PURE__*/React__default["default"].memo(({
     onKeyDown: onCloseIconClick,
     "aria-label": "Clear input",
     type: "right"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](CloseIcon__default["default"], {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
     size: "s",
     color: ['brand-primary', '700']
   })));

package/cjs/components/types/LabelPill.js

@@ -3,6 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+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');
 var React = require('react');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var styled = require('../styled.js');
@@ -12,20 +15,32 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const LabelPill = /*#__PURE__*/React__default["default"].memo(({
-  label,
-  iconLeft,
-  ariaLabel
-}) => /*#__PURE__*/_jsx__default["default"](styled.StyledLabelPillWrapper, {
-  alignItems: "center",
-  className: "ds-pill-wrapper ds-pill-wrapper-label",
-  "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, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-  value: label
-})));
+const LabelPill = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    iconLeft,
+    ariaLabel
+  } = _ref;
+  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.StyledLabelPillWrapper, {
+    size: size,
+    alignItems: "center",
+    className: "ds-pill-wrapper ds-pill-wrapper-label",
+    "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, /*#__PURE__*/_jsx__default["default"](TextComponent, {}, void 0, label));
+});
 
 exports.LabelPill = LabelPill;

package/cjs/components/types/ReadOnlyPill.js

@@ -3,6 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+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');
 var React = require('react');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var styled = require('../styled.js');
@@ -12,15 +15,27 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ReadOnlyPill = /*#__PURE__*/React__default["default"].memo(({
-  label,
-  iconLeft,
-  iconRight,
-  ariaLabel
-}) => {
+const ReadOnlyPill = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    iconLeft,
+    iconRight,
+    ariaLabel
+  } = _ref;
   const hasIconLeft = iconLeft !== null || iconRight !== null && label === '';
   const hasIconRight = iconRight !== null || iconLeft !== null && label === '';
+  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.StyledReadonlyPillWrapper, {
+    size: size,
     alignItems: "center",
     className: "ds-pill-wrapper ds-pill-wrapper-readonly",
     "data-testid": "ds-pill-wrapper",
@@ -29,9 +44,7 @@ const ReadOnlyPill = /*#__PURE__*/React__default["default"].memo(({
     gutter: "xxxs",
     hasIconRight: hasIconRight,
     hasIconLeft: hasIconLeft
-  }, void 0, iconLeft, label ? /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-    value: label
-  }) : null, iconRight);
+  }, void 0, iconLeft, label ? /*#__PURE__*/_jsx__default["default"](TextComponent, {}, void 0, label) : null, iconRight);
 });
 
 exports.ReadOnlyPill = ReadOnlyPill;

package/cjs/components/types/RemovablePill.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var uid = require('uid');
-var CloseIcon = require('@elliemae/ds-icons/CloseXsmall');
+var dsIcons = require('@elliemae/ds-icons');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var styled = require('../styled.js');
 var PillGroup = require('../PillGroup.js');
@@ -15,18 +15,28 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
 
-const RemovablePill = /*#__PURE__*/React__default["default"].memo(({
-  label,
-  onRemove,
-  innerRef,
-  ariaLabel
-}) => {
+const RemovablePill = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    onRemove,
+    innerRef,
+    ariaLabel
+  } = _ref;
   const {
     onKeyboardRemove
   } = React.useContext(PillGroup.DSPillGroupV2Context);
-  const pillUid = React.useMemo(() => `ds-pill-${uid.uid()}`, []);
+  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;
   const onKeyDown = React.useCallback(e => {
     if (['Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
@@ -35,6 +45,7 @@ const RemovablePill = /*#__PURE__*/React__default["default"].memo(({
     }
   }, [onKeyboardRemove, onRemove, pillUid]);
   return /*#__PURE__*/_jsx__default["default"](styled.StyledRemovablePillWrapper, {
+    size: size,
     cols: ['auto', '24px'],
     gutter: "2px",
     alignItems: "center",
@@ -42,19 +53,18 @@ const RemovablePill = /*#__PURE__*/React__default["default"].memo(({
     className: "ds-pill-wrapper ds-pill-wrapper-removable",
     "data-testid": "ds-pill-wrapper",
     "aria-label": ariaLabel || label
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-    value: label
-  }), /*#__PURE__*/_jsx__default["default"](PillButton.DSPillButton, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](TextComponent, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](PillButton.DSPillButton, {
     className: "ds-pill-focus-point",
     id: pillUid,
     "data-testid": "ds-pill-close-icon",
     innerRef: innerRef,
     onClick: onRemove,
     onKeyDown: onKeyDown,
-    "aria-label": `Remove ${label}`,
+    "aria-label": "Remove ".concat(label),
     type: "right"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](CloseIcon__default["default"], {
-    size: "s",
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
+    width: 22.65,
+    height: 22.65,
     color: ['brand-primary', '700']
   })));
 });

package/cjs/components/types/ValuePill.js

@@ -3,6 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+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');
 var React = require('react');
 var DSTooltip = require('@elliemae/ds-tooltip');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
@@ -13,27 +16,39 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ValuePill = /*#__PURE__*/React__default["default"].memo(({
-  label,
-  tooltipValue,
-  iconLeft,
-  ariaLabel
-}) => /*#__PURE__*/_jsx__default["default"](styled.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__default["default"](DSTooltip.DSTooltipV3, {
-  text: tooltipValue,
-  startPlacementPreference: "bottom"
-}, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSpanWithTooltip, {
-  className: "ds-pill-tooltip-value",
-  tabIndex: 0
-}, void 0, label)) : /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-  value: label
-})));
+const ValuePill = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    tooltipValue,
+    iconLeft,
+    ariaLabel
+  } = _ref;
+  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.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__default["default"](DSTooltip.DSTooltipV2, {
+    title: tooltipValue,
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](styled.StyledSpanWithTooltip, {
+      className: "ds-pill-tooltip-value",
+      tabIndex: 0
+    }, void 0, label)
+  }) : /*#__PURE__*/_jsx__default["default"](TextComponent, {}, void 0, label));
+});
 
 exports.ValuePill = ValuePill;