@elliemae/ds-pills-v2 3.70.0-next.7 → 3.70.0-next.71

package/dist/cjs/TruncatedTooltipText.js

@@ -59,9 +59,16 @@ const TooltipContainer = import_ds_system.styled.div`
   border-radius: 2px;
   font-size: 13px;
   color: ${({ theme }) => theme.colors.neutral[600]};
-  pointer-events: none;
 `;
-const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
+const TruncatedTooltipDetectionBox = import_ds_system.styled.div`
+  position: absolute;
+  top: -15px;
+  right: -15px;
+  width: calc(100% + 30px);
+  height: calc(100% + 30px);
+  z-index: -1;
+`;
+const TruncatedTooltipText = ({ value = "", placement = "top", disableTooltip = false }) => {
   const [showTooltip, setShowTooltip] = (0, import_react.useState)(false);
   const { refs, floatingStyles, arrowStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
     placement,
@@ -75,22 +82,31 @@ const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
   const handleMouseLeave = (0, import_react.useCallback)(() => {
     setShowTooltip(false);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruncatedSpan, { innerRef: refs.setReference, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: value }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ds_floating_context.FloatingWrapper,
-      {
-        innerRef: refs.setFloating,
-        isOpen: showTooltip,
-        floatingStyles,
-        context,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipContainer, { children: [
-          value,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
-        ] })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    TruncatedSpan,
+    {
+      innerRef: refs.setReference,
+      onMouseEnter: disableTooltip ? void 0 : handleMouseEnter,
+      onMouseLeave: disableTooltip ? void 0 : handleMouseLeave,
+      children: [
+        value,
+        !disableTooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ds_floating_context.FloatingWrapper,
+          {
+            innerRef: refs.setFloating,
+            isOpen: showTooltip,
+            floatingStyles,
+            context,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipContainer, { children: [
+              value,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruncatedTooltipDetectionBox, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
+            ] })
+          }
+        )
+      ]
+    }
+  );
 };
 var TruncatedTooltipText_default = TruncatedTooltipText;
 //# sourceMappingURL=TruncatedTooltipText.js.map

package/dist/cjs/TruncatedTooltipText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TruncatedTooltipText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n  useFloatingContext,\n  FloatingWrapper,\n  PopoverArrow,\n  type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\n\nconst TruncatedSpan = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled.div`\n  text-align: center;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n  position: relative;\n  background-color: white;\n  border-radius: 2px;\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.neutral[600]};\n  pointer-events: none;\n`;\n\ninterface TruncatedTooltipTextProps {\n  value?: string;\n  placement?: DSHookFloatingContextT.PopperPlacementsT;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top' }: TruncatedTooltipTextProps) => {\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n    placement,\n    externallyControlledIsOpen: showTooltip,\n    withoutAnimation: true,\n  });\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n    const el = e.currentTarget;\n    setShowTooltip(el.offsetWidth < el.scrollWidth);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setShowTooltip(false);\n  }, []);\n\n  return (\n    <>\n      <TruncatedSpan innerRef={refs.setReference} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n        {value}\n      </TruncatedSpan>\n      <FloatingWrapper\n        innerRef={refs.setFloating}\n        isOpen={showTooltip}\n        floatingStyles={floatingStyles}\n        context={context}\n      >\n        <TooltipContainer>\n          {value}\n          <PopoverArrow {...arrowStyles} />\n        </TooltipContainer>\n      </FloatingWrapper>\n    </>\n  );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4DnB;AA5DJ,mBAA6C;AAC7C,uBAAuB;AACvB,iCAKO;AAEP,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,mBAAmB,wBAAO;AAAA;AAAA,eAEjB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AASnD,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAM,MAAiC;AAC7F,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,uBAAmB,0BAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,gDAAC,iBAAc,UAAU,KAAK,cAAc,cAAc,kBAAkB,cAAc,kBACvF,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,uDAAC,oBACE;AAAA;AAAA,UACD,4CAAC,2CAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
+  "sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n  useFloatingContext,\n  FloatingWrapper,\n  PopoverArrow,\n  type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\n\nconst TruncatedSpan = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\n/** Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency */\nconst TooltipContainer = styled.div`\n  text-align: center;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n  position: relative;\n  background-color: white;\n  border-radius: 2px;\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.neutral[600]};\n`;\n\n/**\n * Mirrors DSTooltipV3's StyledMouseOverDetectionBox \u2014 extends hover area 15px on all sides,\n * covering the 12px floating offset gap so the tooltip doesn't close while the mouse crosses it.\n */\nconst TruncatedTooltipDetectionBox = styled.div`\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  width: calc(100% + 30px);\n  height: calc(100% + 30px);\n  z-index: -1;\n`;\n\ninterface TruncatedTooltipTextProps {\n  value?: string;\n  placement?: DSHookFloatingContextT.PopperPlacementsT;\n  disableTooltip?: boolean;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top', disableTooltip = false }: TruncatedTooltipTextProps) => {\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n    placement,\n    externallyControlledIsOpen: showTooltip,\n    withoutAnimation: true,\n  });\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n    const el = e.currentTarget;\n    setShowTooltip(el.offsetWidth < el.scrollWidth);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setShowTooltip(false);\n  }, []);\n\n  return (\n    <TruncatedSpan\n      innerRef={refs.setReference}\n      onMouseEnter={disableTooltip ? undefined : handleMouseEnter}\n      onMouseLeave={disableTooltip ? undefined : handleMouseLeave}\n    >\n      {value}\n      {!disableTooltip && (\n        <FloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={showTooltip}\n          floatingStyles={floatingStyles}\n          context={context}\n        >\n          <TooltipContainer>\n            {value}\n            <TruncatedTooltipDetectionBox />\n            <PopoverArrow {...arrowStyles} />\n          </TooltipContainer>\n        </FloatingWrapper>\n      )}\n    </TruncatedSpan>\n  );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsFb;AAtFV,mBAA6C;AAC7C,uBAAuB;AACvB,iCAKO;AAEP,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,mBAAmB,wBAAO;AAAA;AAAA,eAEjB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAOnD,MAAM,+BAA+B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe5C,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,OAAO,iBAAiB,MAAM,MAAiC;AACrH,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,uBAAmB,0BAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,cAAc,iBAAiB,SAAY;AAAA,MAC3C,cAAc,iBAAiB,SAAY;AAAA,MAE1C;AAAA;AAAA,QACA,CAAC,kBACA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YAEA,uDAAC,oBACE;AAAA;AAAA,cACD,4CAAC,gCAA6B;AAAA,cAC9B,4CAAC,2CAAc,GAAG,aAAa;AAAA,eACjC;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAGA,IAAO,+BAAQ;",
   "names": []
 }

