@elliemae/ds-pills-v2 3.61.11 → 3.70.0-alpha.9

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

@@ -34,13 +34,14 @@ 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_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_uid = require("uid");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_styled = require("../styled.js");
 var import_DSPillButton = require("../../parts/DSPillButton/DSPillButton.js");
 var import_constants = require("../../constants/index.js");
-const InputPill = import_react.default.memo(
-  ({
+const InputPill = import_react.default.memo((props) => {
+  const {
     label,
     size,
     inputPlaceholder,
@@ -51,64 +52,93 @@ const InputPill = import_react.default.memo(
     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",
-        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": import_constants.PILL_V2_DATA_TESTID.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_styled.StyledAgnosticPillRegion, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_DSPillButton.DSPillButton,
-            {
-              id: pillUid,
-              "data-testid": import_constants.PILL_V2_DATA_TESTID.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"] })
-            }
-          ) })
-        ]
+  } = props;
+  const ref = (0, import_react.useRef)(null);
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
+  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);
+  const handleValueChange = (0, import_react.useCallback)(
+    (newValue, e) => {
+      onInputChange?.(e, newValue);
+    },
+    [onInputChange]
+  );
+  const InputComponent = inputRender;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledInputPillWrapper,
+    {
+      pillSize: size,
+      className: "ds-pill-wrapper",
+      cols: ["auto", "auto"],
+      inputWidth,
+      value: label ?? "",
+      inputHasFocus,
+      hasError,
+      ...ownerProps,
+      children: [
+        InputComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          InputComponent,
+          {
+            id: pillUid,
+            "data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_INPUT,
+            hasError,
+            dsInputtextInput: { className: "ds-pill-focus-point", "aria-describedby": null },
+            innerRef: (_ref) => {
+              ref.current = _ref;
+            },
+            value: label,
+            onValueChange: handleValueChange,
+            placeholder: inputPlaceholder,
+            onFocus: () => setInputHasFocus(true),
+            onBlur: () => setInputHasFocus(false),
+            autoComplete: "off",
+            maxLength: 255
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledDSInputText,
+          {
+            id: pillUid,
+            "data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_INPUT,
+            hasError,
+            dsInputtextInput: { "aria-describedby": null },
+            innerRef: (_ref) => {
+              ref.current = _ref;
+              _ref?.classList.add("ds-pill-focus-point");
+            },
+            value: label,
+            onValueChange: handleValueChange,
+            placeholder: inputPlaceholder,
+            onFocus: () => setInputHasFocus(true),
+            onBlur: () => setInputHasFocus(false),
+            autoComplete: "off",
+            maxLength: 255,
+            ...ownerProps
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { style: label === "" ? { visibility: "hidden" } : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_DSPillButton.DSPillButton,
+          {
+            id: `${pillUid}-clear`,
+            "data-testid": import_constants.PILL_V2_DATA_TESTID.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

@@ -1,7 +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 { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledAgnosticPillRegion, StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.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        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={PILL_V2_DATA_TESTID.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          <StyledAgnosticPillRegion>\n            <DSPillButton\n              id={pillUid}\n              data-testid={PILL_V2_DATA_TESTID.PILL_CLEAR_ICON}\n              innerRef={innerRef as TypescriptHelpersT.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          </StyledAgnosticPillRegion>\n        )}\n      </StyledInputPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CjB;AA1CN,mBAA8D;AAE9D,iBAAoB;AACpB,sBAA4B;AAC5B,oBAAiE;AACjE,0BAA6B;AAE7B,uBAAoC;AAE7B,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,CAAC,IAAI,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,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,QAC/C;AAAA,QACA,OAAO,SAAS;AAAA,QAChB;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV,eAAa,qCAAoB;AAAA,cACjC,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,4CAAC,0CACC;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa,qCAAoB;AAAA,cACjC;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,sDAAC,+BAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledAgnosticPillRegion, StyledDSInputText, StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>((props) => {\n  const {\n    label,\n    size,\n    inputPlaceholder,\n    inputWidth,\n    inputRender,\n    onInputChange,\n    onInputClear,\n    innerRef,\n    hasError,\n    inputId,\n  } = props;\n  const ref = useRef<HTMLInputElement | null>(null);\n  const ownerProps = useOwnerProps(props);\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  // DSInputText exposes value changes via onValueChange(newValue, e). Re-map to the pill's public\n  // onInputChange(e, newValue) contract so the (event, value) signature consumers rely on is preserved.\n  const handleValueChange = useCallback(\n    (newValue: string, e: React.ChangeEvent<HTMLInputElement>) => {\n      onInputChange?.(e, newValue);\n    },\n    [onInputChange],\n  );\n\n  const InputComponent = inputRender;\n\n  return (\n    <StyledInputPillWrapper\n      pillSize={size}\n      className=\"ds-pill-wrapper\"\n      cols={['auto', 'auto']}\n      inputWidth={inputWidth}\n      value={label ?? ''}\n      inputHasFocus={inputHasFocus}\n      hasError={hasError}\n      {...ownerProps}\n    >\n      {InputComponent ? (\n        <InputComponent\n          id={pillUid}\n          data-testid={PILL_V2_DATA_TESTID.PILL_INPUT}\n          hasError={hasError}\n          // inputRender has always assumed a DSInputText-shaped component (this is what the pill's own\n          // default input is, and the only real-world usage of inputRender wraps DSInputText itself,\n          // forwarding dsInputtextInput straight through). Keeping this contract unchanged avoids a\n          // silent behavior break for any existing consumer. Do NOT also wire a plain onChange here: a\n          // DSInputText-shaped component that forwards all received props (the common pattern) would\n          // then call onInputChange twice per keystroke \u2014 once via onChange, once via onValueChange below.\n          // Unlike the default branch below, this keeps className on the slot instead of forcing it via\n          // classList.add: InputComponent is consumer-supplied, not something we render ourselves, so the\n          // permanent forced-ref pattern is intentionally scoped to our own slot only (see that branch).\n          dsInputtextInput={{ className: 'ds-pill-focus-point', 'aria-describedby': null }}\n          innerRef={(_ref: HTMLInputElement | null) => {\n            ref.current = _ref;\n          }}\n          value={label}\n          onValueChange={handleValueChange}\n          placeholder={inputPlaceholder}\n          onFocus={() => setInputHasFocus(true)}\n          onBlur={() => setInputHasFocus(false)}\n          autoComplete=\"off\"\n          maxLength={255}\n        />\n      ) : (\n        <StyledDSInputText\n          id={pillUid}\n          data-testid={PILL_V2_DATA_TESTID.PILL_INPUT}\n          hasError={hasError}\n          // Clear DSInputText's auto aria-describedby: it points at form feedback/error message\n          // elements that don't exist inside a pill (matching the legacy DSInput, which set none).\n          // null, not undefined \u2014 an explicit \"no value\" survives regardless of how ds-system's\n          // slot-prop merge evolves (see PUI-17949 below); undefined risks a future, smarter merge\n          // reading it as \"unset, inherit DSInputText's default\" instead of \"explicitly cleared\".\n          dsInputtextInput={{ 'aria-describedby': null }}\n          innerRef={(_ref: HTMLInputElement | null) => {\n            ref.current = _ref;\n            // Permanent, not a workaround. Two independent reasons this class can never be supplied\n            // through a slot prop, so classList.add is the canonical mechanism, not a stand-in for one:\n            // 1) DSInputText's own styled construction forwards global attributes to the input but\n            //    routes `className` to its wrapper instead (a separate, pre-existing DSInputText quirk)\n            //    \u2014 `dsInputtextInput={{ className: ... }}` could never reach the real <input>, regardless\n            //    of PUI-17949's shallow-merge state.\n            // 2) DSPillGroupV2's keyboard navigation (usePillGroup.ts) queries `.ds-pill-focus-point`\n            //    directly against the DOM and never goes through React's data flow (no ref-registration\n            //    prop) \u2014 since its consumer of this class operates outside React's render cycle by\n            //    design, the mechanism that supplies it is intentionally imperative/vanilla-DOM too,\n            //    rather than a value that has to survive a declarative slot-prop merge.\n            // PUI-17949 (ds-system's callbackMerger doing a plain per-slot spread instead of a per-key\n            // merge) is still real and still worth fixing for other nested-slot-override consumers \u2014\n            // fixing it would not remove the need for this line. classList.add is idempotent, so\n            // re-running it on every render is safe.\n            _ref?.classList.add('ds-pill-focus-point');\n          }}\n          value={label}\n          onValueChange={handleValueChange}\n          placeholder={inputPlaceholder}\n          onFocus={() => setInputHasFocus(true)}\n          onBlur={() => setInputHasFocus(false)}\n          autoComplete=\"off\"\n          maxLength={255}\n          {...ownerProps}\n        />\n      )}\n      <StyledAgnosticPillRegion style={label === '' ? { visibility: 'hidden' } : undefined}>\n        <DSPillButton\n          id={`${pillUid}-clear`}\n          data-testid={PILL_V2_DATA_TESTID.PILL_CLEAR_ICON}\n          innerRef={innerRef as TypescriptHelpersT.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      </StyledAgnosticPillRegion>\n    </StyledInputPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDnB;AArDJ,mBAA8D;AAC9D,8BAA8B;AAE9B,iBAAoB;AACpB,sBAA4B;AAC5B,oBAAoF;AACpF,0BAA6B;AAE7B,uBAAoC;AAE7B,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,UAAM,qBAAgC,IAAI;AAChD,QAAM,iBAAa,uCAAc,KAAK;AAEtC,QAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAEtE,QAAM,uBAAmB;AAAA,IACvB,CAAC,MAA8C;AAC7C,UAAK,UAAU,KAAK,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAM,EAAE,UAAU,IAAI;AAC1E,UAAE,eAAe;AACjB,uBAAe,CAAC;AAChB,YAAI,SAAS,MAAM;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAIxD,QAAM,wBAAoB;AAAA,IACxB,CAAC,UAAkB,MAA2C;AAC5D,sBAAgB,GAAG,QAAQ;AAAA,IAC7B;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,iBAAiB;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB;AAAA,MACA,OAAO,SAAS;AAAA,MAChB;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,eAAa,qCAAoB;AAAA,YACjC;AAAA,YAUA,kBAAkB,EAAE,WAAW,uBAAuB,oBAAoB,KAAK;AAAA,YAC/E,UAAU,CAAC,SAAkC;AAC3C,kBAAI,UAAU;AAAA,YAChB;AAAA,YACA,OAAO;AAAA,YACP,eAAe;AAAA,YACf,aAAa;AAAA,YACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,YACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,YACpC,cAAa;AAAA,YACb,WAAW;AAAA;AAAA,QACb,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,eAAa,qCAAoB;AAAA,YACjC;AAAA,YAMA,kBAAkB,EAAE,oBAAoB,KAAK;AAAA,YAC7C,UAAU,CAAC,SAAkC;AAC3C,kBAAI,UAAU;AAgBd,oBAAM,UAAU,IAAI,qBAAqB;AAAA,YAC3C;AAAA,YACA,OAAO;AAAA,YACP,eAAe;AAAA,YACf,aAAa;AAAA,YACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,YACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,YACpC,cAAa;AAAA,YACb,WAAW;AAAA,YACV,GAAG;AAAA;AAAA,QACN;AAAA,QAEF,4CAAC,0CAAyB,OAAO,UAAU,KAAK,EAAE,YAAY,SAAS,IAAI,QACzE;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,OAAO;AAAA,YACd,eAAa,qCAAoB;AAAA,YACjC;AAAA,YACA,SAAS;AAAA,YAET,cAAW;AAAA,YACX,MAAK;AAAA,YAEL,sDAAC,+BAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QACzD,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -38,7 +38,18 @@ var import_react = __toESM(require("react"));
 var import_TextComponent = require("../TextComponent.js");
 var import_styled = require("../styled.js");
 const LabelOnlyPill = import_react.default.memo((props) => {
-  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma } = props;
+  const {
+    label,
+    size,
+    labelTruncated,
+    disableTruncationTooltip,
+    iconLeft,
+    IconLeft,
+    ariaLabel,
+    applyAriaDisabled,
+    readOnly,
+    trailingComma
+  } = props;
   const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
   const { wrap, tabIndex, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -59,7 +70,16 @@ const LabelOnlyPill = import_react.default.memo((props) => {
       ...ownerProps,
       children: [
         IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TextComponent.TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label: `${label}${trailingComma ? "," : ""}`
+          }
+        )
       ]
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/LabelOnlyPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledLabelOnlyPillWrapper } from '../styled.js';\n\nexport const LabelOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma } =\n    props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  return (\n    <StyledLabelOnlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent pillSize={size} labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n    </StyledLabelOnlyPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAZJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA2C;AAEpC,MAAM,gBAAgB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACxE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,mBAAmB,UAAU,cAAc,IAC7G;AACF,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAO;AAAA,MACP,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,mBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,QACzC,4CAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAC/G;AAEJ,CAAC;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledLabelOnlyPillWrapper } from '../styled.js';\n\nexport const LabelOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n  const {\n    label,\n    size,\n    labelTruncated,\n    disableTruncationTooltip,\n    iconLeft,\n    IconLeft,\n    ariaLabel,\n    applyAriaDisabled,\n    readOnly,\n    trailingComma,\n  } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  return (\n    <StyledLabelOnlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent\n        pillSize={size}\n        getOwnerProps={ownerProps.getOwnerProps}\n        labelTruncated={labelTruncated}\n        disableTruncationTooltip={disableTruncationTooltip}\n        label={`${label}${trailingComma ? ',' : ''}`}\n      />\n    </StyledLabelOnlyPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBnB;AAtBJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA2C;AAEpC,MAAM,gBAAgB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAO;AAAA,MACP,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,mBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,QACzC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -38,7 +38,7 @@ var import_react = __toESM(require("react"));
 var import_TextComponent = require("../TextComponent.js");
 var import_styled = require("../styled.js");
 const LabelPill = import_react.default.memo((props) => {
-  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel } = props;
+  const { label, size, labelTruncated, disableTruncationTooltip, iconLeft, IconLeft, ariaLabel } = props;
   const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
   const { wrap, tabIndex, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -57,7 +57,16 @@ const LabelPill = import_react.default.memo((props) => {
       ...ownerProps,
       children: [
         (iconLeft || IconLeft) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TextComponent.TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label
+          }
+        )
       ]
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/LabelPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledLabelPillWrapper } from '../styled.js';\n\nexport const LabelPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  return (\n    <StyledLabelPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter={0}\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {(iconLeft || IconLeft) && (\n        <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n      )}\n      <TextComponent pillSize={size} labelTruncated={labelTruncated} label={label} />\n    </StyledLabelPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAiE;AAE1D,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,UAAU,IAAI;AACvE,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAQ;AAAA,MACR,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE9E,4CAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAc;AAAA;AAAA;AAAA,EAC/E;AAEJ,CAAC;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledLabelPillWrapper } from '../styled.js';\n\nexport const LabelPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, disableTruncationTooltip, iconLeft, IconLeft, ariaLabel } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  return (\n    <StyledLabelPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter={0}\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {(iconLeft || IconLeft) && (\n        <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n      )}\n      <TextComponent\n        pillSize={size}\n        getOwnerProps={ownerProps.getOwnerProps}\n        labelTruncated={labelTruncated}\n        disableTruncationTooltip={disableTruncationTooltip}\n        label={label}\n      />\n    </StyledLabelPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAiE;AAE1D,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM,EAAE,OAAO,MAAM,gBAAgB,0BAA0B,UAAU,UAAU,UAAU,IAAI;AACjG,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAQ;AAAA,MACR,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE9E;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -44,7 +44,7 @@ var import_constants = require("../../constants/index.js");
 const rowsForDsButtonV3 = () => ({ small: ["auto"], medium: ["auto"] });
 const colsForDsButtonV3 = (size) => size === "m" ? { small: ["auto", "minmax(1.5625rem, auto)"], medium: ["auto", "minmax(1.9230rem, auto)"] } : { small: ["auto", "minmax(1.1875rem, auto)"], medium: ["auto", "minmax(1.4615rem, auto)"] };
 const MenuButtonPill = import_react.default.memo((props) => {
-  const { label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps } = props;
+  const { label, size, labelTruncated, disableTruncationTooltip, innerRef, ariaLabel, menuButtonProps } = props;
   const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
   const { wrap, tabIndex, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
   const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
@@ -81,7 +81,16 @@ const MenuButtonPill = import_react.default.memo((props) => {
       ...globalAttributes,
       ...ownerProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TextComponent.TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_styled.StyledPillMenuButton,
           {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/MenuButtonPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { defaultProps as DSPillButtonDefaultProps } from '../../parts/DSPillButton/react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\n/* ************************************************************************************************************\n * Regarding magic numbers, default width and height\n *  The Wrapper is setting a min-height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n *    the \"magic\" values are actually 25px RT for \"m\" and 19px RT for \"s\"\n ***************************************************************************************************************\n * Given the above, this iteration of StyledDropdownPillWrapper needs to have different styles/cols/rows to accomodate DSButtonV3\n *   and I'm basing the styles on the same assumptions for width/height magic values.\n ************************************************************************************************************* */\nconst rowsForDsButtonV3 = () => ({ small: ['auto'], medium: ['auto'] });\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n  size === 'm'\n    ? { small: ['auto', 'minmax(1.5625rem, auto)'], medium: ['auto', 'minmax(1.9230rem, auto)'] }\n    : { small: ['auto', 'minmax(1.1875rem, auto)'], medium: ['auto', 'minmax(1.4615rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n  if (!menuButtonProps) {\n    // eslint-disable-next-line no-console\n    console.log('menuButtonProps', menuButtonProps);\n    throw new Error('menuButtonProps was not provided');\n  }\n  if (Object.keys(menuButtonProps).length === 0) {\n    // eslint-disable-next-line no-console\n    console.log('menuButtonProps', menuButtonProps);\n    throw new Error('menuButtonProps is empty');\n  }\n  const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;\n\n  const memoizedRows = useMemo(() => rowsForDsButtonV3(), []);\n  const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);\n  const dsMenubuttonRootProps = useMemo(\n    () => ({\n      width: `${width}`,\n      height: `${height}`,\n    }),\n    [height, width],\n  );\n\n  const finalAriaLabel = ariaLabel || label;\n\n  return (\n    <StyledDropdownPillWrapper\n      pillSize={size}\n      id={pillUid}\n      className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n      cols={memoizedCols}\n      rows={memoizedRows}\n      gutter=\"2px\"\n      alignItems=\"center\"\n      justifyItems=\"center\"\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      <TextComponent pillSize={size} labelTruncated={labelTruncated} label={label} />\n      <StyledAgnosticPillRegion>\n        <StyledPillMenuButton\n          innerRef={innerRef as DSMenuButtonT.Props['innerRef']}\n          aria-label={finalAriaLabel}\n          dsMenubuttonRoot={dsMenubuttonRootProps}\n          {...menuButtonProps}\n          // the styles that makes the circle visual behave correctly in \"circle\"/\"square\"/\"pill group\"\n          //   are based on the button having the following props:\n          data-testid={PILL_V2_DATA_TESTID.PILL_MENU_BUTTON}\n          buttonType=\"raw\"\n          className=\"ds-pill-button-right ds-pill-focus-point\"\n          type=\"button\"\n          width={`${width}`}\n          height={`${height}`}\n          // end of props for correcr circle/square/pill group visual behavior\n          {...ownerProps}\n        >\n          <ChevronSmallDown color={['brand-primary', '800']} />\n        </StyledPillMenuButton>\n      </StyledAgnosticPillRegion>\n    </StyledDropdownPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDnB;AAvDJ,sBAAiC;AAEjC,8BAAsD;AACtD,mBAA+B;AAC/B,iBAAoB;AAEpB,mCAAyD;AACzD,2BAA8B;AAC9B,oBAA0F;AAC1F,uBAAoC;AAUpC,MAAM,oBAAoB,OAAO,EAAE,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;AACrE,MAAM,oBAAoB,CAAC,SACzB,SAAS,MACL,EAAE,OAAO,CAAC,QAAQ,yBAAyB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE,IAC1F,EAAE,OAAO,CAAC,QAAQ,yBAAyB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE;AAEzF,MAAM,iBAAiB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACzE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB,IAAI;AAC9E,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,QAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AACpD,MAAI,CAAC,iBAAiB;AAEpB,YAAQ,IAAI,mBAAmB,eAAe;AAC9C,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACpD;AACA,MAAI,OAAO,KAAK,eAAe,EAAE,WAAW,GAAG;AAE7C,YAAQ,IAAI,mBAAmB,eAAe;AAC9C,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AACA,QAAM,EAAE,QAAQ,6BAAAC,aAAyB,OAAO,SAAS,6BAAAA,aAAyB,OAAO,IAAI;AAE7F,QAAM,mBAAe,sBAAQ,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC1D,QAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,QAAM,4BAAwB;AAAA,IAC5B,OAAO;AAAA,MACL,OAAO,GAAG,KAAK;AAAA,MACf,QAAQ,GAAG,MAAM;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,EAChB;AAEA,QAAM,iBAAiB,aAAa;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,oDAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAc;AAAA,QAC7E,4CAAC,0CACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,kBAAkB;AAAA,YACjB,GAAG;AAAA,YAGJ,eAAa,qCAAoB;AAAA,YACjC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAO,GAAG,KAAK;AAAA,YACf,QAAQ,GAAG,MAAM;AAAA,YAEhB,GAAG;AAAA,YAEJ,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QACrD,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { defaultProps as DSPillButtonDefaultProps } from '../../parts/DSPillButton/react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\n/* ************************************************************************************************************\n * Regarding magic numbers, default width and height\n *  The Wrapper is setting a min-height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n *    the \"magic\" values are actually 25px RT for \"m\" and 19px RT for \"s\"\n ***************************************************************************************************************\n * Given the above, this iteration of StyledDropdownPillWrapper needs to have different styles/cols/rows to accomodate DSButtonV3\n *   and I'm basing the styles on the same assumptions for width/height magic values.\n ************************************************************************************************************* */\nconst rowsForDsButtonV3 = () => ({ small: ['auto'], medium: ['auto'] });\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n  size === 'm'\n    ? { small: ['auto', 'minmax(1.5625rem, auto)'], medium: ['auto', 'minmax(1.9230rem, auto)'] }\n    : { small: ['auto', 'minmax(1.1875rem, auto)'], medium: ['auto', 'minmax(1.4615rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, disableTruncationTooltip, innerRef, ariaLabel, menuButtonProps } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n  if (!menuButtonProps) {\n    // eslint-disable-next-line no-console\n    console.log('menuButtonProps', menuButtonProps);\n    throw new Error('menuButtonProps was not provided');\n  }\n  if (Object.keys(menuButtonProps).length === 0) {\n    // eslint-disable-next-line no-console\n    console.log('menuButtonProps', menuButtonProps);\n    throw new Error('menuButtonProps is empty');\n  }\n  const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;\n\n  const memoizedRows = useMemo(() => rowsForDsButtonV3(), []);\n  const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);\n  const dsMenubuttonRootProps = useMemo(\n    () => ({\n      width: `${width}`,\n      height: `${height}`,\n    }),\n    [height, width],\n  );\n\n  const finalAriaLabel = ariaLabel || label;\n\n  return (\n    <StyledDropdownPillWrapper\n      pillSize={size}\n      id={pillUid}\n      className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n      cols={memoizedCols}\n      rows={memoizedRows}\n      gutter=\"2px\"\n      alignItems=\"center\"\n      justifyItems=\"center\"\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      <TextComponent\n        pillSize={size}\n        getOwnerProps={ownerProps.getOwnerProps}\n        labelTruncated={labelTruncated}\n        disableTruncationTooltip={disableTruncationTooltip}\n        label={label}\n      />\n      <StyledAgnosticPillRegion>\n        <StyledPillMenuButton\n          innerRef={innerRef as DSMenuButtonT.Props['innerRef']}\n          aria-label={finalAriaLabel}\n          dsMenubuttonRoot={dsMenubuttonRootProps}\n          {...menuButtonProps}\n          // the styles that makes the circle visual behave correctly in \"circle\"/\"square\"/\"pill group\"\n          //   are based on the button having the following props:\n          data-testid={PILL_V2_DATA_TESTID.PILL_MENU_BUTTON}\n          buttonType=\"raw\"\n          className=\"ds-pill-button-right ds-pill-focus-point\"\n          type=\"button\"\n          width={`${width}`}\n          height={`${height}`}\n          // end of props for correcr circle/square/pill group visual behavior\n          {...ownerProps}\n        >\n          <ChevronSmallDown color={['brand-primary', '800']} />\n        </StyledPillMenuButton>\n      </StyledAgnosticPillRegion>\n    </StyledDropdownPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDnB;AAvDJ,sBAAiC;AAEjC,8BAAsD;AACtD,mBAA+B;AAC/B,iBAAoB;AAEpB,mCAAyD;AACzD,2BAA8B;AAC9B,oBAA0F;AAC1F,uBAAoC;AAUpC,MAAM,oBAAoB,OAAO,EAAE,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;AACrE,MAAM,oBAAoB,CAAC,SACzB,SAAS,MACL,EAAE,OAAO,CAAC,QAAQ,yBAAyB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE,IAC1F,EAAE,OAAO,CAAC,QAAQ,yBAAyB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE;AAEzF,MAAM,iBAAiB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACzE,QAAM,EAAE,OAAO,MAAM,gBAAgB,0BAA0B,UAAU,WAAW,gBAAgB,IAAI;AACxG,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,QAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AACpD,MAAI,CAAC,iBAAiB;AAEpB,YAAQ,IAAI,mBAAmB,eAAe;AAC9C,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACpD;AACA,MAAI,OAAO,KAAK,eAAe,EAAE,WAAW,GAAG;AAE7C,YAAQ,IAAI,mBAAmB,eAAe;AAC9C,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AACA,QAAM,EAAE,QAAQ,6BAAAC,aAAyB,OAAO,SAAS,6BAAAA,aAAyB,OAAO,IAAI;AAE7F,QAAM,mBAAe,sBAAQ,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC1D,QAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,QAAM,4BAAwB;AAAA,IAC5B,OAAO;AAAA,MACL,OAAO,GAAG,KAAK;AAAA,MACf,QAAQ,GAAG,MAAM;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,EAChB;AAEA,QAAM,iBAAiB,aAAa;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA,4CAAC,0CACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,kBAAkB;AAAA,YACjB,GAAG;AAAA,YAGJ,eAAa,qCAAoB;AAAA,YACjC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAO,GAAG,KAAK;AAAA,YACf,QAAQ,GAAG,MAAM;AAAA,YAEhB,GAAG;AAAA,YAEJ,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QACrD,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React", "DSPillButtonDefaultProps"]
 }

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

@@ -38,7 +38,7 @@ var import_react = __toESM(require("react"));
 var import_TextComponent = require("../TextComponent.js");
 var import_styled = require("../styled.js");
 const ReadOnlyPill = import_react.default.memo((props) => {
-  const { label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight } = props;
+  const { label, size, labelTruncated, disableTruncationTooltip, iconLeft, iconRight, ariaLabel, IconLeft, IconRight } = props;
   const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
   const { wrap, tabIndex, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
   const hasIconLeft = iconLeft !== null || iconRight !== null && label === "";
@@ -62,7 +62,16 @@ const ReadOnlyPill = import_react.default.memo((props) => {
       ...ownerProps,
       children: [
         (iconLeft || IconLeft) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft }),
-        label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label }) : null,
+        label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TextComponent.TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label
+          }
+        ) : null,
         (iconRight || IconRight) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: IconRight ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconRight, { label }) : iconRight })
       ]
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/ReadOnlyPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n  const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n  const hasIconLeftNew = IconLeft !== null || (IconRight !== null && label === '');\n  const hasIconRightNew = IconRight !== null || (IconLeft !== null && label === '');\n\n  return (\n    <StyledReadonlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n      data-label={ariaLabel || label}\n      cols={\n        [(iconLeft || IconLeft) && 'min-content', label && 'auto', (iconRight || IconRight) && 'min-content'].filter(\n          (notFalse) => notFalse,\n        ) as string[]\n      }\n      gutter={0}\n      hasIconRight={hasIconRight || hasIconRightNew}\n      hasIconLeft={hasIconLeft || hasIconLeftNew}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {(iconLeft || IconLeft) && (\n        <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n      )}\n      {label ? <TextComponent pillSize={size} labelTruncated={labelTruncated} label={label} /> : null}\n      {(iconRight || IconRight) && (\n        <StyledAgnosticPillRegion>{IconRight ? <IconRight label={label} /> : iconRight}</StyledAgnosticPillRegion>\n      )}\n    </StyledReadonlyPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAjBJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAoE;AAE7D,MAAM,eAAe,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACvE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,WAAW,UAAU,UAAU,IAAI;AAC7F,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,QAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,QAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,QAAM,iBAAiB,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC7E,QAAM,kBAAkB,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,QACpG,CAAC,aAAa;AAAA,MAChB;AAAA,MAEF,QAAQ;AAAA,MACR,cAAc,gBAAgB;AAAA,MAC9B,aAAa,eAAe;AAAA,MAC3B,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE7E,QAAQ,4CAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAc,IAAK;AAAA,SACzF,aAAa,cACb,4CAAC,0CAA0B,sBAAY,4CAAC,aAAU,OAAc,IAAK,WAAU;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, disableTruncationTooltip, iconLeft, iconRight, ariaLabel, IconLeft, IconRight } =\n    props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n  const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n  const hasIconLeftNew = IconLeft !== null || (IconRight !== null && label === '');\n  const hasIconRightNew = IconRight !== null || (IconLeft !== null && label === '');\n\n  return (\n    <StyledReadonlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n      data-label={ariaLabel || label}\n      cols={\n        [(iconLeft || IconLeft) && 'min-content', label && 'auto', (iconRight || IconRight) && 'min-content'].filter(\n          (notFalse) => notFalse,\n        ) as string[]\n      }\n      gutter={0}\n      hasIconRight={hasIconRight || hasIconRightNew}\n      hasIconLeft={hasIconLeft || hasIconLeftNew}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {(iconLeft || IconLeft) && (\n        <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n      )}\n      {label ? (\n        <TextComponent\n          pillSize={size}\n          getOwnerProps={ownerProps.getOwnerProps}\n          labelTruncated={labelTruncated}\n          disableTruncationTooltip={disableTruncationTooltip}\n          label={label}\n        />\n      ) : null}\n      {(iconRight || IconRight) && (\n        <StyledAgnosticPillRegion>{IconRight ? <IconRight label={label} /> : iconRight}</StyledAgnosticPillRegion>\n      )}\n    </StyledReadonlyPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBnB;AAlBJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAoE;AAE7D,MAAM,eAAe,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACvE,QAAM,EAAE,OAAO,MAAM,gBAAgB,0BAA0B,UAAU,WAAW,WAAW,UAAU,UAAU,IACjH;AACF,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,QAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,QAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,QAAM,iBAAiB,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC7E,QAAM,kBAAkB,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,QACpG,CAAC,aAAa;AAAA,MAChB;AAAA,MAEF,QAAQ;AAAA,MACR,cAAc,gBAAgB;AAAA,MAC9B,aAAa,eAAe;AAAA,MAC3B,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE7E,QACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,IACE;AAAA,SACF,aAAa,cACb,4CAAC,0CAA0B,sBAAY,4CAAC,aAAU,OAAc,IAAK,WAAU;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -48,6 +48,7 @@ const RemovablePill = import_react.default.memo((props) => {
     size,
     disabled,
     labelTruncated,
+    disableTruncationTooltip,
     onRemove,
     innerRef,
     ariaLabel,
@@ -89,7 +90,7 @@ const RemovablePill = import_react.default.memo((props) => {
     import_styled.StyledRemovablePillWrapper,
     {
       pillSize: size,
-      cols: [(iconLeft || IconLeft) && "min-content", "auto", `minmax(${size === "s" ? 15 : 21}px, auto)`].filter(
+      cols: [(iconLeft || IconLeft) && "min-content", "auto", `minmax(${size === "s" ? 14 : 20}px, auto)`].filter(
         (notFalse) => notFalse
       ),
       disabled,
@@ -104,7 +105,16 @@ const RemovablePill = import_react.default.memo((props) => {
       ...ownerProps,
       children: [
         (iconLeft || IconLeft) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TextComponent.TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_DSPillButton.DSPillButton,
           {
@@ -120,9 +130,9 @@ const RemovablePill = import_react.default.memo((props) => {
             tabIndex,
             applyAriaDisabled,
             disabled,
-            width: `${size === "s" ? 15 : 21}px`,
-            height: `${size === "s" ? 15 : 21}px`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, { width: size === "s" ? 15 : 21, height: size === "s" ? 15 : 21 })
+            width: `${size === "s" ? 14 : 20}px`,
+            height: `${size === "s" ? 14 : 20}px`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, { width: size === "s" ? 14 : 20, height: size === "s" ? 14 : 20 })
           }
         ) })
       ]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/RemovablePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nimport { DSPillGroupV2Context } from '../../parts/DSPillGroup/index.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledRemovablePillWrapper } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const RemovablePill = React.memo<DSPillT.InternalProps>((props) => {\n  const {\n    label,\n    size,\n    disabled,\n    labelTruncated,\n    onRemove,\n    innerRef,\n    ariaLabel,\n    tabIndex,\n    applyAriaDisabled,\n    iconLeft,\n    IconLeft,\n  } = props;\n  const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex: globalTabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (['Enter', 'Space'].includes(e.code)) {\n        if (applyAriaDisabled) return;\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, applyAriaDisabled],\n  );\n\n  const handleOnRemove = useCallback(\n    (e: React.KeyboardEvent | React.MouseEvent) => {\n      if (applyAriaDisabled) return;\n      if (onRemove) onRemove(e);\n    },\n    [onRemove, applyAriaDisabled],\n  );\n\n  return (\n    <StyledRemovablePillWrapper\n      pillSize={size}\n      cols={\n        [(iconLeft || IconLeft) && 'min-content', 'auto', `minmax(${size === 's' ? 15 : 21}px, auto)`].filter(\n          (notFalse) => notFalse,\n        ) as string[]\n      }\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      gutter={0}\n      alignItems=\"center\"\n      justifyItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n      data-label={ariaLabel || label}\n      hasIcon={(iconLeft || IconLeft) !== null}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {(iconLeft || IconLeft) && (\n        <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n      )}\n      <TextComponent pillSize={size} labelTruncated={labelTruncated} label={label} />\n      <StyledAgnosticPillRegion>\n        <DSPillButton\n          {...props}\n          className=\"ds-pill-focus-point\"\n          id={pillUid}\n          data-testid={PILL_V2_DATA_TESTID.PILL_REMOVABLE_ICON}\n          innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n          onClick={handleOnRemove}\n          onKeyDown={onKeyDown}\n          aria-label={`Remove ${label}`}\n          type=\"right\"\n          tabIndex={tabIndex}\n          applyAriaDisabled={applyAriaDisabled}\n          disabled={disabled}\n          width={`${size === 's' ? 15 : 21}px`}\n          height={`${size === 's' ? 15 : 21}px`}\n        >\n          <CloseXsmall width={size === 's' ? 15 : 21} height={size === 's' ? 15 : 21} />\n        </DSPillButton>\n      </StyledAgnosticPillRegion>\n    </StyledRemovablePillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6DnB;AA5DJ,sBAA4B;AAE5B,mBAAwD;AACxD,iBAAoB;AACpB,8BAAsD;AACtD,0BAA6B;AAG7B,yBAAqC;AACrC,2BAA8B;AAC9B,oBAAqE;AACrE,uBAAoC;AAE7B,MAAM,gBAAgB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,kBAAkB,qBAAqB,QAAI,yBAAW,uCAAoB;AAClF,QAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AACpD,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,gBAAgB,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAE5F,QAAM,gBAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,YAAI,kBAAmB;AACvB,UAAE,eAAe;AACjB,YAAI,iBAAkB,kBAAiB,OAAO;AAAA,MAChD;AACA,UAAI,EAAE,SAAS,aAAa;AAC1B,UAAE,eAAe;AACjB,YAAI,qBAAsB,sBAAqB,SAAS,IAAI,CAAC;AAAA,MAC/D;AACA,UAAI,EAAE,SAAS,cAAc;AAC3B,UAAE,eAAe;AACjB,YAAI,qBAAsB,sBAAqB,SAAS,GAAG,CAAC;AAAA,MAC9D;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,sBAAsB,SAAS,iBAAiB;AAAA,EACrE;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA8C;AAC7C,UAAI,kBAAmB;AACvB,UAAI,SAAU,UAAS,CAAC;AAAA,IAC1B;AAAA,IACA,CAAC,UAAU,iBAAiB;AAAA,EAC9B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,MACE,EAAE,YAAY,aAAa,eAAe,QAAQ,UAAU,SAAS,MAAM,KAAK,EAAE,WAAW,EAAE;AAAA,QAC7F,CAAC,aAAa;AAAA,MAChB;AAAA,MAEF;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,YAAW;AAAA,MACX,cAAa;AAAA,MACb,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,UAAU,YAAY,cAAc;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE9E,4CAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAc;AAAA,QAC7E,4CAAC,0CACC;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,eAAa,qCAAoB;AAAA,YACjC;AAAA,YACA,SAAS;AAAA,YACT;AAAA,YACA,cAAY,UAAU,KAAK;AAAA,YAC3B,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO,GAAG,SAAS,MAAM,KAAK,EAAE;AAAA,YAChC,QAAQ,GAAG,SAAS,MAAM,KAAK,EAAE;AAAA,YAEjC,sDAAC,+BAAY,OAAO,SAAS,MAAM,KAAK,IAAI,QAAQ,SAAS,MAAM,KAAK,IAAI;AAAA;AAAA,QAC9E,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nimport { DSPillGroupV2Context } from '../../parts/DSPillGroup/index.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledRemovablePillWrapper } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const RemovablePill = React.memo<DSPillT.InternalProps>((props) => {\n  const {\n    label,\n    size,\n    disabled,\n    labelTruncated,\n    disableTruncationTooltip,\n    onRemove,\n    innerRef,\n    ariaLabel,\n    tabIndex,\n    applyAriaDisabled,\n    iconLeft,\n    IconLeft,\n  } = props;\n  const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex: globalTabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (['Enter', 'Space'].includes(e.code)) {\n        if (applyAriaDisabled) return;\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, applyAriaDisabled],\n  );\n\n  const handleOnRemove = useCallback(\n    (e: React.KeyboardEvent | React.MouseEvent) => {\n      if (applyAriaDisabled) return;\n      if (onRemove) onRemove(e);\n    },\n    [onRemove, applyAriaDisabled],\n  );\n\n  return (\n    <StyledRemovablePillWrapper\n      pillSize={size}\n      cols={\n        [(iconLeft || IconLeft) && 'min-content', 'auto', `minmax(${size === 's' ? 14 : 20}px, auto)`].filter(\n          (notFalse) => notFalse,\n        ) as string[]\n      }\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      gutter={0}\n      alignItems=\"center\"\n      justifyItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n      data-label={ariaLabel || label}\n      hasIcon={(iconLeft || IconLeft) !== null}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {(iconLeft || IconLeft) && (\n        <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n      )}\n      <TextComponent\n        pillSize={size}\n        getOwnerProps={ownerProps.getOwnerProps}\n        labelTruncated={labelTruncated}\n        disableTruncationTooltip={disableTruncationTooltip}\n        label={label}\n      />\n      <StyledAgnosticPillRegion>\n        {/**\n         * Button size = pill fit-content target (18 small / 24 medium) minus the agnostic\n         * region's 2px top+bottom padding (\u00D72 = 4) \u2192 14 / 20. The pill height is fit-content,\n         * and this button region would otherwise dominate the b2 label box (18/24) and force\n         * the old 19/25. NOTE: no spec value exists for the button size that yields the pill's\n         * target height (the spec only gives \"Button V3 small square\" + region 2px); 14/20 is\n         * derived from the pill target \u2212 region padding. Raised as a spec concern.\n         */}\n        <DSPillButton\n          {...props}\n          className=\"ds-pill-focus-point\"\n          id={pillUid}\n          data-testid={PILL_V2_DATA_TESTID.PILL_REMOVABLE_ICON}\n          innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n          onClick={handleOnRemove}\n          onKeyDown={onKeyDown}\n          aria-label={`Remove ${label}`}\n          type=\"right\"\n          tabIndex={tabIndex}\n          applyAriaDisabled={applyAriaDisabled}\n          disabled={disabled}\n          width={`${size === 's' ? 14 : 20}px`}\n          height={`${size === 's' ? 14 : 20}px`}\n        >\n          <CloseXsmall width={size === 's' ? 14 : 20} height={size === 's' ? 14 : 20} />\n        </DSPillButton>\n      </StyledAgnosticPillRegion>\n    </StyledRemovablePillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DnB;AA7DJ,sBAA4B;AAE5B,mBAAwD;AACxD,iBAAoB;AACpB,8BAAsD;AACtD,0BAA6B;AAG7B,yBAAqC;AACrC,2BAA8B;AAC9B,oBAAqE;AACrE,uBAAoC;AAE7B,MAAM,gBAAgB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,kBAAkB,qBAAqB,QAAI,yBAAW,uCAAoB;AAClF,QAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AACpD,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,gBAAgB,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAE5F,QAAM,gBAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,YAAI,kBAAmB;AACvB,UAAE,eAAe;AACjB,YAAI,iBAAkB,kBAAiB,OAAO;AAAA,MAChD;AACA,UAAI,EAAE,SAAS,aAAa;AAC1B,UAAE,eAAe;AACjB,YAAI,qBAAsB,sBAAqB,SAAS,IAAI,CAAC;AAAA,MAC/D;AACA,UAAI,EAAE,SAAS,cAAc;AAC3B,UAAE,eAAe;AACjB,YAAI,qBAAsB,sBAAqB,SAAS,GAAG,CAAC;AAAA,MAC9D;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,sBAAsB,SAAS,iBAAiB;AAAA,EACrE;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA8C;AAC7C,UAAI,kBAAmB;AACvB,UAAI,SAAU,UAAS,CAAC;AAAA,IAC1B;AAAA,IACA,CAAC,UAAU,iBAAiB;AAAA,EAC9B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,MACE,EAAE,YAAY,aAAa,eAAe,QAAQ,UAAU,SAAS,MAAM,KAAK,EAAE,WAAW,EAAE;AAAA,QAC7F,CAAC,aAAa;AAAA,MAChB;AAAA,MAEF;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,YAAW;AAAA,MACX,cAAa;AAAA,MACb,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,UAAU,YAAY,cAAc;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE9E;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA,4CAAC,0CASC;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,eAAa,qCAAoB;AAAA,YACjC;AAAA,YACA,SAAS;AAAA,YACT;AAAA,YACA,cAAY,UAAU,KAAK;AAAA,YAC3B,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO,GAAG,SAAS,MAAM,KAAK,EAAE;AAAA,YAChC,QAAQ,GAAG,SAAS,MAAM,KAAK,EAAE;AAAA,YAEjC,sDAAC,+BAAY,OAAO,SAAS,MAAM,KAAK,IAAI,QAAQ,SAAS,MAAM,KAAK,IAAI;AAAA;AAAA,QAC9E,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -43,6 +43,7 @@ const ValuePill = import_react.default.memo((props) => {
     label,
     size,
     labelTruncated,
+    disableTruncationTooltip,
     disabled,
     tooltipValue,
     iconLeft,
@@ -77,7 +78,27 @@ const ValuePill = import_react.default.memo((props) => {
       tabIndex: -1,
       children: [
         (iconLeft || IconLeft) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft }),
-        tooltipValue !== "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: tooltipValue ?? "", applyTooltipOverflowWrap, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSpanWithTooltip, { pillSize: size, className: "ds-pill-tooltip-value", "aria-disabled": applyAriaDisabled, children: label }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label: `${label}${trailingComma ? "," : ""}` }),
+        tooltipValue !== "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: tooltipValue ?? "", applyTooltipOverflowWrap, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledSpanWithTooltip,
+          {
+            pillSize: size,
+            variant: "b2",
+            component: "span",
+            getOwnerProps: ownerProps.getOwnerProps,
+            className: "ds-pill-tooltip-value",
+            "aria-disabled": applyAriaDisabled,
+            children: label
+          }
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TextComponent.TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label: `${label}${trailingComma ? "," : ""}`
+          }
+        ),
         (iconRight || IconRight) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: IconRight ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconRight, { label }) : iconRight })
       ]
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/ValuePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>((props) => {\n  const {\n    label,\n    size,\n    labelTruncated,\n    disabled,\n    tooltipValue,\n    iconLeft,\n    IconLeft,\n    iconRight,\n    IconRight,\n    ariaLabel,\n    applyAriaDisabled,\n    readOnly,\n    applyTooltipOverflowWrap,\n    trailingComma,\n  } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n\n  return (\n    <StyledValuePillWrapper\n      disabled={disabled}\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n      cols={\n        [(iconLeft || IconLeft) && 'min-content', label && 'auto', (iconRight || IconRight) && 'min-content'].filter(\n          (notFalse) => notFalse,\n        ) as string[]\n      }\n      hasIcon={(iconLeft || IconLeft) !== null}\n      hasIconRight={(iconRight || IconRight) !== null}\n      data-label={ariaLabel || label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n      {...globalAttributes}\n      {...ownerProps}\n      tabIndex={-1}\n    >\n      {(iconLeft || IconLeft) && (\n        <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n      )}\n      {tooltipValue !== '' ? (\n        <DSTooltipV3 text={tooltipValue ?? ''} applyTooltipOverflowWrap={applyTooltipOverflowWrap}>\n          <StyledSpanWithTooltip pillSize={size} className=\"ds-pill-tooltip-value\" aria-disabled={applyAriaDisabled}>\n            {label}\n          </StyledSpanWithTooltip>\n        </DSTooltipV3>\n      ) : (\n        <TextComponent pillSize={size} labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n      )}\n      {(iconRight || IconRight) && (\n        <StyledAgnosticPillRegion>{IconRight ? <IconRight label={label} /> : iconRight}</StyledAgnosticPillRegion>\n      )}\n    </StyledValuePillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BnB;AA5BJ,8BAAsD;AACtD,2BAA4B;AAC5B,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAwF;AAEjF,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,QACpG,CAAC,aAAa;AAAA,MAChB;AAAA,MAEF,UAAU,YAAY,cAAc;AAAA,MACpC,eAAe,aAAa,eAAe;AAAA,MAC3C,cAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,UAAU;AAAA,MAER;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE7E,iBAAiB,KAChB,4CAAC,oCAAY,MAAM,gBAAgB,IAAI,0BACrC,sDAAC,uCAAsB,UAAU,MAAM,WAAU,yBAAwB,iBAAe,mBACrF,iBACH,GACF,IAEA,4CAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA,SAE7G,aAAa,cACb,4CAAC,0CAA0B,sBAAY,4CAAC,aAAU,OAAc,IAAK,WAAU;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>((props) => {\n  const {\n    label,\n    size,\n    labelTruncated,\n    disableTruncationTooltip,\n    disabled,\n    tooltipValue,\n    iconLeft,\n    IconLeft,\n    iconRight,\n    IconRight,\n    ariaLabel,\n    applyAriaDisabled,\n    readOnly,\n    applyTooltipOverflowWrap,\n    trailingComma,\n  } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n\n  return (\n    <StyledValuePillWrapper\n      disabled={disabled}\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n      cols={\n        [(iconLeft || IconLeft) && 'min-content', label && 'auto', (iconRight || IconRight) && 'min-content'].filter(\n          (notFalse) => notFalse,\n        ) as string[]\n      }\n      hasIcon={(iconLeft || IconLeft) !== null}\n      hasIconRight={(iconRight || IconRight) !== null}\n      data-label={ariaLabel || label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n      {...globalAttributes}\n      {...ownerProps}\n      tabIndex={-1}\n    >\n      {(iconLeft || IconLeft) && (\n        <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n      )}\n      {tooltipValue !== '' ? (\n        <DSTooltipV3 text={tooltipValue ?? ''} applyTooltipOverflowWrap={applyTooltipOverflowWrap}>\n          <StyledSpanWithTooltip\n            pillSize={size}\n            variant=\"b2\"\n            component=\"span\"\n            getOwnerProps={ownerProps.getOwnerProps}\n            className=\"ds-pill-tooltip-value\"\n            aria-disabled={applyAriaDisabled}\n          >\n            {label}\n          </StyledSpanWithTooltip>\n        </DSTooltipV3>\n      ) : (\n        <TextComponent\n          pillSize={size}\n          getOwnerProps={ownerProps.getOwnerProps}\n          labelTruncated={labelTruncated}\n          disableTruncationTooltip={disableTruncationTooltip}\n          label={`${label}${trailingComma ? ',' : ''}`}\n        />\n      )}\n      {(iconRight || IconRight) && (\n        <StyledAgnosticPillRegion>{IconRight ? <IconRight label={label} /> : iconRight}</StyledAgnosticPillRegion>\n      )}\n    </StyledValuePillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BnB;AA7BJ,8BAAsD;AACtD,2BAA4B;AAC5B,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAwF;AAEjF,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,QACpG,CAAC,aAAa;AAAA,MAChB;AAAA,MAEF,UAAU,YAAY,cAAc;AAAA,MACpC,eAAe,aAAa,eAAe;AAAA,MAC3C,cAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,UAAU;AAAA,MAER;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE7E,iBAAiB,KAChB,4CAAC,oCAAY,MAAM,gBAAgB,IAAI,0BACrC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B,WAAU;AAAA,YACV,iBAAe;AAAA,YAEd;AAAA;AAAA,QACH,GACF,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE;AAAA;AAAA,QAC5C;AAAA,SAEA,aAAa,cACb,4CAAC,0CAA0B,sBAAY,4CAAC,aAAU,OAAc,IAAK,WAAU;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;",
   "names": ["React"]
 }