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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/MenuButtonPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEjB;AA/DN,sBAAiC;AAEjC,mBAA+B;AAC/B,iBAAoB;AAEpB,mCAAyC;AACzC,2BAA8B;AAC9B,oBAAgE;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,iBAAiB,aAAAA,QAAM;AAAA,EAClC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB,MAAM;AACzE,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,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,sDAAyB,OAAO,SAAS,sDAAyB,OAAO,IAAI;AAE7F,UAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,UAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,UAAM,4BAAwB;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,sDAAC,sCAAc,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,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACrD;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
-  "names": ["React"]
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkEnB;AAjEJ,sBAAiC;AAEjC,8BAA8B;AAC9B,mBAA+B;AAC/B,iBAAoB;AAEpB,mCAAyD;AACzD,2BAA8B;AAC9B,oBAAgE;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,iBAAiB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACzE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB,IAAI;AAC9E,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AACpD,MAAI,CAAC,iBAAiB;AAEpB,YAAQ,IAAI,mBAAmB,eAAe;AAC9C,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACpD;AACA,MAAI,OAAO,KAAK,eAAe,EAAE,WAAW,GAAG;AAE7C,YAAQ,IAAI,mBAAmB,eAAe;AAC9C,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AACA,QAAM,EAAE,QAAQ,6BAAAC,aAAyB,OAAO,SAAS,6BAAAA,aAAyB,OAAO,IAAI;AAE7F,QAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,QAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,QAAM,4BAAwB;AAAA,IAC5B,OAAO;AAAA,MACL,OAAO,GAAG,KAAK;AAAA,MACf,QAAQ,GAAG,MAAM;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,EAChB;AAEA,QAAM,iBAAiB,aAAa;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACZ,GAAG;AAAA,MAEJ;AAAA,oDAAC,sCAAc,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,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QACrD;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "names": ["React", "DSPillButtonDefaultProps"]
 }

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

@@ -33,36 +33,38 @@ __export(ReadOnlyPill_exports, {
 module.exports = __toCommonJS(ReadOnlyPill_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = __toESM(require("react"));
 var import_TextComponent = require("../TextComponent.js");
 var import_styled = require("../styled.js");
-const ReadOnlyPill = import_react.default.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__ */ (0, import_jsx_runtime.jsxs)(
-      import_styled.StyledReadonlyPillWrapper,
-      {
-        pillSize: size,
-        alignItems: "center",
-        className: "ds-pill-wrapper ds-pill-wrapper-readonly",
-        "data-testid": "ds-pill-wrapper",
-        "data-label": ariaLabel || label,
-        cols: [(iconLeft || IconLeft) && "min-content", label && "auto", (iconRight || IconRight) && "min-content"].filter(
-          (notFalse) => notFalse
-        ),
-        gutter: "xxxs",
-        hasIconRight: hasIconRight || hasIconRightNew,
-        hasIconLeft: hasIconLeft || hasIconLeftNew,
-        children: [
-          IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft,
-          label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label }) : null,
-          IconRight ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconRight, { label }) : iconRight
-        ]
-      }
-    );
-  }
-);
+const ReadOnlyPill = import_react.default.memo((props) => {
+  const { label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight } = props;
+  const ownerProps = (0, import_ds_props_helpers.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__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledReadonlyPillWrapper,
+    {
+      pillSize: size,
+      alignItems: "center",
+      className: "ds-pill-wrapper ds-pill-wrapper-readonly",
+      "data-testid": "ds-pill-wrapper",
+      "data-label": ariaLabel || label,
+      cols: [(iconLeft || IconLeft) && "min-content", label && "auto", (iconRight || IconRight) && "min-content"].filter(
+        (notFalse) => notFalse
+      ),
+      gutter: "xxxs",
+      hasIconRight: hasIconRight || hasIconRightNew,
+      hasIconLeft: hasIconLeft || hasIconLeftNew,
+      ...ownerProps,
+      children: [
+        IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft,
+        label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label }) : null,
+        IconRight ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconRight, { label }) : iconRight
+      ]
+    }
+  );
+});
 //# sourceMappingURL=ReadOnlyPill.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/ReadOnlyPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADejB;AAdN,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA0C;AAEnC,MAAM,eAAe,aAAAA,QAAM;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,4CAAC,YAAS,OAAc,IAAK;AAAA,UACxC,QAAQ,4CAAC,sCAAc,gBAAgC,OAAc,IAAK;AAAA,UAC1E,YAAY,4CAAC,aAAU,OAAc,IAAK;AAAA;AAAA;AAAA,IAC7C;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBnB;AAhBJ,8BAA8B;AAC9B,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA0C;AAEnC,MAAM,eAAe,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACvE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,WAAW,UAAU,UAAU,IAAI;AAC7F,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,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,4CAAC,YAAS,OAAc,IAAK;AAAA,QACxC,QAAQ,4CAAC,sCAAc,gBAAgC,OAAc,IAAK;AAAA,QAC1E,YAAY,4CAAC,aAAU,OAAc,IAAK;AAAA;AAAA;AAAA,EAC7C;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -36,84 +36,86 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_react = __toESM(require("react"));
 var import_uid = require("uid");
