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

package/dist/cjs/components/Pill.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(Pill_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_DSPillDefinitions = require("../DSPillDefinitions.js");
+var import_constants = require("../constants/index.js");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_types = require("./types/index.js");
 const pillComponentGetter = {
@@ -50,12 +50,12 @@ const pillComponentGetter = {
 };
 const DSPillV2 = (props) => {
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSPillV2DefaultProps);
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.DSPillV2PropTypesSchema, import_DSPillDefinitions.DSPillName);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.DSPillV2PropTypesSchema, import_constants.DSPillName);
   const { type } = propsWithDefaults;
   const PillComponent = pillComponentGetter[type];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillComponent, { ...propsWithDefaults });
 };
-DSPillV2.displayName = import_DSPillDefinitions.DSPillName;
+DSPillV2.displayName = import_constants.DSPillName;
 const DSPillV2WithSchema = (0, import_ds_props_helpers.describe)(DSPillV2).description("Pill");
 DSPillV2WithSchema.propTypes = import_react_desc_prop_types.DSPillV2PropTypesSchema;
 //# sourceMappingURL=Pill.js.map

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

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

package/dist/cjs/components/index.js

@@ -27,6 +27,4 @@ var components_exports = {};
 module.exports = __toCommonJS(components_exports);
 var React = __toESM(require("react"));
 __reExport(components_exports, require("./Pill.js"), module.exports);
-__reExport(components_exports, require("./PillGroup.js"), module.exports);
-__reExport(components_exports, require("./PillButton.js"), module.exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './Pill.js';\nexport * from './PillGroup.js';\nexport * from './PillButton.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAc,sBAAd;AACA,+BAAc,2BADd;AAEA,+BAAc,4BAFd;",
+  "sourcesContent": ["export * from './Pill.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAc,sBAAd;",
   "names": []
 }

package/dist/cjs/components/styled.js

@@ -47,6 +47,9 @@ 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_constants = require("../constants/index.js");
+var import_constants2 = require("../parts/DSPillButton/constants/index.js");
+var import_constants3 = require("../parts/DSPillGroup/constants/index.js");
 const borderOutside = ({
   color,
   size = 1,
@@ -98,25 +101,31 @@ const commonPillWrapperCss = import_ds_system.css`
   cursor: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "not-allowed" : "default"};
   color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
 `;
-const StyledLabelPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledLabelPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPillV2Name, slot: import_constants.PILL_V2_SLOTS.WRAPPER })`
   ${commonPillWrapperCss}
 
   font-weight: ${(props) => props.theme.fontWeights.semibold};
   padding-left: ${(props) => props.hasIcon || props.applyAriaDisabled || props.readOnly ? "0px !important" : "12px"};
 `;
-const StyledLabelOnlyPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledLabelOnlyPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPillV2Name, slot: import_constants.PILL_V2_SLOTS.WRAPPER })`
   ${commonPillWrapperCss}
 
   font-weight: ${(props) => props.theme.fontWeights.regular};
   padding-left: ${(props) => props.hasIcon || props.applyAriaDisabled ? "0px !important" : "12px"};
 `;
-const StyledValuePillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledValuePillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSPillV2Name,
+  slot: import_constants.PILL_V2_SLOTS.WRAPPER
+})`
   ${commonPillWrapperCss}
 
   font-weight: ${(props) => props.theme.fontWeights.regular};
   padding-left: ${(props) => props.hasIcon || props.disabled ? "0px !important" : "12px"};
 `;
-const StyledInputPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledInputPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSPillV2Name,
+  slot: import_constants.PILL_V2_SLOTS.WRAPPER
+})`
   ${commonPillWrapperCss}
 
   background: ${(props) => props.theme.colors.neutral["000"]};
@@ -151,19 +160,25 @@ const StyledInputPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)
     height: 100%;
   }
 `;
-const StyledDropdownPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledDropdownPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPillV2Name, slot: import_constants.PILL_V2_SLOTS.WRAPPER })`
   ${commonPillWrapperCss}
   font-weight: ${(props) => props.theme.fontWeights.semibold};
 
   padding: 0 0 0 12px;
 `;
