@elliemae/ds-pills-v2 3.22.0-next.15

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

@@ -0,0 +1,101 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DropdownPill_exports = {};
+__export(DropdownPill_exports, {
+  DropdownPill: () => DropdownPill
+});
+module.exports = __toCommonJS(DropdownPill_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
+var import_uid = require("uid");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_styled = require("../styled.js");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_PillButton = require("../PillButton.js");
+const DropdownPill = import_react.default.memo(
+  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {
+    const chevronRef = (0, import_react.useRef)(null);
+    const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
+    const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: children }) : import_react.default.Fragment;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_styled.StyledDropdownPillWrapper,
+      {
+        pillSize: 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",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_dropdownmenu.DSDropdownMenuV2,
+            {
+              placementOrderPreference: [
+                "bottom-start",
+                "bottom",
+                "bottom-end",
+                "right-end",
+                "top-start",
+                "top",
+                "top-end"
+              ],
+              ...dropdownProps,
+              onClickOutside: (e) => {
+                if ("code" in e && e.code === "Escape")
+                  chevronRef.current?.focus();
+                if (dropdownProps.onClickOutside)
+                  dropdownProps.onClickOutside(e);
+              },
+              wrapperStyles: { w: "100%", h: "100%" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_PillButton.DSPillButton,
+                {
+                  className: "ds-pill-focus-point",
+                  "data-testid": "ds-pill-dropdown-chevron",
+                  innerRef: (0, import_ds_utilities.mergeRefs)(chevronRef, innerRef),
+                  "aria-label": ariaLabel || label,
+                  type: "right",
+                  onClick: onDropdownClick,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: ["brand-primary", "800"], width: 20, height: 20 })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+//# sourceMappingURL=DropdownPill.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/types/DropdownPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* 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.js';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n    const chevronRef = useRef<HTMLButtonElement | null>(null);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }: { children: React.ReactNode }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledDropdownPillWrapper\n        pillSize={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 ('code' in e && 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={mergeRefs(chevronRef, innerRef as AnyRef<HTMLButtonElement>)}\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBkC;AAjBzD,mBAAuC;AACvC,6BAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAC1C,0BAA0B;AAC1B,wBAA6B;AAGtB,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAiC,IAAI;AAExD,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAqC,4CAAC,+DAA2B,OAAO,UAAU,IAC9F,aAAAA,QAAM;AAEV,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,QACrB,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,sDAAC,iBAAe,iBAAM;AAAA,UACtB;AAAA,YAAC;AAAA;AAAA,cACC,0BAA0B;AAAA,gBACxB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG;AAAA,cACJ,gBAAgB,CAAC,MAAM;AACrB,oBAAI,UAAU,KAAK,EAAE,SAAS;AAAU,6BAAW,SAAS,MAAM;AAClE,oBAAI,cAAc;AAAgB,gCAAc,eAAe,CAAC;AAAA,cAClE;AAAA,cACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,cAEtC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,cAAU,+BAAU,YAAY,QAAqC;AAAA,kBACrE,cAAY,aAAa;AAAA,kBACzB,MAAK;AAAA,kBACL,SAAS;AAAA,kBAET,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cAC5E;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,114 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var InputPill_exports = {};
+__export(InputPill_exports, {
+  InputPill: () => InputPill
+});
+module.exports = __toCommonJS(InputPill_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_uid = require("uid");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_styled = require("../styled.js");
+var import_PillButton = require("../PillButton.js");
+const InputPill = import_react.default.memo(
+  ({
+    label,
+    size,
+    inputPlaceholder,
+    inputWidth,
+    inputRender,
+    onInputChange,
+    onInputClear,
+    innerRef,
+    hasError,
+    inputId
+  }) => {
+    const ref = (0, import_react.useRef)(null);
+    const InputComponent = (0, import_react.useMemo)(() => inputRender, [inputRender]);
+    const pillUid = (0, import_react.useMemo)(() => inputId ?? `ds-pill-${(0, import_uid.uid)()}`, [inputId]);
+    const onCloseIconClick = (0, import_react.useCallback)(
+      (e) => {
+        if ("code" in e && ["Enter", "Space"].includes(e.code) || !("code" in e)) {
+          e.preventDefault();
+          onInputClear?.(e);
+          ref.current?.focus();
+        }
+      },
+      [onInputClear]
+    );
+    const [inputHasFocus, setInputHasFocus] = (0, import_react.useState)(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_styled.StyledInputPillWrapper,
+      {
+        pillSize: size,
+        className: "ds-pill-wrapper",
+        "data-testid": "ds-pill-wrapper",
+        cols: label === "" ? ["auto"] : ["auto", "24px"],
+        inputWidth,
+        value: label,
+        inputHasFocus,
+        hasError,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            InputComponent,
+            {
+              id: pillUid,
+              className: "ds-pill-focus-point",
+              "data-testid": "ds-pill-input",
+              innerRef: (_ref) => {
+                ref.current = _ref;
+              },
+              value: label,
+              onChange: onInputChange,
+              placeholder: inputPlaceholder,
+              onFocus: () => setInputHasFocus(true),
+              onBlur: () => setInputHasFocus(false),
+              disableTooltip: false
+            }
+          ),
+          label !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_PillButton.DSPillButton,
+            {
+              id: pillUid,
+              "data-testid": "ds-pill-clear-icon",
+              innerRef,
+              onClick: onCloseIconClick,
+              "aria-label": "Clear input",
+              type: "right",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, { size: "s", color: ["brand-primary", "700"] })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+//# sourceMappingURL=InputPill.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/types/InputPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\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<HTMLInputElement | null>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n    const onCloseIconClick = useCallback(\n      (e: React.KeyboardEvent | React.MouseEvent) => {\n        if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\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        pillSize={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={(_ref: HTMLInputElement | null) => {\n            ref.current = _ref;\n          }}\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 as AnyRef<HTMLButtonElement>}\n            onClick={onCloseIconClick}\n            // onKeyDown={onCloseIconClick} // button v2 now triggers click on key down already\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCjB;AAxCN,mBAA8D;AAC9D,iBAAoB;AACpB,sBAA4B;AAC5B,oBAAuC;AACvC,wBAA6B;AAGtB,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAgC,IAAI;AAEhD,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,KAAK,CAAC,OAAO,CAAC;AAEtE,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA8C;AAC7C,YAAK,UAAU,KAAK,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAM,EAAE,UAAU,IAAI;AAC1E,YAAE,eAAe;AACjB,yBAAe,CAAC;AAChB,cAAI,SAAS,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,QAC/C;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,UAAU,CAAC,SAAkC;AAC3C,oBAAI,UAAU;AAAA,cAChB;AAAA,cACA,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAa;AAAA,cACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,cACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,cACpC,gBAAgB;AAAA;AAAA,UAClB;AAAA,UACC,UAAU,MACT;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAY;AAAA,cACZ;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,sDAAC,+BAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;",
+  "names": ["React"]
+}

package/dist/cjs/components/types/LabelPill.js

@@ -0,0 +1,59 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LabelPill_exports = {};
+__export(LabelPill_exports, {
+  LabelPill: () => LabelPill
+});
+module.exports = __toCommonJS(LabelPill_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_styled = require("../styled.js");
+const LabelPill = import_react.default.memo(({ label, size, labelTruncated, iconLeft, ariaLabel }) => {
+  const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: children }) : import_react.default.Fragment;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledLabelPillWrapper,
+    {
+      pillSize: size,
+      alignItems: "center",
+      className: "ds-pill-wrapper ds-pill-wrapper-label",
+      "data-testid": "ds-pill-wrapper",
+      "data-label": ariaLabel || label,
+      cols: [iconLeft && "min-content", "auto"].filter((notFalse) => notFalse),
+      gutter: "xxxs",
+      hasIcon: iconLeft !== null,
+      children: [
+        iconLeft,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, { children: label })
+      ]
+    }
+  );
+});
+//# sourceMappingURL=LabelPill.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/types/LabelPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledLabelPillWrapper } from '../styled.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const LabelPill = React.memo<DSPillT.InternalProps>(({ label, size, labelTruncated, iconLeft, ariaLabel }) => {\n  const TextComponent = labelTruncated\n    ? ({ children }: { children: React.ReactNode }) => <SimpleTruncatedTooltipText value={children} />\n    : React.Fragment;\n  return (\n    <StyledLabelPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      data-label={ariaLabel || label}\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n    >\n      {iconLeft}\n      <TextComponent>{label}</TextComponent>\n    </StyledLabelPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQgC;AAPvD,mBAAkB;AAClB,uCAA2C;AAC3C,oBAAuC;AAGhC,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,MAAM;AACnH,QAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAqC,4CAAC,+DAA2B,OAAO,UAAU,IAC9F,aAAAA,QAAM;AACV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MAErB;AAAA;AAAA,QACD,4CAAC,iBAAe,iBAAM;AAAA;AAAA;AAAA,EACxB;AAEJ,CAAC;",
+  "names": ["React"]
+}

package/dist/cjs/components/types/ReadOnlyPill.js

@@ -0,0 +1,67 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ReadOnlyPill_exports = {};
+__export(ReadOnlyPill_exports, {
+  ReadOnlyPill: () => ReadOnlyPill
+});
+module.exports = __toCommonJS(ReadOnlyPill_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_styled = require("../styled.js");
+const ReadOnlyPill = import_react.default.memo(
+  ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {
+    const hasIconLeft = iconLeft !== null || iconRight !== null && label === "";
+    const hasIconRight = iconRight !== null || iconLeft !== null && label === "";
+    const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: children }) : import_react.default.Fragment;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_styled.StyledReadonlyPillWrapper,
+      {
+        pillSize: size,
+        alignItems: "center",
+        className: "ds-pill-wrapper ds-pill-wrapper-readonly",
+        "data-testid": "ds-pill-wrapper",
+        "data-label": ariaLabel || label,
+        cols: [iconLeft && "min-content", label && "auto", iconRight && "min-content"].filter(
+          (notFalse) => notFalse
+        ),
+        gutter: "xxxs",
+        hasIconRight,
+        hasIconLeft,
+        children: [
+          iconLeft,
+          label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, { children: label }) : null,
+          iconRight
+        ]
+      }
+    );
+  }
+);
+//# sourceMappingURL=ReadOnlyPill.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/types/ReadOnlyPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledReadonlyPillWrapper } from '../styled.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>(\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 }: { children: React.ReactNode }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledReadonlyPillWrapper\n        pillSize={size}\n        alignItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n        data-testid=\"ds-pill-wrapper\"\n        data-label={ariaLabel || label}\n        cols={\n          [iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter(\n            (notFalse) => notFalse,\n          ) as string[]\n        }\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYkC;AAXzD,mBAAkB;AAClB,uCAA2C;AAC3C,oBAA0C;AAGnC,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,UAAU,MAAM;AACnE,UAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,UAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAqC,4CAAC,+DAA2B,OAAO,UAAU,IAC9F,aAAAA,QAAM;AAEV,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAY,aAAa;AAAA,QACzB,MACE,CAAC,YAAY,eAAe,SAAS,QAAQ,aAAa,aAAa,EAAE;AAAA,UACvE,CAAC,aAAa;AAAA,QAChB;AAAA,QAEF,QAAO;AAAA,QACP;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,QAAQ,4CAAC,iBAAe,iBAAM,IAAmB;AAAA,UACjD;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
+  "names": ["React"]
+}

