@elliemae/ds-pills 3.0.0-next.9 → 3.0.1

package/dist/cjs/props.js

@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var props_exports = {};
 __export(props_exports, {
   DSPillButtonDefaultProps: () => DSPillButtonDefaultProps,
@@ -34,6 +27,7 @@ __export(props_exports, {
   DSPillV2DefaultProps: () => DSPillV2DefaultProps,
   DSPillV2PropTypes: () => DSPillV2PropTypes
 });
+module.exports = __toCommonJS(props_exports);
 var React = __toESM(require("react"));
 var import_react_desc = require("react-desc");
 var import_ds_form = require("@elliemae/ds-form");
@@ -53,8 +47,11 @@ const DSPillV2PropTypes = {
   onInputChange: import_react_desc.PropTypes.func.description("Callback triggered when user provides input to the input pill").defaultValue(() => null),
   onInputClear: import_react_desc.PropTypes.func.description("Callback triggered when the user clears an input pill").defaultValue(() => null),
   inputWidth: import_react_desc.PropTypes.number.description("Width in pixels for the input tag in the input pill").defaultValue(150),
+  inputId: import_react_desc.PropTypes.string.description("ID for the input pill").defaultValue(void 0),
   dropdownProps: import_react_desc.PropTypes.object.description("Properties that will be used for the dropdown-menu").defaultValue({}),
-  onDropdownClick: import_react_desc.PropTypes.func.description("Callback when dropdown button is clicked or pressed").defaultValue(() => null)
+  onDropdownClick: import_react_desc.PropTypes.func.description("Callback when dropdown button is clicked or pressed").defaultValue(() => null),
+  disabled: import_react_desc.PropTypes.bool.description("Whether the pill should be disabled. Only for value and removable pill").defaultValue(false),
+  hasError: import_react_desc.PropTypes.bool.description("Whether the pill should be in an error state. Only for input pill").defaultValue(false)
 };
 const DSPillButtonPropTypes = {
   type: import_react_desc.PropTypes.oneOf(["only", "left", "right"]).description("The position in which this button will be placed. Only used for css styling internally").defaultValue("right"),
@@ -68,6 +65,7 @@ const DSPillGroupPropTypes = {
 const DSPillV2DefaultProps = {
   innerRef: () => null,
   disabled: false,
+  hasError: false,
   ariaLabel: "",
   size: "m",
   labelTruncated: true,
@@ -93,5 +91,4 @@ const DSPillGroupDefaultProps = {
   width: "fit-content",
   innerRef: () => null
 };
-module.exports = __toCommonJS(props_exports);
 //# sourceMappingURL=props.js.map

package/dist/cjs/props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { PropTypes } from 'react-desc';\nimport { DSInput } from '@elliemae/ds-form';\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\n\nexport const DSPillV2PropTypes = {\n  label: PropTypes.string.description('Label to show in the pill').isRequired,\n  type: pillTypes.description('The type of pill that you want to render').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n    .defaultValue(() => null),\n  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n  ariaLabel: PropTypes.string\n    .description('Aria label for the pill. If not provided we will use the label')\n    .defaultValue(''),\n  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n  iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),\n  iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n  onRemove: PropTypes.func\n    .description('Callback triggered when removing a pill with the close icon')\n    .defaultValue(() => null),\n  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n  onInputChange: PropTypes.func\n    .description('Callback triggered when user provides input to the input pill')\n    .defaultValue(() => null),\n  onInputClear: PropTypes.func\n    .description('Callback triggered when the user clears an input pill')\n    .defaultValue(() => null),\n  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n  dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n  onDropdownClick: PropTypes.func\n    .description('Callback when dropdown button is clicked or pressed')\n    .defaultValue(() => null),\n};\n\nexport const DSPillButtonPropTypes = {\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n};\n\nexport const DSPillGroupPropTypes = {\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n};\n\nexport const DSPillV2DefaultProps = {\n  innerRef: () => null,\n  disabled: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: DSInput,\n  dropdownProps: {},\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps = {\n  type: 'right',\n  width: '100%',\n  height: '100%',\n};\n\nexport const DSPillGroupDefaultProps = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,wBAA0B;AAC1B,qBAAwB;AAExB,MAAM,YAAY,4BAAU,MAAM,CAAC,SAAS,SAAS,SAAS,YAAY,aAAa;AAEhF,MAAM,oBAAoB;AAAA,EAC/B,OAAO,4BAAU,OAAO,YAAY,6BAA6B;AAAA,EACjE,MAAM,UAAU,YAAY,4CAA4C;AAAA,EACxE,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,OACxD,YAAY,oGACZ,aAAa,MAAM;AAAA,EACtB,MAAM,4BAAU,MAAM,CAAC,KAAK,MAAM,YAAY,sBAAsB,aAAa;AAAA,EACjF,WAAW,4BAAU,OAClB,YAAY,kEACZ,aAAa;AAAA,EAChB,gBAAgB,4BAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA,EAC/F,cAAc,4BAAU,OAAO,YAAY,iDAAiD,aAAa;AAAA,EACzG,UAAU,4BAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EACzG,WAAW,4BAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EAC1G,UAAU,4BAAU,KACjB,YAAY,+DACZ,aAAa,MAAM;AAAA,EACtB,kBAAkB,4BAAU,OAAO,YAAY,kCAAkC,aAAa;AAAA,EAC9F,eAAe,4BAAU,KACtB,YAAY,iEACZ,aAAa,MAAM;AAAA,EACtB,cAAc,4BAAU,KACrB,YAAY,yDACZ,aAAa,MAAM;AAAA,EACtB,YAAY,4BAAU,OAAO,YAAY,uDAAuD,aAAa;AAAA,EAC7G,eAAe,4BAAU,OAAO,YAAY,sDAAsD,aAAa;AAAA,EAC/G,iBAAiB,4BAAU,KACxB,YAAY,uDACZ,aAAa,MAAM;AAAA;AAGjB,MAAM,wBAAwB;AAAA,EACnC,MAAM,4BAAU,MAAM,CAAC,QAAQ,QAAQ,UACpC,YAAY,0FACZ,aAAa;AAAA,EAChB,OAAO,4BAAU,OAAO,YAAY,uBAAuB,aAAa;AAAA,EACxE,QAAQ,4BAAU,OAAO,YAAY,wBAAwB,aAAa;AAAA;AAGrE,MAAM,uBAAuB;AAAA,EAClC,OAAO,4BAAU,OAAO,YAAY,sBAAsB,aAAa;AAAA,EACvE,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,OACxD,YAAY,uCACZ,aAAa,MAAM;AAAA;AAGjB,MAAM,uBAAuB;AAAA,EAClC,UAAU,MAAM;AAAA,EAChB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA;AAGL,MAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA;AAGH,MAAM,0BAA0B;AAAA,EACrC,OAAO;AAAA,EACP,UAAU,MAAM;AAAA;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { PropTypes } from 'react-desc';\nimport { DSInput } from '@elliemae/ds-form';\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\n\nexport const DSPillV2PropTypes = {\n  label: PropTypes.string.description('Label to show in the pill').isRequired,\n  type: pillTypes.description('The type of pill that you want to render').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n    .defaultValue(() => null),\n  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n  ariaLabel: PropTypes.string\n    .description('Aria label for the pill. If not provided we will use the label')\n    .defaultValue(''),\n  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n  iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),\n  iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n  onRemove: PropTypes.func\n    .description('Callback triggered when removing a pill with the close icon')\n    .defaultValue(() => null),\n  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n  onInputChange: PropTypes.func\n    .description('Callback triggered when user provides input to the input pill')\n    .defaultValue(() => null),\n  onInputClear: PropTypes.func\n    .description('Callback triggered when the user clears an input pill')\n    .defaultValue(() => null),\n  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n  dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n  onDropdownClick: PropTypes.func\n    .description('Callback when dropdown button is clicked or pressed')\n    .defaultValue(() => null),\n  disabled: PropTypes.bool\n    .description('Whether the pill should be disabled. Only for value and removable pill')\n    .defaultValue(false),\n  hasError: PropTypes.bool\n    .description('Whether the pill should be in an error state. Only for input pill')\n    .defaultValue(false),\n};\n\nexport const DSPillButtonPropTypes = {\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n};\n\nexport const DSPillGroupPropTypes = {\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n};\n\nexport const DSPillV2DefaultProps = {\n  innerRef: () => null,\n  disabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: DSInput,\n  dropdownProps: {},\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps = {\n  type: 'right',\n  width: '100%',\n  height: '100%',\n};\n\nexport const DSPillGroupDefaultProps = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/utils.js

@@ -4,31 +4,25 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
   setMultipleRefs: () => setMultipleRefs
 });
+module.exports = __toCommonJS(utils_exports);
 var React = __toESM(require("react"));
 const setMultipleRefs = (...refs) => (_ref) => {
   refs.forEach((ref) => {
@@ -42,5 +36,4 @@ const setMultipleRefs = (...refs) => (_ref) => {
       ref.current = _ref;
   });
 };
-module.exports = __toCommonJS(utils_exports);
 //# sourceMappingURL=utils.js.map

package/dist/cjs/utils.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["type refInterfaceType = React.MutableRefObject<HTMLElement> | ((_ref: HTMLElement) => void);\n\nexport const setMultipleRefs =\n  (...refs: refInterfaceType[]) =>\n  (_ref: HTMLElement): void => {\n    refs.forEach((ref) => {\n      if (!ref || !_ref) return;\n      if (typeof ref === 'function') {\n        ref(_ref);\n        return;\n      }\n      if (ref) ref.current = _ref;\n    });\n  };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,kBACX,IAAI,SACJ,CAAC,SAA4B;AAC3B,OAAK,QAAQ,CAAC,QAAQ;AACpB,QAAI,CAAC,OAAO,CAAC;AAAM;AACnB,QAAI,OAAO,QAAQ,YAAY;AAC7B,UAAI;AACJ;AAAA;AAEF,QAAI;AAAK,UAAI,UAAU;AAAA;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,kBACX,IAAI,SACJ,CAAC,SAA4B;AAC3B,OAAK,QAAQ,CAAC,QAAQ;AACpB,QAAI,CAAC,OAAO,CAAC;AAAM;AACnB,QAAI,OAAO,QAAQ,YAAY;AAC7B,UAAI,IAAI;AACR;AAAA,IACF;AACA,QAAI;AAAK,UAAI,UAAU;AAAA,EACzB,CAAC;AACH;",
   "names": []
 }

package/dist/esm/components/Pill.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
 import * as React from "react";
 import React2 from "react";
 import { describe } from "react-desc";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
 import { DSPillV2DefaultProps, DSPillV2PropTypes } from "../props";
 import { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from "./types";
 const pillComponentGetter = {
@@ -36,6 +36,7 @@ const DSPillV2 = (props) => {
   return /* @__PURE__ */ React2.createElement(PillComponent, __spreadValues({}, propsWithDefaults));
 };
 DSPillV2.propTypes = DSPillV2PropTypes;
+DSPillV2.displayName = "DSPillV2";
 const DSPillV2WithSchema = describe(DSPillV2).description("Pill");
 DSPillV2WithSchema.propTypes = DSPillV2PropTypes;
 export {

package/dist/esm/components/Pill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Pill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPillProps } from '../index.d';\nimport { DSPillV2DefaultProps, DSPillV2PropTypes } from '../props';\nimport { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from './types';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillProps>> = {\n  dropdown: DropdownPill,\n  input: InputPill,\n  label: LabelPill,\n  readonly: ReadOnlyPill,\n  removable: RemovablePill,\n  value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillProps> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes);\n  const { type } = propsWithDefaults;\n  const PillComponent = pillComponentGetter[type];\n\n  return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.propTypes = DSPillV2PropTypes;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypes;\n\nexport { DSPillV2, DSPillV2WithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AAEA;AACA;AAEA,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA;AAGT,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,oBAAoB,6BAA6B,OAAO;AAC9D,iCAA+B,mBAAmB;AAClD,QAAM,EAAE,SAAS;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,qCAAC,eAAD,mBAAmB;AAAA;AAG5B,SAAS,YAAY;AACrB,MAAM,qBAAqB,SAAS,UAAU,YAAY;AAC1D,mBAAmB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSPillProps } from '../index.d';\nimport { DSPillV2DefaultProps, DSPillV2PropTypes } from '../props';\nimport { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from './types';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillProps>> = {\n  dropdown: DropdownPill,\n  input: InputPill,\n  label: LabelPill,\n  readonly: ReadOnlyPill,\n  removable: RemovablePill,\n  value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillProps> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes);\n  const { type } = propsWithDefaults;\n  const PillComponent = pillComponentGetter[type];\n\n  return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.propTypes = DSPillV2PropTypes;\nDSPillV2.displayName = 'DSPillV2';\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypes;\n\nexport { DSPillV2, DSPillV2WithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AAEA;AACA;AAEA,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,oBAAoB,6BAA6B,OAAO,oBAAoB;AAClF,iCAA+B,mBAAmB,iBAAiB;AACnE,QAAM,EAAE,SAAS;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,qCAAC,kCAAkB,kBAAmB;AAC/C;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
   "names": []
 }

package/dist/esm/components/PillButton.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 import * as React from "react";
 import React2 from "react";
 import { describe } from "react-desc";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
 import { StyledPillButton } from "./styled";
 import { DSPillButtonDefaultProps, DSPillButtonPropTypes } from "../props";
 const typeToClassName = {
@@ -50,6 +50,7 @@ const DSPillButton = (props) => {
   }), children);
 };
 DSPillButton.propTypes = DSPillButtonPropTypes;
+DSPillButton.displayName = "DSPillButton";
 const DSPillButtonWithSchema = describe(DSPillButton).description("Pill button");
 DSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;
 export {

package/dist/esm/components/PillButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/PillButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { DSButtonPropsT } from '@elliemae/ds-button';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { StyledPillButton } from './styled';\nimport { DSPillButtonDefaultProps, DSPillButtonPropTypes } from '../props';\n\nconst typeToClassName = {\n  only: 'ds-pill-button-only',\n  left: 'ds-pill-button-left',\n  right: 'ds-pill-button-right',\n};\n\nconst DSPillButton: React.ComponentType<DSButtonPropsT> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);\n\n  const { type, children, ...rest } = propsWithDefaults;\n\n  return (\n    <StyledPillButton {...rest} buttonType=\"raw\" className={`${typeToClassName[type]} ${rest.className}`}>\n      {children}\n    </StyledPillButton>\n  );\n};\n\nDSPillButton.propTypes = DSPillButtonPropTypes;\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAEA;AACA;AACA;AAEA,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA;AAGT,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,oBAAoB,6BAA6B,OAAO;AAC9D,iCAA+B,mBAAmB;AAElD,QAAoC,wBAA5B,QAAM,aAAsB,IAAT,iBAAS,IAAT,CAAnB,QAAM;AAEd,SACE,qCAAC,kBAAD,iCAAsB,OAAtB;AAAA,IAA4B,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,MACtF;AAAA;AAKP,aAAa,YAAY;AACzB,MAAM,yBAAyB,SAAS,cAAc,YAAY;AAClE,uBAAuB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { DSButtonPropsT } from '@elliemae/ds-button';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { StyledPillButton } from './styled';\nimport { DSPillButtonDefaultProps, DSPillButtonPropTypes } from '../props';\n\nconst typeToClassName = {\n  only: 'ds-pill-button-only',\n  left: 'ds-pill-button-left',\n  right: 'ds-pill-button-right',\n};\n\nconst DSPillButton: React.ComponentType<DSButtonPropsT> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);\n\n  const { type, children, ...rest } = propsWithDefaults;\n\n  return (\n    <StyledPillButton {...rest} buttonType=\"raw\" className={`${typeToClassName[type]} ${rest.className}`}>\n      {children}\n    </StyledPillButton>\n  );\n};\n\nDSPillButton.propTypes = DSPillButtonPropTypes;\nDSPillButton.displayName = 'DSPillButton';\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAEA;AACA;AACA;AAEA,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,oBAAoB,6BAA6B,OAAO,wBAAwB;AACtF,iCAA+B,mBAAmB,qBAAqB;AAEvE,QAAoC,wBAA5B,QAAM,aAAsB,IAAT,iBAAS,IAAT,CAAnB,QAAM;AAEd,SACE,qCAAC,mDAAqB,OAArB;AAAA,IAA2B,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,MACtF,QACH;AAEJ;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY,EAAE,YAAY,aAAa;AAC/E,uBAAuB,YAAY;",
   "names": []
 }

package/dist/esm/components/PillGroup.js

@@ -25,7 +25,7 @@ import {
   useMemoMergePropsWithDefault,
   useValidateTypescriptPropTypes,
   useGetGlobalAttributes
-} from "@elliemae/ds-props-helpers";
+} from "@elliemae/ds-utilities";
 import { DSPillGroupDefaultProps, DSPillGroupPropTypes } from "../props";
 import { StyledPillGroup } from "./styled";
 const DSPillGroupV2Context = createContext({
@@ -68,6 +68,7 @@ const DSPillGroupV2 = (props) => {
   }), children));
 };
 DSPillGroupV2.propTypes = DSPillGroupPropTypes;
+DSPillGroupV2.displayName = "DSPillGroupV2";
 const DSPillGroupV2WithSchema = describe(DSPillGroupV2);
 DSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes;
 export {

package/dist/esm/components/PillGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/PillGroup.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { createContext, useCallback, useMemo, WeakValidationMap } from 'react';\nimport { uid } from 'uid';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport { DSPillGroupProps } from '../index.d';\nimport { DSPillGroupDefaultProps, DSPillGroupPropTypes } from '../props';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{\n  onKeyboardRemove: (pillUid: string) => void;\n  onKeyboardNavigation: (pillUid: string, step: number, e: KeyboardEvent) => void;\n}>({\n  onKeyboardRemove: () => null,\n  onKeyboardNavigation: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupProps> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults);\n  const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n  const { children, width, innerRef } = propsWithDefaults;\n  const onKeyboardRemove = useCallback(\n    (pillUid: string) => {\n      const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n      const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n      if (pillIndex > 0) {\n        elems[pillIndex - 1].focus();\n      } else if (pillIndex + 1 < elems.length) {\n        elems[pillIndex + 1].focus();\n      }\n    },\n    [pillGroupUid],\n  );\n  const onKeyboardNavigation = useCallback(\n    (pillUid: string, step: number, e: KeyboardEvent) => {\n      const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n      const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n      if (pillIndex >= 0) {\n        if (elems[pillIndex + step]) {\n          e.stopPropagation();\n          elems[pillIndex + step].focus();\n        }\n      }\n    },\n    [pillGroupUid],\n  );\n\n  return (\n    <DSPillGroupV2Context.Provider value={{ onKeyboardRemove, onKeyboardNavigation }}>\n      <StyledPillGroup\n        {...globalAttrs}\n        width={width}\n        id={pillGroupUid}\n        cols={React.Children.map(children, () => 'auto')}\n        gutter=\"2px\"\n        ref={innerRef}\n      >\n        {children}\n      </StyledPillGroup>\n    </DSPillGroupV2Context.Provider>\n  );\n};\n\nDSPillGroupV2.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AAEO,MAAM,uBAAuB,cAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAAA;AAG9B,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,oBAAoB,6BAA6B,OAAO;AAC9D,iCAA+B,mBAAmB;AAElD,QAAM,cAAc,uBAAuB;AAC3C,QAAM,eAAe,QAAQ,MAAM,iBAAiB,SAAS;AAC7D,QAAM,EAAE,UAAU,OAAO,aAAa;AACtC,QAAM,mBAAmB,YACvB,CAAC,YAAoB;AACnB,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI;AAEhD,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO;AAExD,QAAI,YAAY,GAAG;AACjB,YAAM,YAAY,GAAG;AAAA,eACZ,YAAY,IAAI,MAAM,QAAQ;AACvC,YAAM,YAAY,GAAG;AAAA;AAAA,KAGzB,CAAC;AAEH,QAAM,uBAAuB,YAC3B,CAAC,SAAiB,MAAc,MAAqB;AACnD,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI;AAEhD,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO;AAExD,QAAI,aAAa,GAAG;AAClB,UAAI,MAAM,YAAY,OAAO;AAC3B,UAAE;AACF,cAAM,YAAY,MAAM;AAAA;AAAA;AAAA,KAI9B,CAAC;AAGH,SACE,qCAAC,qBAAqB,UAAtB;AAAA,IAA+B,OAAO,EAAE,kBAAkB;AAAA,KACxD,qCAAC,iBAAD,iCACM,cADN;AAAA,IAEE;AAAA,IACA,IAAI;AAAA,IACJ,MAAM,OAAM,SAAS,IAAI,UAAU,MAAM;AAAA,IACzC,QAAO;AAAA,IACP,KAAK;AAAA,MAEJ;AAAA;AAMT,cAAc,YAAY;AAC1B,MAAM,0BAA0B,SAAS;AACzC,wBAAwB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { createContext, useCallback, useMemo, WeakValidationMap } from 'react';\nimport { uid } from 'uid';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useGetGlobalAttributes,\n} from '@elliemae/ds-utilities';\nimport { DSPillGroupProps } from '../index.d';\nimport { DSPillGroupDefaultProps, DSPillGroupPropTypes } from '../props';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{\n  onKeyboardRemove: (pillUid: string) => void;\n  onKeyboardNavigation: (pillUid: string, step: number, e: KeyboardEvent) => void;\n}>({\n  onKeyboardRemove: () => null,\n  onKeyboardNavigation: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupProps> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults);\n  const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n  const { children, width, innerRef } = propsWithDefaults;\n  const onKeyboardRemove = useCallback(\n    (pillUid: string) => {\n      const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n      const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n      if (pillIndex > 0) {\n        elems[pillIndex - 1].focus();\n      } else if (pillIndex + 1 < elems.length) {\n        elems[pillIndex + 1].focus();\n      }\n    },\n    [pillGroupUid],\n  );\n  const onKeyboardNavigation = useCallback(\n    (pillUid: string, step: number, e: KeyboardEvent) => {\n      const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n      const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n      if (pillIndex >= 0) {\n        if (elems[pillIndex + step]) {\n          e.stopPropagation();\n          elems[pillIndex + step].focus();\n        }\n      }\n    },\n    [pillGroupUid],\n  );\n\n  return (\n    <DSPillGroupV2Context.Provider value={{ onKeyboardRemove, onKeyboardNavigation }}>\n      <StyledPillGroup\n        {...globalAttrs}\n        width={width}\n        id={pillGroupUid}\n        cols={React.Children.map(children, () => 'auto')}\n        gutter=\"2px\"\n        ref={innerRef}\n      >\n        {children}\n      </StyledPillGroup>\n    </DSPillGroupV2Context.Provider>\n  );\n};\n\nDSPillGroupV2.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\nDSPillGroupV2.displayName = 'DSPillGroupV2';\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AAEO,MAAM,uBAAuB,cAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAC9B,CAAC;AAED,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,oBAAoB,6BAA6B,OAAO,uBAAuB;AACrF,iCAA+B,mBAAmB,oBAAoB;AAEtE,QAAM,cAAc,uBAAuB,iBAAiB;AAC5D,QAAM,eAAe,QAAQ,MAAM,iBAAiB,IAAI,KAAK,CAAC,CAAC;AAC/D,QAAM,EAAE,UAAU,OAAO,aAAa;AACtC,QAAM,mBAAmB,YACvB,CAAC,YAAoB;AACnB,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,QAAI,YAAY,GAAG;AACjB,YAAM,YAAY,GAAG,MAAM;AAAA,IAC7B,WAAW,YAAY,IAAI,MAAM,QAAQ;AACvC,YAAM,YAAY,GAAG,MAAM;AAAA,IAC7B;AAAA,EACF,GACA,CAAC,YAAY,CACf;AACA,QAAM,uBAAuB,YAC3B,CAAC,SAAiB,MAAc,MAAqB;AACnD,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,QAAI,aAAa,GAAG;AAClB,UAAI,MAAM,YAAY,OAAO;AAC3B,UAAE,gBAAgB;AAClB,cAAM,YAAY,MAAM,MAAM;AAAA,MAChC;AAAA,IACF;AAAA,EACF,GACA,CAAC,YAAY,CACf;AAEA,SACE,qCAAC,qBAAqB,UAArB;AAAA,IAA8B,OAAO,EAAE,kBAAkB,qBAAqB;AAAA,KAC7E,qCAAC,kDACK,cADL;AAAA,IAEC;AAAA,IACA,IAAI;AAAA,IACJ,MAAM,OAAM,SAAS,IAAI,UAAU,MAAM,MAAM;AAAA,IAC/C,QAAO;AAAA,IACP,KAAK;AAAA,MAEJ,QACH,CACF;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/esm/components/styled.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { css } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSButtonV2 } from "@elliemae/ds-button";
-const borderOutside = (color, size = 1, zIndex = 2, borderRadius = "12px") => css`
+const borderOutside = (color, size = 1, borderRadius = "12px") => css`
   :after {
     content: ' ';
     position: absolute;
@@ -17,7 +17,6 @@ const borderOutside = (color, size = 1, zIndex = 2, borderRadius = "12px") => cs
     border-bottom-left-radius: ${borderRadius};
     border-bottom-right-radius: ${borderRadius};
     pointer-events: none;
-    z-index: ${zIndex};
   }
 `;
 const commonPillWrapperCss = css`
@@ -61,7 +60,11 @@ const StyledInputPillWrapper = styled(Grid)`
   background: ${(props) => props.theme.colors.neutral["000"]};
   padding: 0;
 
-  ${({ value, theme }) => borderOutside(value === "" ? theme.colors.neutral[400] : theme.colors.brand[500])}
+  ${({ theme, hasError }) => {
+  if (hasError)
+    return borderOutside(theme.colors.danger[900]);
+  return borderOutside(theme.colors.brand[500]);
+}}
 
   :focus-within {
     ${(props) => props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : ""}

package/dist/esm/components/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, zIndex = 2, borderRadius = '12px') => css`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ${size}px solid ${({ disabled, theme }) => (disabled ? theme.colors.neutral[400] : color)};\n    border-top-left-radius: ${borderRadius};\n    border-top-right-radius: ${borderRadius};\n    border-bottom-left-radius: ${borderRadius};\n    border-bottom-right-radius: ${borderRadius};\n    pointer-events: none;\n    z-index: ${zIndex};\n  }\n`;\n\nconst commonPillWrapperCss = css<{ size: 'm' | 's' }>`\n  height: ${(props) => (props?.size === 'm' ? '24px' : '18px')};\n\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['080'] : theme.colors.brand[200])};\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  user-select: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'])};\n  ${(props) => borderOutside(props.theme.colors.brand[300])};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<{ value: string; inputWidth: number; inputHasFocus: boolean }>`\n  ${commonPillWrapperCss}\n\n  background: ${(props) => props.theme.colors.neutral['000']};\n  padding: 0;\n\n  ${({ value, theme }) => borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500])}\n\n  :focus-within {\n    ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '')}\n  }\n\n  :active {\n    ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '')}\n  }\n\n  & .em-ds-input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n    padding: 0;\n    margin: 0 0 0 8px;\n  }\n\n  & .em-ds-input__tooltip-ref {\n    height: 100%;\n  }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{ hasIconRight: boolean; hasIconLeft: boolean }>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n  padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding: 0 0 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n  width: ${({ width }) => width};\n\n  // Pill edges\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n\n  // Pill paddings to the left / right\n  & .ds-pill-wrapper-label,\n  & .ds-pill-wrapper-value,\n  & .ds-pill-wrapper-readonly {\n    &:not(:first-of-type) {\n      padding-left: 8px;\n    }\n    &:not(:last-of-type) {\n      padding-right: 8px;\n    }\n  }\n\n  & .ds-pill-wrapper-removable:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper {\n    :not(:first-of-type) {\n      .ds-pill-button-left {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    :not(:last-of-type) {\n      .ds-pill-button-right {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n  outline: none;\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}\n  }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string; height: string }>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  width: ${(props) => props.width};\n  height: ${(props) => props.height};\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit')}\n  }\n\n  cursor: pointer;\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\ninterface InputPillWrapperProps {\n  value: string;\n  inputWidth: number;\n  inputHasFocus: boolean;\n  hasError: boolean;\n}\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, borderRadius = '12px') => css`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ${size}px solid ${({ disabled, theme }) => (disabled ? theme.colors.neutral[400] : color)};\n    border-top-left-radius: ${borderRadius};\n    border-top-right-radius: ${borderRadius};\n    border-bottom-left-radius: ${borderRadius};\n    border-bottom-right-radius: ${borderRadius};\n    pointer-events: none;\n  }\n`;\n\nconst commonPillWrapperCss = css<{ size: 'm' | 's' }>`\n  height: ${(props) => (props?.size === 'm' ? '24px' : '18px')};\n\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['080'] : theme.colors.brand[200])};\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  user-select: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'])};\n  ${(props) => borderOutside(props.theme.colors.brand[300])};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<InputPillWrapperProps>`\n  ${commonPillWrapperCss}\n\n  background: ${(props) => props.theme.colors.neutral['000']};\n  padding: 0;\n\n  ${({ theme, hasError }) => {\n    if (hasError) return borderOutside(theme.colors.danger[900]);\n    return borderOutside(theme.colors.brand[500]);\n  }}\n\n  :focus-within {\n    ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '')}\n  }\n\n  :active {\n    ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '')}\n  }\n\n  & .em-ds-input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n    padding: 0;\n    margin: 0 0 0 8px;\n  }\n\n  & .em-ds-input__tooltip-ref {\n    height: 100%;\n  }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{ hasIconRight: boolean; hasIconLeft: boolean }>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n  padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding: 0 0 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n  width: ${({ width }) => width};\n\n  // Pill edges\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n\n  // Pill paddings to the left / right\n  & .ds-pill-wrapper-label,\n  & .ds-pill-wrapper-value,\n  & .ds-pill-wrapper-readonly {\n    &:not(:first-of-type) {\n      padding-left: 8px;\n    }\n    &:not(:last-of-type) {\n      padding-right: 8px;\n    }\n  }\n\n  & .ds-pill-wrapper-removable:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper {\n    :not(:first-of-type) {\n      .ds-pill-button-left {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    :not(:last-of-type) {\n      .ds-pill-button-right {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n  outline: none;\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}\n  }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string; height: string }>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  width: ${(props) => props.width};\n  height: ${(props) => props.height};\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit')}\n  }\n\n  cursor: pointer;\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/components/types/DropdownPill.js

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React2, { useMemo, useRef } from "react";
-import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu";
+import { DSDropdownMenuV2 } from "@elliemae/ds-common";
 import { uid } from "uid";
 import { ChevronSmallDown } from "@elliemae/ds-icons";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";