-var import_PillButton = require("../PillButton.js");
-var import_PillGroup = require("../PillGroup.js");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_DSPillButton = require("../../parts/DSPillButton/DSPillButton.js");
+var import_DSPillGroup = require("../../parts/DSPillGroup/index.js");
 var import_TextComponent = require("../TextComponent.js");
 var import_styled = require("../styled.js");
-const RemovablePill = import_react.default.memo(
-  ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex, applyAriaDisabled }) => {
-    const { onKeyboardRemove, onKeyboardNavigation } = (0, import_react.useContext)(import_PillGroup.DSPillGroupV2Context);
-    const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
-    const onKeyDown = (0, import_react.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 = (0, import_react.useCallback)(
-      (e) => {
+const RemovablePill = import_react.default.memo((props) => {
+  const { label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex, applyAriaDisabled } = props;
+  const { onKeyboardRemove, onKeyboardNavigation } = (0, import_react.useContext)(import_DSPillGroup.DSPillGroupV2Context);
+  const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
+  const onKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (["Enter", "Space"].includes(e.code)) {
         if (applyAriaDisabled) return;
-        if (onRemove) onRemove(e);
-      },
-      [onRemove, applyAriaDisabled]
-    );
-    const colsConfig = (0, import_react.useMemo)(
-      () => disabled || applyAriaDisabled ? ["auto"] : ["auto", "minmax(24px, auto)"],
-      [disabled, applyAriaDisabled]
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_styled.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__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label }),
-          !disabled && !applyAriaDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_PillButton.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__ */ (0, import_jsx_runtime.jsx)(
-                import_ds_icons.CloseXsmall,
-                {
-                  width: size === "s" ? 18 : 22.65,
-                  height: size === "s" ? 18 : 22.65,
-                  color: ["brand-primary", "700"]
-                }
-              )
-            }
-          ) : null
-        ]
+        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 = (0, import_react.useCallback)(
+    (e) => {
+      if (applyAriaDisabled) return;
+      if (onRemove) onRemove(e);
+    },
+    [onRemove, applyAriaDisabled]
+  );
+  const colsConfig = (0, import_react.useMemo)(
+    () => disabled || applyAriaDisabled ? ["auto"] : ["auto", "minmax(24px, auto)"],
+    [disabled, applyAriaDisabled]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.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__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label }),
+        !disabled && !applyAriaDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_DSPillButton.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__ */ (0, import_jsx_runtime.jsx)(
+              import_ds_icons.CloseXsmall,
+              {
+                width: size === "s" ? 18 : 22.65,
+                height: size === "s" ? 18 : 22.65,
+                color: ["brand-primary", "700"]
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+});
 //# sourceMappingURL=RemovablePill.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/RemovablePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDjB;AAhDN,sBAA4B;AAE5B,mBAAwD;AACxD,iBAAoB;AAEpB,wBAA6B;AAC7B,uBAAqC;AACrC,2BAA8B;AAC9B,oBAA2C;AAEpC,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,UAAU,kBAAkB,MAAM;AACzG,UAAM,EAAE,kBAAkB,qBAAqB,QAAI,yBAAW,qCAAoB;AAClF,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AAEpD,UAAM,gBAAY;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,qBAAiB;AAAA,MACrB,CAAC,MAA8C;AAC7C,YAAI,kBAAmB;AACvB,YAAI,SAAU,UAAS,CAAC;AAAA,MAC1B;AAAA,MACA,CAAC,UAAU,iBAAiB;AAAA,IAC9B;AAEA,UAAM,iBAAa;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,sDAAC,sCAAc,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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDnB;AAnDJ,sBAA4B;AAE5B,mBAAwD;AACxD,iBAAoB;AACpB,8BAA8B;AAC9B,0BAA6B;AAG7B,yBAAqC;AACrC,2BAA8B;AAC9B,oBAA2C;AAEpC,MAAM,gBAAgB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACxE,QAAM,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,UAAU,kBAAkB,IAAI;AAC9G,QAAM,EAAE,kBAAkB,qBAAqB,QAAI,yBAAW,uCAAoB;AAClF,QAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AACpD,QAAM,iBAAa,uCAAc,KAAK;AAEtC,QAAM,gBAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,YAAI,kBAAmB;AACvB,UAAE,eAAe;AACjB,YAAI,iBAAkB,kBAAiB,OAAO;AAAA,MAChD;AACA,UAAI,EAAE,SAAS,aAAa;AAC1B,UAAE,eAAe;AACjB,YAAI,qBAAsB,sBAAqB,SAAS,IAAI,CAAC;AAAA,MAC/D;AACA,UAAI,EAAE,SAAS,cAAc;AAC3B,UAAE,eAAe;AACjB,YAAI,qBAAsB,sBAAqB,SAAS,GAAG,CAAC;AAAA,MAC9D;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,sBAAsB,SAAS,iBAAiB;AAAA,EACrE;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA8C;AAC7C,UAAI,kBAAmB;AACvB,UAAI,SAAU,UAAS,CAAC;AAAA,IAC1B;AAAA,IACA,CAAC,UAAU,iBAAiB;AAAA,EAC9B;AAEA,QAAM,iBAAa;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,oDAAC,sCAAc,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"]
 }

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