package/dist/cjs/components/types/RemovablePill.js

@@ -0,0 +1,108 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var RemovablePill_exports = {};
+__export(RemovablePill_exports, {
+  RemovablePill: () => RemovablePill
+});
+module.exports = __toCommonJS(RemovablePill_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_uid = require("uid");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_styled = require("../styled.js");
+var import_PillGroup = require("../PillGroup.js");
+var import_PillButton = require("../PillButton.js");
+const RemovablePill = import_react.default.memo(
+  ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {
+    const { onKeyboardRemove, onKeyboardNavigation } = (0, import_react.useContext)(import_PillGroup.DSPillGroupV2Context);
+    const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
+    const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: children }) : import_react.default.Fragment;
+    const onKeyDown = (0, import_react.useCallback)(
+      (e) => {
+        if (["Enter", "Space"].includes(e.code)) {
+          e.preventDefault();
+          if (onKeyboardRemove)
+            onKeyboardRemove(pillUid);
+        }
+        if (e.code === "ArrowLeft") {
+          e.preventDefault();
+          if (onKeyboardNavigation)
+            onKeyboardNavigation(pillUid, -1, e);
+        }
+        if (e.code === "ArrowRight") {
+          e.preventDefault();
+          if (onKeyboardNavigation)
+            onKeyboardNavigation(pillUid, 1, e);
+        }
+      },
+      [onKeyboardRemove, onKeyboardNavigation, pillUid]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_styled.StyledRemovablePillWrapper,
+      {
+        pillSize: size,
+        cols: ["auto", "24px"],
+        gutter: "2px",
+        alignItems: "center",
+        justifyItems: "center",
+        className: "ds-pill-wrapper ds-pill-wrapper-removable",
+        "data-testid": "ds-pill-wrapper",
+        "data-label": ariaLabel || label,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: !disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_PillButton.DSPillButton,
+            {
+              className: "ds-pill-focus-point",
+              id: pillUid,
+              "data-testid": "ds-pill-close-icon",
+              innerRef,
+              onClick: onRemove,
+              onKeyDown,
+              "aria-label": `Remove ${label}`,
+              type: "right",
+              tabIndex,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_ds_icons.CloseXsmall,
+                {
+                  width: size === "s" ? 18 : 22.65,
+                  height: size === "s" ? 18 : 22.65,
+                  color: ["brand-primary", "700"]
+                }
+              )
+            }
+          ) : null })
+        ]
+      }
+    );
+  }
+);
+//# sourceMappingURL=RemovablePill.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/types/RemovablePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import 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 { StyledRemovablePillWrapper } from '../styled.js';\nimport { DSPillGroupV2Context } from '../PillGroup.js';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const RemovablePill = React.memo<DSPillT.InternalProps>(\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 }: { children: React.ReactNode }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    const onKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          if (onKeyboardRemove) onKeyboardRemove(pillUid);\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, onKeyboardNavigation, pillUid],\n    );\n\n    return (\n      <StyledRemovablePillWrapper\n        pillSize={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        data-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 as AnyRef<HTMLButtonElement>}\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADekC;AAfzD,mBAAwD;AACxD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAC3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAGtB,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,SAAS,MAAM;AACtF,UAAM,EAAE,kBAAkB,qBAAqB,QAAI,yBAAW,qCAAoB;AAClF,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAqC,4CAAC,+DAA2B,OAAO,UAAU,IAC9F,aAAAA,QAAM;AAEV,UAAM,gBAAY;AAAA,MAChB,CAAC,MAA2B;AAC1B,YAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,YAAE,eAAe;AACjB,cAAI;AAAkB,6BAAiB,OAAO;AAAA,QAChD;AACA,YAAI,EAAE,SAAS,aAAa;AAC1B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,IAAI,CAAC;AAAA,QAC/D;AACA,YAAI,EAAE,SAAS,cAAc;AAC3B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,GAAG,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,MACA,CAAC,kBAAkB,sBAAsB,OAAO;AAAA,IAClD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAM,CAAC,QAAQ,MAAM;AAAA,QACrB,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QACb,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAY,aAAa;AAAA,QAEzB;AAAA,sDAAC,iBAAe,iBAAM;AAAA,UACtB,2EACG,WAAC,WACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,IAAI;AAAA,cACJ,eAAY;AAAA,cACZ;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA,cAAY,UAAU;AAAA,cACtB,MAAK;AAAA,cACL;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,SAAS,MAAM,KAAK;AAAA,kBAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,kBAC5B,OAAO,CAAC,iBAAiB,KAAK;AAAA;AAAA,cAChC;AAAA;AAAA,UACF,IACE,MACN;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,63 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ValuePill_exports = {};
+__export(ValuePill_exports, {
+  ValuePill: () => ValuePill
+});
+module.exports = __toCommonJS(ValuePill_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_tooltip = require("@elliemae/ds-tooltip");
+var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_styled = require("../styled.js");
+const ValuePill = import_react.default.memo(
+  ({ label, size, labelTruncated, disabled, tooltipValue, iconLeft, ariaLabel }) => {
+    const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: children }) : import_react.default.Fragment;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_styled.StyledValuePillWrapper,
+      {
+        disabled,
+        pillSize: size,
+        alignItems: "center",
+        className: "ds-pill-wrapper ds-pill-wrapper-value",
+        "data-testid": "ds-pill-wrapper",
+        cols: [iconLeft && "min-content", "auto"].filter((notFalse) => notFalse),
+        gutter: "xxxs",
+        hasIcon: iconLeft !== null,
+        "data-label": ariaLabel || label,
+        children: [
+          iconLeft,
+          tooltipValue !== "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, { text: tooltipValue ?? "", ariaLabel: tooltipValue ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSpanWithTooltip, { className: "ds-pill-tooltip-value", tabIndex: 0, children: label }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, { children: label })
+        ]
+      }
+    );
+  }
+);
+//# sourceMappingURL=ValuePill.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/types/ValuePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, disabled, tooltipValue, iconLeft, ariaLabel }) => {\n    const TextComponent = labelTruncated\n      ? ({ children }: { children: React.ReactNode }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledValuePillWrapper\n        disabled={disabled}\n        pillSize={size}\n        alignItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n        gutter=\"xxxs\"\n        hasIcon={iconLeft !== null}\n        data-label={ariaLabel || label}\n      >\n        {iconLeft}\n        {tooltipValue !== '' ? (\n          <DSTooltipV3 text={tooltipValue ?? ''} ariaLabel={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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSkC;AATzD,mBAAkB;AAClB,wBAA4B;AAC5B,uCAA2C;AAC3C,oBAA8D;AAGvD,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,cAAc,UAAU,UAAU,MAAM;AAChF,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAqC,4CAAC,+DAA2B,OAAO,UAAU,IAC9F,aAAAA,QAAM;AAEV,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,QACvE,QAAO;AAAA,QACP,SAAS,aAAa;AAAA,QACtB,cAAY,aAAa;AAAA,QAExB;AAAA;AAAA,UACA,iBAAiB,KAChB,4CAAC,iCAAY,MAAM,gBAAgB,IAAI,WAAW,gBAAgB,IAChE,sDAAC,uCAAsB,WAAU,yBAAwB,UAAU,GAChE,iBACH,GACF,IAEA,4CAAC,iBAAe,iBAAM;AAAA;AAAA;AAAA,IAE1B;AAAA,EAEJ;AACF;",
+  "names": ["React"]
+}

package/dist/cjs/components/types/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+var React = __toESM(require("react"));
+__reExport(types_exports, require("./DropdownPill.js"), module.exports);
+__reExport(types_exports, require("./InputPill.js"), module.exports);
+__reExport(types_exports, require("./LabelPill.js"), module.exports);
+__reExport(types_exports, require("./ReadOnlyPill.js"), module.exports);
+__reExport(types_exports, require("./RemovablePill.js"), module.exports);
+__reExport(types_exports, require("./ValuePill.js"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/types/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/types/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './DropdownPill.js';\nexport * from './InputPill.js';\nexport * from './LabelPill.js';\nexport * from './ReadOnlyPill.js';\nexport * from './RemovablePill.js';\nexport * from './ValuePill.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAc,8BAAd;AACA,0BAAc,2BADd;AAEA,0BAAc,2BAFd;AAGA,0BAAc,8BAHd;AAIA,0BAAc,+BAJd;AAKA,0BAAc,2BALd;",
+  "names": []
+}