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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/InputPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { 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"],
-  "mappings": "AAAA,YAAY,WAAW;AC2CjB,SASE,KATF;AA1CN,OAAOA,UAAS,aAAa,SAAS,QAAQ,gBAAgB;AAE9D,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B,8BAA8B;AACjE,SAAS,oBAAoB;AAE7B,SAAS,2BAA2B;AAE7B,MAAM,YAAYA,OAAM;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,MAAM,OAAgC,IAAI;AAEhD,UAAM,iBAAiB,QAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,UAAU,QAAQ,MAAM,WAAW,WAAW,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAEtE,UAAM,mBAAmB;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,IAAI,SAAS,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,oBAAoB;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,oBAAC,4BACC;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa,oBAAoB;AAAA,cACjC;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,8BAAC,eAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -5,7 +5,18 @@ import React2 from "react";
 import { TextComponent } from "../TextComponent.js";
 import { StyledLabelOnlyPillWrapper } from "../styled.js";
 const LabelOnlyPill = React2.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 = useOwnerProps(props);
   const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);
   return /* @__PURE__ */ jsxs(
@@ -26,7 +37,16 @@ const LabelOnlyPill = React2.memo((props) => {
       ...ownerProps,
       children: [
         IconLeft ? /* @__PURE__ */ jsx(IconLeft, { label }) : iconLeft,
-        /* @__PURE__ */ jsx(TextComponent, { pillSize: size, labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
+        /* @__PURE__ */ jsx(
+          TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label: `${label}${trailingComma ? "," : ""}`
+          }
+        )
       ]
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/LabelOnlyPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACanB,SAec,KAfd;AAZJ,SAAS,wBAAwB,qBAAqB;AACtD,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAEpC,MAAM,gBAAgBA,OAAM,KAA4B,CAAC,UAAU;AACxE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,mBAAmB,UAAU,cAAc,IAC7G;AACF,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,IAAI,uBAAuB,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,oBAAC,YAAS,OAAc,IAAK;AAAA,QACzC,oBAAC,iBAAc,UAAU,MAAM,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAC/G;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBnB,SAec,KAfd;AAtBJ,SAAS,wBAAwB,qBAAqB;AACtD,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAEpC,MAAM,gBAAgBA,OAAM,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,aAAa,cAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,IAAI,uBAAuB,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,oBAAC,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/esm/components/types/LabelPill.js

@@ -5,7 +5,7 @@ import React2 from "react";
 import { TextComponent } from "../TextComponent.js";
 import { StyledAgnosticPillRegion, StyledLabelPillWrapper } from "../styled.js";
 const LabelPill = React2.memo((props) => {
-  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel } = props;
+  const { label, size, labelTruncated, disableTruncationTooltip, iconLeft, IconLeft, ariaLabel } = props;
   const ownerProps = useOwnerProps(props);
   const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);
   return /* @__PURE__ */ jsxs(
@@ -24,7 +24,16 @@ const LabelPill = React2.memo((props) => {
       ...ownerProps,
       children: [
         (iconLeft || IconLeft) && /* @__PURE__ */ jsx(StyledAgnosticPillRegion, { children: IconLeft ? /* @__PURE__ */ jsx(IconLeft, { label }) : iconLeft }),
-        /* @__PURE__ */ jsx(TextComponent, { pillSize: size, labelTruncated, label })
+        /* @__PURE__ */ jsx(
+          TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label
+          }
+        )
       ]
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/LabelPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport { 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACYnB,SAc0C,KAd1C;AAXJ,SAAS,wBAAwB,qBAAqB;AACtD,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,8BAA8B;AAE1D,MAAM,YAAYA,OAAM,KAA4B,CAAC,UAAU;AACpE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,UAAU,IAAI;AACvE,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,IAAI,uBAAuB,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,oBAAC,4BAA0B,qBAAW,oBAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE9E,oBAAC,iBAAc,UAAU,MAAM,gBAAgC,OAAc;AAAA;AAAA;AAAA,EAC/E;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACYnB,SAc0C,KAd1C;AAXJ,SAAS,wBAAwB,qBAAqB;AACtD,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,8BAA8B;AAE1D,MAAM,YAAYA,OAAM,KAA4B,CAAC,UAAU;AACpE,QAAM,EAAE,OAAO,MAAM,gBAAgB,0BAA0B,UAAU,UAAU,UAAU,IAAI;AACjG,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,IAAI,uBAAuB,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,oBAAC,4BAA0B,qBAAW,oBAAC,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/esm/components/types/MenuButtonPill.js

@@ -11,7 +11,7 @@ import { PILL_V2_DATA_TESTID } from "../../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 = React2.memo((props) => {
-  const { label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps } = props;
+  const { label, size, labelTruncated, disableTruncationTooltip, innerRef, ariaLabel, menuButtonProps } = props;
   const ownerProps = useOwnerProps(props);
   const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);
   const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
@@ -48,7 +48,16 @@ const MenuButtonPill = React2.memo((props) => {
       ...globalAttributes,
       ...ownerProps,
       children: [
-        /* @__PURE__ */ jsx(TextComponent, { pillSize: size, labelTruncated, label }),
+        /* @__PURE__ */ jsx(
+          TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label
+          }
+        ),
         /* @__PURE__ */ jsx(StyledAgnosticPillRegion, { children: /* @__PURE__ */ jsx(
           StyledPillMenuButton,
           {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/MenuButtonPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACwDnB,SAYE,KAZF;AAvDJ,SAAS,wBAAwB;AAEjC,SAAS,wBAAwB,qBAAqB;AACtD,OAAOA,UAAS,eAAe;AAC/B,SAAS,WAAW;AAEpB,SAAS,gBAAgB,gCAAgC;AACzD,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,2BAA2B,4BAA4B;AAC1F,SAAS,2BAA2B;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,iBAAiBA,OAAM,KAA4B,CAAC,UAAU;AACzE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB,IAAI;AAC9E,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,IAAI,uBAAuB,KAAK;AAC5E,QAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,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,yBAAyB,OAAO,SAAS,yBAAyB,OAAO,IAAI;AAE7F,QAAM,eAAe,QAAQ,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC1D,QAAM,eAAe,QAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,QAAM,wBAAwB;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,4BAAC,iBAAc,UAAU,MAAM,gBAAgC,OAAc;AAAA,QAC7E,oBAAC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,kBAAkB;AAAA,YACjB,GAAG;AAAA,YAGJ,eAAa,oBAAoB;AAAA,YACjC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAO,GAAG,KAAK;AAAA,YACf,QAAQ,GAAG,MAAM;AAAA,YAEhB,GAAG;AAAA,YAEJ,8BAAC,oBAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QACrD,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACwDnB,SAYE,KAZF;AAvDJ,SAAS,wBAAwB;AAEjC,SAAS,wBAAwB,qBAAqB;AACtD,OAAOA,UAAS,eAAe;AAC/B,SAAS,WAAW;AAEpB,SAAS,gBAAgB,gCAAgC;AACzD,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,2BAA2B,4BAA4B;AAC1F,SAAS,2BAA2B;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,iBAAiBA,OAAM,KAA4B,CAAC,UAAU;AACzE,QAAM,EAAE,OAAO,MAAM,gBAAgB,0BAA0B,UAAU,WAAW,gBAAgB,IAAI;AACxG,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,IAAI,uBAAuB,KAAK;AAC5E,QAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,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,yBAAyB,OAAO,SAAS,yBAAyB,OAAO,IAAI;AAE7F,QAAM,eAAe,QAAQ,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC1D,QAAM,eAAe,QAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,QAAM,wBAAwB;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,oBAAC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,kBAAkB;AAAA,YACjB,GAAG;AAAA,YAGJ,eAAa,oBAAoB;AAAA,YACjC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAO,GAAG,KAAK;AAAA,YACf,QAAQ,GAAG,MAAM;AAAA,YAEhB,GAAG;AAAA,YAEJ,8BAAC,oBAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QACrD,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -5,7 +5,7 @@ import React2 from "react";
 import { TextComponent } from "../TextComponent.js";
 import { StyledAgnosticPillRegion, StyledReadonlyPillWrapper } from "../styled.js";
 const ReadOnlyPill = React2.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 = useOwnerProps(props);
   const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);
   const hasIconLeft = iconLeft !== null || iconRight !== null && label === "";
@@ -29,7 +29,16 @@ const ReadOnlyPill = React2.memo((props) => {
       ...ownerProps,
       children: [
         (iconLeft || IconLeft) && /* @__PURE__ */ jsx(StyledAgnosticPillRegion, { children: IconLeft ? /* @__PURE__ */ jsx(IconLeft, { label }) : iconLeft }),
-        label ? /* @__PURE__ */ jsx(TextComponent, { pillSize: size, labelTruncated, label }) : null,
+        label ? /* @__PURE__ */ jsx(
+          TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label
+          }
+        ) : null,
         (iconRight || IconRight) && /* @__PURE__ */ jsx(StyledAgnosticPillRegion, { children: IconRight ? /* @__PURE__ */ jsx(IconRight, { label }) : iconRight })
       ]
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/ReadOnlyPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBnB,SAiB0C,KAjB1C;AAjBJ,SAAS,wBAAwB,qBAAqB;AACtD,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,iCAAiC;AAE7D,MAAM,eAAeA,OAAM,KAA4B,CAAC,UAAU;AACvE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,WAAW,UAAU,UAAU,IAAI;AAC7F,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,IAAI,uBAAuB,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,oBAAC,4BAA0B,qBAAW,oBAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE7E,QAAQ,oBAAC,iBAAc,UAAU,MAAM,gBAAgC,OAAc,IAAK;AAAA,SACzF,aAAa,cACb,oBAAC,4BAA0B,sBAAY,oBAAC,aAAU,OAAc,IAAK,WAAU;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBnB,SAiB0C,KAjB1C;AAlBJ,SAAS,wBAAwB,qBAAqB;AACtD,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,iCAAiC;AAE7D,MAAM,eAAeA,OAAM,KAA4B,CAAC,UAAU;AACvE,QAAM,EAAE,OAAO,MAAM,gBAAgB,0BAA0B,UAAU,WAAW,WAAW,UAAU,UAAU,IACjH;AACF,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,IAAI,uBAAuB,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,oBAAC,4BAA0B,qBAAW,oBAAC,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,oBAAC,4BAA0B,sBAAY,oBAAC,aAAU,OAAc,IAAK,WAAU;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -15,6 +15,7 @@ const RemovablePill = React2.memo((props) => {
     size,
     disabled,
     labelTruncated,
+    disableTruncationTooltip,
     onRemove,
     innerRef,
     ariaLabel,
@@ -56,7 +57,7 @@ const RemovablePill = React2.memo((props) => {
     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,
@@ -71,7 +72,16 @@ const RemovablePill = React2.memo((props) => {
       ...ownerProps,
       children: [
         (iconLeft || IconLeft) && /* @__PURE__ */ jsx(StyledAgnosticPillRegion, { children: IconLeft ? /* @__PURE__ */ jsx(IconLeft, { label }) : iconLeft }),
-        /* @__PURE__ */ jsx(TextComponent, { pillSize: size, labelTruncated, label }),
+        /* @__PURE__ */ jsx(
+          TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label
+          }
+        ),
         /* @__PURE__ */ jsx(StyledAgnosticPillRegion, { children: /* @__PURE__ */ jsx(
           DSPillButton,
           {
@@ -87,9 +97,9 @@ const RemovablePill = React2.memo((props) => {
             tabIndex,
             applyAriaDisabled,
             disabled,
-            width: `${size === "s" ? 15 : 21}px`,
-            height: `${size === "s" ? 15 : 21}px`,
-            children: /* @__PURE__ */ jsx(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__ */ jsx(CloseXsmall, { width: size === "s" ? 14 : 20, height: size === "s" ? 14 : 20 })
           }
         ) })
       ]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/RemovablePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable 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"],
-  "mappings": "AAAA,YAAY,WAAW;AC6DnB,SAmB0C,KAnB1C;AA5DJ,SAAS,mBAAmB;AAE5B,OAAOA,UAAS,aAAa,YAAY,eAAe;AACxD,SAAS,WAAW;AACpB,SAAS,wBAAwB,qBAAqB;AACtD,SAAS,oBAAoB;AAG7B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,kCAAkC;AACrE,SAAS,2BAA2B;AAE7B,MAAM,gBAAgBA,OAAM,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,IAAI,WAAW,oBAAoB;AAClF,QAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,CAAC,IAAI,CAAC,CAAC;AACpD,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,gBAAgB,GAAG,iBAAiB,IAAI,uBAAuB,KAAK;AAE5F,QAAM,YAAY;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,iBAAiB;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,oBAAC,4BAA0B,qBAAW,oBAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE9E,oBAAC,iBAAc,UAAU,MAAM,gBAAgC,OAAc;AAAA,QAC7E,oBAAC,4BACC;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,eAAa,oBAAoB;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,8BAAC,eAAY,OAAO,SAAS,MAAM,KAAK,IAAI,QAAQ,SAAS,MAAM,KAAK,IAAI;AAAA;AAAA,QAC9E,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
   "names": ["React"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/ValuePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable 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"],
-  "mappings": "AAAA,YAAY,WAAW;AC6BnB,SAoB0C,KApB1C;AA5BJ,SAAS,wBAAwB,qBAAqB;AACtD,SAAS,mBAAmB;AAC5B,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,uBAAuB,8BAA8B;AAEjF,MAAM,YAAYA,OAAM,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,aAAa,cAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,IAAI,uBAAuB,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,oBAAC,4BAA0B,qBAAW,oBAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE7E,iBAAiB,KAChB,oBAAC,eAAY,MAAM,gBAAgB,IAAI,0BACrC,8BAAC,yBAAsB,UAAU,MAAM,WAAU,yBAAwB,iBAAe,mBACrF,iBACH,GACF,IAEA,oBAAC,iBAAc,UAAU,MAAM,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA,SAE7G,aAAa,cACb,oBAAC,4BAA0B,sBAAY,oBAAC,aAAU,OAAc,IAAK,WAAU;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;AC8BnB,SAoB0C,KApB1C;AA7BJ,SAAS,wBAAwB,qBAAqB;AACtD,SAAS,mBAAmB;AAC5B,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,uBAAuB,8BAA8B;AAEjF,MAAM,YAAYA,OAAM,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,aAAa,cAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,IAAI,uBAAuB,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,oBAAC,4BAA0B,qBAAW,oBAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE7E,iBAAiB,KAChB,oBAAC,eAAY,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,oBAAC,4BAA0B,sBAAY,oBAAC,aAAU,OAAc,IAAK,WAAU;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/config/useValidateProps.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSPillName } from "../constants/index.js";
+const TYPES_WITHOUT_AGNOSTIC_REGIONS = ["menubutton", "dropdown", "input"];
+const TYPES_RENDERING = {
+  left: "value, readonly, label, labelOnly, removable",
+  right: "value, readonly"
+};
+const REGION_PROPS = [
+  { name: "IconLeft", side: "left" },
+  { name: "iconLeft", side: "left" },
+  { name: "IconRight", side: "right" },
+  { name: "iconRight", side: "right" }
+];
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSPillName);
+  if (TYPES_WITHOUT_AGNOSTIC_REGIONS.includes(props.type)) {
+    ["left", "right"].forEach((side) => {
+      const provided = REGION_PROPS.filter((prop) => prop.side === side && Boolean(props[prop.name])).map(
+        (prop) => prop.name
+      );
+      if (!provided.length) return;
+      const plural = provided.length > 1;
+      console.warn(
+        `[${DSPillName}] ${provided.join(", ")} ${plural ? "were" : "was"} passed to a pill of type "${props.type}", which renders no agnostic region, so ${plural ? "they" : "it"} will be ignored. Its regions are dictated by the type. Types rendering the ${side} agnostic region: ${TYPES_RENDERING[side]}.`
+      );
+    });
+  }
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/esm/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-console */\nimport { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSPillName } from '../constants/index.js';\nimport type { DSPillT } from '../react-desc-prop-types.js';\n\nconst TYPES_WITHOUT_AGNOSTIC_REGIONS = ['menubutton', 'dropdown', 'input'];\n\nconst TYPES_RENDERING = {\n  left: 'value, readonly, label, labelOnly, removable',\n  right: 'value, readonly',\n} as const;\n\nconst REGION_PROPS = [\n  { name: 'IconLeft', side: 'left' },\n  { name: 'iconLeft', side: 'left' },\n  { name: 'IconRight', side: 'right' },\n  { name: 'iconRight', side: 'right' },\n] as const;\n\nexport const useValidateProps = (props: DSPillT.InternalProps, propTypes: ValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSPillName);\n\n  if (TYPES_WITHOUT_AGNOSTIC_REGIONS.includes(props.type)) {\n    (['left', 'right'] as const).forEach((side) => {\n      const provided = REGION_PROPS.filter((prop) => prop.side === side && Boolean(props[prop.name])).map(\n        (prop) => prop.name,\n      );\n      if (!provided.length) return;\n      const plural = provided.length > 1;\n      console.warn(\n        `[${DSPillName}] ${provided.join(', ')} ${plural ? 'were' : 'was'} passed to a pill of type \"${props.type}\", which renders no agnostic region, so ${plural ? 'they' : 'it'} will be ignored. Its regions are dictated by the type. Types rendering the ${side} agnostic region: ${TYPES_RENDERING[side]}.`,\n      );\n    });\n  }\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,sCAA0D;AACnE,SAAS,kBAAkB;AAG3B,MAAM,iCAAiC,CAAC,cAAc,YAAY,OAAO;AAEzE,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAe;AAAA,EACnB,EAAE,MAAM,YAAY,MAAM,OAAO;AAAA,EACjC,EAAE,MAAM,YAAY,MAAM,OAAO;AAAA,EACjC,EAAE,MAAM,aAAa,MAAM,QAAQ;AAAA,EACnC,EAAE,MAAM,aAAa,MAAM,QAAQ;AACrC;AAEO,MAAM,mBAAmB,CAAC,OAA8B,cAA4C;AAEzG,iCAA+B,OAAO,WAAW,UAAU;AAE3D,MAAI,+BAA+B,SAAS,MAAM,IAAI,GAAG;AACvD,IAAC,CAAC,QAAQ,OAAO,EAAY,QAAQ,CAAC,SAAS;AAC7C,YAAM,WAAW,aAAa,OAAO,CAAC,SAAS,KAAK,SAAS,QAAQ,QAAQ,MAAM,KAAK,IAAI,CAAC,CAAC,EAAE;AAAA,QAC9F,CAAC,SAAS,KAAK;AAAA,MACjB;AACA,UAAI,CAAC,SAAS,OAAQ;AACtB,YAAM,SAAS,SAAS,SAAS;AACjC,cAAQ;AAAA,QACN,IAAI,UAAU,KAAK,SAAS,KAAK,IAAI,CAAC,IAAI,SAAS,SAAS,KAAK,8BAA8B,MAAM,IAAI,2CAA2C,SAAS,SAAS,IAAI,+EAA+E,IAAI,qBAAqB,gBAAgB,IAAI,CAAC;AAAA,MACzS;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

package/dist/esm/constants/index.js

@@ -4,9 +4,11 @@ const DSPillV2Name = "DSPill";
 const DSPillName = DSPillV2Name;
 const PILL_V2_SLOTS = {
   WRAPPER: "wrapper",
+  LABEL: "label",
   PILL_GROUP: "pill-group",
   PILL_BUTTON: "pill-button",
-  PILL_MENU_BUTTON: "menu-button-chevron"
+  PILL_MENU_BUTTON: "menu-button-chevron",
+  PILL_INPUT: "input"
 };
 const legacyHardcodedDataTestIds = {
   // this is for the close icon button in the removable pill

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSPillV2Name = 'DSPill';\nexport const DSPillName = DSPillV2Name;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_V2_SLOTS = {\n  WRAPPER: 'wrapper',\n  PILL_GROUP: 'pill-group',\n  PILL_BUTTON: 'pill-button',\n  PILL_MENU_BUTTON: 'menu-button-chevron',\n} as const;\n\nconst legacyHardcodedDataTestIds = {\n  // this is for the close icon button in the removable pill\n  PILL_REMOVABLE_ICON: 'ds-pill-close-icon',\n  // this is for the chevron button in the dropdown pill\n  PILL_DROPDOWN_CHEVRON: 'ds-pill-dropdown-chevron',\n  // this is for the clear icon button in the input pill\n  PILL_CLEAR_ICON: 'ds-pill-clear-icon',\n  // this is for the input element in the input pill\n  PILL_INPUT: 'ds-pill-input',\n};\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_V2_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSPillV2Name, PILL_V2_SLOTS),\n  PILL_BUTTON: 'ds-button',\n  ...legacyHardcodedDataTestIds,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AACrB,MAAM,aAAa;AAGnB,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,kBAAkB;AACpB;AAEA,MAAM,6BAA6B;AAAA;AAAA,EAEjC,qBAAqB;AAAA;AAAA,EAErB,uBAAuB;AAAA;AAAA,EAEvB,iBAAiB;AAAA;AAAA,EAEjB,YAAY;AACd;AAGO,MAAM,sBAAsB;AAAA,EACjC,GAAG,wBAAwB,cAAc,aAAa;AAAA,EACtD,aAAa;AAAA,EACb,GAAG;AACL;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSPillV2Name = 'DSPill';\nexport const DSPillName = DSPillV2Name;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_V2_SLOTS = {\n  WRAPPER: 'wrapper',\n  LABEL: 'label',\n  PILL_GROUP: 'pill-group',\n  PILL_BUTTON: 'pill-button',\n  PILL_MENU_BUTTON: 'menu-button-chevron',\n  PILL_INPUT: 'input',\n} as const;\n\nconst legacyHardcodedDataTestIds = {\n  // this is for the close icon button in the removable pill\n  PILL_REMOVABLE_ICON: 'ds-pill-close-icon',\n  // this is for the chevron button in the dropdown pill\n  PILL_DROPDOWN_CHEVRON: 'ds-pill-dropdown-chevron',\n  // this is for the clear icon button in the input pill\n  PILL_CLEAR_ICON: 'ds-pill-clear-icon',\n  // this is for the input element in the input pill\n  PILL_INPUT: 'ds-pill-input',\n};\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_V2_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSPillV2Name, PILL_V2_SLOTS),\n  PILL_BUTTON: 'ds-button',\n  ...legacyHardcodedDataTestIds,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AACrB,MAAM,aAAa;AAGnB,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,YAAY;AACd;AAEA,MAAM,6BAA6B;AAAA;AAAA,EAEjC,qBAAqB;AAAA;AAAA,EAErB,uBAAuB;AAAA;AAAA,EAEvB,iBAAiB;AAAA;AAAA,EAEjB,YAAY;AACd;AAGO,MAAM,sBAAsB;AAAA,EACjC,GAAG,wBAAwB,cAAc,aAAa;AAAA,EACtD,aAAa;AAAA,EACb,GAAG;AACL;",
   "names": []
 }

package/dist/esm/parts/DSPillButton/react-desc-prop-types.js

@@ -8,8 +8,14 @@ import {
 import { DSPillV2Name, PILL_BUTTON_SLOTS } from "./constants/index.js";
 const defaultProps = {
   type: "right",
-  width: "21px",
-  height: "21px"
+  /**
+   * 20px = medium pill fit-content target (24) minus the agnostic region's 2px top+bottom
+   * padding (×2). Was 21px, which forced the old 25px pill height and dominated the b2 label
+   * box (24). Small pills pass 14px explicitly (see RemovablePill). No spec value exists for the
+   * button size that yields the pill target — derived from pill height − region padding.
+   */
+  width: "20px",
+  height: "20px"
 };
 const DSPillButtonPropTypes = {
   ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_BUTTON_SLOTS),

package/dist/esm/parts/DSPillButton/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPillButton/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSButtonV3T, DSButtonName, DSButtonSlots } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPillV2Name, PILL_BUTTON_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPillButtonT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPillV2Name, typeof PILL_BUTTON_SLOTS> {\n    applyAriaDisabled?: boolean;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLButtonElement>;\n  }\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      /**\n       * Extends DSButtonV3T.Props, omitting the following because they are handled internally:\n       *\n       * - type: Set based on the button's position (left, right, or only).\n       * - buttonType: Forced to \"raw\" to strip default styles for custom pill styling.\n       * - shape: Determined by the button's position in the group; users should never ask to alter this, we don't support shape in this scenario\n       * - width/height: Converted to RTS values internally before being passed to DSButtonV3.\n       */\n      Omit<\n        DSButtonV3T.Props,\n        | 'type'\n        | 'width'\n        | 'height'\n        | 'buttonType'\n        | keyof TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots>\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        DSButtonV3T.Props,\n        | 'type'\n        | 'width'\n        | 'height'\n        | 'buttonType'\n        | keyof TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots>\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPillButtonT.DefaultProps = {\n  type: 'right',\n  width: '21px',\n  height: '21px',\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillButtonT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_BUTTON_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  'data-testid': PropTypes.string.description('root element data-testid'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillButtonT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,yBAAyB;AAqDzC,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG,yBAAyB,cAAc,iBAAiB;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,CAAC,QAAQ,QAAQ,OAAO,CAAC,EAC5C,YAAY,wFAAwF,EACpG,aAAa,OAAO;AAAA,EACvB,OAAO,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,MAAM;AAAA,EAC9E,QAAQ,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAChF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,eAAe,UAAU,OAAO,YAAY,0BAA0B;AAAA,EACtE,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,8BAA8B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T, DSButtonName, DSButtonSlots } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPillV2Name, PILL_BUTTON_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPillButtonT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSPillV2Name,\n    typeof PILL_BUTTON_SLOTS\n  > {\n    applyAriaDisabled?: boolean;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLButtonElement>;\n  }\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      /**\n       * Extends DSButtonV3T.Props, omitting the following because they are handled internally:\n       *\n       * - type: Set based on the button's position (left, right, or only).\n       * - buttonType: Forced to \"raw\" to strip default styles for custom pill styling.\n       * - shape: Determined by the button's position in the group; users should never ask to alter this, we don't support shape in this scenario\n       * - width/height: Converted to RTS values internally before being passed to DSButtonV3.\n       */\n      Omit<\n        DSButtonV3T.Props,\n        | 'type'\n        | 'width'\n        | 'height'\n        | 'buttonType'\n        | keyof TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots>\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<\n        DSButtonV3T.Props,\n        | 'type'\n        | 'width'\n        | 'height'\n        | 'buttonType'\n        | keyof TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots>\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPillButtonT.DefaultProps = {\n  type: 'right',\n  /**\n   * 20px = medium pill fit-content target (24) minus the agnostic region's 2px top+bottom\n   * padding (\u00D72). Was 21px, which forced the old 25px pill height and dominated the b2 label\n   * box (24). Small pills pass 14px explicitly (see RemovablePill). No spec value exists for the\n   * button size that yields the pill target \u2014 derived from pill height \u2212 region padding.\n   */\n  width: '20px',\n  height: '20px',\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillButtonT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_BUTTON_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  'data-testid': PropTypes.string.description('root element data-testid'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillButtonT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,yBAAyB;AAyDzC,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAON,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG,yBAAyB,cAAc,iBAAiB;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,CAAC,QAAQ,QAAQ,OAAO,CAAC,EAC5C,YAAY,wFAAwF,EACpG,aAAa,OAAO;AAAA,EACvB,OAAO,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,MAAM;AAAA,EAC9E,QAAQ,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAChF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,eAAe,UAAU,OAAO,YAAY,0BAA0B;AAAA,EACtE,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,8BAA8B;",
   "names": []
 }

package/dist/esm/parts/DSPillGroup/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPillGroup/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPillV2Name, PILL_GROUP_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPillGroupT {\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface DefaultProps {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPillV2Name, typeof PILL_GROUP_SLOTS> {}\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPillGroupT.DefaultProps = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillGroupT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_GROUP_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillGroupT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,wBAAwB;AA6BxC,MAAM,eAA0C;AAAA,EACrD,OAAO;AAAA,EACP,UAAU,MAAM;AAClB;AAEO,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,cAAc,gBAAgB;AAAA,EAC1D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,aAAa;AAAA,EACpF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAC7D,YAAY,qCAAqC,EACjD,aAAa,MAAM,IAAI;AAAA,EAC1B,UAAU,UAAU,KAAK,YAAY,8BAA8B,EAAE;AACvE;AAEO,MAAM,6BAA6B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPillV2Name, PILL_GROUP_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPillGroupT {\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface DefaultProps {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSPillV2Name,\n    typeof PILL_GROUP_SLOTS\n  > {}\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPillGroupT.DefaultProps = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillGroupT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_GROUP_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillGroupT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,wBAAwB;AAiCxC,MAAM,eAA0C;AAAA,EACrD,OAAO;AAAA,EACP,UAAU,MAAM;AAClB;AAEO,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,cAAc,gBAAgB;AAAA,EAC1D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,aAAa;AAAA,EACpF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAC7D,YAAY,qCAAqC,EACjD,aAAa,MAAM,IAAI;AAAA,EAC1B,UAAU,UAAU,KAAK,YAAY,8BAA8B,EAAE;AACvE;AAEO,MAAM,6BAA6B;",
   "names": []
 }