package/dist/esm/components/types/DropdownPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/DropdownPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n    const chevronRef = useRef(null);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledDropdownPillWrapper\n        size={size}\n        id={pillUid}\n        className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={['auto', '24px']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent>{label}</TextComponent>\n        <DSDropdownMenuV2\n          placementOrderPreference={[\n            'bottom-start',\n            'bottom',\n            'bottom-end',\n            'right-end',\n            'top-start',\n            'top',\n            'top-end',\n          ]}\n          {...dropdownProps}\n          onClickOutside={(e) => {\n            if (e.code === 'Escape') chevronRef.current.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperStyles={{ w: '100%', h: '100%' }}\n        >\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-pill-dropdown-chevron\"\n            innerRef={setMultipleRefs(chevronRef, innerRef)}\n            aria-label={ariaLabel || label}\n            type=\"right\"\n            onClick={onDropdownClick}\n          >\n            <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n          </DSPillButton>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEO,MAAM,eAAe,OAAM,KAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,sBAAsB;AACxF,QAAM,aAAa,OAAO;AAE1B,QAAM,UAAU,QAAQ,MAAM,WAAW,SAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AAEV,SACE,qCAAC,2BAAD;AAAA,IACE;AAAA,IACA,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,KAEb,qCAAC,eAAD,MAAgB,QAChB,qCAAC,kBAAD;AAAA,IACE,0BAA0B;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,KAEE,gBAVN;AAAA,IAWE,gBAAgB,CAAC,MAAM;AACrB,UAAI,EAAE,SAAS;AAAU,mBAAW,QAAQ;AAC5C,UAAI,cAAc;AAAgB,sBAAc,eAAe;AAAA;AAAA,IAEjE,eAAe,EAAE,GAAG,QAAQ,GAAG;AAAA,MAE/B,qCAAC,cAAD;AAAA,IACE,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,gBAAgB,YAAY;AAAA,IACtC,cAAY,aAAa;AAAA,IACzB,MAAK;AAAA,IACL,SAAS;AAAA,KAET,qCAAC,kBAAD;AAAA,IAAkB,OAAO,CAAC,iBAAiB;AAAA,IAAQ,OAAO;AAAA,IAAI,QAAQ;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-common';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n    const chevronRef = useRef(null);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledDropdownPillWrapper\n        size={size}\n        id={pillUid}\n        className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={['auto', '24px']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent>{label}</TextComponent>\n        <DSDropdownMenuV2\n          placementOrderPreference={[\n            'bottom-start',\n            'bottom',\n            'bottom-end',\n            'right-end',\n            'top-start',\n            'top',\n            'top-end',\n          ]}\n          {...dropdownProps}\n          onClickOutside={(e) => {\n            if (e.code === 'Escape') chevronRef.current.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperStyles={{ w: '100%', h: '100%' }}\n        >\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-pill-dropdown-chevron\"\n            innerRef={setMultipleRefs(chevronRef, innerRef)}\n            aria-label={ariaLabel || label}\n            type=\"right\"\n            onClick={onDropdownClick}\n          >\n            <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n          </DSPillButton>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEO,MAAM,eAAe,OAAM,KAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,sBAAsB;AACxF,QAAM,aAAa,OAAO,IAAI;AAE9B,QAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,KAAK,CAAC,CAAC;AAEpD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAU,IAC/D,OAAM;AAEV,SACE,qCAAC;AAAA,IACC;AAAA,IACA,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,IACrB,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,KAEb,qCAAC,qBAAe,KAAM,GACtB,qCAAC;AAAA,IACC,0BAA0B;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,KACI,gBAVL;AAAA,IAWC,gBAAgB,CAAC,MAAM;AACrB,UAAI,EAAE,SAAS;AAAU,mBAAW,QAAQ,MAAM;AAClD,UAAI,cAAc;AAAgB,sBAAc,eAAe,CAAC;AAAA,IAClE;AAAA,IACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,MAEtC,qCAAC;AAAA,IACC,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,gBAAgB,YAAY,QAAQ;AAAA,IAC9C,cAAY,aAAa;AAAA,IACzB,MAAK;AAAA,IACL,SAAS;AAAA,KAET,qCAAC;AAAA,IAAiB,OAAO,CAAC,iBAAiB,KAAK;AAAA,IAAG,OAAO;AAAA,IAAI,QAAQ;AAAA,GAAI,CAC5E,CACF,CACF;AAEJ,CACF;",
   "names": []
 }

package/dist/esm/components/types/InputPill.js

@@ -5,10 +5,21 @@ import { CloseXsmall } from "@elliemae/ds-icons";
 import { StyledInputPillWrapper } from "../styled";
 import { setMultipleRefs } from "../../utils";
 import { DSPillButton } from "../PillButton";
-const InputPill = React2.memo(({ label, size, inputPlaceholder, inputWidth, inputRender, onInputChange, onInputClear, innerRef }) => {
+const InputPill = React2.memo(({
+  label,
+  size,
+  inputPlaceholder,
+  inputWidth,
+  inputRender,
+  onInputChange,
+  onInputClear,
+  innerRef,
+  hasError,
+  inputId
+}) => {
   const ref = useRef(null);
   const InputComponent = useMemo(() => inputRender, [inputRender]);
-  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
+  const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);
   const onCloseIconClick = useCallback((e) => {
     if ([void 0, "Enter", "Space"].includes(e.code)) {
       e.preventDefault();
@@ -24,7 +35,8 @@ const InputPill = React2.memo(({ label, size, inputPlaceholder, inputWidth, inpu
     cols: label === "" ? ["auto"] : ["auto", "24px"],
     inputWidth,
     value: label,
-    inputHasFocus
+    inputHasFocus,
+    hasError
   }, /* @__PURE__ */ React2.createElement(InputComponent, {
     id: pillUid,
     className: "ds-pill-focus-point",

package/dist/esm/components/types/InputPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/InputPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledInputPillWrapper } from '../styled';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const InputPill = React.memo<DSPillProps>(\n  ({ label, size, inputPlaceholder, inputWidth, inputRender, onInputChange, onInputClear, innerRef }) => {\n    const ref = useRef<HTMLElement>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const onCloseIconClick: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n      (e) => {\n        if ([undefined, 'Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          onInputClear(e);\n          ref.current.focus();\n        }\n      },\n      [onInputClear],\n    );\n\n    const [inputHasFocus, setInputHasFocus] = useState(false);\n\n    return (\n      <StyledInputPillWrapper\n        size={size}\n        className=\"ds-pill-wrapper\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={label === '' ? ['auto'] : ['auto', '24px']}\n        inputWidth={inputWidth}\n        value={label}\n        inputHasFocus={inputHasFocus}\n      >\n        <InputComponent\n          id={pillUid}\n          className=\"ds-pill-focus-point\"\n          data-testid=\"ds-pill-input\"\n          innerRef={setMultipleRefs(ref, innerRef)}\n          value={label}\n          onChange={onInputChange}\n          placeholder={inputPlaceholder}\n          onFocus={() => setInputHasFocus(true)}\n          onBlur={() => setInputHasFocus(false)}\n          disableTooltip={false}\n        />\n        {label !== '' && (\n          <DSPillButton\n            id={pillUid}\n            data-testid=\"ds-pill-clear-icon\"\n            innerRef={innerRef}\n            onClick={onCloseIconClick}\n            onKeyDown={onCloseIconClick}\n            aria-label=\"Clear input\"\n            type=\"right\"\n          >\n            <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n          </DSPillButton>\n        )}\n      </StyledInputPillWrapper>\n    );\n  },\n);\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AAEA;AACA;AACA;AAEO,MAAM,YAAY,OAAM,KAC7B,CAAC,EAAE,OAAO,MAAM,kBAAkB,YAAY,aAAa,eAAe,cAAc,eAAe;AACrG,QAAM,MAAM,OAAoB;AAEhC,QAAM,iBAAiB,QAAQ,MAAM,aAAa,CAAC;AAEnD,QAAM,UAAU,QAAQ,MAAM,WAAW,SAAS;AAElD,QAAM,mBAAyE,YAC7E,CAAC,MAAM;AACL,QAAI,CAAC,QAAW,SAAS,SAAS,SAAS,EAAE,OAAO;AAClD,QAAE;AACF,mBAAa;AACb,UAAI,QAAQ;AAAA;AAAA,KAGhB,CAAC;AAGH,QAAM,CAAC,eAAe,oBAAoB,SAAS;AAEnD,SACE,qCAAC,wBAAD;AAAA,IACE;AAAA,IACA,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,UAAU,KAAK,CAAC,UAAU,CAAC,QAAQ;AAAA,IACzC;AAAA,IACA,OAAO;AAAA,IACP;AAAA,KAEA,qCAAC,gBAAD;AAAA,IACE,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,gBAAgB,KAAK;AAAA,IAC/B,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,SAAS,MAAM,iBAAiB;AAAA,IAChC,QAAQ,MAAM,iBAAiB;AAAA,IAC/B,gBAAgB;AAAA,MAEjB,UAAU,MACT,qCAAC,cAAD;AAAA,IACE,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAW;AAAA,IACX,MAAK;AAAA,KAEL,qCAAC,aAAD;AAAA,IAAa,MAAK;AAAA,IAAI,OAAO,CAAC,iBAAiB;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledInputPillWrapper } from '../styled';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const InputPill = React.memo<DSPillProps>(\n  ({\n    label,\n    size,\n    inputPlaceholder,\n    inputWidth,\n    inputRender,\n    onInputChange,\n    onInputClear,\n    innerRef,\n    hasError,\n    inputId,\n  }) => {\n    const ref = useRef<HTMLElement>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);\n\n    const onCloseIconClick: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n      (e) => {\n        if ([undefined, 'Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          onInputClear(e);\n          ref.current.focus();\n        }\n      },\n      [onInputClear],\n    );\n\n    const [inputHasFocus, setInputHasFocus] = useState(false);\n\n    return (\n      <StyledInputPillWrapper\n        size={size}\n        className=\"ds-pill-wrapper\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={label === '' ? ['auto'] : ['auto', '24px']}\n        inputWidth={inputWidth}\n        value={label}\n        inputHasFocus={inputHasFocus}\n        hasError={hasError}\n      >\n        <InputComponent\n          id={pillUid}\n          className=\"ds-pill-focus-point\"\n          data-testid=\"ds-pill-input\"\n          innerRef={setMultipleRefs(ref, innerRef)}\n          value={label}\n          onChange={onInputChange}\n          placeholder={inputPlaceholder}\n          onFocus={() => setInputHasFocus(true)}\n          onBlur={() => setInputHasFocus(false)}\n          disableTooltip={false}\n        />\n        {label !== '' && (\n          <DSPillButton\n            id={pillUid}\n            data-testid=\"ds-pill-clear-icon\"\n            innerRef={innerRef}\n            onClick={onCloseIconClick}\n            onKeyDown={onCloseIconClick}\n            aria-label=\"Clear input\"\n            type=\"right\"\n          >\n            <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n          </DSPillButton>\n        )}\n      </StyledInputPillWrapper>\n    );\n  },\n);\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAEA;AACA;AACA;AAEO,MAAM,YAAY,OAAM,KAC7B,CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,MAAM,OAAoB,IAAI;AAEpC,QAAM,iBAAiB,QAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,QAAM,UAAU,QAAQ,MAAM,WAAW,WAAW,IAAI,KAAK,CAAC,CAAC;AAE/D,QAAM,mBAAyE,YAC7E,CAAC,MAAM;AACL,QAAI,CAAC,QAAW,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAClD,QAAE,eAAe;AACjB,mBAAa,CAAC;AACd,UAAI,QAAQ,MAAM;AAAA,IACpB;AAAA,EACF,GACA,CAAC,YAAY,CACf;AAEA,QAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;AAExD,SACE,qCAAC;AAAA,IACC;AAAA,IACA,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,KAEA,qCAAC;AAAA,IACC,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,gBAAgB,KAAK,QAAQ;AAAA,IACvC,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,IACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,IACpC,gBAAgB;AAAA,GAClB,GACC,UAAU,MACT,qCAAC;AAAA,IACC,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAW;AAAA,IACX,MAAK;AAAA,KAEL,qCAAC;AAAA,IAAY,MAAK;AAAA,IAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,GAAG,CACzD,CAEJ;AAEJ,CACF;",
   "names": []
 }

package/dist/esm/components/types/LabelPill.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/LabelPill.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledLabelPillWrapper } from '../styled';\n\nexport const LabelPill = React.memo<DSPillProps>(({ label, size, labelTruncated, iconLeft, ariaLabel }) => {\n  const TextComponent = labelTruncated\n    ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n    : React.Fragment;\n  return (\n    <StyledLabelPillWrapper\n      size={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      aria-label={ariaLabel || label}\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n    >\n      {iconLeft}\n      <TextComponent>{label}</TextComponent>\n    </StyledLabelPillWrapper>\n  );\n});\n"],
-  "mappings": "AAAA;ACCA;AACA;AAEA;AAEO,MAAM,YAAY,OAAM,KAAkB,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,gBAAgB;AACzG,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AACV,SACE,qCAAC,wBAAD;AAAA,IACE;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,QAAQ,OAAO,CAAC,aAAa;AAAA,IAC/D,QAAO;AAAA,IACP,SAAS,aAAa;AAAA,KAErB,UACD,qCAAC,eAAD,MAAgB;AAAA;",
+  "mappings": "AAAA;ACCA;AACA;AAEA;AAEO,MAAM,YAAY,OAAM,KAAkB,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,gBAAgB;AACzG,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAU,IAC/D,OAAM;AACV,SACE,qCAAC;AAAA,IACC;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,IACvE,QAAO;AAAA,IACP,SAAS,aAAa;AAAA,KAErB,UACD,qCAAC,qBAAe,KAAM,CACxB;AAEJ,CAAC;",
   "names": []
 }

package/dist/esm/components/types/ReadOnlyPill.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/ReadOnlyPill.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledReadonlyPillWrapper } from '../styled';\n\nexport const ReadOnlyPill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {\n    const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n    const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledReadonlyPillWrapper\n        size={size}\n        alignItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n        data-testid=\"ds-pill-wrapper\"\n        aria-label={ariaLabel || label}\n        cols={[iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter((notFalse) => notFalse)}\n        gutter=\"xxxs\"\n        hasIconRight={hasIconRight}\n        hasIconLeft={hasIconLeft}\n      >\n        {iconLeft}\n        {label ? <TextComponent>{label}</TextComponent> : null}\n        {iconRight}\n      </StyledReadonlyPillWrapper>\n    );\n  },\n);\n"],
-  "mappings": "AAAA;ACEA;AACA;AAEA;AAEO,MAAM,eAAe,OAAM,KAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB;AACnE,QAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,QAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AAEV,SACE,qCAAC,2BAAD;AAAA,IACE;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,SAAS,QAAQ,aAAa,eAAe,OAAO,CAAC,aAAa;AAAA,IACpG,QAAO;AAAA,IACP;AAAA,IACA;AAAA,KAEC,UACA,QAAQ,qCAAC,eAAD,MAAgB,SAAyB,MACjD;AAAA;",
+  "mappings": "AAAA;ACEA;AACA;AAEA;AAEO,MAAM,eAAe,OAAM,KAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB;AACnE,QAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,QAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAU,IAC/D,OAAM;AAEV,SACE,qCAAC;AAAA,IACC;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,SAAS,QAAQ,aAAa,aAAa,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,IAC5G,QAAO;AAAA,IACP;AAAA,IACA;AAAA,KAEC,UACA,QAAQ,qCAAC,qBAAe,KAAM,IAAmB,MACjD,SACH;AAEJ,CACF;",
   "names": []
 }

package/dist/esm/components/types/RemovablePill.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/RemovablePill.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(\n  ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {\n    const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          if (onKeyboardRemove) onKeyboardRemove(pillUid);\n          onRemove(e);\n        }\n        if (e.code === 'ArrowLeft') {\n          e.preventDefault();\n          if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n        }\n        if (e.code === 'ArrowRight') {\n          e.preventDefault();\n          if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n        }\n      },\n      [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid],\n    );\n\n    return (\n      <StyledRemovablePillWrapper\n        size={size}\n        cols={['auto', '24px']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n        data-testid=\"ds-pill-wrapper\"\n        aria-label={ariaLabel || label}\n      >\n        <TextComponent>{label}</TextComponent>\n        <>\n          {!disabled ? (\n            <DSPillButton\n              className=\"ds-pill-focus-point\"\n              id={pillUid}\n              data-testid=\"ds-pill-close-icon\"\n              innerRef={innerRef}\n              onClick={onRemove}\n              onKeyDown={onKeyDown}\n              aria-label={`Remove ${label}`}\n              type=\"right\"\n              tabIndex={tabIndex}\n            >\n              <CloseXsmall\n                width={size === 's' ? 18 : 22.65}\n                height={size === 's' ? 18 : 22.65}\n                color={['brand-primary', '700']}\n              />\n            </DSPillButton>\n          ) : null}\n        </>\n      </StyledRemovablePillWrapper>\n    );\n  },\n);\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEO,MAAM,gBAAgB,OAAM,KACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,eAAe;AACtF,QAAM,EAAE,kBAAkB,yBAAyB,WAAW;AAC9D,QAAM,UAAU,QAAQ,MAAM,WAAW,SAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AAEV,QAAM,YAAY,YAChB,CAAC,MAAqB;AACpB,QAAI,CAAC,SAAS,SAAS,SAAS,EAAE,OAAO;AACvC,QAAE;AACF,UAAI;AAAkB,yBAAiB;AACvC,eAAS;AAAA;AAEX,QAAI,EAAE,SAAS,aAAa;AAC1B,QAAE;AACF,UAAI;AAAsB,6BAAqB,SAAS,IAAI;AAAA;AAE9D,QAAI,EAAE,SAAS,cAAc;AAC3B,QAAE;AACF,UAAI;AAAsB,6BAAqB,SAAS,GAAG;AAAA;AAAA,KAG/D,CAAC,kBAAkB,UAAU,sBAAsB;AAGrD,SACE,qCAAC,4BAAD;AAAA,IACE;AAAA,IACA,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,IACb,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,KAEzB,qCAAC,eAAD,MAAgB,QAChB,4DACG,CAAC,WACA,qCAAC,cAAD;AAAA,IACE,WAAU;AAAA,IACV,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAY,UAAU;AAAA,IACtB,MAAK;AAAA,IACL;AAAA,KAEA,qCAAC,aAAD;AAAA,IACE,OAAO,SAAS,MAAM,KAAK;AAAA,IAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,IAC5B,OAAO,CAAC,iBAAiB;AAAA,QAG3B;AAAA;",
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEO,MAAM,gBAAgB,OAAM,KACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,eAAe;AACtF,QAAM,EAAE,kBAAkB,yBAAyB,WAAW,oBAAoB;AAClF,QAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,KAAK,CAAC,CAAC;AAEpD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAU,IAC/D,OAAM;AAEV,QAAM,YAAY,YAChB,CAAC,MAAqB;AACpB,QAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,QAAE,eAAe;AACjB,UAAI;AAAkB,yBAAiB,OAAO;AAC9C,eAAS,CAAC;AAAA,IACZ;AACA,QAAI,EAAE,SAAS,aAAa;AAC1B,QAAE,eAAe;AACjB,UAAI;AAAsB,6BAAqB,SAAS,IAAI,CAAC;AAAA,IAC/D;AACA,QAAI,EAAE,SAAS,cAAc;AAC3B,QAAE,eAAe;AACjB,UAAI;AAAsB,6BAAqB,SAAS,GAAG,CAAC;AAAA,IAC9D;AAAA,EACF,GACA,CAAC,kBAAkB,UAAU,sBAAsB,OAAO,CAC5D;AAEA,SACE,qCAAC;AAAA,IACC;AAAA,IACA,MAAM,CAAC,QAAQ,MAAM;AAAA,IACrB,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,IACb,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,KAEzB,qCAAC,qBAAe,KAAM,GACtB,4DACG,CAAC,WACA,qCAAC;AAAA,IACC,WAAU;AAAA,IACV,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAY,UAAU;AAAA,IACtB,MAAK;AAAA,IACL;AAAA,KAEA,qCAAC;AAAA,IACC,OAAO,SAAS,MAAM,KAAK;AAAA,IAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,IAC5B,OAAO,CAAC,iBAAiB,KAAK;AAAA,GAChC,CACF,IACE,IACN,CACF;AAEJ,CACF;",
   "names": []
 }

package/dist/esm/components/types/ValuePill.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2 from "react";
-import { DSTooltipV2 } from "@elliemae/ds-tooltip";
+import { DSTooltipV3 } from "@elliemae/ds-tooltip";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
 import { StyledSpanWithTooltip, StyledValuePillWrapper } from "../styled";
 const ValuePill = React2.memo(({ label, size, labelTruncated, disabled, tooltipValue, iconLeft, ariaLabel }) => {
@@ -17,13 +17,12 @@ const ValuePill = React2.memo(({ label, size, labelTruncated, disabled, tooltipV
     cols: [iconLeft && "min-content", "auto"].filter((notFalse) => notFalse),
     gutter: "xxxs",
     hasIcon: iconLeft !== null
-  }, iconLeft, tooltipValue !== "" ? /* @__PURE__ */ React2.createElement(DSTooltipV2, {
-    title: tooltipValue,
-    triggerComponent: /* @__PURE__ */ React2.createElement(StyledSpanWithTooltip, {
-      className: "ds-pill-tooltip-value",
-      tabIndex: 0
-    }, label)
-  }) : /* @__PURE__ */ React2.createElement(TextComponent, null, label));
+  }, iconLeft, tooltipValue !== "" ? /* @__PURE__ */ React2.createElement(DSTooltipV3, {
+    text: tooltipValue
+  }, /* @__PURE__ */ React2.createElement(StyledSpanWithTooltip, {
+    className: "ds-pill-tooltip-value",
+    tabIndex: 0
+  }, label)) : /* @__PURE__ */ React2.createElement(TextComponent, null, label));
 });
 export {
   ValuePill

package/dist/esm/components/types/ValuePill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/ValuePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSTooltipV2 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled';\n\nexport const ValuePill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, disabled, tooltipValue, iconLeft, ariaLabel }) => {\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledValuePillWrapper\n        disabled={disabled}\n        size={size}\n        alignItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n        data-testid=\"ds-pill-wrapper\"\n        aria-label={ariaLabel || label}\n        cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n        gutter=\"xxxs\"\n        hasIcon={iconLeft !== null}\n      >\n        {iconLeft}\n        {tooltipValue !== '' ? (\n          <DSTooltipV2\n            title={tooltipValue}\n            triggerComponent={\n              <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" tabIndex={0}>\n                {label}\n              </StyledSpanWithTooltip>\n            }\n          />\n        ) : (\n          <TextComponent>{label}</TextComponent>\n        )}\n      </StyledValuePillWrapper>\n    );\n  },\n);\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AAEA;AAEO,MAAM,YAAY,OAAM,KAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,cAAc,UAAU,gBAAgB;AAChF,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AAEV,SACE,qCAAC,wBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,QAAQ,OAAO,CAAC,aAAa;AAAA,IAC/D,QAAO;AAAA,IACP,SAAS,aAAa;AAAA,KAErB,UACA,iBAAiB,KAChB,qCAAC,aAAD;AAAA,IACE,OAAO;AAAA,IACP,kBACE,qCAAC,uBAAD;AAAA,MAAuB,WAAU;AAAA,MAAwB,UAAU;AAAA,OAChE;AAAA,OAKP,qCAAC,eAAD,MAAgB;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled';\n\nexport const ValuePill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, disabled, tooltipValue, iconLeft, ariaLabel }) => {\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledValuePillWrapper\n        disabled={disabled}\n        size={size}\n        alignItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n        data-testid=\"ds-pill-wrapper\"\n        aria-label={ariaLabel || label}\n        cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n        gutter=\"xxxs\"\n        hasIcon={iconLeft !== null}\n      >\n        {iconLeft}\n        {tooltipValue !== '' ? (\n          <DSTooltipV3 text={tooltipValue}>\n            <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" tabIndex={0}>\n              {label}\n            </StyledSpanWithTooltip>\n          </DSTooltipV3>\n        ) : (\n          <TextComponent>{label}</TextComponent>\n        )}\n      </StyledValuePillWrapper>\n    );\n  },\n);\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAEA;AAEO,MAAM,YAAY,OAAM,KAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,cAAc,UAAU,gBAAgB;AAChF,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAU,IAC/D,OAAM;AAEV,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,IACvE,QAAO;AAAA,IACP,SAAS,aAAa;AAAA,KAErB,UACA,iBAAiB,KAChB,qCAAC;AAAA,IAAY,MAAM;AAAA,KACjB,qCAAC;AAAA,IAAsB,WAAU;AAAA,IAAwB,UAAU;AAAA,KAChE,KACH,CACF,IAEA,qCAAC,qBAAe,KAAM,CAE1B;AAEJ,CACF;",
   "names": []
 }

package/dist/esm/deprecated/DropdownPill.js

@@ -34,7 +34,7 @@ import React2, { useRef, useState } from "react";
 import { PropTypes, describe } from "react-desc";
 import { DSDropdownMenu } from "@elliemae/ds-dropdownmenu";
 import { ChevronDown } from "@elliemae/ds-icons";
-import { useFocusGroupItem } from "@elliemae/ds-shared/FocusGroup/useFocusGroupItem";
+import { useFocusGroupItem } from "@elliemae/ds-shared";
 import { Pill } from "./Pill";
 function DropdownPill(_a) {
   var _b = _a, {
@@ -92,6 +92,7 @@ const props = {
   minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("pill min width")
 };
 DropdownPill.propTypes = props;
+DropdownPill.displayName = "DropdownPill";
 const DSDropdownPillWithSchema = describe(DropdownPill);
 DSDropdownPillWithSchema.propTypes = props;
 export {