@elliemae/ds-pills 1.60.0 → 2.0.0-alpha.12

package/esm/components/styled.js

@@ -1,102 +1,67 @@
-import styled, { css } from 'styled-components';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { css } from '@elliemae/ds-system';
 import Grid from '@elliemae/ds-grid';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
-/* eslint-disable max-lines */
+var _templateObject, _templateObject2;
 // Common CSS
 // =============================================================================
 
-var borderOutside = function borderOutside(color) {
-  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  var zIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
-  var borderRadius = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '12px';
-  return 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 css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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);
 };
 
-var commonPillWrapperCss = /*#__PURE__*/css(["height:24px;position:relative;width:fit-content;background-color:", ";outline:none;white-space:nowrap;padding:0px 12px 0 12px;border-radius:12px;font-size:13px;line-height:1;color:", ";", ";"], function (props) {
-  return props.theme.colors.brand[200];
-}, function (props) {
-  return props.theme.colors.brand[800];
-}, function (props) {
-  return borderOutside(props.theme.colors.brand[300]);
-}); // =============================================================================
+const commonPillWrapperCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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
 // =============================================================================
 
-var StyledLabelPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
+const StyledLabelPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-j0tlch-0"
-})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.hasIcon ? '0px !important' : '12px';
-});
-var StyledValuePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
+})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold, props => props.hasIcon ? '0px !important' : '12px');
+const StyledValuePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-j0tlch-1"
-})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, function (props) {
-  return props.theme.fontWeights.regular;
-}, function (props) {
-  return props.hasIcon ? '0px !important' : '12px';
-});
-var StyledInputPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
+})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.regular, props => props.hasIcon ? '0px !important' : '12px');
+const StyledInputPillWrapper = /*#__PURE__*/styled(Grid).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, function (props) {
-  return props.theme.colors.neutral['000'];
-}, function (_ref) {
-  var value = _ref.value,
-      theme = _ref.theme;
+})(["", " 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]);
-}, function (props) {
-  return props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '';
-}, function (props) {
-  return props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '';
-}, function (props) {
-  return "".concat(props.inputWidth + (props.value === '' ? 24 : 0), "px");
-});
-var StyledDropdownPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
+}, 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(Grid).withConfig({
   componentId: "sc-j0tlch-3"
-})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, function (props) {
-  return props.theme.fontWeights.semibold;
-});
-var StyledReadonlyPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
+})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);
+const StyledReadonlyPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-j0tlch-4"
-})(["", " font-weight:", ";padding-right:", ";padding-left:", ";"], commonPillWrapperCss, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.hasIconRight ? '0 !important' : '12px';
-}, function (props) {
-  return props.hasIconLeft ? '0 !important' : '12px';
-});
-var StyledRemovablePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
+})(["", " 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(Grid).withConfig({
   componentId: "sc-j0tlch-5"
-})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, function (props) {
-  return props.theme.fontWeights.regular;
-}); // =============================================================================
+})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.regular); // =============================================================================
 // Pill group
 // =============================================================================
 
-var StyledPillGroup = /*#__PURE__*/styled(Grid).withConfig({
+const StyledPillGroup = /*#__PURE__*/styled(Grid).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;}}}"], function (_ref2) {
-  var width = _ref2.width;
+})(["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
 // =============================================================================
 
-var StyledSpanWithTooltip = /*#__PURE__*/styled.span.withConfig({
+const StyledSpanWithTooltip = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-j0tlch-7"
-})(["outline:none;:focus{", "}"], function (props) {
-  return borderOutside(props.theme.colors.brand[700], 2, 3);
-});
-var StyledPillButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+})(["outline:none;:focus{", "}"], props => borderOutside(props.theme.colors.brand[700], 2, 3));
+const StyledPillButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-j0tlch-8"
-})(["display:grid;place-items:center;position:relative;padding:0;width:", ";height:", ";border-radius:12px;:focus{", "}cursor:pointer;"], function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-}, function (props) {
-  return borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit');
-});
+})(["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'));
 
 export { StyledDropdownPillWrapper, StyledInputPillWrapper, StyledLabelPillWrapper, StyledPillButton, StyledPillGroup, StyledReadonlyPillWrapper, StyledRemovablePillWrapper, StyledSpanWithTooltip, StyledValuePillWrapper };
-//# sourceMappingURL=styled.js.map

package/esm/components/types/DropdownPill.js

@@ -1,4 +1,10 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
+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 React, { useRef, useMemo } from 'react';
 import { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';
 import { uid } from 'uid';
@@ -7,33 +13,33 @@ import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text'
 import { StyledDropdownPillWrapper } from '../styled.js';
 import { setMultipleRefs } from '../../utils.js';
 import { DSPillButton } from '../PillButton.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-button';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react-desc';
-import '@elliemae/ds-props-helpers';
-import '../../props.js';
-import '@elliemae/ds-form';
+import { jsx } from 'react/jsx-runtime';
 
-var DropdownPill = /*#__PURE__*/React.memo(function (_ref) {
-  var label = _ref.label,
-      labelTruncated = _ref.labelTruncated,
-      dropdownProps = _ref.dropdownProps,
-      innerRef = _ref.innerRef,
-      ariaLabel = _ref.ariaLabel,
-      onDropdownClick = _ref.onDropdownClick;
-  var chevronRef = useRef(null);
-  var pillUid = useMemo(function () {
-    return "ds-pill-".concat(uid());
-  }, []);
-  var TextComponent = labelTruncated ? function (_ref2) {
-    var children = _ref2.children;
-    return /*#__PURE__*/React.createElement(SimpleTruncatedTooltipText, {
+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 DropdownPill = /*#__PURE__*/React.memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    dropdownProps,
+    innerRef,
+    ariaLabel,
+    onDropdownClick
+  } = _ref;
+  const chevronRef = useRef(null);
+  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
       value: children
     });
   } : React.Fragment;
-  return /*#__PURE__*/React.createElement(StyledDropdownPillWrapper, {
+  return /*#__PURE__*/_jsx(StyledDropdownPillWrapper, {
+    size: size,
     id: pillUid,
     className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
     "data-testid": "ds-pill-wrapper",
@@ -41,27 +47,30 @@ var DropdownPill = /*#__PURE__*/React.memo(function (_ref) {
     gutter: "2px",
     alignItems: "center",
     justifyItems: "center"
-  }, /*#__PURE__*/React.createElement(TextComponent, null, label), /*#__PURE__*/React.createElement(DSDropdownMenuV2, _extends({}, dropdownProps, {
-    onClickOutside: function onClickOutside(e) {
+  }, void 0, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label), /*#__PURE__*/jsx(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: {
       width: '100%',
       height: '100%'
-    }
-  }), /*#__PURE__*/React.createElement(DSPillButton, {
-    className: "ds-pill-focus-point",
-    "data-testid": "ds-pill-dropdown-chevron",
-    innerRef: setMultipleRefs(chevronRef, innerRef),
-    "aria-label": ariaLabel || label,
-    type: "right",
-    onClick: onDropdownClick
-  }, /*#__PURE__*/React.createElement(ChevronSmallDown, {
-    color: ['brand-primary', '800'],
-    size: "s"
-  }))));
+    },
+    children: /*#__PURE__*/_jsx(DSPillButton, {
+      className: "ds-pill-focus-point",
+      "data-testid": "ds-pill-dropdown-chevron",
+      innerRef: setMultipleRefs(chevronRef, innerRef),
+      "aria-label": ariaLabel || label,
+      type: "right",
+      onClick: onDropdownClick
+    }, void 0, /*#__PURE__*/_jsx(ChevronSmallDown, {
+      color: ['brand-primary', '800'],
+      width: 20,
+      height: 20
+    }))
+  })));
 });
 
 export { DropdownPill };
-//# sourceMappingURL=DropdownPill.js.map

package/esm/components/types/InputPill.js

@@ -1,56 +1,43 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useRef, useMemo, useCallback, useState } from 'react';
 import { uid } from 'uid';
 import { CloseXsmall } from '@elliemae/ds-icons';
 import { StyledInputPillWrapper } from '../styled.js';
 import { setMultipleRefs } from '../../utils.js';
 import { DSPillButton } from '../PillButton.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-button';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react-desc';
-import '@elliemae/ds-props-helpers';
-import '../../props.js';
-import '@elliemae/ds-form';
 
-var InputPill = /*#__PURE__*/React.memo(function (_ref) {
-  var label = _ref.label,
-      inputPlaceholder = _ref.inputPlaceholder,
-      inputWidth = _ref.inputWidth,
-      inputRender = _ref.inputRender,
-      onInputChange = _ref.onInputChange,
-      onInputClear = _ref.onInputClear,
-      innerRef = _ref.innerRef;
-  var ref = useRef(null);
-  var InputComponent = useMemo(function () {
-    return inputRender;
-  }, [inputRender]);
-  var pillUid = useMemo(function () {
-    return "ds-pill-".concat(uid());
-  }, []);
-  var onCloseIconClick = useCallback(function (e) {
+const InputPill = /*#__PURE__*/React.memo(_ref => {
+  let {
+    label,
+    size,
+    inputPlaceholder,
+    inputWidth,
+    inputRender,
+    onInputChange,
+    onInputClear,
+    innerRef
+  } = _ref;
+  const ref = useRef(null);
+  const InputComponent = useMemo(() => inputRender, [inputRender]);
+  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
+  const onCloseIconClick = useCallback(e => {
     if ([undefined, 'Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
       onInputClear(e);
       ref.current.focus();
     }
   }, [onInputClear]);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      inputHasFocus = _useState2[0],
-      setInputHasFocus = _useState2[1];
-
-  return /*#__PURE__*/React.createElement(StyledInputPillWrapper, {
+  const [inputHasFocus, setInputHasFocus] = useState(false);
+  return /*#__PURE__*/_jsx(StyledInputPillWrapper, {
+    size: size,
     className: "ds-pill-wrapper",
     "data-testid": "ds-pill-wrapper",
     cols: label === '' ? ['auto'] : ['auto', '24px'],
     inputWidth: inputWidth,
     value: label,
     inputHasFocus: inputHasFocus
-  }, /*#__PURE__*/React.createElement(InputComponent, {
+  }, void 0, /*#__PURE__*/_jsx(InputComponent, {
     id: pillUid,
     className: "ds-pill-focus-point",
     "data-testid": "ds-pill-input",
@@ -58,14 +45,10 @@ var InputPill = /*#__PURE__*/React.memo(function (_ref) {
     value: label,
     onChange: onInputChange,
     placeholder: inputPlaceholder,
-    onFocus: function onFocus() {
-      return setInputHasFocus(true);
-    },
-    onBlur: function onBlur() {
-      return setInputHasFocus(false);
-    },
+    onFocus: () => setInputHasFocus(true),
+    onBlur: () => setInputHasFocus(false),
     disableTooltip: false
-  }), label !== '' && /*#__PURE__*/React.createElement(DSPillButton, {
+  }), label !== '' && /*#__PURE__*/_jsx(DSPillButton, {
     id: pillUid,
     "data-testid": "ds-pill-clear-icon",
     innerRef: innerRef,
@@ -73,11 +56,10 @@ var InputPill = /*#__PURE__*/React.memo(function (_ref) {
     onKeyDown: onCloseIconClick,
     "aria-label": "Clear input",
     type: "right"
-  }, /*#__PURE__*/React.createElement(CloseXsmall, {
+  }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
     size: "s",
     color: ['brand-primary', '700']
   })));
 });
 
 export { InputPill };
-//# sourceMappingURL=InputPill.js.map

package/esm/components/types/LabelPill.js

@@ -1,34 +1,37 @@
+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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { StyledLabelPillWrapper } from '../styled.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-button';
 
-/* eslint-disable react/prop-types */
-var LabelPill = /*#__PURE__*/React.memo(function (_ref) {
-  var label = _ref.label,
-      labelTruncated = _ref.labelTruncated,
-      iconLeft = _ref.iconLeft,
-      ariaLabel = _ref.ariaLabel;
-  var TextComponent = labelTruncated ? function (_ref2) {
-    var children = _ref2.children;
-    return /*#__PURE__*/React.createElement(SimpleTruncatedTooltipText, {
+const LabelPill = /*#__PURE__*/React.memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    iconLeft,
+    ariaLabel
+  } = _ref;
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
       value: children
     });
   } : React.Fragment;
-  return /*#__PURE__*/React.createElement(StyledLabelPillWrapper, {
+  return /*#__PURE__*/_jsx(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(function (notFalse) {
-      return notFalse;
-    }),
+    cols: [iconLeft && 'min-content', 'auto'].filter(notFalse => notFalse),
     gutter: "xxxs",
     hasIcon: iconLeft !== null
-  }, iconLeft, /*#__PURE__*/React.createElement(TextComponent, null, label));
+  }, void 0, iconLeft, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label));
 });
 
 export { LabelPill };
-//# sourceMappingURL=LabelPill.js.map

package/esm/components/types/ReadOnlyPill.js

@@ -1,38 +1,41 @@
+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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { StyledReadonlyPillWrapper } from '../styled.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-button';
 
-/* eslint-disable complexity */
-var ReadOnlyPill = /*#__PURE__*/React.memo(function (_ref) {
-  var label = _ref.label,
-      labelTruncated = _ref.labelTruncated,
-      iconLeft = _ref.iconLeft,
-      iconRight = _ref.iconRight,
-      ariaLabel = _ref.ariaLabel;
-  var hasIconLeft = iconLeft !== null || iconRight !== null && label === '';
-  var hasIconRight = iconRight !== null || iconLeft !== null && label === '';
-  var TextComponent = labelTruncated ? function (_ref2) {
-    var children = _ref2.children;
-    return /*#__PURE__*/React.createElement(SimpleTruncatedTooltipText, {
+const ReadOnlyPill = /*#__PURE__*/React.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(SimpleTruncatedTooltipText, {
       value: children
     });
   } : React.Fragment;
-  return /*#__PURE__*/React.createElement(StyledReadonlyPillWrapper, {
+  return /*#__PURE__*/_jsx(StyledReadonlyPillWrapper, {
+    size: size,
     alignItems: "center",
     className: "ds-pill-wrapper ds-pill-wrapper-readonly",
     "data-testid": "ds-pill-wrapper",
     "aria-label": ariaLabel || label,
-    cols: [iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter(function (notFalse) {
-      return notFalse;
-    }),
+    cols: [iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter(notFalse => notFalse),
     gutter: "xxxs",
     hasIconRight: hasIconRight,
     hasIconLeft: hasIconLeft
-  }, iconLeft, label ? /*#__PURE__*/React.createElement(TextComponent, null, label) : null, iconRight);
+  }, void 0, iconLeft, label ? /*#__PURE__*/_jsx(TextComponent, {}, void 0, label) : null, iconRight);
 });
 
 export { ReadOnlyPill };
-//# sourceMappingURL=ReadOnlyPill.js.map

package/esm/components/types/RemovablePill.js

@@ -1,3 +1,4 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React, { useContext, useMemo, useCallback } from 'react';
 import { uid } from 'uid';
 import { CloseXsmall } from '@elliemae/ds-icons';
@@ -5,45 +6,37 @@ import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text'
 import { StyledRemovablePillWrapper } from '../styled.js';
 import { DSPillGroupV2Context } from '../PillGroup.js';
 import { DSPillButton } from '../PillButton.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-button';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import 'react-desc';
-import '@elliemae/ds-props-helpers';
-import '../../props.js';
-import '@elliemae/ds-form';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
 
-/* eslint-disable react/prop-types */
-var RemovablePill = /*#__PURE__*/React.memo(function (_ref) {
-  var label = _ref.label,
-      labelTruncated = _ref.labelTruncated,
-      onRemove = _ref.onRemove,
-      innerRef = _ref.innerRef,
-      ariaLabel = _ref.ariaLabel;
-
-  var _useContext = useContext(DSPillGroupV2Context),
-      onKeyboardRemove = _useContext.onKeyboardRemove;
-
-  var pillUid = useMemo(function () {
-    return "ds-pill-".concat(uid());
-  }, []);
-  var TextComponent = labelTruncated ? function (_ref2) {
-    var children = _ref2.children;
-    return /*#__PURE__*/React.createElement(SimpleTruncatedTooltipText, {
+const RemovablePill = /*#__PURE__*/React.memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    onRemove,
+    innerRef,
+    ariaLabel
+  } = _ref;
+  const {
+    onKeyboardRemove
+  } = useContext(DSPillGroupV2Context);
+  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
       value: children
     });
   } : React.Fragment;
-  var onKeyDown = useCallback(function (e) {
+  const onKeyDown = useCallback(e => {
     if (['Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
       if (onKeyboardRemove) onKeyboardRemove(pillUid);
       onRemove(e);
     }
   }, [onKeyboardRemove, onRemove, pillUid]);
-  return /*#__PURE__*/React.createElement(StyledRemovablePillWrapper, {
+  return /*#__PURE__*/_jsx(StyledRemovablePillWrapper, {
+    size: size,
     cols: ['auto', '24px'],
     gutter: "2px",
     alignItems: "center",
@@ -51,7 +44,7 @@ var RemovablePill = /*#__PURE__*/React.memo(function (_ref) {
     className: "ds-pill-wrapper ds-pill-wrapper-removable",
     "data-testid": "ds-pill-wrapper",
     "aria-label": ariaLabel || label
-  }, /*#__PURE__*/React.createElement(TextComponent, null, label), /*#__PURE__*/React.createElement(DSPillButton, {
+  }, void 0, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label), /*#__PURE__*/_jsx(DSPillButton, {
     className: "ds-pill-focus-point",
     id: pillUid,
     "data-testid": "ds-pill-close-icon",
@@ -60,11 +53,11 @@ var RemovablePill = /*#__PURE__*/React.memo(function (_ref) {
     onKeyDown: onKeyDown,
     "aria-label": "Remove ".concat(label),
     type: "right"
-  }, /*#__PURE__*/React.createElement(CloseXsmall, {
-    size: "s",
+  }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
+    width: 22.65,
+    height: 22.65,
     color: ['brand-primary', '700']
   })));
 });
 
 export { RemovablePill };
-//# sourceMappingURL=RemovablePill.js.map