@elliemae/ds-pills-v2 3.60.0-next.1 → 3.60.0-next.2

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 { StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\n  ({\n    label,\n    size,\n    inputPlaceholder,\n    inputWidth,\n    inputRender,\n    onInputChange,\n    onInputClear,\n    innerRef,\n    hasError,\n    inputId,\n  }) => {\n    const ref = useRef<HTMLInputElement | null>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n    const onCloseIconClick = useCallback(\n      (e: React.KeyboardEvent | React.MouseEvent) => {\n        if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\n          e.preventDefault();\n          onInputClear?.(e);\n          ref.current?.focus();\n        }\n      },\n      [onInputClear],\n    );\n\n    const [inputHasFocus, setInputHasFocus] = useState(false);\n\n    return (\n      <StyledInputPillWrapper\n        pillSize={size}\n        className=\"ds-pill-wrapper\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={label === '' ? ['auto'] : ['auto', '24px']}\n        inputWidth={inputWidth}\n        value={label ?? ''}\n        inputHasFocus={inputHasFocus}\n        hasError={hasError}\n      >\n        <InputComponent\n          id={pillUid}\n          className=\"ds-pill-focus-point\"\n          data-testid=\"ds-pill-input\"\n          innerRef={(_ref: HTMLInputElement | null) => {\n            ref.current = _ref;\n          }}\n          value={label}\n          onChange={onInputChange}\n          placeholder={inputPlaceholder}\n          onFocus={() => setInputHasFocus(true)}\n          onBlur={() => setInputHasFocus(false)}\n          disableTooltip={false}\n        />\n        {label !== '' && (\n          <DSPillButton\n            id={pillUid}\n            data-testid=\"ds-pill-clear-icon\"\n            innerRef={innerRef as 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        )}\n      </StyledInputPillWrapper>\n    );\n  },\n);\n"],
+  "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 { StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\n  ({\n    label,\n    size,\n    inputPlaceholder,\n    inputWidth,\n    inputRender,\n    onInputChange,\n    onInputClear,\n    innerRef,\n    hasError,\n    inputId,\n  }) => {\n    const ref = useRef<HTMLInputElement | null>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n    const onCloseIconClick = useCallback(\n      (e: React.KeyboardEvent | React.MouseEvent) => {\n        if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\n          e.preventDefault();\n          onInputClear?.(e);\n          ref.current?.focus();\n        }\n      },\n      [onInputClear],\n    );\n\n    const [inputHasFocus, setInputHasFocus] = useState(false);\n\n    return (\n      <StyledInputPillWrapper\n        pillSize={size}\n        className=\"ds-pill-wrapper\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={label === '' ? ['auto'] : ['auto', '24px']}\n        inputWidth={inputWidth}\n        value={label ?? ''}\n        inputHasFocus={inputHasFocus}\n        hasError={hasError}\n      >\n        <InputComponent\n          id={pillUid}\n          className=\"ds-pill-focus-point\"\n          data-testid=\"ds-pill-input\"\n          innerRef={(_ref: HTMLInputElement | null) => {\n            ref.current = _ref;\n          }}\n          value={label}\n          onChange={onInputChange}\n          placeholder={inputPlaceholder}\n          onFocus={() => setInputHasFocus(true)}\n          onBlur={() => setInputHasFocus(false)}\n          disableTooltip={false}\n        />\n        {label !== '' && (\n          <DSPillButton\n            id={pillUid}\n            data-testid=\"ds-pill-clear-icon\"\n            innerRef={innerRef as 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        )}\n      </StyledInputPillWrapper>\n    );\n  },\n);\n"],
   "mappings": "AAAA,YAAY,WAAW;AC0CjB,SAUE,KAVF;AAzCN,OAAOA,UAAS,aAAa,SAAS,QAAQ,gBAAgB;AAE9D,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAGtB,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,eAAY;AAAA,QACZ,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,eAAY;AAAA,cACZ,UAAU,CAAC,SAAkC;AAC3C,oBAAI,UAAU;AAAA,cAChB;AAAA,cACA,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAa;AAAA,cACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,cACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,cACpC,gBAAgB;AAAA;AAAA,UAClB;AAAA,UACC,UAAU,MACT;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAY;AAAA,cACZ;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,8BAAC,eAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -1,10 +1,13 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import React2 from "react";
 import { TextComponent } from "../TextComponent.js";
 import { StyledLabelOnlyPillWrapper } from "../styled.js";