package/dist/cjs/components/Pill.js

@@ -36,6 +36,7 @@ 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_constants = require("../constants/index.js");
+var import_useValidateProps = require("../config/useValidateProps.js");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_types = require("./types/index.js");
 const pillComponentGetter = {
@@ -50,7 +51,7 @@ const pillComponentGetter = {
 };
 const DSPillV2 = (props) => {
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSPillV2DefaultProps);
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.DSPillV2PropTypesSchema, import_constants.DSPillName);
+  (0, import_useValidateProps.useValidateProps)(propsWithDefaults, import_react_desc_prop_types.DSPillV2PropTypesSchema);
   const { type } = propsWithDefaults;
   const PillComponent = pillComponentGetter[type];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillComponent, { ...propsWithDefaults });

package/dist/cjs/components/Pill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Pill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { DSPillName } from '../constants/index.js';\nimport { DSPillV2DefaultProps, DSPillV2PropTypesSchema, type DSPillT } from '../react-desc-prop-types.js';\nimport {\n  DropdownPill,\n  InputPill,\n  LabelPill,\n  LabelOnlyPill,\n  MenuButtonPill,\n  ReadOnlyPill,\n  RemovablePill,\n  ValuePill,\n} from './types/index.js';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillT.InternalProps>> = {\n  dropdown: DropdownPill,\n  menubutton: MenuButtonPill,\n  input: InputPill,\n  label: LabelPill,\n  labelOnly: LabelOnlyPill,\n  readonly: ReadOnlyPill,\n  removable: RemovablePill,\n  value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSPillT.InternalProps>(props, DSPillV2DefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypesSchema, DSPillName);\n  const { type } = propsWithDefaults;\n  const PillComponent = pillComponentGetter[type];\n\n  return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.displayName = DSPillName;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypesSchema;\n\nexport { DSPillV2, DSPillV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCd;AAhCT,8BAAuF;AAEvF,uBAA2B;AAC3B,mCAA4E;AAC5E,mBASO;AAEP,MAAM,sBAAkF;AAAA,EACtF,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA+C,CAAC,UAAU;AAC9D,QAAM,wBAAoB,sDAAoD,OAAO,iDAAoB;AACzG,8DAA+B,mBAAmB,sDAAyB,2BAAU;AACrF,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB,IAAI;AAE9C,SAAO,4CAAC,iBAAe,GAAG,mBAAmB;AAC/C;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
+  "sourcesContent": ["import { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { DSPillName } from '../constants/index.js';\nimport { useValidateProps } from '../config/useValidateProps.js';\nimport { DSPillV2DefaultProps, DSPillV2PropTypesSchema, type DSPillT } from '../react-desc-prop-types.js';\nimport {\n  DropdownPill,\n  InputPill,\n  LabelPill,\n  LabelOnlyPill,\n  MenuButtonPill,\n  ReadOnlyPill,\n  RemovablePill,\n  ValuePill,\n} from './types/index.js';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillT.InternalProps>> = {\n  dropdown: DropdownPill,\n  menubutton: MenuButtonPill,\n  input: InputPill,\n  label: LabelPill,\n  labelOnly: LabelOnlyPill,\n  readonly: ReadOnlyPill,\n  removable: RemovablePill,\n  value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSPillT.InternalProps>(props, DSPillV2DefaultProps);\n  useValidateProps(propsWithDefaults, DSPillV2PropTypesSchema);\n  const { type } = propsWithDefaults;\n  const PillComponent = pillComponentGetter[type];\n\n  return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.displayName = DSPillName;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypesSchema;\n\nexport { DSPillV2, DSPillV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCd;AAjCT,8BAAuD;AAEvD,uBAA2B;AAC3B,8BAAiC;AACjC,mCAA4E;AAC5E,mBASO;AAEP,MAAM,sBAAkF;AAAA,EACtF,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA+C,CAAC,UAAU;AAC9D,QAAM,wBAAoB,sDAAoD,OAAO,iDAAoB;AACzG,gDAAiB,mBAAmB,oDAAuB;AAC3D,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB,IAAI;AAE9C,SAAO,4CAAC,iBAAe,GAAG,mBAAmB;AAC/C;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
   "names": []
 }

package/dist/cjs/components/TextComponent.js

@@ -33,8 +33,8 @@ __export(TextComponent_exports, {
 module.exports = __toCommonJS(TextComponent_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_TruncatedTooltipText = require("../TruncatedTooltipText.js");
 var import_react = __toESM(require("react"));
+var import_TruncatedTooltipText = require("../TruncatedTooltipText.js");
 var import_styled = require("./styled.js");
-const TextComponent = import_react.default.memo(({ labelTruncated, label, pillSize }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTextWrapper, { pillSize, children: labelTruncated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: label }) : label }));
+const TextComponent = import_react.default.memo(({ labelTruncated, disableTruncationTooltip, label, pillSize, getOwnerProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTextWrapper, { pillSize, variant: "b2", component: "span", getOwnerProps, children: labelTruncated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: label, disableTooltip: disableTruncationTooltip }) : label }));
 //# sourceMappingURL=TextComponent.js.map

package/dist/cjs/components/TextComponent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/TextComponent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { TruncatedTooltipText } from '../TruncatedTooltipText.js';\nimport React from 'react';\nimport type { DSPillT } from '../react-desc-prop-types.js';\nimport { StyledTextWrapper } from './styled.js';\n\nexport const TextComponent = React.memo<{\n  labelTruncated: DSPillT.InternalProps['labelTruncated'];\n  label: DSPillT.InternalProps['label'];\n  pillSize: DSPillT.InternalProps['size'];\n}>(({ labelTruncated, label, pillSize }) => (\n  <StyledTextWrapper pillSize={pillSize}>\n    {labelTruncated ? (\n      <TruncatedTooltipText value={label} />\n    ) : (\n      label\n    )}\n  </StyledTextWrapper>\n));\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYjB;AAZN,kCAAqC;AACrC,mBAAkB;AAElB,oBAAkC;AAE3B,MAAM,gBAAgB,aAAAA,QAAM,KAIhC,CAAC,EAAE,gBAAgB,OAAO,SAAS,MACpC,4CAAC,mCAAkB,UAChB,2BACC,4CAAC,oDAAqB,OAAO,OAAO,IAEpC,OAEJ,CACD;",
+  "sourcesContent": ["import React from 'react';\nimport { TruncatedTooltipText } from '../TruncatedTooltipText.js';\nimport type { DSPillT } from '../react-desc-prop-types.js';\nimport { StyledTextWrapper } from './styled.js';\n\nexport const TextComponent = React.memo<{\n  labelTruncated: DSPillT.InternalProps['labelTruncated'];\n  disableTruncationTooltip: DSPillT.InternalProps['disableTruncationTooltip'];\n  label: DSPillT.InternalProps['label'];\n  pillSize: DSPillT.InternalProps['size'];\n  getOwnerProps?: () => object;\n}>(({ labelTruncated, disableTruncationTooltip, label, pillSize, getOwnerProps }) => (\n  <StyledTextWrapper pillSize={pillSize} variant=\"b2\" component=\"span\" getOwnerProps={getOwnerProps}>\n    {labelTruncated ? <TruncatedTooltipText value={label} disableTooltip={disableTruncationTooltip} /> : label}\n  </StyledTextWrapper>\n));\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADaD;AAbtB,mBAAkB;AAClB,kCAAqC;AAErC,oBAAkC;AAE3B,MAAM,gBAAgB,aAAAA,QAAM,KAMhC,CAAC,EAAE,gBAAgB,0BAA0B,OAAO,UAAU,cAAc,MAC7E,4CAAC,mCAAkB,UAAoB,SAAQ,MAAK,WAAU,QAAO,eAClE,2BAAiB,4CAAC,oDAAqB,OAAO,OAAO,gBAAgB,0BAA0B,IAAK,OACvG,CACD;",
   "names": ["React"]
 }

package/dist/cjs/components/styled.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var styled_exports = {};
 __export(styled_exports, {
   StyledAgnosticPillRegion: () => StyledAgnosticPillRegion,
+  StyledDSInputText: () => StyledDSInputText,
   StyledDropdownPillWrapper: () => StyledDropdownPillWrapper,
   StyledInputPillWrapper: () => StyledInputPillWrapper,
   StyledLabelOnlyPillWrapper: () => StyledLabelOnlyPillWrapper,
@@ -46,9 +47,11 @@ __export(styled_exports, {
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_menu_button = require("@elliemae/ds-menu-button");
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_typography = require("@elliemae/ds-typography");
 var import_constants = require("../constants/index.js");
 var import_constants2 = require("../parts/DSPillButton/constants/index.js");
 var import_constants3 = require("../parts/DSPillGroup/constants/index.js");
@@ -74,9 +77,14 @@ const borderOutside = ({
     z-index: ${zIndex || ""};
   }
 `;
-const fontSize13Base16 = 13 / 16;
-const lineHeight17Base13 = 17 / 13;
-const lineHeight17Base16 = 17 / 16;
+const b2FontMirror = import_ds_system.css`
+  font-size: 0.8125rem;
+  line-height: 1rem;
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 1rem;
+    line-height: 1.2307692308rem;
+  }
+`;
 const commonPillWrapperCss = import_ds_system.css`
   position: relative;
 
@@ -93,15 +101,9 @@ const commonPillWrapperCss = import_ds_system.css`
   height: fit-content;
   place-items: start normal;
 
-  font-size: 1rem;
-  font-size: ${fontSize13Base16}rem;
-  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
-    font-size: 1rem;
-  }
-  line-height: ${lineHeight17Base16}rem;
-  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
-    line-height: ${lineHeight17Base13}rem;
-  }
+  /** PUI typography: the pill label owns b2 via styled(DSTypography); font-size/line-height no
+   *  longer live here. Only the InputPill wrapper re-adds b2 (see b2FontMirror) for its
+   *  consumer-rendered input. color + font-weight stay here for inheritance into the label. */
   user-select: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "none" : "auto"};
   color: ${({ theme }) => theme.colors.brand["800"]};
   word-break: break-word;
@@ -138,6 +140,9 @@ const StyledInputPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid,
   slot: import_constants.PILL_V2_SLOTS.WRAPPER
 })`
   ${commonPillWrapperCss}
+  /** The only place the b2 mirror is still needed: the input is a consumer render-prop, not a
+   *  DSTypography component. All other pill text nodes own b2 via styled(DSTypography). */
+  ${b2FontMirror}
 
   background: ${(props) => props.theme.colors.neutral["000"]};
   padding: 0;
@@ -155,22 +160,55 @@ const StyledInputPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid,
     ${(props) => props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : ""}
   }
 
-  & .em-ds-input {
+  /** DSInputText renders its own bordered wrapper (StyledInputWrapper, slot "root"). The pill owns the
+   *  border/background/focus-ring, so strip the wrapper's chrome and let it size to the input. */
+  & .DSInputtext-root {
+    border: none !important;
+    /* DSInputText draws its own focus ring as an inset outline on this wrapper; suppress it so only
+     *  the pill's :focus-within border (below) shows, exactly as the legacy DSInput did. */
+    outline: none !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    min-height: 0 !important;
+    padding: 0 !important;
+    width: 100%;
+    /* Fill the pill row so the input stretches to the full height (as the legacy wrapper did),
+     *  keeping the typed value vertically centered when the clear button grows the row. */
+    height: 100%;
+  }
+
+  /** The input is a consumer render-prop (DSInputText's native input by default). Match the legacy
+   *  visual exactly: transparent, borderless, pill-controlled width, no padding, 8px left margin.
+   *  DSInputText adds its own padding, themed font-family and an italic placeholder — neutralize those
+   *  so the typed value and placeholder render identically to the previous DSInput. */
+  & input {
     outline: none !important;
     border: none !important;
     box-shadow: none !important;
     border-radius: 0 !important;
     height: 100%;
     background: transparent;
-    width: ${(props) => `${props.inputWidth + (props.value === "" ? 24 : 0)}px`};
+    width: ${(props) => `${props.inputWidth}px`};
     padding: 0;
     margin: 0 0 0 8px;
-  }
-
-  & .em-ds-input__tooltip-ref {
-    height: 100%;
+    /* Inherit the wrapper's b2 line-height so the empty field keeps its previous height; revert
+     *  DSInputText's themed font-family/color/placeholder back to the UA defaults the legacy DSInput
+     *  rendered with, so the typed value and placeholder look identical. */
+    line-height: inherit;
+    font-family: revert;
+    color: revert;
+
+    ::placeholder {
+      color: revert;
+      font-style: revert;
+      font-weight: revert;
+    }
   }
 `;
+const StyledDSInputText = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, {
+  name: import_constants.DSPillV2Name,
+  slot: import_constants.PILL_V2_SLOTS.PILL_INPUT
+})``;
 const StyledDropdownPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPillV2Name, slot: import_constants.PILL_V2_SLOTS.WRAPPER })`
   ${commonPillWrapperCss}
   font-weight: ${(props) => props.theme.fontWeights.semibold};
@@ -264,8 +302,10 @@ const StyledPillGroup = (0, import_ds_system.styled)(import_ds_grid.Grid, { name
     }
   }
 `;
-const StyledSpanWithTooltip = import_ds_system.styled.span`
+const StyledSpanWithTooltip = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSPillV2Name, slot: import_constants.PILL_V2_SLOTS.LABEL })`
   ${commonSpanStyles}
+  /** b2 hardcodes font-weight 400; inherit so the per-pill-type weight (semibold/regular) wins. */
+  font-weight: inherit;
   outline: none;
   :focus {
     ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}
@@ -353,7 +393,9 @@ const StyledAgnosticPillRegion = import_ds_system.styled.div`
   display: flex;
   padding: 2px;
 `;
-const StyledTextWrapper = import_ds_system.styled.span`
+const StyledTextWrapper = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSPillV2Name, slot: import_constants.PILL_V2_SLOTS.LABEL })`
   ${commonSpanStyles}
+  /** b2 hardcodes font-weight 400; inherit so the per-pill-type weight (semibold/regular) wins. */
+  font-weight: inherit;
 `;
 //# sourceMappingURL=styled.js.map

package/dist/cjs/components/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuButton } from '@elliemae/ds-menu-button';\nimport { css, styled } from '@elliemae/ds-system';\nimport { PILL_V2_SLOTS, DSPillV2Name } from '../constants/index.js';\nimport { PILL_BUTTON_SLOTS } from '../parts/DSPillButton/constants/index.js';\nimport { PILL_GROUP_SLOTS } from '../parts/DSPillGroup/constants/index.js';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nexport const borderOutside = ({\n  color,\n  size = 1,\n  zIndex = 0,\n  borderRadius = '12px',\n}: {\n  color: string;\n  size?: number;\n  zIndex?: number;\n  borderRadius?: string;\n}) => css<{ disabled?: boolean; applyAriaDisabled?: boolean; readOnly?: boolean }>`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: -${size}px;\n    left: -${size}px;\n    right: -${size}px;\n    bottom: -${size}px;\n    border: ${size}px solid ${color};\n    border-top-left-radius: ${borderRadius};\n    border-top-right-radius: ${borderRadius};\n    border-bottom-left-radius: ${borderRadius};\n    border-bottom-right-radius: ${borderRadius};\n    pointer-events: none;\n    z-index: ${zIndex || ''};\n  }\n`;\n\nconst fontSize13Base16 = 13 / 16;\nconst lineHeight17Base13 = 17 / 13;\nconst lineHeight17Base16 = 17 / 16;\nconst commonPillWrapperCss = css<{\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n}>`\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${({ theme }) => theme.colors.brand[250]};\n\n  outline: none;\n\n  padding: 0px 12px 0 12px;\n\n  border-radius: 12px;\n\n  height: fit-content;\n  place-items: start normal;\n\n  font-size: 1rem;\n  font-size: ${fontSize13Base16}rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 1rem;\n  }\n  line-height: ${lineHeight17Base16}rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    line-height: ${lineHeight17Base13}rem;\n  }\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : 'auto')};\n  color: ${({ theme }) => theme.colors.brand['800']};\n  word-break: break-word;\n`;\n\nconst commonSpanStyles = css<{ pillSize: 'm' | 's' }>`\n  display: grid;\n  padding: ${(props) => (props?.pillSize === 'm' ? '4px 0' : '1px 0')};\n  align-self: center;\n`;\n\ninterface InputPillWrapperProps {\n  value: string;\n  inputWidth: number;\n  inputHasFocus: boolean;\n  hasError: boolean;\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n}\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n}>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledLabelOnlyPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled?: boolean;\n}>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\ntype StyledValuePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  hasIconRight: boolean;\n  applyAriaDisabled: boolean;\n};\n\nexport const StyledValuePillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledValuePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n  padding-right: ${(props) => (props.hasIconRight ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<InputPillWrapperProps>`\n  ${commonPillWrapperCss}\n\n  background: ${(props) => props.theme.colors.neutral['000']};\n  padding: 0;\n\n  ${({ theme, hasError }) => {\n    if (hasError) return borderOutside({ color: theme.colors.danger[900] });\n    return borderOutside({ color: theme.colors.brand[500] });\n  }}\n\n  :focus-within {\n    ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[700], size: 2 }) : '')}\n  }\n\n  :active {\n    ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : '')}\n  }\n\n  & .em-ds-input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n    padding: 0;\n    margin: 0 0 0 8px;\n  }\n\n  & .em-ds-input__tooltip-ref {\n    height: 100%;\n  }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n  pillSize: 'm' | 's';\n}>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  padding: 0 0 0 12px;\n`;\n\ntype StyledMenuButtonPillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIconRight: boolean;\n  hasIconLeft: boolean;\n  disabled?: boolean;\n};\n\nexport const StyledReadonlyPillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledMenuButtonPillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n  padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\ntype StyledRemovablePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  hasIcon: boolean;\n};\n\nexport const StyledRemovablePillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledRemovablePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n  padding-right: 0px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid, { name: DSPillV2Name, slot: PILL_GROUP_SLOTS.PILL_GROUP })`\n  width: ${({ width }) => width};\n  display: flex;\n  flex-wrap: wrap;\n  row-gap: 8px;\n\n  // Pill edges\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n\n  // Pill paddings to the left / right\n  & .ds-pill-wrapper-label,\n  & .ds-pill-wrapper-value,\n  & .ds-pill-wrapper-readonly {\n    &:not(:first-of-type) {\n      padding-left: 8px;\n    }\n    &:not(:last-of-type) {\n      padding-right: 8px;\n    }\n  }\n\n  & .ds-pill-wrapper-removable:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper {\n    :not(:first-of-type) {\n      .ds-pill-button-left {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    :not(:last-of-type) {\n      .ds-pill-button-right {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span<{ pillSize: 'm' | 's' }>`\n  ${commonSpanStyles}\n  outline: none;\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}\n  }\n`;\n\nexport const StyledPillButton = styled(DSButtonV3, {\n  name: DSPillV2Name,\n  slot: PILL_BUTTON_SLOTS.PILL_BUTTON,\n  preserveLegacyDataTestId: true,\n})<{\n  width: string | number;\n  height: string | number;\n}>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  ${({ width, height, theme }) => {\n    if (String(width).includes('px') && String(height).includes('px'))\n      return `\n      width: ${parseInt(width as string, 10) / 13}rem;\n      height: ${parseInt(height as string, 10) / 13}rem;\n\n    @media (max-width: ${theme.breakpoints?.small}) {\n      width: ${parseInt(width as string, 10) / 16}rem;\n      height: ${parseInt(height as string, 10) / 16}rem;\n    }`;\n\n    return `\n    width: ${width};\n    height: ${height};\n    `;\n  }}\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n  }\n\n  cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'default')};\n\n  :hover {\n    background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n      disabled || applyAriaDisabled ? 'transparent' : theme.colors.brand[200]};\n  }\n\n  & svg {\n    fill: ${({ disabled, applyAriaDisabled, theme }) => {\n      if (disabled) return '#5C6574';\n      if (applyAriaDisabled) return theme.colors.neutral[500];\n      return theme.colors.brand[700];\n    }};\n  }\n`;\n\nexport const StyledPillMenuButton = styled(DSMenuButton, { name: DSPillV2Name, slot: PILL_V2_SLOTS.PILL_MENU_BUTTON })<{\n  width: string;\n  height: string;\n}>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  ${({ width, height, theme }) => {\n    if (String(width).includes('px') && String(height).includes('px'))\n      return `\n      width: ${parseInt(width, 10) / 13}rem;\n    height: ${parseInt(height, 10) / 13}rem;\n\n    @media (max-width: ${theme.breakpoints?.small}) {\n      width: ${parseInt(width, 10) / 16}rem;\n      height: ${parseInt(height, 10) / 16}rem;\n    }`;\n\n    return `\n    width: ${width};\n    height: ${height};\n    `;\n  }}\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n  }\n\n  cursor: pointer;\n`;\n\nexport const StyledAgnosticPillRegion = styled.div`\n  display: flex;\n  padding: 2px;\n`;\n\nexport const StyledTextWrapper = styled.span<{ pillSize: 'm' | 's' }>`\n  ${commonSpanStyles}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuButton } from '@elliemae/ds-menu-button';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { PILL_V2_SLOTS, DSPillV2Name } from '../constants/index.js';\nimport { PILL_BUTTON_SLOTS } from '../parts/DSPillButton/constants/index.js';\nimport { PILL_GROUP_SLOTS } from '../parts/DSPillGroup/constants/index.js';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nexport const borderOutside = ({\n  color,\n  size = 1,\n  zIndex = 0,\n  borderRadius = '12px',\n}: {\n  color: string;\n  size?: number;\n  zIndex?: number;\n  borderRadius?: string;\n}) => css<{ disabled?: boolean; applyAriaDisabled?: boolean; readOnly?: boolean }>`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: -${size}px;\n    left: -${size}px;\n    right: -${size}px;\n    bottom: -${size}px;\n    border: ${size}px solid ${color};\n    border-top-left-radius: ${borderRadius};\n    border-top-right-radius: ${borderRadius};\n    border-bottom-left-radius: ${borderRadius};\n    border-bottom-right-radius: ${borderRadius};\n    pointer-events: none;\n    z-index: ${zIndex || ''};\n  }\n`;\n\n/**\n * b2 typography mirrored as raw CSS \u2014 kept ONLY for the InputPill, whose input is a consumer\n * render-prop (`inputRender`) and cannot be a DSTypography component. Every other pill text node\n * renders via `styled(DSTypography)` variant=\"b2\". Keep in sync with ds-typography b2 (font-size\n * 13px, line-height 16px at both the mobile 16px and desktop 13px roots). End-state: consume an\n * exported ds-typography b2 css mixin instead of mirroring.\n */\nconst b2FontMirror = css`\n  font-size: 0.8125rem;\n  line-height: 1rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 1rem;\n    line-height: 1.2307692308rem;\n  }\n`;\nconst commonPillWrapperCss = css<{\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n}>`\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${({ theme }) => theme.colors.brand[250]};\n\n  outline: none;\n\n  padding: 0px 12px 0 12px;\n\n  border-radius: 12px;\n\n  height: fit-content;\n  place-items: start normal;\n\n  /** PUI typography: the pill label owns b2 via styled(DSTypography); font-size/line-height no\n   *  longer live here. Only the InputPill wrapper re-adds b2 (see b2FontMirror) for its\n   *  consumer-rendered input. color + font-weight stay here for inheritance into the label. */\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : 'auto')};\n  color: ${({ theme }) => theme.colors.brand['800']};\n  word-break: break-word;\n`;\n\nconst commonSpanStyles = css<{ pillSize: 'm' | 's' }>`\n  display: grid;\n  padding: ${(props) => (props?.pillSize === 'm' ? '4px 0' : '1px 0')};\n  align-self: center;\n`;\n\ninterface InputPillWrapperProps {\n  value: string;\n  inputWidth: number;\n  inputHasFocus: boolean;\n  hasError: boolean;\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n}\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n}>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledLabelOnlyPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled?: boolean;\n}>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\ntype StyledValuePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  hasIconRight: boolean;\n  applyAriaDisabled: boolean;\n};\n\nexport const StyledValuePillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledValuePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n  padding-right: ${(props) => (props.hasIconRight ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<InputPillWrapperProps>`\n  ${commonPillWrapperCss}\n  /** The only place the b2 mirror is still needed: the input is a consumer render-prop, not a\n   *  DSTypography component. All other pill text nodes own b2 via styled(DSTypography). */\n  ${b2FontMirror}\n\n  background: ${(props) => props.theme.colors.neutral['000']};\n  padding: 0;\n\n  ${({ theme, hasError }) => {\n    if (hasError) return borderOutside({ color: theme.colors.danger[900] });\n    return borderOutside({ color: theme.colors.brand[500] });\n  }}\n\n  :focus-within {\n    ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[700], size: 2 }) : '')}\n  }\n\n  :active {\n    ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : '')}\n  }\n\n  /** DSInputText renders its own bordered wrapper (StyledInputWrapper, slot \"root\"). The pill owns the\n   *  border/background/focus-ring, so strip the wrapper's chrome and let it size to the input. */\n  & .DSInputtext-root {\n    border: none !important;\n    /* DSInputText draws its own focus ring as an inset outline on this wrapper; suppress it so only\n     *  the pill's :focus-within border (below) shows, exactly as the legacy DSInput did. */\n    outline: none !important;\n    border-radius: 0 !important;\n    background: transparent !important;\n    min-height: 0 !important;\n    padding: 0 !important;\n    width: 100%;\n    /* Fill the pill row so the input stretches to the full height (as the legacy wrapper did),\n     *  keeping the typed value vertically centered when the clear button grows the row. */\n    height: 100%;\n  }\n\n  /** The input is a consumer render-prop (DSInputText's native input by default). Match the legacy\n   *  visual exactly: transparent, borderless, pill-controlled width, no padding, 8px left margin.\n   *  DSInputText adds its own padding, themed font-family and an italic placeholder \u2014 neutralize those\n   *  so the typed value and placeholder render identically to the previous DSInput. */\n  & input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth}px`};\n    padding: 0;\n    margin: 0 0 0 8px;\n    /* Inherit the wrapper's b2 line-height so the empty field keeps its previous height; revert\n     *  DSInputText's themed font-family/color/placeholder back to the UA defaults the legacy DSInput\n     *  rendered with, so the typed value and placeholder look identical. */\n    line-height: inherit;\n    font-family: revert;\n    color: revert;\n\n    ::placeholder {\n      color: revert;\n      font-style: revert;\n      font-weight: revert;\n    }\n  }\n`;\n\n// Only wraps the default input (no consumer `inputRender`) \u2014 that's the one case where the target is\n// a known, stable component and `styled(Component, {name, slot})` can apply, exposing `dsPillInput`.\nexport const StyledDSInputText = styled(DSInputText, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.PILL_INPUT,\n})``;\n\nexport const StyledDropdownPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n  pillSize: 'm' | 's';\n}>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  padding: 0 0 0 12px;\n`;\n\ntype StyledMenuButtonPillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIconRight: boolean;\n  hasIconLeft: boolean;\n  disabled?: boolean;\n};\n\nexport const StyledReadonlyPillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledMenuButtonPillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n  padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\ntype StyledRemovablePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  hasIcon: boolean;\n};\n\nexport const StyledRemovablePillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledRemovablePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n  padding-right: 0px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid, { name: DSPillV2Name, slot: PILL_GROUP_SLOTS.PILL_GROUP })`\n  width: ${({ width }) => width};\n  display: flex;\n  flex-wrap: wrap;\n  row-gap: 8px;\n\n  // Pill edges\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n\n  // Pill paddings to the left / right\n  & .ds-pill-wrapper-label,\n  & .ds-pill-wrapper-value,\n  & .ds-pill-wrapper-readonly {\n    &:not(:first-of-type) {\n      padding-left: 8px;\n    }\n    &:not(:last-of-type) {\n      padding-right: 8px;\n    }\n  }\n\n  & .ds-pill-wrapper-removable:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper {\n    :not(:first-of-type) {\n      .ds-pill-button-left {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    :not(:last-of-type) {\n      .ds-pill-button-right {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled(DSTypography, { name: DSPillV2Name, slot: PILL_V2_SLOTS.LABEL })<{\n  pillSize: 'm' | 's';\n}>`\n  ${commonSpanStyles}\n  /** b2 hardcodes font-weight 400; inherit so the per-pill-type weight (semibold/regular) wins. */\n  font-weight: inherit;\n  outline: none;\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}\n  }\n`;\n\nexport const StyledPillButton = styled(DSButtonV3, {\n  name: DSPillV2Name,\n  slot: PILL_BUTTON_SLOTS.PILL_BUTTON,\n  preserveLegacyDataTestId: true,\n})<{\n  width: string | number;\n  height: string | number;\n}>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  ${({ width, height, theme }) => {\n    if (String(width).includes('px') && String(height).includes('px'))\n      return `\n      width: ${parseInt(width as string, 10) / 13}rem;\n      height: ${parseInt(height as string, 10) / 13}rem;\n\n    @media (max-width: ${theme.breakpoints?.small}) {\n      width: ${parseInt(width as string, 10) / 16}rem;\n      height: ${parseInt(height as string, 10) / 16}rem;\n    }`;\n\n    return `\n    width: ${width};\n    height: ${height};\n    `;\n  }}\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n  }\n\n  cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'default')};\n\n  :hover {\n    background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n      disabled || applyAriaDisabled ? 'transparent' : theme.colors.brand[200]};\n  }\n\n  & svg {\n    fill: ${({ disabled, applyAriaDisabled, theme }) => {\n      if (disabled) return '#5C6574';\n      if (applyAriaDisabled) return theme.colors.neutral[500];\n      return theme.colors.brand[700];\n    }};\n  }\n`;\n\nexport const StyledPillMenuButton = styled(DSMenuButton, { name: DSPillV2Name, slot: PILL_V2_SLOTS.PILL_MENU_BUTTON })<{\n  width: string;\n  height: string;\n}>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  ${({ width, height, theme }) => {\n    if (String(width).includes('px') && String(height).includes('px'))\n      return `\n      width: ${parseInt(width, 10) / 13}rem;\n    height: ${parseInt(height, 10) / 13}rem;\n\n    @media (max-width: ${theme.breakpoints?.small}) {\n      width: ${parseInt(width, 10) / 16}rem;\n      height: ${parseInt(height, 10) / 16}rem;\n    }`;\n\n    return `\n    width: ${width};\n    height: ${height};\n    `;\n  }}\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n  }\n\n  cursor: pointer;\n`;\n\nexport const StyledAgnosticPillRegion = styled.div`\n  display: flex;\n  padding: 2px;\n`;\n\nexport const StyledTextWrapper = styled(DSTypography, { name: DSPillV2Name, slot: PILL_V2_SLOTS.LABEL })<{\n  pillSize: 'm' | 's';\n}>`\n  ${commonSpanStyles}\n  /** b2 hardcodes font-weight 400; inherit so the per-pill-type weight (semibold/regular) wins. */\n  font-weight: inherit;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["import_constants"]
 }

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