-const StyledReadonlyPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledReadonlyPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSPillV2Name,
+  slot: import_constants.PILL_V2_SLOTS.WRAPPER
+})`
   ${commonPillWrapperCss}
   font-weight: ${(props) => props.theme.fontWeights.semibold};
   padding-right: ${(props) => props.hasIconRight ? "0 !important" : "12px"};
   padding-left: ${(props) => props.hasIconLeft ? "0 !important" : "12px"};
 `;
-const StyledRemovablePillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledRemovablePillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSPillV2Name,
+  slot: import_constants.PILL_V2_SLOTS.WRAPPER
+})`
   ${commonPillWrapperCss}
   font-weight: ${(props) => props.theme.fontWeights.regular};
   padding: 0 0 0 12px;
@@ -173,7 +188,7 @@ const StyledRemovablePillWrapper = (0, import_ds_system.styled)(import_ds_grid.G
     line-height: 1rem;
   }
 `;
-const StyledPillGroup = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledPillGroup = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPillV2Name, slot: import_constants3.PILL_GROUP_SLOTS.PILL_GROUP })`
   width: ${({ width }) => width};
 
   // Pill edges
@@ -245,7 +260,11 @@ const StyledSpanWithTooltip = import_ds_system.styled.span`
     ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}
   }
 `;
-const StyledPillButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
+const StyledPillButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
+  name: import_constants.DSPillV2Name,
+  slot: import_constants2.PILL_BUTTON_SLOTS.PILL_BUTTON,
+  preserveLegacyDataTestId: true
+})`
   display: grid;
   place-items: center;
 
@@ -276,7 +295,7 @@ const StyledPillButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButt
 
   cursor: pointer;
 `;
-const StyledPillMenuButton = (0, import_ds_system.styled)(import_ds_menu_button.DSMenuButton)`
+const StyledPillMenuButton = (0, import_ds_system.styled)(import_ds_menu_button.DSMenuButton, { name: import_constants.DSPillV2Name, slot: import_constants.PILL_V2_SLOTS.PILL_MENU_BUTTON })`
   display: grid;
   place-items: center;
 

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 { DSButtonV2 } 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';\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: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ${size}px solid\n      ${({ disabled, applyAriaDisabled, readOnly, theme }) =>\n        disabled || applyAriaDisabled || readOnly ? theme.colors.neutral[400] : 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 commonPillWrapperCss = css<{\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n}>`\n  height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n  @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n    height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n  }\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[250];\n  }};\n\n  outline: none;\n\n  white-space: nowrap;\n\n  padding: 0px 12px 0 12px;\n  border-radius: 12px;\n\n  font-size: 1rem;\n  line-height: 1;\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : 'auto')};\n  cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'default')};\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '#616b7f' : theme.colors.brand['800']};\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)<{\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 || props.applyAriaDisabled || props.readOnly ? '0px !important' : '12px')};\n`;\n\nexport const StyledLabelOnlyPillWrapper = styled(Grid)<{\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 || props.applyAriaDisabled ? '0px !important' : '12px')};\n`;\n\ntype StyledValuePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled: boolean;\n};\n\nexport const StyledValuePillWrapper = styled(Grid)<StyledValuePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon || props.disabled ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<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)<{ pillSize: 'm' | 's' }>`\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)<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};\n\nexport const StyledRemovablePillWrapper = styled(Grid)<StyledRemovablePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding: 0 0 0 12px;\n  padding: ${({ disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '0 12px 0 12px' : '0 0 0 12px'};\n  line-height: 1.2307rem;\n  @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n    line-height: 1rem;\n  }\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n  width: ${({ width }) => width};\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`\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(DSButtonV2)<{ width: string | number; height: string | number }>`\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: pointer;\n`;\n\nexport const StyledPillMenuButton = styled(DSMenuButton)<{ width: string; height: string }>`\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } 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: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ${size}px solid\n      ${({ disabled, applyAriaDisabled, readOnly, theme }) =>\n        disabled || applyAriaDisabled || readOnly ? theme.colors.neutral[400] : 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 commonPillWrapperCss = css<{\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n}>`\n  height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n  @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n    height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n  }\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[250];\n  }};\n\n  outline: none;\n\n  white-space: nowrap;\n\n  padding: 0px 12px 0 12px;\n  border-radius: 12px;\n\n  font-size: 1rem;\n  line-height: 1;\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : 'auto')};\n  cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'default')};\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '#616b7f' : theme.colors.brand['800']};\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 || props.applyAriaDisabled || props.readOnly ? '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 || props.applyAriaDisabled ? '0px !important' : '12px')};\n`;\n\ntype StyledValuePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIcon: 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 || props.disabled ? '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};\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: 0 0 0 12px;\n  padding: ${({ disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '0 12px 0 12px' : '0 0 0 12px'};\n  line-height: 1.2307rem;\n  @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n    line-height: 1rem;\n  }\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\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`\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(DSButtonV2, {\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: pointer;\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["import_constants"]
 }

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

@@ -38,7 +38,7 @@ var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_system = require("@elliemae/ds-system");
 var import_react = __toESM(require("react"));
 var import_uid = require("uid");
-var import_PillButton = require("../PillButton.js");
+var import_DSPillButton = require("../../parts/DSPillButton/DSPillButton.js");
 var import_TextComponent = require("../TextComponent.js");
 var import_styled = require("../styled.js");
 const DropdownPill = import_react.default.memo(
@@ -77,7 +77,7 @@ const DropdownPill = import_react.default.memo(
               },
               wrapperStyles: { w: "100%", h: "100%" },
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_PillButton.DSPillButton,
+                import_DSPillButton.DSPillButton,
                 {
                   className: "ds-pill-focus-point",
                   "data-testid": "ds-pill-dropdown-chevron",

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 '../PillButton.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledDropdownPillWrapper } from '../styled.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        data-testid=\"ds-pill-wrapper\"\n        cols={['auto', 'minmax(24px, auto)']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent 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          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-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        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBjB;AAlBN,gCAAiC;AACjC,sBAAiC;AACjC,uBAA0B;AAE1B,mBAAuC;AACvC,iBAAoB;AAEpB,wBAA6B;AAC7B,2BAA8B;AAC9B,oBAA0C;AAEnC,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,eAAY;AAAA,QACZ,MAAM,CAAC,QAAQ,oBAAoB;AAAA,QACnC,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,sDAAC,sCAAc,gBAAgC,OAAc;AAAA,UAC7D;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;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,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;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 { 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 { StyledDropdownPillWrapper } from '../styled.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        data-testid=\"ds-pill-wrapper\"\n        cols={['auto', 'minmax(24px, auto)']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent 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          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-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        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBjB;AAlBN,gCAAiC;AACjC,sBAAiC;AACjC,uBAA0B;AAE1B,mBAAuC;AACvC,iBAAoB;AAEpB,0BAA6B;AAC7B,2BAA8B;AAC9B,oBAA0C;AAEnC,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,eAAY;AAAA,QACZ,MAAM,CAAC,QAAQ,oBAAoB;AAAA,QACnC,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,sDAAC,sCAAc,gBAAgC,OAAc;AAAA,UAC7D;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;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,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;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -37,7 +37,7 @@ var import_react = __toESM(require("react"));
 var import_uid = require("uid");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_styled = require("../styled.js");
-var import_PillButton = require("../PillButton.js");
+var import_DSPillButton = require("../../parts/DSPillButton/DSPillButton.js");
 const InputPill = import_react.default.memo(
   ({
     label,
@@ -95,7 +95,7 @@ const InputPill = import_react.default.memo(
             }
           ),
           label !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_PillButton.DSPillButton,
+            import_DSPillButton.DSPillButton,
             {
               id: pillUid,
               "data-testid": "ds-pill-clear-icon",

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

@@ -1,7 +1,7 @@
 {
   "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 { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\n  ({\n    label,\n    size,\n    inputPlaceholder,\n    inputWidth,\n    inputRender,\n    onInputChange,\n    onInputClear,\n    innerRef,\n    hasError,\n    inputId,\n  }) => {\n    const ref = useRef<HTMLInputElement | null>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n    const onCloseIconClick = useCallback(\n      (e: React.KeyboardEvent | React.MouseEvent) => {\n        if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\n          e.preventDefault();\n          onInputClear?.(e);\n          ref.current?.focus();\n        }\n      },\n      [onInputClear],\n    );\n\n    const [inputHasFocus, setInputHasFocus] = useState(false);\n\n    return (\n      <StyledInputPillWrapper\n        pillSize={size}\n        className=\"ds-pill-wrapper\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={label === '' ? ['auto'] : ['auto', '24px']}\n        inputWidth={inputWidth}\n        value={label ?? ''}\n        inputHasFocus={inputHasFocus}\n        hasError={hasError}\n      >\n        <InputComponent\n          id={pillUid}\n          className=\"ds-pill-focus-point\"\n          data-testid=\"ds-pill-input\"\n          innerRef={(_ref: HTMLInputElement | null) => {\n            ref.current = _ref;\n          }}\n          value={label}\n          onChange={onInputChange}\n          placeholder={inputPlaceholder}\n          onFocus={() => setInputHasFocus(true)}\n          onBlur={() => setInputHasFocus(false)}\n          disableTooltip={false}\n        />\n        {label !== '' && (\n          <DSPillButton\n            id={pillUid}\n            data-testid=\"ds-pill-clear-icon\"\n            innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n            onClick={onCloseIconClick}\n            // onKeyDown={onCloseIconClick} // button v2 now triggers click on key down already\n            aria-label=\"Clear input\"\n            type=\"right\"\n          >\n            <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n          </DSPillButton>\n        )}\n      </StyledInputPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CjB;AAzCN,mBAA8D;AAE9D,iBAAoB;AACpB,sBAA4B;AAC5B,oBAAuC;AACvC,wBAA6B;AAGtB,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,qBAAgC,IAAI;AAEhD,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAEtE,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA8C;AAC7C,YAAK,UAAU,KAAK,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAM,EAAE,UAAU,IAAI;AAC1E,YAAE,eAAe;AACjB,yBAAe,CAAC;AAChB,cAAI,SAAS,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,QAC/C;AAAA,QACA,OAAO,SAAS;AAAA,QAChB;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,UAAU,CAAC,SAAkC;AAC3C,oBAAI,UAAU;AAAA,cAChB;AAAA,cACA,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAa;AAAA,cACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,cACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,cACpC,gBAAgB;AAAA;AAAA,UAClB;AAAA,UACC,UAAU,MACT;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAY;AAAA,cACZ;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,sDAAC,+BAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\n  ({\n    label,\n    size,\n    inputPlaceholder,\n    inputWidth,\n    inputRender,\n    onInputChange,\n    onInputClear,\n    innerRef,\n    hasError,\n    inputId,\n  }) => {\n    const ref = useRef<HTMLInputElement | null>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n    const onCloseIconClick = useCallback(\n      (e: React.KeyboardEvent | React.MouseEvent) => {\n        if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\n          e.preventDefault();\n          onInputClear?.(e);\n          ref.current?.focus();\n        }\n      },\n      [onInputClear],\n    );\n\n    const [inputHasFocus, setInputHasFocus] = useState(false);\n\n    return (\n      <StyledInputPillWrapper\n        pillSize={size}\n        className=\"ds-pill-wrapper\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={label === '' ? ['auto'] : ['auto', '24px']}\n        inputWidth={inputWidth}\n        value={label ?? ''}\n        inputHasFocus={inputHasFocus}\n        hasError={hasError}\n      >\n        <InputComponent\n          id={pillUid}\n          className=\"ds-pill-focus-point\"\n          data-testid=\"ds-pill-input\"\n          innerRef={(_ref: HTMLInputElement | null) => {\n            ref.current = _ref;\n          }}\n          value={label}\n          onChange={onInputChange}\n          placeholder={inputPlaceholder}\n          onFocus={() => setInputHasFocus(true)}\n          onBlur={() => setInputHasFocus(false)}\n          disableTooltip={false}\n        />\n        {label !== '' && (\n          <DSPillButton\n            id={pillUid}\n            data-testid=\"ds-pill-clear-icon\"\n            innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n            onClick={onCloseIconClick}\n            // onKeyDown={onCloseIconClick} // button v2 now triggers click on key down already\n            aria-label=\"Clear input\"\n            type=\"right\"\n          >\n            <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n          </DSPillButton>\n        )}\n      </StyledInputPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CjB;AAzCN,mBAA8D;AAE9D,iBAAoB;AACpB,sBAA4B;AAC5B,oBAAuC;AACvC,0BAA6B;AAGtB,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,qBAAgC,IAAI;AAEhD,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAEtE,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA8C;AAC7C,YAAK,UAAU,KAAK,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAM,EAAE,UAAU,IAAI;AAC1E,YAAE,eAAe;AACjB,yBAAe,CAAC;AAChB,cAAI,SAAS,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,QAC/C;AAAA,QACA,OAAO,SAAS;AAAA,QAChB;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,UAAU,CAAC,SAAkC;AAC3C,oBAAI,UAAU;AAAA,cAChB;AAAA,cACA,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAa;AAAA,cACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,cACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,cACpC,gBAAgB;AAAA;AAAA,UAClB;AAAA,UACC,UAAU,MACT;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAY;AAAA,cACZ;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,sDAAC,+BAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -33,11 +33,14 @@ __export(LabelOnlyPill_exports, {
 module.exports = __toCommonJS(LabelOnlyPill_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = __toESM(require("react"));
 var import_TextComponent = require("../TextComponent.js");
 var import_styled = require("../styled.js");
-const LabelOnlyPill = import_react.default.memo(
-  ({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+const LabelOnlyPill = import_react.default.memo((props) => {
+  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma } = props;
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styled.StyledLabelOnlyPillWrapper,
     {
       pillSize: size,
@@ -52,11 +55,12 @@ const LabelOnlyPill = import_react.default.memo(
       "aria-label": label,
       applyAriaDisabled,
       readOnly,
+      ...ownerProps,
       children: [
         IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
       ]
     }
-  )
-);
+  );
+});
 //# sourceMappingURL=LabelOnlyPill.js.map

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 React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledLabelOnlyPillWrapper } from '../styled.js';\n\nexport const LabelOnlyPill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma }) => (\n    <StyledLabelOnlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n    </StyledLabelOnlyPillWrapper>\n  ),\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQnB;AAPJ,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA2C;AAEpC,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,mBAAmB,UAAU,cAAc,MACxG;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAO;AAAA,MACP,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MAEC;AAAA,mBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,QACzC,4CAAC,sCAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAC/F;AAEJ;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledLabelOnlyPillWrapper } from '../styled.js';\n\nexport const LabelOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma } =\n    props;\n  const ownerProps = useOwnerProps(props);\n  return (\n    <StyledLabelOnlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n      {...ownerProps}\n    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n    </StyledLabelOnlyPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,8BAA8B;AAC9B,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAO;AAAA,MACP,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,mBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,QACzC,4CAAC,sCAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAC/F;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -33,11 +33,14 @@ __export(LabelPill_exports, {
 module.exports = __toCommonJS(LabelPill_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = __toESM(require("react"));
 var import_TextComponent = require("../TextComponent.js");
 var import_styled = require("../styled.js");
-const LabelPill = import_react.default.memo(
-  ({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+const LabelPill = import_react.default.memo((props) => {
+  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel } = props;
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styled.StyledLabelPillWrapper,
     {
       pillSize: size,
@@ -50,11 +53,12 @@ const LabelPill = import_react.default.memo(
       hasIcon: (iconLeft || IconLeft) !== null,
       role: "group",
       "aria-label": label,
+      ...ownerProps,
       children: [
         IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label })
       ]
     }
-  )
-);
+  );
+});
 //# sourceMappingURL=LabelPill.js.map

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 React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledLabelPillWrapper } from '../styled.js';\n\nexport const LabelPill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel }) => (\n    <StyledLabelPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent labelTruncated={labelTruncated} label={label} />\n    </StyledLabelPillWrapper>\n  ),\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQnB;AAPJ,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAuC;AAEhC,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,UAAU,MAC5D;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAO;AAAA,MACP,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MAEX;AAAA,mBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,QACzC,4CAAC,sCAAc,gBAAgC,OAAc;AAAA;AAAA;AAAA,EAC/D;AAEJ;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledLabelPillWrapper } from '../styled.js';\n\nexport const LabelPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel } = props;\n  const ownerProps = useOwnerProps(props);\n  return (\n    <StyledLabelPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n      {...ownerProps}\n    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent labelTruncated={labelTruncated} label={label} />\n    </StyledLabelPillWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWnB;AAVJ,8BAA8B;AAC9B,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAuC;AAEhC,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,UAAU,IAAI;AACvE,QAAM,iBAAa,uCAAc,KAAK;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAO;AAAA,MACP,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACX,GAAG;AAAA,MAEH;AAAA,mBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,QACzC,4CAAC,sCAAc,gBAAgC,OAAc;AAAA;AAAA;AAAA,EAC/D;AAEJ,CAAC;",
   "names": ["React"]
 }

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

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