-const LabelOnlyPill = React2.memo(
-  ({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma }) => /* @__PURE__ */ jsxs(
+const LabelOnlyPill = React2.memo((props) => {
+  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma } = props;
+  const ownerProps = useOwnerProps(props);
+  return /* @__PURE__ */ jsxs(
     StyledLabelOnlyPillWrapper,
     {
       pillSize: size,
@@ -19,13 +22,14 @@ const LabelOnlyPill = React2.memo(
       "aria-label": label,
       applyAriaDisabled,
       readOnly,
+      ...ownerProps,
       children: [
         IconLeft ? /* @__PURE__ */ jsx(IconLeft, { label }) : iconLeft,
         /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
       ]
     }
-  )
-);
+  );
+});
 export {
   LabelOnlyPill
 };

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 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>(\n  ({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma }) => (\n    <StyledLabelOnlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || 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    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n    </StyledLabelOnlyPillWrapper>\n  ),\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACQnB,SAcc,KAdd;AAPJ,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAEpC,MAAM,gBAAgBA,OAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,mBAAmB,UAAU,cAAc,MACxG;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,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,MAEC;AAAA,mBAAW,oBAAC,YAAS,OAAc,IAAK;AAAA,QACzC,oBAAC,iBAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAC/F;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport { 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  return (\n    <StyledLabelOnlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || 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      {...ownerProps}\n    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n    </StyledLabelOnlyPillWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACYnB,SAec,KAfd;AAXJ,SAAS,qBAAqB;AAC9B,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,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,MAEH;AAAA,mBAAW,oBAAC,YAAS,OAAc,IAAK;AAAA,QACzC,oBAAC,iBAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAC/F;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -1,10 +1,13 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import React2 from "react";
 import { TextComponent } from "../TextComponent.js";
 import { StyledLabelPillWrapper } from "../styled.js";
-const LabelPill = React2.memo(
-  ({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel }) => /* @__PURE__ */ jsxs(
+const LabelPill = React2.memo((props) => {
+  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel } = props;
+  const ownerProps = useOwnerProps(props);
+  return /* @__PURE__ */ jsxs(
     StyledLabelPillWrapper,
     {
       pillSize: size,
@@ -17,13 +20,14 @@ const LabelPill = React2.memo(
       hasIcon: (iconLeft || IconLeft) !== null,
       role: "group",
       "aria-label": label,
+      ...ownerProps,
       children: [
         IconLeft ? /* @__PURE__ */ jsx(IconLeft, { label }) : iconLeft,
         /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label })
       ]
     }
-  )
-);
+  );
+});
 export {
   LabelPill
 };

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 React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledLabelPillWrapper } from '../styled.js';\n\nexport const LabelPill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel }) => (\n    <StyledLabelPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || 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    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent labelTruncated={labelTruncated} label={label} />\n    </StyledLabelPillWrapper>\n  ),\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACQnB,SAYc,KAZd;AAPJ,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,8BAA8B;AAEhC,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,UAAU,MAC5D;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,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,MAEX;AAAA,mBAAW,oBAAC,YAAS,OAAc,IAAK;AAAA,QACzC,oBAAC,iBAAc,gBAAgC,OAAc;AAAA;AAAA;AAAA,EAC/D;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport { 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 { 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  return (\n    <StyledLabelPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || 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      {...ownerProps}\n    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent labelTruncated={labelTruncated} label={label} />\n    </StyledLabelPillWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACWnB,SAac,KAbd;AAVJ,SAAS,qBAAqB;AAC9B,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,8BAA8B;AAEhC,MAAM,YAAYA,OAAM,KAA4B,CAAC,UAAU;AACpE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,UAAU,IAAI;AACvE,QAAM,aAAa,cAAc,KAAK;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,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,MACX,GAAG;AAAA,MAEH;AAAA,mBAAW,oBAAC,YAAS,OAAc,IAAK;AAAA,QACzC,oBAAC,iBAAc,gBAAgC,OAAc;AAAA;AAAA;AAAA,EAC/D;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -1,70 +1,73 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronSmallDown } from "@elliemae/ds-icons";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import React2, { useMemo } from "react";
 import { uid } from "uid";
-import { DSPillButtonDefaultProps } from "../../react-desc-prop-types.js";
+import { defaultProps as DSPillButtonDefaultProps } from "../../parts/DSPillButton/react-desc-prop-types.js";
 import { TextComponent } from "../TextComponent.js";
 import { StyledDropdownPillWrapper, StyledPillMenuButton } from "../styled.js";
 const rowsForDsButtonV3 = (size) => size === "m" ? { small: ["1.5rem"], medium: ["1.846rem"] } : { small: ["1.125rem"], medium: ["1.3846rem"] };
 const colsForDsButtonV3 = (size) => size === "m" ? { small: ["auto", "minmax(1.5rem, auto)"], medium: ["auto", "minmax(1.846rem, auto)"] } : { small: ["auto", "minmax(1.125rem, auto)"], medium: ["auto", "minmax(1.3846rem, auto)"] };
-const MenuButtonPill = React2.memo(
-  ({ label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps }) => {
-    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
-    if (!menuButtonProps) {
-      console.log("menuButtonProps", menuButtonProps);
-      throw new Error("menuButtonProps was not provided");
-    }
-    if (Object.keys(menuButtonProps).length === 0) {
-      console.log("menuButtonProps", menuButtonProps);
-      throw new Error("menuButtonProps is empty");
-    }
-    const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;
-    const memoizedRows = useMemo(() => rowsForDsButtonV3(size), [size]);
-    const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);
-    const dsMenubuttonRootProps = useMemo(
-      () => ({
-        width: `${width}`,
-        height: `${height}`
-      }),
-      [height, width]
-    );
-    const finalAriaLabel = ariaLabel || label;
-    return /* @__PURE__ */ jsxs(
-      StyledDropdownPillWrapper,
-      {
-        pillSize: size,
-        id: pillUid,
-        className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
-        "data-testid": "ds-pill-wrapper",
-        cols: memoizedCols,
-        rows: memoizedRows,
-        gutter: "2px",
-        alignItems: "center",
-        justifyItems: "center",
-        children: [
-          /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label }),
-          /* @__PURE__ */ jsx(
-            StyledPillMenuButton,
-            {
-              innerRef,
-              "aria-label": finalAriaLabel,
-              dsMenubuttonRoot: dsMenubuttonRootProps,
-              ...menuButtonProps,
-              "data-testid": "ds-pill-menu-button-chevron",
-              buttonType: "raw",
-              className: "ds-pill-button-right ds-pill-focus-point",
-              type: "button",
-              width: `${width}`,
-              height: `${height}`,
-              children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: ["brand-primary", "800"] })
-            }
-          )
-        ]
-      }
-    );
+const MenuButtonPill = React2.memo((props) => {
+  const { label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps } = props;
+  const ownerProps = useOwnerProps(props);
+  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
+  if (!menuButtonProps) {
+    console.log("menuButtonProps", menuButtonProps);
+    throw new Error("menuButtonProps was not provided");
   }
-);
+  if (Object.keys(menuButtonProps).length === 0) {
+    console.log("menuButtonProps", menuButtonProps);
+    throw new Error("menuButtonProps is empty");
+  }
+  const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;
+  const memoizedRows = useMemo(() => rowsForDsButtonV3(size), [size]);
+  const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);
+  const dsMenubuttonRootProps = useMemo(
+    () => ({
+      width: `${width}`,
+      height: `${height}`
+    }),
+    [height, width]
+  );
+  const finalAriaLabel = ariaLabel || label;
+  return /* @__PURE__ */ jsxs(
+    StyledDropdownPillWrapper,
+    {
+      pillSize: size,
+      id: pillUid,
+      className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
+      "data-testid": "ds-pill-wrapper",
+      cols: memoizedCols,
+      rows: memoizedRows,
+      gutter: "2px",
+      alignItems: "center",
+      justifyItems: "center",
+      ...ownerProps,
+      children: [
+        /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label }),
+        /* @__PURE__ */ jsx(
+          StyledPillMenuButton,
+          {
+            innerRef,
+            "aria-label": finalAriaLabel,
+            dsMenubuttonRoot: dsMenubuttonRootProps,
+            ...menuButtonProps,
+            "data-testid": "ds-pill-menu-button-chevron",
+            buttonType: "raw",
+            className: "ds-pill-button-right ds-pill-focus-point",
+            type: "button",
+            width: `${width}`,
+            height: `${height}`,
+            ...ownerProps,
+            children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: ["brand-primary", "800"] })
+          }
+        )
+      ]
+    }
+  );
+});
 export {
   MenuButtonPill
 };

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 React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButtonDefaultProps } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\n\n/* ************************************************************************************************************\n* Regarding magic numbers, default width and height and why this is different from \"StyledPillButton\" implementation\n*  1 - StyledPillButton     is based on DSButtonV2\n*      StyledPillMenuButton is based on DSMenuButton (which is DSButtonV3)\n*      DSButtonV2 and DSButtonV3 have different stylings.\n*  2 - as per \"commonPillWrapperCss\" in \"styled.js\" (relevant code at comment writing time is below)\nconst commonPillWrapperCss = css<{ pillSize: 'm' | 's'; disabled?: boolean; applyAriaDisabled?: boolean }>`\n  height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n  @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n    height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n  }\n  [...]\n`\n*  The Wrapper is setting an height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n*    the \"magic\" values are actually 24px RT for \"m\" and 18px 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 = (size: 'm' | 's') =>\n  size === 'm' ? { small: ['1.5rem'], medium: ['1.846rem'] } : { small: ['1.125rem'], medium: ['1.3846rem'] };\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n  size === 'm'\n    ? { small: ['auto', 'minmax(1.5rem, auto)'], medium: ['auto', 'minmax(1.846rem, auto)'] }\n    : { small: ['auto', 'minmax(1.125rem, auto)'], medium: ['auto', 'minmax(1.3846rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps }) => {\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(size), [size]);\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        data-testid=\"ds-pill-wrapper\"\n        cols={memoizedCols}\n        rows={memoizedRows}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent labelTruncated={labelTruncated} label={label} />\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=\"ds-pill-menu-button-chevron\"\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        >\n          <ChevronSmallDown color={['brand-primary', '800']} />\n        </StyledPillMenuButton>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgEjB,SAWE,KAXF;AA/DN,SAAS,wBAAwB;AAEjC,OAAOA,UAAS,eAAe;AAC/B,SAAS,WAAW;AAEpB,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B,4BAA4B;AAqBhE,MAAM,oBAAoB,CAAC,SACzB,SAAS,MAAM,EAAE,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAAE,IAAI,EAAE,OAAO,CAAC,UAAU,GAAG,QAAQ,CAAC,WAAW,EAAE;AAC5G,MAAM,oBAAoB,CAAC,SACzB,SAAS,MACL,EAAE,OAAO,CAAC,QAAQ,sBAAsB,GAAG,QAAQ,CAAC,QAAQ,wBAAwB,EAAE,IACtF,EAAE,OAAO,CAAC,QAAQ,wBAAwB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE;AAExF,MAAM,iBAAiBA,OAAM;AAAA,EAClC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB,MAAM;AACzE,UAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,CAAC,IAAI,CAAC,CAAC;AACpD,QAAI,CAAC,iBAAiB;AAEpB,cAAQ,IAAI,mBAAmB,eAAe;AAC9C,YAAM,IAAI,MAAM,kCAAkC;AAAA,IACpD;AACA,QAAI,OAAO,KAAK,eAAe,EAAE,WAAW,GAAG;AAE7C,cAAQ,IAAI,mBAAmB,eAAe;AAC9C,YAAM,IAAI,MAAM,0BAA0B;AAAA,IAC5C;AACA,UAAM,EAAE,QAAQ,yBAAyB,OAAO,SAAS,yBAAyB,OAAO,IAAI;AAE7F,UAAM,eAAe,QAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,UAAM,eAAe,QAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,UAAM,wBAAwB;AAAA,MAC5B,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,QACf,QAAQ,GAAG,MAAM;AAAA,MACnB;AAAA,MACA,CAAC,QAAQ,KAAK;AAAA,IAChB;AAEA,UAAM,iBAAiB,aAAa;AAEpC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,8BAAC,iBAAc,gBAAgC,OAAc;AAAA,UAC7D;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,cAAY;AAAA,cACZ,kBAAkB;AAAA,cACjB,GAAG;AAAA,cAGJ,eAAY;AAAA,cACZ,YAAW;AAAA,cACX,WAAU;AAAA,cACV,MAAK;AAAA,cACL,OAAO,GAAG,KAAK;AAAA,cACf,QAAQ,GAAG,MAAM;AAAA,cAGjB,8BAAC,oBAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACrD;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
+  "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 { 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 { StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\n\n/* ************************************************************************************************************\n* Regarding magic numbers, default width and height and why this is different from \"StyledPillButton\" implementation\n*  1 - StyledPillButton     is based on DSButtonV2\n*      StyledPillMenuButton is based on DSMenuButton (which is DSButtonV3)\n*      DSButtonV2 and DSButtonV3 have different stylings.\n*  2 - as per \"commonPillWrapperCss\" in \"styled.js\" (relevant code at comment writing time is below)\nconst commonPillWrapperCss = css<{ pillSize: 'm' | 's'; disabled?: boolean; applyAriaDisabled?: boolean }>`\n  height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n  @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n    height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n  }\n  [...]\n`\n*  The Wrapper is setting an height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n*    the \"magic\" values are actually 24px RT for \"m\" and 18px 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 = (size: 'm' | 's') =>\n  size === 'm' ? { small: ['1.5rem'], medium: ['1.846rem'] } : { small: ['1.125rem'], medium: ['1.3846rem'] };\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n  size === 'm'\n    ? { small: ['auto', 'minmax(1.5rem, auto)'], medium: ['auto', 'minmax(1.846rem, auto)'] }\n    : { small: ['auto', 'minmax(1.125rem, auto)'], medium: ['auto', 'minmax(1.3846rem, 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 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(size), [size]);\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      data-testid=\"ds-pill-wrapper\"\n      cols={memoizedCols}\n      rows={memoizedRows}\n      gutter=\"2px\"\n      alignItems=\"center\"\n      justifyItems=\"center\"\n      {...ownerProps}\n    >\n      <TextComponent labelTruncated={labelTruncated} label={label} />\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=\"ds-pill-menu-button-chevron\"\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    </StyledDropdownPillWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkEnB,SAYE,KAZF;AAjEJ,SAAS,wBAAwB;AAEjC,SAAS,qBAAqB;AAC9B,OAAOA,UAAS,eAAe;AAC/B,SAAS,WAAW;AAEpB,SAAS,gBAAgB,gCAAgC;AACzD,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B,4BAA4B;AAqBhE,MAAM,oBAAoB,CAAC,SACzB,SAAS,MAAM,EAAE,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAAE,IAAI,EAAE,OAAO,CAAC,UAAU,GAAG,QAAQ,CAAC,WAAW,EAAE;AAC5G,MAAM,oBAAoB,CAAC,SACzB,SAAS,MACL,EAAE,OAAO,CAAC,QAAQ,sBAAsB,GAAG,QAAQ,CAAC,QAAQ,wBAAwB,EAAE,IACtF,EAAE,OAAO,CAAC,QAAQ,wBAAwB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE;AAExF,MAAM,iBAAiBA,OAAM,KAA4B,CAAC,UAAU;AACzE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB,IAAI;AAC9E,QAAM,aAAa,cAAc,KAAK;AACtC,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,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,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,eAAY;AAAA,MACZ,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACZ,GAAG;AAAA,MAEJ;AAAA,4BAAC,iBAAc,gBAAgC,OAAc;AAAA,QAC7D;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,kBAAkB;AAAA,YACjB,GAAG;AAAA,YAGJ,eAAY;AAAA,YACZ,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;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -1,37 +1,39 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import React2 from "react";
 import { TextComponent } from "../TextComponent.js";
 import { StyledReadonlyPillWrapper } from "../styled.js";
-const ReadOnlyPill = React2.memo(
-  ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight }) => {
-    const hasIconLeft = iconLeft !== null || iconRight !== null && label === "";
-    const hasIconRight = iconRight !== null || iconLeft !== null && label === "";
-    const hasIconLeftNew = IconLeft !== null || IconRight !== null && label === "";
-    const hasIconRightNew = IconRight !== null || IconLeft !== null && label === "";
-    return /* @__PURE__ */ jsxs(
-      StyledReadonlyPillWrapper,
-      {
-        pillSize: size,
-        alignItems: "center",
-        className: "ds-pill-wrapper ds-pill-wrapper-readonly",
-        "data-testid": "ds-pill-wrapper",
-        "data-label": ariaLabel || label,
-        cols: [(iconLeft || IconLeft) && "min-content", label && "auto", (iconRight || IconRight) && "min-content"].filter(
-          (notFalse) => notFalse
-        ),
-        gutter: "xxxs",
-        hasIconRight: hasIconRight || hasIconRightNew,
-        hasIconLeft: hasIconLeft || hasIconLeftNew,
-        children: [
-          IconLeft ? /* @__PURE__ */ jsx(IconLeft, { label }) : iconLeft,
-          label ? /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label }) : null,
-          IconRight ? /* @__PURE__ */ jsx(IconRight, { label }) : iconRight
-        ]
-      }
-    );
-  }
-);
+const ReadOnlyPill = React2.memo((props) => {
+  const { label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight } = props;
+  const ownerProps = useOwnerProps(props);
+  const hasIconLeft = iconLeft !== null || iconRight !== null && label === "";
+  const hasIconRight = iconRight !== null || iconLeft !== null && label === "";
+  const hasIconLeftNew = IconLeft !== null || IconRight !== null && label === "";
+  const hasIconRightNew = IconRight !== null || IconLeft !== null && label === "";
+  return /* @__PURE__ */ jsxs(
+    StyledReadonlyPillWrapper,
+    {
+      pillSize: size,
+      alignItems: "center",
+      className: "ds-pill-wrapper ds-pill-wrapper-readonly",
+      "data-testid": "ds-pill-wrapper",
+      "data-label": ariaLabel || label,
+      cols: [(iconLeft || IconLeft) && "min-content", label && "auto", (iconRight || IconRight) && "min-content"].filter(
+        (notFalse) => notFalse
+      ),
+      gutter: "xxxs",
+      hasIconRight: hasIconRight || hasIconRightNew,
+      hasIconLeft: hasIconLeft || hasIconLeftNew,
+      ...ownerProps,
+      children: [
+        IconLeft ? /* @__PURE__ */ jsx(IconLeft, { label }) : iconLeft,
+        label ? /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label }) : null,
+        IconRight ? /* @__PURE__ */ jsx(IconRight, { label }) : iconRight
+      ]
+    }
+  );
+});
 export {
   ReadOnlyPill
 };

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 React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight }) => {\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-testid=\"ds-pill-wrapper\"\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=\"xxxs\"\n        hasIconRight={hasIconRight || hasIconRightNew}\n        hasIconLeft={hasIconLeft || hasIconLeftNew}\n      >\n        {IconLeft ? <IconLeft label={label} /> : iconLeft}\n        {label ? <TextComponent labelTruncated={labelTruncated} label={label} /> : null}\n        {IconRight ? <IconRight label={label} /> : iconRight}\n      </StyledReadonlyPillWrapper>\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACejB,SAec,KAfd;AAdN,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAEnC,MAAM,eAAeA,OAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,WAAW,UAAU,UAAU,MAAM;AACxF,UAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,UAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,UAAM,iBAAiB,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC7E,UAAM,kBAAkB,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAY,aAAa;AAAA,QACzB,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,UACpG,CAAC,aAAa;AAAA,QAChB;AAAA,QAEF,QAAO;AAAA,QACP,cAAc,gBAAgB;AAAA,QAC9B,aAAa,eAAe;AAAA,QAE3B;AAAA,qBAAW,oBAAC,YAAS,OAAc,IAAK;AAAA,UACxC,QAAQ,oBAAC,iBAAc,gBAAgC,OAAc,IAAK;AAAA,UAC1E,YAAY,oBAAC,aAAU,OAAc,IAAK;AAAA;AAAA;AAAA,IAC7C;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { 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 { 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 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-testid=\"ds-pill-wrapper\"\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=\"xxxs\"\n      hasIconRight={hasIconRight || hasIconRightNew}\n      hasIconLeft={hasIconLeft || hasIconLeftNew}\n      {...ownerProps}\n    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      {label ? <TextComponent labelTruncated={labelTruncated} label={label} /> : null}\n      {IconRight ? <IconRight label={label} /> : iconRight}\n    </StyledReadonlyPillWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiBnB,SAgBc,KAhBd;AAhBJ,SAAS,qBAAqB;AAC9B,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAEnC,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,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,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,QACpG,CAAC,aAAa;AAAA,MAChB;AAAA,MAEF,QAAO;AAAA,MACP,cAAc,gBAAgB;AAAA,MAC9B,aAAa,eAAe;AAAA,MAC3B,GAAG;AAAA,MAEH;AAAA,mBAAW,oBAAC,YAAS,OAAc,IAAK;AAAA,QACxC,QAAQ,oBAAC,iBAAc,gBAAgC,OAAc,IAAK;AAAA,QAC1E,YAAY,oBAAC,aAAU,OAAc,IAAK;AAAA;AAAA;AAAA,EAC7C;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -3,86 +3,88 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CloseXsmall } from "@elliemae/ds-icons";
 import React2, { useCallback, useContext, useMemo } from "react";
 import { uid } from "uid";
-import { DSPillButton } from "../PillButton.js";
-import { DSPillGroupV2Context } from "../PillGroup.js";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
+import { DSPillButton } from "../../parts/DSPillButton/DSPillButton.js";
+import { DSPillGroupV2Context } from "../../parts/DSPillGroup/index.js";
 import { TextComponent } from "../TextComponent.js";
 import { StyledRemovablePillWrapper } from "../styled.js";
-const RemovablePill = React2.memo(
-  ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex, applyAriaDisabled }) => {
-    const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);
-    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
-    const onKeyDown = useCallback(
-      (e) => {
-        if (["Enter", "Space"].includes(e.code)) {
-          if (applyAriaDisabled) return;
-          e.preventDefault();
-          if (onKeyboardRemove) onKeyboardRemove(pillUid);
-        }
-        if (e.code === "ArrowLeft") {
-          e.preventDefault();
-          if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);
-        }
-        if (e.code === "ArrowRight") {
-          e.preventDefault();
-          if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);
-        }
-      },
-      [onKeyboardRemove, onKeyboardNavigation, pillUid, applyAriaDisabled]
-    );
-    const handleOnRemove = useCallback(
-      (e) => {
+const RemovablePill = React2.memo((props) => {
+  const { label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex, applyAriaDisabled } = props;
+  const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);
+  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
+  const ownerProps = useOwnerProps(props);
+  const onKeyDown = useCallback(
+    (e) => {
+      if (["Enter", "Space"].includes(e.code)) {
         if (applyAriaDisabled) return;
-        if (onRemove) onRemove(e);
-      },
-      [onRemove, applyAriaDisabled]
-    );
-    const colsConfig = useMemo(
-      () => disabled || applyAriaDisabled ? ["auto"] : ["auto", "minmax(24px, auto)"],
-      [disabled, applyAriaDisabled]
-    );
-    return /* @__PURE__ */ jsxs(
-      StyledRemovablePillWrapper,
-      {
-        pillSize: size,
-        cols: colsConfig,
-        disabled,
-        applyAriaDisabled,
-        gutter: "2px",
-        alignItems: "center",
-        justifyItems: "center",
-        className: "ds-pill-wrapper ds-pill-wrapper-removable",
-        "data-testid": "ds-pill-wrapper",
-        "data-label": ariaLabel || label,
-        children: [
-          /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label }),
-          !disabled && !applyAriaDisabled ? /* @__PURE__ */ jsx(
-            DSPillButton,
-            {
-              className: "ds-pill-focus-point",
-              id: pillUid,
-              "data-testid": "ds-pill-close-icon",
-              innerRef,
-              onClick: handleOnRemove,
-              onKeyDown,
-              "aria-label": `Remove ${label}`,
-              type: "right",
-              tabIndex,
-              applyAriaDisabled,
-              children: /* @__PURE__ */ jsx(
-                CloseXsmall,
-                {
-                  width: size === "s" ? 18 : 22.65,
-                  height: size === "s" ? 18 : 22.65,
-                  color: ["brand-primary", "700"]
-                }
-              )
-            }
-          ) : null
-        ]
+        e.preventDefault();
+        if (onKeyboardRemove) onKeyboardRemove(pillUid);
       }
-    );
-  }
-);
+      if (e.code === "ArrowLeft") {
+        e.preventDefault();
+        if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);
+      }
+      if (e.code === "ArrowRight") {
+        e.preventDefault();
+        if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);
+      }
+    },
+    [onKeyboardRemove, onKeyboardNavigation, pillUid, applyAriaDisabled]
+  );
+  const handleOnRemove = useCallback(
+    (e) => {
+      if (applyAriaDisabled) return;
+      if (onRemove) onRemove(e);
+    },
+    [onRemove, applyAriaDisabled]
+  );
+  const colsConfig = useMemo(
+    () => disabled || applyAriaDisabled ? ["auto"] : ["auto", "minmax(24px, auto)"],
+    [disabled, applyAriaDisabled]
+  );
+  return /* @__PURE__ */ jsxs(
+    StyledRemovablePillWrapper,
+    {
+      pillSize: size,
+      cols: colsConfig,
+      disabled,
+      applyAriaDisabled,
+      gutter: "2px",
+      alignItems: "center",
+      justifyItems: "center",
+      className: "ds-pill-wrapper ds-pill-wrapper-removable",
+      "data-testid": "ds-pill-wrapper",
+      "data-label": ariaLabel || label,
+      ...ownerProps,
+      children: [
+        /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label }),
+        !disabled && !applyAriaDisabled ? /* @__PURE__ */ jsx(
+          DSPillButton,
+          {
+            className: "ds-pill-focus-point",
+            id: pillUid,
+            "data-testid": "ds-pill-close-icon",
+            innerRef,
+            onClick: handleOnRemove,
+            onKeyDown,
+            "aria-label": `Remove ${label}`,
+            type: "right",
+            tabIndex,
+            applyAriaDisabled,
+            children: /* @__PURE__ */ jsx(
+              CloseXsmall,
+              {
+                width: size === "s" ? 18 : 22.65,
+                height: size === "s" ? 18 : 22.65,
+                color: ["brand-primary", "700"]
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+});
 export {
   RemovablePill
 };

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", "import { 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 type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButton } from '../PillButton.js';\nimport { DSPillGroupV2Context } from '../PillGroup.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledRemovablePillWrapper } from '../styled.js';\n\nexport const RemovablePill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex, applyAriaDisabled }) => {\n    const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\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    const colsConfig = useMemo(\n      () => (disabled || applyAriaDisabled ? ['auto'] : ['auto', 'minmax(24px, auto)']),\n      [disabled, applyAriaDisabled],\n    );\n\n    return (\n      <StyledRemovablePillWrapper\n        pillSize={size}\n        cols={colsConfig}\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n        data-testid=\"ds-pill-wrapper\"\n        data-label={ariaLabel || label}\n      >\n        <TextComponent labelTruncated={labelTruncated} label={label} />\n        {!disabled && !applyAriaDisabled ? (\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            id={pillUid}\n            data-testid=\"ds-pill-close-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          >\n            <CloseXsmall\n              width={size === 's' ? 18 : 22.65}\n              height={size === 's' ? 18 : 22.65}\n              color={['brand-primary', '700']}\n            />\n          </DSPillButton>\n        ) : null}\n      </StyledRemovablePillWrapper>\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgDjB,SAYE,KAZF;AAhDN,SAAS,mBAAmB;AAE5B,OAAOA,UAAS,aAAa,YAAY,eAAe;AACxD,SAAS,WAAW;AAEpB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAEpC,MAAM,gBAAgBA,OAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,UAAU,kBAAkB,MAAM;AACzG,UAAM,EAAE,kBAAkB,qBAAqB,IAAI,WAAW,oBAAoB;AAClF,UAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,CAAC,IAAI,CAAC,CAAC;AAEpD,UAAM,YAAY;AAAA,MAChB,CAAC,MAA2B;AAC1B,YAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,cAAI,kBAAmB;AACvB,YAAE,eAAe;AACjB,cAAI,iBAAkB,kBAAiB,OAAO;AAAA,QAChD;AACA,YAAI,EAAE,SAAS,aAAa;AAC1B,YAAE,eAAe;AACjB,cAAI,qBAAsB,sBAAqB,SAAS,IAAI,CAAC;AAAA,QAC/D;AACA,YAAI,EAAE,SAAS,cAAc;AAC3B,YAAE,eAAe;AACjB,cAAI,qBAAsB,sBAAqB,SAAS,GAAG,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,MACA,CAAC,kBAAkB,sBAAsB,SAAS,iBAAiB;AAAA,IACrE;AAEA,UAAM,iBAAiB;AAAA,MACrB,CAAC,MAA8C;AAC7C,YAAI,kBAAmB;AACvB,YAAI,SAAU,UAAS,CAAC;AAAA,MAC1B;AAAA,MACA,CAAC,UAAU,iBAAiB;AAAA,IAC9B;AAEA,UAAM,aAAa;AAAA,MACjB,MAAO,YAAY,oBAAoB,CAAC,MAAM,IAAI,CAAC,QAAQ,oBAAoB;AAAA,MAC/E,CAAC,UAAU,iBAAiB;AAAA,IAC9B;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QACb,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAY,aAAa;AAAA,QAEzB;AAAA,8BAAC,iBAAc,gBAAgC,OAAc;AAAA,UAC5D,CAAC,YAAY,CAAC,oBACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,IAAI;AAAA,cACJ,eAAY;AAAA,cACZ;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA,cAAY,UAAU,KAAK;AAAA,cAC3B,MAAK;AAAA,cACL;AAAA,cACA;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,SAAS,MAAM,KAAK;AAAA,kBAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,kBAC5B,OAAO,CAAC,iBAAiB,KAAK;AAAA;AAAA,cAChC;AAAA;AAAA,UACF,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { 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 { 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 { StyledRemovablePillWrapper } from '../styled.js';\n\nexport const RemovablePill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex, applyAriaDisabled } = props;\n  const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n  const ownerProps = useOwnerProps(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  const colsConfig = useMemo(\n    () => (disabled || applyAriaDisabled ? ['auto'] : ['auto', 'minmax(24px, auto)']),\n    [disabled, applyAriaDisabled],\n  );\n\n  return (\n    <StyledRemovablePillWrapper\n      pillSize={size}\n      cols={colsConfig}\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      gutter=\"2px\"\n      alignItems=\"center\"\n      justifyItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n      data-testid=\"ds-pill-wrapper\"\n      data-label={ariaLabel || label}\n      {...ownerProps}\n    >\n      <TextComponent labelTruncated={labelTruncated} label={label} />\n      {!disabled && !applyAriaDisabled ? (\n        <DSPillButton\n          className=\"ds-pill-focus-point\"\n          id={pillUid}\n          data-testid=\"ds-pill-close-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        >\n          <CloseXsmall\n            width={size === 's' ? 18 : 22.65}\n            height={size === 's' ? 18 : 22.65}\n            color={['brand-primary', '700']}\n          />\n        </DSPillButton>\n      ) : null}\n    </StyledRemovablePillWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmDnB,SAaE,KAbF;AAnDJ,SAAS,mBAAmB;AAE5B,OAAOA,UAAS,aAAa,YAAY,eAAe;AACxD,SAAS,WAAW;AACpB,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAG7B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAEpC,MAAM,gBAAgBA,OAAM,KAA4B,CAAC,UAAU;AACxE,QAAM,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,UAAU,kBAAkB,IAAI;AAC9G,QAAM,EAAE,kBAAkB,qBAAqB,IAAI,WAAW,oBAAoB;AAClF,QAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,CAAC,IAAI,CAAC,CAAC;AACpD,QAAM,aAAa,cAAc,KAAK;AAEtC,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,QAAM,aAAa;AAAA,IACjB,MAAO,YAAY,oBAAoB,CAAC,MAAM,IAAI,CAAC,QAAQ,oBAAoB;AAAA,IAC/E,CAAC,UAAU,iBAAiB;AAAA,EAC9B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACb,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACxB,GAAG;AAAA,MAEJ;AAAA,4BAAC,iBAAc,gBAAgC,OAAc;AAAA,QAC5D,CAAC,YAAY,CAAC,oBACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,eAAY;AAAA,YACZ;AAAA,YACA,SAAS;AAAA,YACT;AAAA,YACA,cAAY,UAAU,KAAK;AAAA,YAC3B,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,SAAS,MAAM,KAAK;AAAA,gBAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,gBAC5B,OAAO,CAAC,iBAAiB,KAAK;AAAA;AAAA,YAChC;AAAA;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ,CAAC;",
   "names": ["React"]
 }