@@ -36,63 +36,65 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_dropdownmenu_v2 = require("@elliemae/ds-dropdownmenu-v2");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = __toESM(require("react"));
 var import_uid = require("uid");
 var import_DSPillButton = require("../../parts/DSPillButton/DSPillButton.js");
 var import_TextComponent = require("../TextComponent.js");
 var import_styled = require("../styled.js");
 var import_constants = require("../../constants/index.js");
-const DropdownPill = import_react.default.memo(
-  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {
-    const chevronRef = (0, import_react.useRef)(null);
-    const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_styled.StyledDropdownPillWrapper,
-      {
-        pillSize: size,
-        id: pillUid,
-        className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
-        cols: ["auto", "minmax(24px, auto)"],
-        gutter: "2px",
-        alignItems: "center",
-        justifyItems: "center",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ds_dropdownmenu_v2.DSDropdownMenuV2,
-            {
-              placementOrderPreference: [
-                "bottom-start",
-                "bottom",
-                "bottom-end",
-                "right-end",
-                "top-start",
-                "top",
-                "top-end"
-              ],
-              ...dropdownProps,
-              onClickOutside: (e) => {
-                if ("code" in e && e.code === "Escape") chevronRef.current?.focus();
-                if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
-              },
-              wrapperStyles: { w: "100%", h: "100%" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_DSPillButton.DSPillButton,
-                {
-                  className: "ds-pill-focus-point",
-                  "data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_DROPDOWN_CHEVRON,
-                  innerRef: (0, import_ds_system.mergeRefs)(chevronRef, innerRef),
-                  "aria-label": ariaLabel || label,
-                  type: "right",
-                  onClick: onDropdownClick,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: ["brand-primary", "800"], width: 20, height: 20 })
-                }
-              ) })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+const DropdownPill = import_react.default.memo((props) => {
+  const { label, size, labelTruncated, disableTruncationTooltip, dropdownProps, innerRef, ariaLabel, onDropdownClick } = props;
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
+  const chevronRef = (0, import_react.useRef)(null);
+  const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledDropdownPillWrapper,
+    {
+      pillSize: size,
+      id: pillUid,
+      className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
+      cols: ["auto", "minmax(24px, auto)"],
+      gutter: "2px",
+      alignItems: "center",
+      justifyItems: "center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TextComponent.TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ds_dropdownmenu_v2.DSDropdownMenuV2,
+          {
+            placementOrderPreference: ["bottom-start", "bottom", "bottom-end", "right-end", "top-start", "top", "top-end"],
+            ...dropdownProps,
+            onClickOutside: (e) => {
+              if ("code" in e && e.code === "Escape") chevronRef.current?.focus();
+              if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
+            },
+            wrapperStyles: { w: "100%", h: "100%" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_DSPillButton.DSPillButton,
+              {
+                className: "ds-pill-focus-point",
+                "data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_DROPDOWN_CHEVRON,
+                innerRef: (0, import_ds_system.mergeRefs)(chevronRef, innerRef),
+                "aria-label": ariaLabel || label,
+                type: "right",
+                onClick: onDropdownClick,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: ["brand-primary", "800"], width: 20, height: 20 })
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+});
 //# sourceMappingURL=DropdownPill.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/DropdownPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useMemo, useRef } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledDropdownPillWrapper } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n    const chevronRef = useRef<HTMLButtonElement | null>(null);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    return (\n      <StyledDropdownPillWrapper\n        pillSize={size}\n        id={pillUid}\n        className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n        cols={['auto', 'minmax(24px, auto)']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent pillSize={size} labelTruncated={labelTruncated} label={label} />\n        <DSDropdownMenuV2\n          placementOrderPreference={[\n            'bottom-start',\n            'bottom',\n            'bottom-end',\n            'right-end',\n            'top-start',\n            'top',\n            'top-end',\n          ]}\n          {...dropdownProps}\n          onClickOutside={(e) => {\n            if ('code' in e && e.code === 'Escape') chevronRef.current?.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperStyles={{ w: '100%', h: '100%' }}\n        >\n          <StyledAgnosticPillRegion>\n            <DSPillButton\n              className=\"ds-pill-focus-point\"\n              data-testid={PILL_V2_DATA_TESTID.PILL_DROPDOWN_CHEVRON}\n              innerRef={mergeRefs(chevronRef, innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>)}\n              aria-label={ariaLabel || label}\n              type=\"right\"\n              onClick={onDropdownClick}\n            >\n              <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n            </DSPillButton>\n          </StyledAgnosticPillRegion>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBjB;AAnBN,gCAAiC;AACjC,sBAAiC;AACjC,uBAA0B;AAE1B,mBAAuC;AACvC,iBAAoB;AAEpB,0BAA6B;AAC7B,2BAA8B;AAC9B,oBAAoE;AACpE,uBAAoC;AAE7B,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAiC,IAAI;AAExD,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AAEpD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAM,CAAC,QAAQ,oBAAoB;AAAA,QACnC,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,sDAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAc;AAAA,UAC7E;AAAA,YAAC;AAAA;AAAA,cACC,0BAA0B;AAAA,gBACxB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG;AAAA,cACJ,gBAAgB,CAAC,MAAM;AACrB,oBAAI,UAAU,KAAK,EAAE,SAAS,SAAU,YAAW,SAAS,MAAM;AAClE,oBAAI,cAAc,eAAgB,eAAc,eAAe,CAAC;AAAA,cAClE;AAAA,cACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,cAEtC,sDAAC,0CACC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAa,qCAAoB;AAAA,kBACjC,cAAU,4BAAU,YAAY,QAAwD;AAAA,kBACxF,cAAY,aAAa;AAAA,kBACzB,MAAK;AAAA,kBACL,SAAS;AAAA,kBAET,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cAC5E,GACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useMemo, useRef } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledDropdownPillWrapper } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, disableTruncationTooltip, dropdownProps, innerRef, ariaLabel, onDropdownClick } =\n    props;\n  const ownerProps = useOwnerProps(props);\n  const chevronRef = useRef<HTMLButtonElement | null>(null);\n\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n  return (\n    <StyledDropdownPillWrapper\n      pillSize={size}\n      id={pillUid}\n      className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n      cols={['auto', 'minmax(24px, auto)']}\n      gutter=\"2px\"\n      alignItems=\"center\"\n      justifyItems=\"center\"\n    >\n      <TextComponent\n        pillSize={size}\n        getOwnerProps={ownerProps.getOwnerProps}\n        labelTruncated={labelTruncated}\n        disableTruncationTooltip={disableTruncationTooltip}\n        label={label}\n      />\n      <DSDropdownMenuV2\n        placementOrderPreference={['bottom-start', 'bottom', 'bottom-end', 'right-end', 'top-start', 'top', 'top-end']}\n        {...dropdownProps}\n        onClickOutside={(e) => {\n          if ('code' in e && e.code === 'Escape') chevronRef.current?.focus();\n          if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n        }}\n        wrapperStyles={{ w: '100%', h: '100%' }}\n      >\n        <StyledAgnosticPillRegion>\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid={PILL_V2_DATA_TESTID.PILL_DROPDOWN_CHEVRON}\n            innerRef={mergeRefs(chevronRef, innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>)}\n            aria-label={ariaLabel || label}\n            type=\"right\"\n            onClick={onDropdownClick}\n          >\n            <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n          </DSPillButton>\n        </StyledAgnosticPillRegion>\n      </DSDropdownMenuV2>\n    </StyledDropdownPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBnB;AAtBJ,gCAAiC;AACjC,sBAAiC;AACjC,uBAA0B;AAC1B,8BAA8B;AAE9B,mBAAuC;AACvC,iBAAoB;AAEpB,0BAA6B;AAC7B,2BAA8B;AAC9B,oBAAoE;AACpE,uBAAoC;AAE7B,MAAM,eAAe,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACvE,QAAM,EAAE,OAAO,MAAM,gBAAgB,0BAA0B,eAAe,UAAU,WAAW,gBAAgB,IACjH;AACF,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,iBAAa,qBAAiC,IAAI;AAExD,QAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,MAAM,CAAC,QAAQ,oBAAoB;AAAA,MACnC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,0BAA0B,CAAC,gBAAgB,UAAU,cAAc,aAAa,aAAa,OAAO,SAAS;AAAA,YAC5G,GAAG;AAAA,YACJ,gBAAgB,CAAC,MAAM;AACrB,kBAAI,UAAU,KAAK,EAAE,SAAS,SAAU,YAAW,SAAS,MAAM;AAClE,kBAAI,cAAc,eAAgB,eAAc,eAAe,CAAC;AAAA,YAClE;AAAA,YACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,YAEtC,sDAAC,0CACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAa,qCAAoB;AAAA,gBACjC,cAAU,4BAAU,YAAY,QAAwD;AAAA,gBACxF,cAAY,aAAa;AAAA,gBACzB,MAAK;AAAA,gBACL,SAAS;AAAA,gBAET,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,YAC5E,GACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }