@elliemae/ds-pills-v2 3.70.0-next.30 → 3.70.0-next.32

package/dist/cjs/components/TextComponent.js

@@ -36,5 +36,5 @@ var import_jsx_runtime = require("react/jsx-runtime");
 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, 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 }) : 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 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  label: DSPillT.InternalProps['label'];\n  pillSize: DSPillT.InternalProps['size'];\n}>(({ labelTruncated, label, pillSize }) => (\n  <StyledTextWrapper pillSize={pillSize}>\n    {labelTruncated ? <TruncatedTooltipText value={label} /> : label}\n  </StyledTextWrapper>\n));\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWD;AAXtB,mBAAkB;AAClB,kCAAqC;AAErC,oBAAkC;AAE3B,MAAM,gBAAgB,aAAAA,QAAM,KAIhC,CAAC,EAAE,gBAAgB,OAAO,SAAS,MACpC,4CAAC,mCAAkB,UAChB,2BAAiB,4CAAC,oDAAqB,OAAO,OAAO,IAAK,OAC7D,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  label: DSPillT.InternalProps['label'];\n  pillSize: DSPillT.InternalProps['size'];\n  getOwnerProps?: () => object;\n}>(({ labelTruncated, label, pillSize, getOwnerProps }) => (\n  <StyledTextWrapper pillSize={pillSize} variant=\"b2\" component=\"span\" getOwnerProps={getOwnerProps}>\n    {labelTruncated ? <TruncatedTooltipText value={label} /> : label}\n  </StyledTextWrapper>\n));\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYD;AAZtB,mBAAkB;AAClB,kCAAqC;AAErC,oBAAkC;AAE3B,MAAM,gBAAgB,aAAAA,QAAM,KAKhC,CAAC,EAAE,gBAAgB,OAAO,UAAU,cAAc,MACnD,4CAAC,mCAAkB,UAAoB,SAAQ,MAAK,WAAU,QAAO,eAClE,2BAAiB,4CAAC,oDAAqB,OAAO,OAAO,IAAK,OAC7D,CACD;",
   "names": ["React"]
 }

package/dist/cjs/components/styled.js

@@ -49,6 +49,7 @@ var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 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 +75,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 +99,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 +138,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;
@@ -264,8 +267,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 +358,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2B;AAC3B,qBAAqB;AACrB,4BAA6B;AAC7B,uBAA4B;AAC5B,uBAA4C;AAC5C,IAAAA,oBAAkC;AAClC,IAAAA,oBAAiC;AAM1B,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB,MAKM;AAAA;AAAA;AAAA;AAAA,YAIM,IAAI;AAAA,aACH,IAAI;AAAA,cACH,IAAI;AAAA,eACH,IAAI;AAAA,cACL,IAAI,YAAY,KAAK;AAAA,8BACL,YAAY;AAAA,+BACX,YAAY;AAAA,iCACV,YAAY;AAAA,kCACX,YAAY;AAAA;AAAA,eAE/B,UAAU,EAAE;AAAA;AAAA;AAI3B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,qBAAqB,KAAK;AAChC,MAAM,qBAAqB,KAAK;AAChC,MAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUP,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAY7C,gBAAgB;AAAA,uBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA,iBAG5C,kBAAkB;AAAA,uBACZ,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC1C,kBAAkB;AAAA;AAAA,iBAEpB,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,SAAS,MAAO;AAAA,WAC5F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAInD,MAAM,mBAAmB;AAAA;AAAA,aAEZ,CAAC,UAAW,OAAO,aAAa,MAAM,UAAU,OAAQ;AAAA;AAAA;AAiB9D,MAAM,6BAAyB,yBAAO,qBAAM,EAAE,MAAM,+BAAc,MAAM,+BAAc,QAAQ,CAAC;AAAA,IAMlG,oBAAoB;AAAA;AAAA,iBAEP,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,kBAC1C,CAAC,UAAW,MAAM,UAAU,mBAAmB,MAAO;AAAA;AAGjE,MAAM,iCAA6B,yBAAO,qBAAM,EAAE,MAAM,+BAAc,MAAM,+BAAc,QAAQ,CAAC;AAAA,IAKtG,oBAAoB;AAAA;AAAA,iBAEP,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA,kBACzC,CAAC,UAAW,MAAM,UAAU,mBAAmB,MAAO;AAAA;AAUjE,MAAM,6BAAyB,yBAAO,qBAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA,IACG,oBAAoB;AAAA;AAAA,iBAEP,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA,kBACzC,CAAC,UAAW,MAAM,UAAU,mBAAmB,MAAO;AAAA,mBACrD,CAAC,UAAW,MAAM,eAAe,mBAAmB,MAAO;AAAA;AAGvE,MAAM,6BAAyB,yBAAO,qBAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA,IACG,oBAAoB;AAAA;AAAA,gBAER,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,IAGxD,CAAC,EAAE,OAAO,SAAS,MAAM;AACzB,MAAI,SAAU,QAAO,cAAc,EAAE,OAAO,MAAM,OAAO,OAAO,GAAG,EAAE,CAAC;AACtE,SAAO,cAAc,EAAE,OAAO,MAAM,OAAO,MAAM,GAAG,EAAE,CAAC;AACzD,CAAC;AAAA;AAAA;AAAA,MAGG,CAAC,UAAW,MAAM,gBAAgB,cAAc,EAAE,OAAO,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC,IAAI,EAAG;AAAA;AAAA;AAAA;AAAA,MAIxG,CAAC,UAAW,MAAM,gBAAgB,cAAc,EAAE,OAAO,MAAM,MAAM,OAAO,MAAM,GAAG,EAAE,CAAC,IAAI,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAUxF,CAAC,UAAU,GAAG,MAAM,cAAc,MAAM,UAAU,KAAK,KAAK,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUxE,MAAM,gCAA4B,yBAAO,qBAAM,EAAE,MAAM,+BAAc,MAAM,+BAAc,QAAQ,CAAC;AAAA,IAGrG,oBAAoB;AAAA,iBACP,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAYrD,MAAM,gCAA4B,yBAAO,qBAAM;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA,IACG,oBAAoB;AAAA,iBACP,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,mBACzC,CAAC,UAAW,MAAM,eAAe,iBAAiB,MAAO;AAAA,kBAC1D,CAAC,UAAW,MAAM,cAAc,iBAAiB,MAAO;AAAA;AAUnE,MAAM,iCAA6B,yBAAO,qBAAM;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA,IACG,oBAAoB;AAAA,iBACP,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA,kBACzC,CAAC,UAAW,MAAM,UAAU,mBAAmB,MAAO;AAAA;AAAA;AAQjE,MAAM,sBAAkB,yBAAO,qBAAM,EAAE,MAAM,+BAAc,MAAM,mCAAiB,WAAW,CAAC;AAAA,WAC1F,CAAC,EAAE,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyExB,MAAM,wBAAwB,wBAAO;AAAA,IACxC,gBAAgB;AAAA;AAAA;AAAA,MAGd,CAAC,UAAU,cAAc,EAAE,OAAO,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,GAAG,QAAQ,EAAE,CAAC,CAAC;AAAA;AAAA;AAIrF,MAAM,uBAAmB,yBAAO,gCAAY;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,oCAAkB;AAAA,EACxB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUG,CAAC,EAAE,OAAO,QAAQ,MAAM,MAAM;AAC9B,MAAI,OAAO,KAAK,EAAE,SAAS,IAAI,KAAK,OAAO,MAAM,EAAE,SAAS,IAAI;AAC9D,WAAO;AAAA,eACE,SAAS,OAAiB,EAAE,IAAI,EAAE;AAAA,gBACjC,SAAS,QAAkB,EAAE,IAAI,EAAE;AAAA;AAAA,yBAE1B,MAAM,aAAa,KAAK;AAAA,eAClC,SAAS,OAAiB,EAAE,IAAI,EAAE;AAAA,gBACjC,SAAS,QAAkB,EAAE,IAAI,EAAE;AAAA;AAG/C,SAAO;AAAA,aACE,KAAK;AAAA,cACJ,MAAM;AAAA;AAElB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKG,CAAC,UAAU,cAAc,EAAE,OAAO,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,cAAc,UAAU,CAAC,CAAC;AAAA;AAAA;AAAA,YAGzG,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,gBAAgB,SAAU;AAAA;AAAA;AAAA,wBAGpF,CAAC,EAAE,UAAU,mBAAmB,MAAM,MACxD,YAAY,oBAAoB,gBAAgB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,YAIjE,CAAC,EAAE,UAAU,mBAAmB,MAAM,MAAM;AAClD,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO,MAAM,OAAO,QAAQ,GAAG;AACtD,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA;AAIE,MAAM,2BAAuB,yBAAO,oCAAc,EAAE,MAAM,+BAAc,MAAM,+BAAc,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUjH,CAAC,EAAE,OAAO,QAAQ,MAAM,MAAM;AAC9B,MAAI,OAAO,KAAK,EAAE,SAAS,IAAI,KAAK,OAAO,MAAM,EAAE,SAAS,IAAI;AAC9D,WAAO;AAAA,eACE,SAAS,OAAO,EAAE,IAAI,EAAE;AAAA,cACzB,SAAS,QAAQ,EAAE,IAAI,EAAE;AAAA;AAAA,yBAEd,MAAM,aAAa,KAAK;AAAA,eAClC,SAAS,OAAO,EAAE,IAAI,EAAE;AAAA,gBACvB,SAAS,QAAQ,EAAE,IAAI,EAAE;AAAA;AAGrC,SAAO;AAAA,aACE,KAAK;AAAA,cACJ,MAAM;AAAA;AAElB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKG,CAAC,UAAU,cAAc,EAAE,OAAO,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,cAAc,UAAU,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAM9G,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAKxC,MAAM,oBAAoB,wBAAO;AAAA,IACpC,gBAAgB;AAAA;",
+  "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 { 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  & .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(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,64 @@ 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, 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,
+            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, dropdownProps, innerRef, ariaLabel, onDropdownClick } = 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        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;ADsBnB;AArBJ,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,eAAe,UAAU,WAAW,gBAAgB,IAAI;AAC7F,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;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"]
 }

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

@@ -59,7 +59,15 @@ const LabelOnlyPill = import_react.default.memo((props) => {
       ...ownerProps,
       children: [
         IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TextComponent.TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            label: `${label}${trailingComma ? "," : ""}`
+          }
+        )
       ]
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/LabelOnlyPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledLabelOnlyPillWrapper } from '../styled.js';\n\nexport const LabelOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma } =\n    props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  return (\n    <StyledLabelOnlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent pillSize={size} labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n    </StyledLabelOnlyPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAZJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA2C;AAEpC,MAAM,gBAAgB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACxE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,mBAAmB,UAAU,cAAc,IAC7G;AACF,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAO;AAAA,MACP,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,mBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,QACzC,4CAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAC/G;AAEJ,CAAC;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledLabelOnlyPillWrapper } from '../styled.js';\n\nexport const LabelOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma } =\n    props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  return (\n    <StyledLabelOnlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent\n        pillSize={size}\n        getOwnerProps={ownerProps.getOwnerProps}\n        labelTruncated={labelTruncated}\n        label={`${label}${trailingComma ? ',' : ''}`}\n      />\n    </StyledLabelOnlyPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAZJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA2C;AAEpC,MAAM,gBAAgB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACxE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,mBAAmB,UAAU,cAAc,IAC7G;AACF,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAO;AAAA,MACP,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,mBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,QACzC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -57,7 +57,15 @@ const LabelPill = import_react.default.memo((props) => {
       ...ownerProps,
       children: [
         (iconLeft || IconLeft) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TextComponent.TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            label
+          }
+        )
       ]
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/LabelPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledLabelPillWrapper } from '../styled.js';\n\nexport const LabelPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  return (\n    <StyledLabelPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter={0}\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {(iconLeft || IconLeft) && (\n        <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n      )}\n      <TextComponent pillSize={size} labelTruncated={labelTruncated} label={label} />\n    </StyledLabelPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAiE;AAE1D,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,UAAU,IAAI;AACvE,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAQ;AAAA,MACR,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE9E,4CAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAc;AAAA;AAAA;AAAA,EAC/E;AAEJ,CAAC;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledLabelPillWrapper } from '../styled.js';\n\nexport const LabelPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  return (\n    <StyledLabelPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter={0}\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {(iconLeft || IconLeft) && (\n        <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n      )}\n      <TextComponent\n        pillSize={size}\n        getOwnerProps={ownerProps.getOwnerProps}\n        labelTruncated={labelTruncated}\n        label={label}\n      />\n    </StyledLabelPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAiE;AAE1D,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,UAAU,IAAI;AACvE,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAQ;AAAA,MACR,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE9E;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -81,7 +81,15 @@ const MenuButtonPill = import_react.default.memo((props) => {
       ...globalAttributes,
       ...ownerProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TextComponent.TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            label
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_styled.StyledPillMenuButton,
           {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/MenuButtonPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { defaultProps as DSPillButtonDefaultProps } from '../../parts/DSPillButton/react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\n/* ************************************************************************************************************\n * Regarding magic numbers, default width and height\n *  The Wrapper is setting a min-height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n *    the \"magic\" values are actually 25px RT for \"m\" and 19px RT for \"s\"\n ***************************************************************************************************************\n * Given the above, this iteration of StyledDropdownPillWrapper needs to have different styles/cols/rows to accomodate DSButtonV3\n *   and I'm basing the styles on the same assumptions for width/height magic values.\n ************************************************************************************************************* */\nconst rowsForDsButtonV3 = () => ({ small: ['auto'], medium: ['auto'] });\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n  size === 'm'\n    ? { small: ['auto', 'minmax(1.5625rem, auto)'], medium: ['auto', 'minmax(1.9230rem, auto)'] }\n    : { small: ['auto', 'minmax(1.1875rem, auto)'], medium: ['auto', 'minmax(1.4615rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n  if (!menuButtonProps) {\n    // eslint-disable-next-line no-console\n    console.log('menuButtonProps', menuButtonProps);\n    throw new Error('menuButtonProps was not provided');\n  }\n  if (Object.keys(menuButtonProps).length === 0) {\n    // eslint-disable-next-line no-console\n    console.log('menuButtonProps', menuButtonProps);\n    throw new Error('menuButtonProps is empty');\n  }\n  const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;\n\n  const memoizedRows = useMemo(() => rowsForDsButtonV3(), []);\n  const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);\n  const dsMenubuttonRootProps = useMemo(\n    () => ({\n      width: `${width}`,\n      height: `${height}`,\n    }),\n    [height, width],\n  );\n\n  const finalAriaLabel = ariaLabel || label;\n\n  return (\n    <StyledDropdownPillWrapper\n      pillSize={size}\n      id={pillUid}\n      className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n      cols={memoizedCols}\n      rows={memoizedRows}\n      gutter=\"2px\"\n      alignItems=\"center\"\n      justifyItems=\"center\"\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      <TextComponent pillSize={size} labelTruncated={labelTruncated} label={label} />\n      <StyledAgnosticPillRegion>\n        <StyledPillMenuButton\n          innerRef={innerRef as DSMenuButtonT.Props['innerRef']}\n          aria-label={finalAriaLabel}\n          dsMenubuttonRoot={dsMenubuttonRootProps}\n          {...menuButtonProps}\n          // the styles that makes the circle visual behave correctly in \"circle\"/\"square\"/\"pill group\"\n          //   are based on the button having the following props:\n          data-testid={PILL_V2_DATA_TESTID.PILL_MENU_BUTTON}\n          buttonType=\"raw\"\n          className=\"ds-pill-button-right ds-pill-focus-point\"\n          type=\"button\"\n          width={`${width}`}\n          height={`${height}`}\n          // end of props for correcr circle/square/pill group visual behavior\n          {...ownerProps}\n        >\n          <ChevronSmallDown color={['brand-primary', '800']} />\n        </StyledPillMenuButton>\n      </StyledAgnosticPillRegion>\n    </StyledDropdownPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDnB;AAvDJ,sBAAiC;AAEjC,8BAAsD;AACtD,mBAA+B;AAC/B,iBAAoB;AAEpB,mCAAyD;AACzD,2BAA8B;AAC9B,oBAA0F;AAC1F,uBAAoC;AAUpC,MAAM,oBAAoB,OAAO,EAAE,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;AACrE,MAAM,oBAAoB,CAAC,SACzB,SAAS,MACL,EAAE,OAAO,CAAC,QAAQ,yBAAyB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE,IAC1F,EAAE,OAAO,CAAC,QAAQ,yBAAyB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE;AAEzF,MAAM,iBAAiB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACzE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB,IAAI;AAC9E,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,QAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AACpD,MAAI,CAAC,iBAAiB;AAEpB,YAAQ,IAAI,mBAAmB,eAAe;AAC9C,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACpD;AACA,MAAI,OAAO,KAAK,eAAe,EAAE,WAAW,GAAG;AAE7C,YAAQ,IAAI,mBAAmB,eAAe;AAC9C,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AACA,QAAM,EAAE,QAAQ,6BAAAC,aAAyB,OAAO,SAAS,6BAAAA,aAAyB,OAAO,IAAI;AAE7F,QAAM,mBAAe,sBAAQ,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC1D,QAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,QAAM,4BAAwB;AAAA,IAC5B,OAAO;AAAA,MACL,OAAO,GAAG,KAAK;AAAA,MACf,QAAQ,GAAG,MAAM;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,EAChB;AAEA,QAAM,iBAAiB,aAAa;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,oDAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAc;AAAA,QAC7E,4CAAC,0CACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,kBAAkB;AAAA,YACjB,GAAG;AAAA,YAGJ,eAAa,qCAAoB;AAAA,YACjC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAO,GAAG,KAAK;AAAA,YACf,QAAQ,GAAG,MAAM;AAAA,YAEhB,GAAG;AAAA,YAEJ,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QACrD,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { defaultProps as DSPillButtonDefaultProps } from '../../parts/DSPillButton/react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\n/* ************************************************************************************************************\n * Regarding magic numbers, default width and height\n *  The Wrapper is setting a min-height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n *    the \"magic\" values are actually 25px RT for \"m\" and 19px RT for \"s\"\n ***************************************************************************************************************\n * Given the above, this iteration of StyledDropdownPillWrapper needs to have different styles/cols/rows to accomodate DSButtonV3\n *   and I'm basing the styles on the same assumptions for width/height magic values.\n ************************************************************************************************************* */\nconst rowsForDsButtonV3 = () => ({ small: ['auto'], medium: ['auto'] });\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n  size === 'm'\n    ? { small: ['auto', 'minmax(1.5625rem, auto)'], medium: ['auto', 'minmax(1.9230rem, auto)'] }\n    : { small: ['auto', 'minmax(1.1875rem, auto)'], medium: ['auto', 'minmax(1.4615rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n  if (!menuButtonProps) {\n    // eslint-disable-next-line no-console\n    console.log('menuButtonProps', menuButtonProps);\n    throw new Error('menuButtonProps was not provided');\n  }\n  if (Object.keys(menuButtonProps).length === 0) {\n    // eslint-disable-next-line no-console\n    console.log('menuButtonProps', menuButtonProps);\n    throw new Error('menuButtonProps is empty');\n  }\n  const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;\n\n  const memoizedRows = useMemo(() => rowsForDsButtonV3(), []);\n  const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);\n  const dsMenubuttonRootProps = useMemo(\n    () => ({\n      width: `${width}`,\n      height: `${height}`,\n    }),\n    [height, width],\n  );\n\n  const finalAriaLabel = ariaLabel || label;\n\n  return (\n    <StyledDropdownPillWrapper\n      pillSize={size}\n      id={pillUid}\n      className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n      cols={memoizedCols}\n      rows={memoizedRows}\n      gutter=\"2px\"\n      alignItems=\"center\"\n      justifyItems=\"center\"\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      <TextComponent\n        pillSize={size}\n        getOwnerProps={ownerProps.getOwnerProps}\n        labelTruncated={labelTruncated}\n        label={label}\n      />\n      <StyledAgnosticPillRegion>\n        <StyledPillMenuButton\n          innerRef={innerRef as DSMenuButtonT.Props['innerRef']}\n          aria-label={finalAriaLabel}\n          dsMenubuttonRoot={dsMenubuttonRootProps}\n          {...menuButtonProps}\n          // the styles that makes the circle visual behave correctly in \"circle\"/\"square\"/\"pill group\"\n          //   are based on the button having the following props:\n          data-testid={PILL_V2_DATA_TESTID.PILL_MENU_BUTTON}\n          buttonType=\"raw\"\n          className=\"ds-pill-button-right ds-pill-focus-point\"\n          type=\"button\"\n          width={`${width}`}\n          height={`${height}`}\n          // end of props for correcr circle/square/pill group visual behavior\n          {...ownerProps}\n        >\n          <ChevronSmallDown color={['brand-primary', '800']} />\n        </StyledPillMenuButton>\n      </StyledAgnosticPillRegion>\n    </StyledDropdownPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDnB;AAvDJ,sBAAiC;AAEjC,8BAAsD;AACtD,mBAA+B;AAC/B,iBAAoB;AAEpB,mCAAyD;AACzD,2BAA8B;AAC9B,oBAA0F;AAC1F,uBAAoC;AAUpC,MAAM,oBAAoB,OAAO,EAAE,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;AACrE,MAAM,oBAAoB,CAAC,SACzB,SAAS,MACL,EAAE,OAAO,CAAC,QAAQ,yBAAyB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE,IAC1F,EAAE,OAAO,CAAC,QAAQ,yBAAyB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE;AAEzF,MAAM,iBAAiB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACzE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB,IAAI;AAC9E,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,QAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AACpD,MAAI,CAAC,iBAAiB;AAEpB,YAAQ,IAAI,mBAAmB,eAAe;AAC9C,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACpD;AACA,MAAI,OAAO,KAAK,eAAe,EAAE,WAAW,GAAG;AAE7C,YAAQ,IAAI,mBAAmB,eAAe;AAC9C,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AACA,QAAM,EAAE,QAAQ,6BAAAC,aAAyB,OAAO,SAAS,6BAAAA,aAAyB,OAAO,IAAI;AAE7F,QAAM,mBAAe,sBAAQ,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC1D,QAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,QAAM,4BAAwB;AAAA,IAC5B,OAAO;AAAA,MACL,OAAO,GAAG,KAAK;AAAA,MACf,QAAQ,GAAG,MAAM;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,EAChB;AAEA,QAAM,iBAAiB,aAAa;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA,4CAAC,0CACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,kBAAkB;AAAA,YACjB,GAAG;AAAA,YAGJ,eAAa,qCAAoB;AAAA,YACjC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAO,GAAG,KAAK;AAAA,YACf,QAAQ,GAAG,MAAM;AAAA,YAEhB,GAAG;AAAA,YAEJ,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QACrD,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React", "DSPillButtonDefaultProps"]
 }

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

@@ -62,7 +62,15 @@ const ReadOnlyPill = import_react.default.memo((props) => {
       ...ownerProps,
       children: [
         (iconLeft || IconLeft) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft }),
-        label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label }) : null,
+        label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TextComponent.TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            label
+          }
+        ) : null,
         (iconRight || IconRight) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: IconRight ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconRight, { label }) : iconRight })
       ]
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/ReadOnlyPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n  const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n  const hasIconLeftNew = IconLeft !== null || (IconRight !== null && label === '');\n  const hasIconRightNew = IconRight !== null || (IconLeft !== null && label === '');\n\n  return (\n    <StyledReadonlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n      data-label={ariaLabel || label}\n      cols={\n        [(iconLeft || IconLeft) && 'min-content', label && 'auto', (iconRight || IconRight) && 'min-content'].filter(\n          (notFalse) => notFalse,\n        ) as string[]\n      }\n      gutter={0}\n      hasIconRight={hasIconRight || hasIconRightNew}\n      hasIconLeft={hasIconLeft || hasIconLeftNew}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {(iconLeft || IconLeft) && (\n        <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n      )}\n      {label ? <TextComponent pillSize={size} labelTruncated={labelTruncated} label={label} /> : null}\n      {(iconRight || IconRight) && (\n        <StyledAgnosticPillRegion>{IconRight ? <IconRight label={label} /> : iconRight}</StyledAgnosticPillRegion>\n      )}\n    </StyledReadonlyPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAjBJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAoE;AAE7D,MAAM,eAAe,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACvE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,WAAW,UAAU,UAAU,IAAI;AAC7F,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,QAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,QAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,QAAM,iBAAiB,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC7E,QAAM,kBAAkB,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,QACpG,CAAC,aAAa;AAAA,MAChB;AAAA,MAEF,QAAQ;AAAA,MACR,cAAc,gBAAgB;AAAA,MAC9B,aAAa,eAAe;AAAA,MAC3B,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE7E,QAAQ,4CAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAc,IAAK;AAAA,SACzF,aAAa,cACb,4CAAC,0CAA0B,sBAAY,4CAAC,aAAU,OAAc,IAAK,WAAU;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight } = props;\n  const ownerProps = useOwnerProps(props);\n  const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n  const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n  const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n  const hasIconLeftNew = IconLeft !== null || (IconRight !== null && label === '');\n  const hasIconRightNew = IconRight !== null || (IconLeft !== null && label === '');\n\n  return (\n    <StyledReadonlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n      data-label={ariaLabel || label}\n      cols={\n        [(iconLeft || IconLeft) && 'min-content', label && 'auto', (iconRight || IconRight) && 'min-content'].filter(\n          (notFalse) => notFalse,\n        ) as string[]\n      }\n      gutter={0}\n      hasIconRight={hasIconRight || hasIconRightNew}\n      hasIconLeft={hasIconLeft || hasIconLeftNew}\n      {...globalAttributes}\n      {...ownerProps}\n    >\n      {(iconLeft || IconLeft) && (\n        <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n      )}\n      {label ? (\n        <TextComponent\n          pillSize={size}\n          getOwnerProps={ownerProps.getOwnerProps}\n          labelTruncated={labelTruncated}\n          label={label}\n        />\n      ) : null}\n      {(iconRight || IconRight) && (\n        <StyledAgnosticPillRegion>{IconRight ? <IconRight label={label} /> : iconRight}</StyledAgnosticPillRegion>\n      )}\n    </StyledReadonlyPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAjBJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAoE;AAE7D,MAAM,eAAe,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACvE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,WAAW,UAAU,UAAU,IAAI;AAC7F,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,QAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,QAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,QAAM,iBAAiB,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC7E,QAAM,kBAAkB,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,QACpG,CAAC,aAAa;AAAA,MAChB;AAAA,MAEF,QAAQ;AAAA,MACR,cAAc,gBAAgB;AAAA,MAC9B,aAAa,eAAe;AAAA,MAC3B,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE7E,QACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA;AAAA,QACF,IACE;AAAA,SACF,aAAa,cACb,4CAAC,0CAA0B,sBAAY,4CAAC,aAAU,OAAc,IAAK,WAAU;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -89,7 +89,7 @@ const RemovablePill = import_react.default.memo((props) => {
     import_styled.StyledRemovablePillWrapper,
     {
       pillSize: size,
-      cols: [(iconLeft || IconLeft) && "min-content", "auto", `minmax(${size === "s" ? 15 : 21}px, auto)`].filter(
+      cols: [(iconLeft || IconLeft) && "min-content", "auto", `minmax(${size === "s" ? 14 : 20}px, auto)`].filter(
         (notFalse) => notFalse
       ),
       disabled,
@@ -104,7 +104,15 @@ const RemovablePill = import_react.default.memo((props) => {
       ...ownerProps,
       children: [
         (iconLeft || IconLeft) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TextComponent.TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            label
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_DSPillButton.DSPillButton,
           {
@@ -120,9 +128,9 @@ const RemovablePill = import_react.default.memo((props) => {
             tabIndex,
             applyAriaDisabled,
             disabled,
-            width: `${size === "s" ? 15 : 21}px`,
-            height: `${size === "s" ? 15 : 21}px`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, { width: size === "s" ? 15 : 21, height: size === "s" ? 15 : 21 })
+            width: `${size === "s" ? 14 : 20}px`,
+            height: `${size === "s" ? 14 : 20}px`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, { width: size === "s" ? 14 : 20, height: size === "s" ? 14 : 20 })
           }
         ) })
       ]