@elliemae/ds-pills 3.5.0-rc.7 → 3.5.1-next.0

package/dist/cjs/components/Pill.js

@@ -29,7 +29,7 @@ __export(Pill_exports, {
 });
 module.exports = __toCommonJS(Pill_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_props = require("../props");
 var import_types = require("./types");
@@ -46,7 +46,7 @@ const DSPillV2 = (props) => {
   (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillV2PropTypes);
   const { type } = propsWithDefaults;
   const PillComponent = pillComponentGetter[type];
-  return /* @__PURE__ */ import_react.default.createElement(PillComponent, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillComponent, {
     ...propsWithDefaults
   });
 };

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/components/Pill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSPillProps } from '../index.d';\nimport { DSPillV2DefaultProps, DSPillV2PropTypes } from '../props';\nimport { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from './types';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillProps>> = {\n  dropdown: DropdownPill,\n  input: InputPill,\n  label: LabelPill,\n  readonly: ReadOnlyPill,\n  removable: RemovablePill,\n  value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillProps> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes);\n  const { type } = propsWithDefaults;\n  const PillComponent = pillComponentGetter[type];\n\n  return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.propTypes = DSPillV2PropTypes;\nDSPillV2.displayName = 'DSPillV2';\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypes;\n\nexport { DSPillV2, DSPillV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,0BAAuF;AAEvF,mBAAwD;AACxD,mBAA2F;AAE3F,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,wBAAoB,kDAA6B,OAAO,iCAAoB;AAClF,0DAA+B,mBAAmB,8BAAiB;AACnE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,6BAAAA,QAAA,cAAC;AAAA,IAAe,GAAG;AAAA,GAAmB;AAC/C;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,8BAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
-  "names": ["React"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,0BAAuF;AAEvF,mBAAwD;AACxD,mBAA2F;AAE3F,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,wBAAoB,kDAA6B,OAAO,iCAAoB;AAClF,0DAA+B,mBAAmB,8BAAiB;AACnE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,4CAAC;AAAA,IAAe,GAAG;AAAA,GAAmB;AAC/C;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,8BAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
+  "names": []
 }

package/dist/cjs/components/PillButton.js

@@ -29,7 +29,7 @@ __export(PillButton_exports, {
 });
 module.exports = __toCommonJS(PillButton_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_styled = require("./styled");
 var import_props = require("../props");
@@ -42,11 +42,12 @@ const DSPillButton = (props) => {
   const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_props.DSPillButtonDefaultProps);
   (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillButtonPropTypes);
   const { type, children, ...rest } = propsWithDefaults;
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillButton, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPillButton, {
     ...rest,
     buttonType: "raw",
-    className: `${typeToClassName[type]} ${rest.className}`
-  }, children);
+    className: `${typeToClassName[type]} ${rest.className}`,
+    children
+  });
 };
 DSPillButton.propTypes = import_props.DSPillButtonPropTypes;
 DSPillButton.displayName = "DSPillButton";

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/components/PillButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSButtonPropsT } from '@elliemae/ds-button';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { StyledPillButton } from './styled';\nimport { DSPillButtonDefaultProps, DSPillButtonPropTypes } from '../props';\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<DSButtonPropsT> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);\n\n  const { type, children, ...rest } = propsWithDefaults;\n\n  return (\n    <StyledPillButton {...rest} buttonType=\"raw\" className={`${typeToClassName[type]} ${rest.className}`}>\n      {children}\n    </StyledPillButton>\n  );\n};\n\nDSPillButton.propTypes = DSPillButtonPropTypes;\nDSPillButton.displayName = 'DSPillButton';\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAElB,0BAAuF;AACvF,oBAAiC;AACjC,mBAAgE;AAEhE,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,wBAAoB,kDAA6B,OAAO,qCAAwB;AACtF,0DAA+B,mBAAmB,kCAAqB;AAEvE,QAAM,EAAE,MAAM,aAAa,KAAK,IAAI;AAEpC,SACE,6BAAAA,QAAA,cAAC;AAAA,IAAkB,GAAG;AAAA,IAAM,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,KACtF,QACH;AAEJ;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,6BAAyB,8BAAS,YAAY,EAAE,YAAY,aAAa;AAC/E,uBAAuB,YAAY;",
-  "names": ["React"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,0BAAuF;AACvF,oBAAiC;AACjC,mBAAgE;AAEhE,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,wBAAoB,kDAA6B,OAAO,qCAAwB;AACtF,0DAA+B,mBAAmB,kCAAqB;AAEvE,QAAM,EAAE,MAAM,aAAa,KAAK,IAAI;AAEpC,SACE,4CAAC;AAAA,IAAkB,GAAG;AAAA,IAAM,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,IACtF;AAAA,GACH;AAEJ;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,6BAAyB,8BAAS,YAAY,EAAE,YAAY,aAAa;AAC/E,uBAAuB,YAAY;",
+  "names": []
 }

package/dist/cjs/components/PillGroup.js

@@ -30,6 +30,7 @@ __export(PillGroup_exports, {
 });
 module.exports = __toCommonJS(PillGroup_exports);
 var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_uid = require("uid");
 var import_ds_utilities = require("@elliemae/ds-utilities");
@@ -70,16 +71,18 @@ const DSPillGroupV2 = (props) => {
     },
     [pillGroupUid]
   );
-  return /* @__PURE__ */ import_react.default.createElement(DSPillGroupV2Context.Provider, {
-    value: { onKeyboardRemove, onKeyboardNavigation }
-  }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillGroup, {
-    ...globalAttrs,
-    width,
-    id: pillGroupUid,
-    cols: import_react.default.Children.map(children, () => "auto"),
-    gutter: "2px",
-    ref: innerRef
-  }, children));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DSPillGroupV2Context.Provider, {
+    value: { onKeyboardRemove, onKeyboardNavigation },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPillGroup, {
+      ...globalAttrs,
+      width,
+      id: pillGroupUid,
+      cols: import_react.default.Children.map(children, () => "auto"),
+      gutter: "2px",
+      ref: innerRef,
+      children
+    })
+  });
 };
 DSPillGroupV2.propTypes = import_props.DSPillGroupPropTypes;
 DSPillGroupV2.displayName = "DSPillGroupV2";

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/components/PillGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { createContext, useCallback, useMemo, WeakValidationMap } from 'react';\nimport { uid } from 'uid';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useGetGlobalAttributes,\n} from '@elliemae/ds-utilities';\nimport { DSPillGroupProps } from '../index.d';\nimport { DSPillGroupDefaultProps, DSPillGroupPropTypes } from '../props';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{\n  onKeyboardRemove: (pillUid: string) => void;\n  onKeyboardNavigation: (pillUid: string, step: number, e: KeyboardEvent) => void;\n}>({\n  onKeyboardRemove: () => null,\n  onKeyboardNavigation: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupProps> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults);\n  const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n  const { children, width, innerRef } = propsWithDefaults;\n  const onKeyboardRemove = useCallback(\n    (pillUid: string) => {\n      const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n      const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n      if (pillIndex > 0) {\n        elems[pillIndex - 1].focus();\n      } else if (pillIndex + 1 < elems.length) {\n        elems[pillIndex + 1].focus();\n      }\n    },\n    [pillGroupUid],\n  );\n  const onKeyboardNavigation = useCallback(\n    (pillUid: string, step: number, e: KeyboardEvent) => {\n      const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n      const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n      if (pillIndex >= 0) {\n        if (elems[pillIndex + step]) {\n          e.stopPropagation();\n          elems[pillIndex + step].focus();\n        }\n      }\n    },\n    [pillGroupUid],\n  );\n\n  return (\n    <DSPillGroupV2Context.Provider value={{ onKeyboardRemove, onKeyboardNavigation }}>\n      <StyledPillGroup\n        {...globalAttrs}\n        width={width}\n        id={pillGroupUid}\n        cols={React.Children.map(children, () => 'auto')}\n        gutter=\"2px\"\n        ref={innerRef}\n      >\n        {children}\n      </StyledPillGroup>\n    </DSPillGroupV2Context.Provider>\n  );\n};\n\nDSPillGroupV2.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\nDSPillGroupV2.displayName = 'DSPillGroupV2';\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8E;AAC9E,iBAAoB;AACpB,0BAKO;AAEP,mBAA8D;AAC9D,oBAAgC;AAEzB,MAAM,2BAAuB,4BAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAC9B,CAAC;AAED,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,wBAAoB,kDAA6B,OAAO,oCAAuB;AACrF,0DAA+B,mBAAmB,iCAAoB;AAEtE,QAAM,kBAAc,4CAAuB,iBAAiB;AAC5D,QAAM,mBAAe,sBAAQ,MAAM,qBAAiB,gBAAI,KAAK,CAAC,CAAC;AAC/D,QAAM,EAAE,UAAU,OAAO,SAAS,IAAI;AACtC,QAAM,uBAAmB;AAAA,IACvB,CAAC,YAAoB;AACnB,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,YAAY,GAAG;AACjB,cAAM,YAAY,GAAG,MAAM;AAAA,MAC7B,WAAW,YAAY,IAAI,MAAM,QAAQ;AACvC,cAAM,YAAY,GAAG,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AACA,QAAM,2BAAuB;AAAA,IAC3B,CAAC,SAAiB,MAAc,MAAqB;AACnD,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,aAAa,GAAG;AAClB,YAAI,MAAM,YAAY,OAAO;AAC3B,YAAE,gBAAgB;AAClB,gBAAM,YAAY,MAAM,MAAM;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,SACE,6BAAAA,QAAA,cAAC,qBAAqB,UAArB;AAAA,IAA8B,OAAO,EAAE,kBAAkB,qBAAqB;AAAA,KAC7E,6BAAAA,QAAA,cAAC;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ,MAAM,aAAAA,QAAM,SAAS,IAAI,UAAU,MAAM,MAAM;AAAA,IAC/C,QAAO;AAAA,IACP,KAAK;AAAA,KAEJ,QACH,CACF;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA8E;AAC9E,iBAAoB;AACpB,0BAKO;AAEP,mBAA8D;AAC9D,oBAAgC;AAEzB,MAAM,2BAAuB,4BAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAC9B,CAAC;AAED,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,wBAAoB,kDAA6B,OAAO,oCAAuB;AACrF,0DAA+B,mBAAmB,iCAAoB;AAEtE,QAAM,kBAAc,4CAAuB,iBAAiB;AAC5D,QAAM,mBAAe,sBAAQ,MAAM,qBAAiB,gBAAI,KAAK,CAAC,CAAC;AAC/D,QAAM,EAAE,UAAU,OAAO,SAAS,IAAI;AACtC,QAAM,uBAAmB;AAAA,IACvB,CAAC,YAAoB;AACnB,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,YAAY,GAAG;AACjB,cAAM,YAAY,GAAG,MAAM;AAAA,MAC7B,WAAW,YAAY,IAAI,MAAM,QAAQ;AACvC,cAAM,YAAY,GAAG,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AACA,QAAM,2BAAuB;AAAA,IAC3B,CAAC,SAAiB,MAAc,MAAqB;AACnD,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,aAAa,GAAG;AAClB,YAAI,MAAM,YAAY,OAAO;AAC3B,YAAE,gBAAgB;AAClB,gBAAM,YAAY,MAAM,MAAM;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,SACE,4CAAC,qBAAqB,UAArB;AAAA,IAA8B,OAAO,EAAE,kBAAkB,qBAAqB;AAAA,IAC7E,sDAAC;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,MACJ,MAAM,aAAAA,QAAM,SAAS,IAAI,UAAU,MAAM,MAAM;AAAA,MAC/C,QAAO;AAAA,MACP,KAAK;AAAA,MAEJ;AAAA,KACH;AAAA,GACF;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": ["React"]
 }

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

@@ -28,6 +28,7 @@ __export(DropdownPill_exports, {
 });
 module.exports = __toCommonJS(DropdownPill_exports);
 var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_common = require("@elliemae/ds-common");
 var import_uid = require("uid");
@@ -40,10 +41,10 @@ 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)()}`, []);
-    const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
+    const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
       value: children
     }) : import_react.default.Fragment;
-    return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledDropdownPillWrapper, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledDropdownPillWrapper, {
       size,
       id: pillUid,
       className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
@@ -51,37 +52,45 @@ const DropdownPill = import_react.default.memo(
       cols: ["auto", "24px"],
       gutter: "2px",
       alignItems: "center",
-      justifyItems: "center"
-    }, /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label), /* @__PURE__ */ import_react.default.createElement(import_ds_common.DSDropdownMenuV2, {
-      placementOrderPreference: [
-        "bottom-start",
-        "bottom",
-        "bottom-end",
-        "right-end",
-        "top-start",
-        "top",
-        "top-end"
-      ],
-      ...dropdownProps,
-      onClickOutside: (e) => {
-        if (e.code === "Escape")
-          chevronRef.current.focus();
-        if (dropdownProps.onClickOutside)
-          dropdownProps.onClickOutside(e);
-      },
-      wrapperStyles: { w: "100%", h: "100%" }
-    }, /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
-      className: "ds-pill-focus-point",
-      "data-testid": "ds-pill-dropdown-chevron",
-      innerRef: (0, import_utils.setMultipleRefs)(chevronRef, innerRef),
-      "aria-label": ariaLabel || label,
-      type: "right",
-      onClick: onDropdownClick
-    }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, {
-      color: ["brand-primary", "800"],
-      width: 20,
-      height: 20
-    }))));
+      justifyItems: "center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, {
+          children: label
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_common.DSDropdownMenuV2, {
+          placementOrderPreference: [
+            "bottom-start",
+            "bottom",
+            "bottom-end",
+            "right-end",
+            "top-start",
+            "top",
+            "top-end"
+          ],
+          ...dropdownProps,
+          onClickOutside: (e) => {
+            if (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_PillButton.DSPillButton, {
+            className: "ds-pill-focus-point",
+            "data-testid": "ds-pill-dropdown-chevron",
+            innerRef: (0, import_utils.setMultipleRefs)(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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/types/DropdownPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-common';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n    const chevronRef = useRef(null);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledDropdownPillWrapper\n        size={size}\n        id={pillUid}\n        className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={['auto', '24px']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent>{label}</TextComponent>\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 (e.code === 'Escape') chevronRef.current.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperStyles={{ w: '100%', h: '100%' }}\n        >\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-pill-dropdown-chevron\"\n            innerRef={setMultipleRefs(chevronRef, innerRef)}\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        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAuC;AACvC,uBAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAE1C,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAO,IAAI;AAE9B,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,6BAAAA,QAAA,cAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6BAAAA,QAAA,cAAC;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,OAEb,6BAAAA,QAAA,cAAC,qBAAe,KAAM,GACtB,6BAAAA,QAAA,cAAC;AAAA,MACC,0BAA0B;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MACJ,gBAAgB,CAAC,MAAM;AACrB,YAAI,EAAE,SAAS;AAAU,qBAAW,QAAQ,MAAM;AAClD,YAAI,cAAc;AAAgB,wBAAc,eAAe,CAAC;AAAA,MAClE;AAAA,MACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,OAEtC,6BAAAA,QAAA,cAAC;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAU,8BAAgB,YAAY,QAAQ;AAAA,MAC9C,cAAY,aAAa;AAAA,MACzB,MAAK;AAAA,MACL,SAAS;AAAA,OAET,6BAAAA,QAAA,cAAC;AAAA,MAAiB,OAAO,CAAC,iBAAiB,KAAK;AAAA,MAAG,OAAO;AAAA,MAAI,QAAQ;AAAA,KAAI,CAC5E,CACF,CACF;AAAA,EAEJ;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAuC;AACvC,uBAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAE1C,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAO,IAAI;AAE9B,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6CAAC;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MAEb;AAAA,oDAAC;AAAA,UAAe;AAAA,SAAM;AAAA,QACtB,4CAAC;AAAA,UACC,0BAA0B;AAAA,YACxB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UACJ,gBAAgB,CAAC,MAAM;AACrB,gBAAI,EAAE,SAAS;AAAU,yBAAW,QAAQ,MAAM;AAClD,gBAAI,cAAc;AAAgB,4BAAc,eAAe,CAAC;AAAA,UAClE;AAAA,UACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,UAEtC,sDAAC;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,cAAU,8BAAgB,YAAY,QAAQ;AAAA,YAC9C,cAAY,aAAa;AAAA,YACzB,MAAK;AAAA,YACL,SAAS;AAAA,YAET,sDAAC;AAAA,cAAiB,OAAO,CAAC,iBAAiB,KAAK;AAAA,cAAG,OAAO;AAAA,cAAI,QAAQ;AAAA,aAAI;AAAA,WAC5E;AAAA,SACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -28,6 +28,7 @@ __export(InputPill_exports, {
 });
 module.exports = __toCommonJS(InputPill_exports);
 var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_uid = require("uid");
 var import_ds_icons = require("@elliemae/ds-icons");
@@ -61,7 +62,7 @@ const InputPill = import_react.default.memo(
       [onInputClear]
     );
     const [inputHasFocus, setInputHasFocus] = (0, import_react.useState)(false);
-    return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledInputPillWrapper, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledInputPillWrapper, {
       size,
       className: "ds-pill-wrapper",
       "data-testid": "ds-pill-wrapper",
@@ -69,30 +70,35 @@ const InputPill = import_react.default.memo(
       inputWidth,
       value: label,
       inputHasFocus,
-      hasError
-    }, /* @__PURE__ */ import_react.default.createElement(InputComponent, {
-      id: pillUid,
-      className: "ds-pill-focus-point",
-      "data-testid": "ds-pill-input",
-      innerRef: (0, import_utils.setMultipleRefs)(ref, innerRef),
-      value: label,
-      onChange: onInputChange,
-      placeholder: inputPlaceholder,
-      onFocus: () => setInputHasFocus(true),
-      onBlur: () => setInputHasFocus(false),
-      disableTooltip: false
-    }), label !== "" && /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
-      id: pillUid,
-      "data-testid": "ds-pill-clear-icon",
-      innerRef,
-      onClick: onCloseIconClick,
-      onKeyDown: onCloseIconClick,
-      "aria-label": "Clear input",
-      type: "right"
-    }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseXsmall, {
-      size: "s",
-      color: ["brand-primary", "700"]
-    })));
+      hasError,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputComponent, {
+          id: pillUid,
+          className: "ds-pill-focus-point",
+          "data-testid": "ds-pill-input",
+          innerRef: (0, import_utils.setMultipleRefs)(ref, innerRef),
+          value: label,
+          onChange: onInputChange,
+          placeholder: inputPlaceholder,
+          onFocus: () => setInputHasFocus(true),
+          onBlur: () => setInputHasFocus(false),
+          disableTooltip: false
+        }),
+        label !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PillButton.DSPillButton, {
+          id: pillUid,
+          "data-testid": "ds-pill-clear-icon",
+          innerRef,
+          onClick: onCloseIconClick,
+          onKeyDown: onCloseIconClick,
+          "aria-label": "Clear input",
+          type: "right",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, {
+            size: "s",
+            color: ["brand-primary", "700"]
+          })
+        })
+      ]
+    });
   }
 );
 //# sourceMappingURL=InputPill.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/types/InputPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledInputPillWrapper } from '../styled';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const InputPill = React.memo<DSPillProps>(\n  ({\n    label,\n    size,\n    inputPlaceholder,\n    inputWidth,\n    inputRender,\n    onInputChange,\n    onInputClear,\n    innerRef,\n    hasError,\n    inputId,\n  }) => {\n    const ref = useRef<HTMLElement>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);\n\n    const onCloseIconClick: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n      (e) => {\n        if ([undefined, 'Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          onInputClear(e);\n          ref.current.focus();\n        }\n      },\n      [onInputClear],\n    );\n\n    const [inputHasFocus, setInputHasFocus] = useState(false);\n\n    return (\n      <StyledInputPillWrapper\n        size={size}\n        className=\"ds-pill-wrapper\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={label === '' ? ['auto'] : ['auto', '24px']}\n        inputWidth={inputWidth}\n        value={label}\n        inputHasFocus={inputHasFocus}\n        hasError={hasError}\n      >\n        <InputComponent\n          id={pillUid}\n          className=\"ds-pill-focus-point\"\n          data-testid=\"ds-pill-input\"\n          innerRef={setMultipleRefs(ref, innerRef)}\n          value={label}\n          onChange={onInputChange}\n          placeholder={inputPlaceholder}\n          onFocus={() => setInputHasFocus(true)}\n          onBlur={() => setInputHasFocus(false)}\n          disableTooltip={false}\n        />\n        {label !== '' && (\n          <DSPillButton\n            id={pillUid}\n            data-testid=\"ds-pill-clear-icon\"\n            innerRef={innerRef}\n            onClick={onCloseIconClick}\n            onKeyDown={onCloseIconClick}\n            aria-label=\"Clear input\"\n            type=\"right\"\n          >\n            <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n          </DSPillButton>\n        )}\n      </StyledInputPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8D;AAC9D,iBAAoB;AACpB,sBAA4B;AAE5B,oBAAuC;AACvC,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAoB,IAAI;AAEpC,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,KAAK,CAAC,CAAC;AAE/D,UAAM,uBAAyE;AAAA,MAC7E,CAAC,MAAM;AACL,YAAI,CAAC,QAAW,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAClD,YAAE,eAAe;AACjB,uBAAa,CAAC;AACd,cAAI,QAAQ,MAAM;AAAA,QACpB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,WACE,6BAAAA,QAAA,cAAC;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,MAC/C;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,OAEA,6BAAAA,QAAA,cAAC;AAAA,MACC,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAU,8BAAgB,KAAK,QAAQ;AAAA,MACvC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,aAAa;AAAA,MACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,MACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,MACpC,gBAAgB;AAAA,KAClB,GACC,UAAU,MACT,6BAAAA,QAAA,cAAC;AAAA,MACC,IAAI;AAAA,MACJ,eAAY;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX,cAAW;AAAA,MACX,MAAK;AAAA,OAEL,6BAAAA,QAAA,cAAC;AAAA,MAAY,MAAK;AAAA,MAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,KAAG,CACzD,CAEJ;AAAA,EAEJ;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA8D;AAC9D,iBAAoB;AACpB,sBAA4B;AAE5B,oBAAuC;AACvC,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAoB,IAAI;AAEpC,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,KAAK,CAAC,CAAC;AAE/D,UAAM,uBAAyE;AAAA,MAC7E,CAAC,MAAM;AACL,YAAI,CAAC,QAAW,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAClD,YAAE,eAAe;AACjB,uBAAa,CAAC;AACd,cAAI,QAAQ,MAAM;AAAA,QACpB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,WACE,6CAAC;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,MAC/C;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC;AAAA,UACC,IAAI;AAAA,UACJ,WAAU;AAAA,UACV,eAAY;AAAA,UACZ,cAAU,8BAAgB,KAAK,QAAQ;AAAA,UACvC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,aAAa;AAAA,UACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,UACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,UACpC,gBAAgB;AAAA,SAClB;AAAA,QACC,UAAU,MACT,4CAAC;AAAA,UACC,IAAI;AAAA,UACJ,eAAY;AAAA,UACZ;AAAA,UACA,SAAS;AAAA,UACT,WAAW;AAAA,UACX,cAAW;AAAA,UACX,MAAK;AAAA,UAEL,sDAAC;AAAA,YAAY,MAAK;AAAA,YAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,WAAG;AAAA,SACzD;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -28,14 +28,15 @@ __export(LabelPill_exports, {
 });
 module.exports = __toCommonJS(LabelPill_exports);
 var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
 var import_styled = require("../styled");
 const LabelPill = import_react.default.memo(({ label, size, labelTruncated, iconLeft, ariaLabel }) => {
-  const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
+  const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
     value: children
   }) : import_react.default.Fragment;
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledLabelPillWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledLabelPillWrapper, {
     size,
     alignItems: "center",
     className: "ds-pill-wrapper ds-pill-wrapper-label",
@@ -43,7 +44,13 @@ const LabelPill = import_react.default.memo(({ label, size, labelTruncated, icon
     "aria-label": ariaLabel || label,
     cols: [iconLeft && "min-content", "auto"].filter((notFalse) => notFalse),
     gutter: "xxxs",
-    hasIcon: iconLeft !== null
-  }, iconLeft, /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label));
+    hasIcon: iconLeft !== null,
+    children: [
+      iconLeft,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, {
+        children: label
+      })
+    ]
+  });
 });
 //# sourceMappingURL=LabelPill.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/types/LabelPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledLabelPillWrapper } from '../styled';\n\nexport const LabelPill = React.memo<DSPillProps>(({ label, size, labelTruncated, iconLeft, ariaLabel }) => {\n  const TextComponent = labelTruncated\n    ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n    : React.Fragment;\n  return (\n    <StyledLabelPillWrapper\n      size={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      aria-label={ariaLabel || label}\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n    >\n      {iconLeft}\n      <TextComponent>{label}</TextComponent>\n    </StyledLabelPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,uCAA2C;AAE3C,oBAAuC;AAEhC,MAAM,YAAY,aAAAA,QAAM,KAAkB,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,MAAM;AACzG,QAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,6BAAAA,QAAA,cAAC;AAAA,IAA2B,OAAO;AAAA,GAAU,IAC/D,aAAAA,QAAM;AACV,SACE,6BAAAA,QAAA,cAAC;AAAA,IACC;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,IACvE,QAAO;AAAA,IACP,SAAS,aAAa;AAAA,KAErB,UACD,6BAAAA,QAAA,cAAC,qBAAe,KAAM,CACxB;AAEJ,CAAC;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkB;AAClB,uCAA2C;AAE3C,oBAAuC;AAEhC,MAAM,YAAY,aAAAA,QAAM,KAAkB,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,MAAM;AACzG,QAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,IAA2B,OAAO;AAAA,GAAU,IAC/D,aAAAA,QAAM;AACV,SACE,6CAAC;AAAA,IACC;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,IACvE,QAAO;AAAA,IACP,SAAS,aAAa;AAAA,IAErB;AAAA;AAAA,MACD,4CAAC;AAAA,QAAe;AAAA,OAAM;AAAA;AAAA,GACxB;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -28,6 +28,7 @@ __export(ReadOnlyPill_exports, {
 });
 module.exports = __toCommonJS(ReadOnlyPill_exports);
 var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
 var import_styled = require("../styled");
@@ -35,10 +36,10 @@ const ReadOnlyPill = import_react.default.memo(
   ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {
     const hasIconLeft = iconLeft !== null || iconRight !== null && label === "";
     const hasIconRight = iconRight !== null || iconLeft !== null && label === "";
-    const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
+    const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
       value: children
     }) : import_react.default.Fragment;
-    return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledReadonlyPillWrapper, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledReadonlyPillWrapper, {
       size,
       alignItems: "center",
       className: "ds-pill-wrapper ds-pill-wrapper-readonly",
@@ -47,8 +48,15 @@ const ReadOnlyPill = import_react.default.memo(
       cols: [iconLeft && "min-content", label && "auto", iconRight && "min-content"].filter((notFalse) => notFalse),
       gutter: "xxxs",
       hasIconRight,
-      hasIconLeft
-    }, iconLeft, label ? /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label) : null, iconRight);
+      hasIconLeft,
+      children: [
+        iconLeft,
+        label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, {
+          children: label
+        }) : null,
+        iconRight
+      ]
+    });
   }
 );
 //# sourceMappingURL=ReadOnlyPill.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/types/ReadOnlyPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledReadonlyPillWrapper } from '../styled';\n\nexport const ReadOnlyPill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {\n    const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n    const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledReadonlyPillWrapper\n        size={size}\n        alignItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n        data-testid=\"ds-pill-wrapper\"\n        aria-label={ariaLabel || label}\n        cols={[iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter((notFalse) => notFalse)}\n        gutter=\"xxxs\"\n        hasIconRight={hasIconRight}\n        hasIconLeft={hasIconLeft}\n      >\n        {iconLeft}\n        {label ? <TextComponent>{label}</TextComponent> : null}\n        {iconRight}\n      </StyledReadonlyPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,uCAA2C;AAE3C,oBAA0C;AAEnC,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,UAAU,MAAM;AACnE,UAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,UAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,6BAAAA,QAAA,cAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6BAAAA,QAAA,cAAC;AAAA,MACC;AAAA,MACA,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,CAAC,YAAY,eAAe,SAAS,QAAQ,aAAa,aAAa,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MAC5G,QAAO;AAAA,MACP;AAAA,MACA;AAAA,OAEC,UACA,QAAQ,6BAAAA,QAAA,cAAC,qBAAe,KAAM,IAAmB,MACjD,SACH;AAAA,EAEJ;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAkB;AAClB,uCAA2C;AAE3C,oBAA0C;AAEnC,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,UAAU,MAAM;AACnE,UAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,UAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6CAAC;AAAA,MACC;AAAA,MACA,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,CAAC,YAAY,eAAe,SAAS,QAAQ,aAAa,aAAa,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MAC5G,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,QAAQ,4CAAC;AAAA,UAAe;AAAA,SAAM,IAAmB;AAAA,QACjD;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -28,6 +28,7 @@ __export(RemovablePill_exports, {
 });
 module.exports = __toCommonJS(RemovablePill_exports);
 var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_uid = require("uid");
 var import_ds_icons = require("@elliemae/ds-icons");
@@ -39,7 +40,7 @@ const RemovablePill = import_react.default.memo(
   ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {
     const { onKeyboardRemove, onKeyboardNavigation } = (0, import_react.useContext)(import_PillGroup.DSPillGroupV2Context);
     const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
-    const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
+    const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
       value: children
     }) : import_react.default.Fragment;
     const onKeyDown = (0, import_react.useCallback)(
@@ -63,7 +64,7 @@ const RemovablePill = import_react.default.memo(
       },
       [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid]
     );
-    return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledRemovablePillWrapper, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledRemovablePillWrapper, {
       size,
       cols: ["auto", "24px"],
       gutter: "2px",
@@ -71,22 +72,31 @@ const RemovablePill = import_react.default.memo(
       justifyItems: "center",
       className: "ds-pill-wrapper ds-pill-wrapper-removable",
       "data-testid": "ds-pill-wrapper",
-      "aria-label": ariaLabel || label
-    }, /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label), /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, !disabled ? /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
-      className: "ds-pill-focus-point",
-      id: pillUid,
-      "data-testid": "ds-pill-close-icon",
-      innerRef,
-      onClick: onRemove,
-      onKeyDown,
-      "aria-label": `Remove ${label}`,
-      type: "right",
-      tabIndex
-    }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseXsmall, {
-      width: size === "s" ? 18 : 22.65,
-      height: size === "s" ? 18 : 22.65,
-      color: ["brand-primary", "700"]
-    })) : null));
+      "aria-label": ariaLabel || label,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, {
+          children: label
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+          children: !disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PillButton.DSPillButton, {
+            className: "ds-pill-focus-point",
+            id: pillUid,
+            "data-testid": "ds-pill-close-icon",
+            innerRef,
+            onClick: onRemove,
+            onKeyDown,
+            "aria-label": `Remove ${label}`,
+            type: "right",
+            tabIndex,
+            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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/types/RemovablePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(\n  ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {\n    const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          if (onKeyboardRemove) onKeyboardRemove(pillUid);\n          onRemove(e);\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, onRemove, onKeyboardNavigation, pillUid],\n    );\n\n    return (\n      <StyledRemovablePillWrapper\n        size={size}\n        cols={['auto', '24px']}\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        aria-label={ariaLabel || label}\n      >\n        <TextComponent>{label}</TextComponent>\n        <>\n          {!disabled ? (\n            <DSPillButton\n              className=\"ds-pill-focus-point\"\n              id={pillUid}\n              data-testid=\"ds-pill-close-icon\"\n              innerRef={innerRef}\n              onClick={onRemove}\n              onKeyDown={onKeyDown}\n              aria-label={`Remove ${label}`}\n              type=\"right\"\n              tabIndex={tabIndex}\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        </>\n      </StyledRemovablePillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwD;AACxD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAE3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAEtB,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,SAAS,MAAM;AACtF,UAAM,EAAE,kBAAkB,qBAAqB,QAAI,yBAAW,qCAAoB;AAClF,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,6BAAAA,QAAA,cAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,UAAM,gBAAY;AAAA,MAChB,CAAC,MAAqB;AACpB,YAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,YAAE,eAAe;AACjB,cAAI;AAAkB,6BAAiB,OAAO;AAC9C,mBAAS,CAAC;AAAA,QACZ;AACA,YAAI,EAAE,SAAS,aAAa;AAC1B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,IAAI,CAAC;AAAA,QAC/D;AACA,YAAI,EAAE,SAAS,cAAc;AAC3B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,GAAG,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,MACA,CAAC,kBAAkB,UAAU,sBAAsB,OAAO;AAAA,IAC5D;AAEA,WACE,6BAAAA,QAAA,cAAC;AAAA,MACC;AAAA,MACA,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACb,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,OAEzB,6BAAAA,QAAA,cAAC,qBAAe,KAAM,GACtB,6BAAAA,QAAA,2BAAAA,QAAA,gBACG,CAAC,WACA,6BAAAA,QAAA,cAAC;AAAA,MACC,WAAU;AAAA,MACV,IAAI;AAAA,MACJ,eAAY;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,cAAY,UAAU;AAAA,MACtB,MAAK;AAAA,MACL;AAAA,OAEA,6BAAAA,QAAA,cAAC;AAAA,MACC,OAAO,SAAS,MAAM,KAAK;AAAA,MAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,MAC5B,OAAO,CAAC,iBAAiB,KAAK;AAAA,KAChC,CACF,IACE,IACN,CACF;AAAA,EAEJ;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAwD;AACxD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAE3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAEtB,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,SAAS,MAAM;AACtF,UAAM,EAAE,kBAAkB,qBAAqB,QAAI,yBAAW,qCAAoB;AAClF,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,UAAM,gBAAY;AAAA,MAChB,CAAC,MAAqB;AACpB,YAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,YAAE,eAAe;AACjB,cAAI;AAAkB,6BAAiB,OAAO;AAC9C,mBAAS,CAAC;AAAA,QACZ;AACA,YAAI,EAAE,SAAS,aAAa;AAC1B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,IAAI,CAAC;AAAA,QAC/D;AACA,YAAI,EAAE,SAAS,cAAc;AAC3B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,GAAG,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,MACA,CAAC,kBAAkB,UAAU,sBAAsB,OAAO;AAAA,IAC5D;AAEA,WACE,6CAAC;AAAA,MACC;AAAA,MACA,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACb,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MAEzB;AAAA,oDAAC;AAAA,UAAe;AAAA,SAAM;AAAA,QACtB;AAAA,UACG,WAAC,WACA,4CAAC;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,eAAY;AAAA,YACZ;AAAA,YACA,SAAS;AAAA,YACT;AAAA,YACA,cAAY,UAAU;AAAA,YACtB,MAAK;AAAA,YACL;AAAA,YAEA,sDAAC;AAAA,cACC,OAAO,SAAS,MAAM,KAAK;AAAA,cAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,cAC5B,OAAO,CAAC,iBAAiB,KAAK;AAAA,aAChC;AAAA,WACF,IACE;AAAA,SACN;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -28,16 +28,17 @@ __export(ValuePill_exports, {
 });
 module.exports = __toCommonJS(ValuePill_exports);
 var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_tooltip = require("@elliemae/ds-tooltip");
 var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
 var import_styled = require("../styled");
 const ValuePill = import_react.default.memo(
   ({ label, size, labelTruncated, disabled, tooltipValue, iconLeft, ariaLabel }) => {
-    const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
+    const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
       value: children
     }) : import_react.default.Fragment;
-    return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledValuePillWrapper, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledValuePillWrapper, {
       disabled,
       size,
       alignItems: "center",
@@ -46,13 +47,21 @@ const ValuePill = import_react.default.memo(
       "aria-label": ariaLabel || label,
       cols: [iconLeft && "min-content", "auto"].filter((notFalse) => notFalse),
       gutter: "xxxs",
-      hasIcon: iconLeft !== null
-    }, iconLeft, tooltipValue !== "" ? /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.DSTooltipV3, {
-      text: tooltipValue
-    }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledSpanWithTooltip, {
-      className: "ds-pill-tooltip-value",
-      tabIndex: 0
-    }, label)) : /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label));
+      hasIcon: iconLeft !== null,
+      children: [
+        iconLeft,
+        tooltipValue !== "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, {
+          text: tooltipValue,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSpanWithTooltip, {
+            className: "ds-pill-tooltip-value",
+            tabIndex: 0,
+            children: label
+          })
+        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, {
+          children: label
+        })
+      ]
+    });
   }
 );
 //# sourceMappingURL=ValuePill.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/types/ValuePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled';\n\nexport const ValuePill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, disabled, tooltipValue, iconLeft, ariaLabel }) => {\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledValuePillWrapper\n        disabled={disabled}\n        size={size}\n        alignItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n        data-testid=\"ds-pill-wrapper\"\n        aria-label={ariaLabel || label}\n        cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n        gutter=\"xxxs\"\n        hasIcon={iconLeft !== null}\n      >\n        {iconLeft}\n        {tooltipValue !== '' ? (\n          <DSTooltipV3 text={tooltipValue}>\n            <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" tabIndex={0}>\n              {label}\n            </StyledSpanWithTooltip>\n          </DSTooltipV3>\n        ) : (\n          <TextComponent>{label}</TextComponent>\n        )}\n      </StyledValuePillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAA4B;AAC5B,uCAA2C;AAE3C,oBAA8D;AAEvD,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,cAAc,UAAU,UAAU,MAAM;AAChF,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,6BAAAA,QAAA,cAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6BAAAA,QAAA,cAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,OAErB,UACA,iBAAiB,KAChB,6BAAAA,QAAA,cAAC;AAAA,MAAY,MAAM;AAAA,OACjB,6BAAAA,QAAA,cAAC;AAAA,MAAsB,WAAU;AAAA,MAAwB,UAAU;AAAA,OAChE,KACH,CACF,IAEA,6BAAAA,QAAA,cAAC,qBAAe,KAAM,CAE1B;AAAA,EAEJ;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkB;AAClB,wBAA4B;AAC5B,uCAA2C;AAE3C,oBAA8D;AAEvD,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,cAAc,UAAU,UAAU,MAAM;AAChF,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MAErB;AAAA;AAAA,QACA,iBAAiB,KAChB,4CAAC;AAAA,UAAY,MAAM;AAAA,UACjB,sDAAC;AAAA,YAAsB,WAAU;AAAA,YAAwB,UAAU;AAAA,YAChE;AAAA,WACH;AAAA,SACF,IAEA,4CAAC;AAAA,UAAe;AAAA,SAAM;AAAA;AAAA,KAE1B;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }