@elliemae/ds-pills 2.3.0-alpha.8 → 2.3.0-next.2

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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.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;
+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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const 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 };

package/esm/components/PillButton.js

@@ -0,0 +1,46 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { describe } from 'react-desc';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { StyledPillButton } from './styled.js';
+import { DSPillButtonPropTypes, DSPillButtonDefaultProps } from '../props.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["type", "children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const typeToClassName = {
+  only: 'ds-pill-button-only',
+  left: 'ds-pill-button-left',
+  right: 'ds-pill-button-right'
+};
+
+const DSPillButton = props => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);
+
+  const {
+    type,
+    children
+  } = propsWithDefaults,
+        rest = _objectWithoutProperties(propsWithDefaults, _excluded);
+
+  return /*#__PURE__*/jsx(StyledPillButton, _objectSpread(_objectSpread({}, rest), {}, {
+    buttonType: "raw",
+    className: "".concat(typeToClassName[type], " ").concat(rest.className),
+    children: children
+  }));
+};
+
+const DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');
+DSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;
+
+export { DSPillButton, DSPillButtonWithSchema };

package/esm/components/PillGroup.js

@@ -0,0 +1,53 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React, { createContext, useMemo, useCallback } from 'react';
+import { describe } from 'react-desc';
+import { uid } from 'uid';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { DSPillGroupPropTypes, DSPillGroupDefaultProps } from '../props.js';
+import { StyledPillGroup } from './styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+const DSPillGroupV2Context = /*#__PURE__*/createContext({
+  onKeyboardRemove: () => null
+});
+
+const DSPillGroupV2 = props => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);
+  const pillGroupUid = useMemo(() => "ds-pill-group-".concat(uid()), []);
+  const {
+    children,
+    width,
+    innerRef
+  } = propsWithDefaults;
+  const onKeyboardRemove = useCallback(pillUid => {
+    const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
+    const pillIndex = elems.findIndex(elem => elem.id === pillUid);
+
+    if (pillIndex > 0) {
+      elems[pillIndex - 1].focus();
+    } else if (pillIndex + 1 < elems.length) {
+      elems[pillIndex + 1].focus();
+    }
+  }, [pillGroupUid]);
+  return /*#__PURE__*/_jsx(DSPillGroupV2Context.Provider, {
+    value: {
+      onKeyboardRemove
+    }
+  }, void 0, /*#__PURE__*/jsx(StyledPillGroup, {
+    width: width,
+    id: pillGroupUid,
+    cols: React.Children.map(children, () => 'auto'),
+    gutter: "2px",
+    ref: innerRef,
+    children: children
+  }));
+};
+
+const DSPillGroupV2WithSchema = describe(DSPillGroupV2);
+DSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes;
+
+export { DSPillGroupV2, DSPillGroupV2Context, DSPillGroupV2WithSchema };

package/esm/components/index.js

@@ -0,0 +1,3 @@
+export { DSPillV2, DSPillV2WithSchema } from './Pill.js';
+export { DSPillGroupV2, DSPillGroupV2Context, DSPillGroupV2WithSchema } from './PillGroup.js';
+export { DSPillButton, DSPillButtonWithSchema } from './PillButton.js';

package/esm/components/styled.js

@@ -0,0 +1,67 @@
+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';
+
+var _templateObject, _templateObject2;
+// Common CSS
+// =============================================================================
+
+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);
+};
+
+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
+// =============================================================================
+
+const StyledLabelPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-j0tlch-0"
+})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold, props => props.hasIcon ? '0px !important' : '12px');
+const StyledValuePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-j0tlch-1"
+})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.regular, props => props.hasIcon ? '0px !important' : '12px');
+const StyledInputPillWrapper = /*#__PURE__*/styled(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, 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(Grid).withConfig({
+  componentId: "sc-j0tlch-3"
+})(["", " 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, 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, props => props.theme.fontWeights.regular); // =============================================================================
+// Pill group
+// =============================================================================
+
+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;}}}"], _ref2 => {
+  let {
+    width
+  } = _ref2;
+  return width;
+}); // =============================================================================
+// Extra stuff
+// =============================================================================
+
+const StyledSpanWithTooltip = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-j0tlch-7"
+})(["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;"], 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 };

package/esm/components/types/DropdownPill.js

@@ -0,0 +1,76 @@
+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';
+import { ChevronSmallDown } from '@elliemae/ds-icons';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { StyledDropdownPillWrapper } from '../styled.js';
+import { setMultipleRefs } from '../../utils.js';
+import { DSPillButton } from '../PillButton.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const DropdownPill = /*#__PURE__*/React.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__*/_jsx(StyledDropdownPillWrapper, {
+    size: size,
+    id: pillUid,
+    className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
+    "data-testid": "ds-pill-wrapper",
+    cols: ['auto', '24px'],
+    gutter: "2px",
+    alignItems: "center",
+    justifyItems: "center"
+  }, 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: {
+      w: '100%',
+      h: '100%'
+    },
+    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 };

package/esm/components/types/InputPill.js

@@ -0,0 +1,65 @@
+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';
+
+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]);
+  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
+  }, void 0, /*#__PURE__*/_jsx(InputComponent, {
+    id: pillUid,
+    className: "ds-pill-focus-point",
+    "data-testid": "ds-pill-input",
+    innerRef: setMultipleRefs(ref, innerRef),
+    value: label,
+    onChange: onInputChange,
+    placeholder: inputPlaceholder,
+    onFocus: () => setInputHasFocus(true),
+    onBlur: () => setInputHasFocus(false),
+    disableTooltip: false
+  }), label !== '' && /*#__PURE__*/_jsx(DSPillButton, {
+    id: pillUid,
+    "data-testid": "ds-pill-clear-icon",
+    innerRef: innerRef,
+    onClick: onCloseIconClick,
+    onKeyDown: onCloseIconClick,
+    "aria-label": "Clear input",
+    type: "right"
+  }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
+    size: "s",
+    color: ['brand-primary', '700']
+  })));
+});
+
+export { InputPill };

package/esm/components/types/LabelPill.js

@@ -0,0 +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';
+
+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__*/_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(notFalse => notFalse),
+    gutter: "xxxs",
+    hasIcon: iconLeft !== null
+  }, void 0, iconLeft, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label));
+});
+
+export { LabelPill };

package/esm/components/types/ReadOnlyPill.js

@@ -0,0 +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';
+
+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__*/_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(notFalse => notFalse),
+    gutter: "xxxs",
+    hasIconRight: hasIconRight,
+    hasIconLeft: hasIconLeft
+  }, void 0, iconLeft, label ? /*#__PURE__*/_jsx(TextComponent, {}, void 0, label) : null, iconRight);
+});
+
+export { ReadOnlyPill };