@@ -33,12 +33,13 @@ __export(ValuePill_exports, {
 module.exports = __toCommonJS(ValuePill_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_tooltip_v3 = require("@elliemae/ds-tooltip-v3");
 var import_react = __toESM(require("react"));
 var import_TextComponent = require("../TextComponent.js");
 var import_styled = require("../styled.js");
-const ValuePill = import_react.default.memo(
-  ({
+const ValuePill = import_react.default.memo((props) => {
+  const {
     label,
     size,
     labelTruncated,
@@ -50,7 +51,9 @@ const ValuePill = import_react.default.memo(
     readOnly,
     applyTooltipOverflowWrap,
     trailingComma
-  }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  } = props;
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styled.StyledValuePillWrapper,
     {
       disabled,
@@ -64,11 +67,12 @@ const ValuePill = import_react.default.memo(
       "data-label": ariaLabel || label,
       applyAriaDisabled,
       readOnly,
+      ...ownerProps,
       children: [
         iconLeft,
         tooltipValue !== "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: tooltipValue ?? "", applyTooltipOverflowWrap, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSpanWithTooltip, { className: "ds-pill-tooltip-value", "aria-disabled": applyAriaDisabled, tabIndex: 0, children: label }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
       ]
     }
-  )
-);
+  );
+});
 //# sourceMappingURL=ValuePill.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/ValuePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { 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 { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>(\n  ({\n    label,\n    size,\n    labelTruncated,\n    disabled,\n    tooltipValue,\n    iconLeft,\n    ariaLabel,\n    applyAriaDisabled,\n    readOnly,\n    applyTooltipOverflowWrap,\n    trailingComma,\n  }) => (\n    <StyledValuePillWrapper\n      disabled={disabled}\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n      data-testid=\"ds-pill-wrapper\"\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n      data-label={ariaLabel || label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n    >\n      {iconLeft}\n      {tooltipValue !== '' ? (\n        <DSTooltipV3 text={tooltipValue ?? ''} applyTooltipOverflowWrap={applyTooltipOverflowWrap}>\n          <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" aria-disabled={applyAriaDisabled} tabIndex={0}>\n            {label}\n          </StyledSpanWithTooltip>\n        </DSTooltipV3>\n      ) : (\n        <TextComponent labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n      )}\n    </StyledValuePillWrapper>\n  ),\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBnB;AApBJ,2BAA4B;AAC5B,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA8D;AAEvD,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MACtB,cAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,iBAAiB,KAChB,4CAAC,oCAAY,MAAM,gBAAgB,IAAI,0BACrC,sDAAC,uCAAsB,WAAU,yBAAwB,iBAAe,mBAAmB,UAAU,GAClG,iBACH,GACF,IAEA,4CAAC,sCAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAEjG;AAEJ;",
+  "sourcesContent": ["import { 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 { 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    ariaLabel,\n    applyAriaDisabled,\n    readOnly,\n    applyTooltipOverflowWrap,\n    trailingComma,\n  } = props;\n  const ownerProps = useOwnerProps(props);\n  return (\n    <StyledValuePillWrapper\n      disabled={disabled}\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n      data-testid=\"ds-pill-wrapper\"\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n      data-label={ariaLabel || label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n      {...ownerProps}\n    >\n      {iconLeft}\n      {tooltipValue !== '' ? (\n        <DSTooltipV3 text={tooltipValue ?? ''} applyTooltipOverflowWrap={applyTooltipOverflowWrap}>\n          <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" aria-disabled={applyAriaDisabled} tabIndex={0}>\n            {label}\n          </StyledSpanWithTooltip>\n        </DSTooltipV3>\n      ) : (\n        <TextComponent labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n      )}\n    </StyledValuePillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBnB;AAvBJ,8BAA8B;AAC9B,2BAA4B;AAC5B,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA8D;AAEvD,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,iBAAa,uCAAc,KAAK;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MACtB,cAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,iBAAiB,KAChB,4CAAC,oCAAY,MAAM,gBAAgB,IAAI,0BACrC,sDAAC,uCAAsB,WAAU,yBAAwB,iBAAe,mBAAmB,UAAU,GAClG,iBACH,GACF,IAEA,4CAAC,sCAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAEjG;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/constants/index.js

@@ -0,0 +1,51 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  DSPillName: () => DSPillName,
+  DSPillV2Name: () => DSPillV2Name,
+  PILL_V2_DATA_TESTID: () => PILL_V2_DATA_TESTID,
+  PILL_V2_SLOTS: () => PILL_V2_SLOTS
+});
+module.exports = __toCommonJS(constants_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+const DSPillV2Name = "DSPill";
+const DSPillName = DSPillV2Name;
+const PILL_V2_SLOTS = {
+  WRAPPER: "wrapper",
+  PILL_GROUP: "pill-group",
+  PILL_BUTTON: "pill-button",
+  PILL_MENU_BUTTON: "menu-button-chevron"
+};
+const PILL_V2_DATA_TESTID = {
+  ...(0, import_ds_system.slotObjectToDataTestIds)(DSPillV2Name, PILL_V2_SLOTS),
+  PILL_BUTTON: "ds-button"
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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\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};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AACrB,MAAM,aAAa;AAGnB,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,kBAAkB;AACpB;AAGO,MAAM,sBAAsB;AAAA,EACjC,OAAG,0CAAwB,cAAc,aAAa;AAAA,EACtD,aAAa;AACf;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -28,18 +28,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 __export(index_exports, {
-  DSPillButton: () => import_components.DSPillButton,
-  DSPillButtonName: () => import_DSPillDefinitions.DSPillButtonName,
-  DSPillButtonWithSchema: () => import_components.DSPillButtonWithSchema,
-  DSPillGroupName: () => import_DSPillDefinitions.DSPillGroupName,
-  DSPillGroupV2: () => import_components.DSPillGroupV2,
-  DSPillGroupV2WithSchema: () => import_components.DSPillGroupV2WithSchema,
-  DSPillName: () => import_DSPillDefinitions.DSPillName,
+  DSPillButton: () => import_DSPillButton.DSPillButton,
+  DSPillButtonName: () => import_DSPillButton.DSPillButtonName,
+  DSPillButtonWithSchema: () => import_DSPillButton.DSPillButtonWithSchema,
+  DSPillGroupName: () => import_DSPillGroup.DSPillGroupName,
+  DSPillGroupV2: () => import_DSPillGroup.DSPillGroupV2,
+  DSPillGroupV2WithSchema: () => import_DSPillGroup.DSPillGroupV2WithSchema,
+  DSPillName: () => import_constants.DSPillName,
   DSPillV2: () => import_components.DSPillV2,
-  DSPillV2WithSchema: () => import_components.DSPillV2WithSchema
+  DSPillV2Name: () => import_constants.DSPillV2Name,
+  DSPillV2WithSchema: () => import_components.DSPillV2WithSchema,
+  PILL_V2_DATA_TESTID: () => import_constants.PILL_V2_DATA_TESTID,
+  PILL_V2_SLOTS: () => import_constants.PILL_V2_SLOTS
 });
 module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
 var import_components = require("./components/index.js");
-var import_DSPillDefinitions = require("./DSPillDefinitions.js");
+var import_DSPillGroup = require("./parts/DSPillGroup/index.js");
+var import_DSPillButton = require("./parts/DSPillButton/index.js");
+var import_constants = require("./constants/index.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export {\n  DSPillV2,\n  DSPillButton,\n  DSPillButtonWithSchema,\n  DSPillGroupV2,\n  DSPillGroupV2WithSchema,\n  DSPillV2WithSchema,\n} from './components/index.js';\nexport { DSPillButtonName, DSPillGroupName, DSPillName } from './DSPillDefinitions.js';\nexport type { DSPillT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAOO;AACP,+BAA8D;",
+  "sourcesContent": ["export { DSPillV2, DSPillV2WithSchema } from './components/index.js';\nexport { DSPillGroupV2, DSPillGroupV2WithSchema, DSPillGroupName } from './parts/DSPillGroup/index.js';\nexport { DSPillButton, DSPillButtonWithSchema, DSPillButtonName } from './parts/DSPillButton/index.js';\nexport { PILL_V2_DATA_TESTID, PILL_V2_SLOTS, DSPillName, DSPillV2Name } from './constants/index.js';\nexport type { DSPillT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA6C;AAC7C,yBAAwE;AACxE,0BAAuE;AACvE,uBAA6E;",
   "names": []
 }

package/dist/cjs/package.json

@@ -3,5 +3,8 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ]
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/dist/cjs/{components/PillButton.js → parts/DSPillButton/DSPillButton.js}

@@ -26,32 +26,30 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var PillButton_exports = {};
-__export(PillButton_exports, {
+var DSPillButton_exports = {};
+__export(DSPillButton_exports, {
   DSPillButton: () => DSPillButton,
   DSPillButtonWithSchema: () => DSPillButtonWithSchema
 });
-module.exports = __toCommonJS(PillButton_exports);
+module.exports = __toCommonJS(DSPillButton_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_styled = require("./styled.js");
-var import_DSPillDefinitions = require("../DSPillDefinitions.js");
-var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_usePillButton = require("./config/usePillButton.js");
+var import_constants = require("./constants/index.js");
+var import_styled = require("../../components/styled.js");
 const typeToClassName = {
   only: "ds-pill-button-only",
   left: "ds-pill-button-left",
   right: "ds-pill-button-right"
 };
 const DSPillButton = (props) => {
-  const { children, ...restProps } = props;
-  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
-    restProps,
-    import_react_desc_prop_types.DSPillButtonDefaultProps
-  );
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.DSPillButtonPropTypesSchema, import_DSPillDefinitions.DSPillButtonName);
-  const { type, onClick, applyAriaDisabled, ...rest } = propsWithDefaults;
+  const {
+    propsWithDefault: { type, onClick, applyAriaDisabled, children, ...rest },
+    ownerProps
+  } = (0, import_usePillButton.usePillButton)(props);
   const handleOnClick = (0, import_react.useCallback)(
     (e) => {
       if (applyAriaDisabled) return;
@@ -68,11 +66,12 @@ const DSPillButton = (props) => {
       type: "button",
       onClick: handleOnClick,
       "aria-disabled": applyAriaDisabled,
+      ...ownerProps,
       children
     }
   );
 };
-DSPillButton.displayName = import_DSPillDefinitions.DSPillButtonName;
-const DSPillButtonWithSchema = (0, import_ds_props_helpers.describe)(DSPillButton).description("Pill button");
+DSPillButton.displayName = import_constants.DSPillButtonName;
+const DSPillButtonWithSchema = (0, import_ds_props_helpers.describe)(DSPillButton);
 DSPillButtonWithSchema.propTypes = import_react_desc_prop_types.DSPillButtonPropTypesSchema;
-//# sourceMappingURL=PillButton.js.map
+//# sourceMappingURL=DSPillButton.js.map

package/dist/cjs/parts/DSPillButton/DSPillButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPillButton/DSPillButton.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSPillButtonT, DSPillButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { usePillButton } from './config/usePillButton.js';\nimport { DSPillButtonName } from './constants/index.js';\nimport { StyledPillButton } from '../../components/styled.js';\n\nconst typeToClassName = {\n  only: 'ds-pill-button-only',\n  left: 'ds-pill-button-left',\n  right: 'ds-pill-button-right',\n};\n\nconst DSPillButton: React.ComponentType<DSPillButtonT.Props> = (props) => {\n  const {\n    propsWithDefault: { type, onClick, applyAriaDisabled, children, ...rest },\n    ownerProps,\n  } = usePillButton(props);\n  const handleOnClick = useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => {\n      if (applyAriaDisabled) return;\n      if (onClick) onClick(e as React.MouseEvent<HTMLButtonElement>);\n    },\n    [onClick, applyAriaDisabled],\n  );\n\n  return (\n    <StyledPillButton\n      {...rest}\n      buttonType=\"raw\"\n      className={`${typeToClassName[type]} ${rest.className ?? ''}`}\n      type=\"button\"\n      onClick={handleOnClick}\n      aria-disabled={applyAriaDisabled}\n      {...ownerProps}\n    >\n      {children}\n    </StyledPillButton>\n  );\n};\n\nDSPillButton.displayName = DSPillButtonName;\nconst DSPillButtonWithSchema = describe(DSPillButton);\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypesSchema;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BnB;AA3BJ,mBAAmC;AACnC,8BAAyB;AACzB,mCAAgE;AAChE,2BAA8B;AAC9B,uBAAiC;AACjC,oBAAiC;AAEjC,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,SAAS,mBAAmB,UAAU,GAAG,KAAK;AAAA,IACxE;AAAA,EACF,QAAI,oCAAc,KAAK;AACvB,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAoF;AACnF,UAAI,kBAAmB;AACvB,UAAI,QAAS,SAAQ,CAAwC;AAAA,IAC/D;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,YAAW;AAAA,MACX,WAAW,GAAG,gBAAgB,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;AAAA,MAC3D,MAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAe;AAAA,MACd,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "names": []
+}