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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPillGroup/constants/index.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPillV2Name } from '../../../constants/index.js';\nexport { DSPillV2Name };\n\n// This should be used only for displayName, and useValidateProps.\n// For slots definition, use parent component name\nexport const DSPillGroupName = 'DSPillgroup';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_GROUP_SLOTS = {\n  PILL_GROUP: 'pill-group',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_GROUP_DATA_TESTID = slotObjectToDataTestIds(DSPillV2Name, PILL_GROUP_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACxC,uBAA6B;AAKtB,MAAM,kBAAkB;AAGxB,MAAM,mBAAmB;AAAA,EAC9B,YAAY;AACd;AAGO,MAAM,6BAAyB,0CAAwB,+BAAc,gBAAgB;",
+  "names": []
+}

package/dist/cjs/parts/DSPillGroup/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSPillGroup_exports = {};
+__export(DSPillGroup_exports, {
+  DSPillGroupName: () => import_constants.DSPillGroupName,
+  DSPillGroupV2: () => import_DSPillGroup.DSPillGroupV2,
+  DSPillGroupV2Context: () => import_PillGroupCTX.PillGroupContext,
+  DSPillGroupV2WithSchema: () => import_DSPillGroup.DSPillGroupV2WithSchema,
+  PILL_GROUP_DATA_TESTID: () => import_constants.PILL_GROUP_DATA_TESTID
+});
+module.exports = __toCommonJS(DSPillGroup_exports);
+var React = __toESM(require("react"));
+var import_DSPillGroup = require("./DSPillGroup.js");
+var import_PillGroupCTX = require("./PillGroupCTX.js");
+var import_constants = require("./constants/index.js");
+//# sourceMappingURL=index.js.map

package/dist/cjs/parts/DSPillGroup/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPillGroup/index.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export { DSPillGroupV2, DSPillGroupV2WithSchema } from './DSPillGroup.js';\nexport { PillGroupContext as DSPillGroupV2Context } from './PillGroupCTX.js';\nexport { DSPillGroupName, PILL_GROUP_DATA_TESTID } from './constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAuD;AACvD,0BAAyD;AACzD,uBAAwD;",
+  "names": []
+}

package/dist/cjs/parts/DSPillGroup/react-desc-prop-types.js

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSPillGroupPropTypes: () => DSPillGroupPropTypes,
+  DSPillGroupPropTypesSchema: () => DSPillGroupPropTypesSchema,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("./constants/index.js");
+const defaultProps = {
+  width: "fit-content",
+  innerRef: () => null
+};
+const DSPillGroupPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSPillV2Name, import_constants.PILL_GROUP_SLOTS),
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  width: import_ds_props_helpers.PropTypes.string.description("Width of the group").defaultValue("fit-content"),
+  innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.object, import_ds_props_helpers.PropTypes.func]).description("Reference to the pill group wrapper").defaultValue(() => null),
+  children: import_ds_props_helpers.PropTypes.node.description("Pills to render in the group").isRequired
+};
+const DSPillGroupPropTypesSchema = DSPillGroupPropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/parts/DSPillGroup/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPillGroup/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPillV2Name, PILL_GROUP_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPillGroupT {\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface DefaultProps {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPillV2Name, typeof PILL_GROUP_SLOTS> {}\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPillGroupT.DefaultProps = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillGroupT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_GROUP_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillGroupT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,uBAA+C;AA6BxC,MAAM,eAA0C;AAAA,EACrD,OAAO;AAAA,EACP,UAAU,MAAM;AAClB;AAEO,MAAM,uBAA8D;AAAA,EACzE,OAAG,kDAAyB,+BAAc,iCAAgB;AAAA,EAC1D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,aAAa;AAAA,EACpF,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAC7D,YAAY,qCAAqC,EACjD,aAAa,MAAM,IAAI;AAAA,EAC1B,UAAU,kCAAU,KAAK,YAAY,8BAA8B,EAAE;AACvE;AAEO,MAAM,6BAA6B;",
+  "names": []
+}

package/dist/cjs/react-desc-prop-types.js

@@ -28,12 +28,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var react_desc_prop_types_exports = {};
 __export(react_desc_prop_types_exports, {
-  DSPillButtonDefaultProps: () => DSPillButtonDefaultProps,
-  DSPillButtonPropTypes: () => DSPillButtonPropTypes,
-  DSPillButtonPropTypesSchema: () => DSPillButtonPropTypesSchema,
-  DSPillGroupDefaultProps: () => DSPillGroupDefaultProps,
-  DSPillGroupPropTypes: () => DSPillGroupPropTypes,
-  DSPillGroupPropTypesSchema: () => DSPillGroupPropTypesSchema,
   DSPillV2DefaultProps: () => DSPillV2DefaultProps,
   DSPillV2PropTypes: () => DSPillV2PropTypes,
   DSPillV2PropTypesSchema: () => DSPillV2PropTypesSchema
@@ -43,6 +37,7 @@ var React = __toESM(require("react"));
 var import_ds_form = require("@elliemae/ds-form");
 var import_ds_menu_button = require("@elliemae/ds-menu-button");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("./constants/index.js");
 const DSPillV2DefaultProps = {
   innerRef: () => null,
   disabled: false,
@@ -75,15 +70,6 @@ const DSPillV2DefaultProps = {
   onDropdownClick: () => null,
   tabIndex: 0
 };
-const DSPillButtonDefaultProps = {
-  type: "right",
-  width: "100%",
-  height: "100%"
-};
-const DSPillGroupDefaultProps = {
-  width: "fit-content",
-  innerRef: () => null
-};
 const pillTypes = import_ds_props_helpers.PropTypes.oneOf([
   "label",
   "labelOnly",
@@ -96,6 +82,7 @@ const pillTypes = import_ds_props_helpers.PropTypes.oneOf([
 ]);
 const { children, ...menuButtonPropsPropTypes } = import_ds_menu_button.DSMenuButtonPropTypes;
 const DSPillV2PropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSPillV2Name, import_constants.PILL_V2_SLOTS),
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   label: import_ds_props_helpers.PropTypes.string.description("Label to show in the pill").isRequired,
@@ -142,25 +129,5 @@ const DSPillV2PropTypes = {
     "Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps"
   ).defaultValue(() => null).deprecated({ version: "25.3" })
 };
-const DSPillButtonPropTypes = {
-  ...import_ds_props_helpers.globalAttributesPropTypes,
-  ...import_ds_props_helpers.xstyledPropTypes,
-  type: import_ds_props_helpers.PropTypes.oneOf(["only", "left", "right"]).description("The position in which this button will be placed. Only used for css styling internally").defaultValue("right"),
-  width: import_ds_props_helpers.PropTypes.string.description("Width of the button").defaultValue("100%"),
-  height: import_ds_props_helpers.PropTypes.string.description("Height of the button").defaultValue("100%"),
-  innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.object, import_ds_props_helpers.PropTypes.func]).description("Inner ref to button component."),
-  "data-testid": import_ds_props_helpers.PropTypes.string.description("root element data-testid"),
-  applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
-    "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
-  ).defaultValue(false)
-};
-const DSPillGroupPropTypes = {
-  ...import_ds_props_helpers.globalAttributesPropTypes,
-  width: import_ds_props_helpers.PropTypes.string.description("Width of the group").defaultValue("fit-content"),
-  innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.object, import_ds_props_helpers.PropTypes.func]).description("Reference to the pill group wrapper").defaultValue(() => null),
-  children: import_ds_props_helpers.PropTypes.node.description("Pills to render in the group").isRequired
-};
 const DSPillV2PropTypesSchema = DSPillV2PropTypes;
-const DSPillButtonPropTypesSchema = DSPillButtonPropTypes;
-const DSPillGroupPropTypesSchema = DSPillGroupPropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nexport namespace DSPillT {\n  export interface DefaultProps {\n    innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    applyTooltipOverflowWrap: boolean;\n    hasError: boolean;\n    ariaLabel: string;\n    size: 'm' | 's';\n    labelTruncated: boolean;\n    tooltipValue: string;\n    iconLeft: JSX.Element | null;\n    IconLeft: React.ComponentType<{ label: string }> | null;\n    IconRight: React.ComponentType<{ label: string }> | null;\n    iconRight: JSX.Element | null;\n    onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputPlaceholder: string;\n    onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n    onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputWidth: number;\n    inputRender: React.ComponentType<any>;\n    dropdownProps: DSDropdownMenuT.Props;\n    onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    tabIndex: TypescriptHelpersT.WCAGTabIndex;\n  }\n  export interface OptionalProps {\n    inputId?: string;\n    menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n    trailingComma?: boolean;\n  }\n  export interface RequiredProps {\n    label: string;\n    type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n  }\n\n  export interface Props\n    extends RequiredProps,\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends RequiredProps,\n      DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface DSPillButtonDefaultPropsT {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n  export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n    type?: 'left' | 'right' | 'only';\n    width?: string;\n    height?: string;\n    applyAriaDisabled?: boolean;\n  }\n  export interface InternalButtonProps\n    extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface DefaultGroupPropsT {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n  export interface GroupProps extends GlobalAttributesT {\n    width?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n  export interface InternalGroupProps extends GlobalAttributesT {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  applyTooltipOverflowWrap: false, // turn on for > 25.1\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  IconLeft: null,\n  IconRight: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  // TODO: remove DSInput in favor of V2\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  inputRender: DSInput,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: DSPillT.DSPillButtonDefaultPropsT = {\n  type: 'right',\n  width: '100%',\n  height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: DSPillT.DefaultGroupPropsT = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf([\n  'label',\n  'labelOnly',\n  'value',\n  'input',\n  'dropdown',\n  'removable',\n  'readonly',\n  'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Label to show in the pill').isRequired,\n  type: pillTypes.description('The type of pill that you want to render').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n    .defaultValue(() => null),\n  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n  ariaLabel: PropTypes.string\n    .description('Aria label for the pill. If not provided we will use the label')\n    .defaultValue(''),\n  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n  iconLeft: PropTypes.node\n    .description('A component to show int the left of a readonly pill')\n    .defaultValue(null)\n    .deprecated({\n      version: '4.x',\n      message: 'Use IconLeft instead for accessibility reasons',\n    }),\n  IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n  IconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n  iconRight: PropTypes.node\n    .description('A component to show in the right of a readonly pill')\n    .defaultValue(null)\n    .deprecated({\n      version: '4.x',\n      message: 'Use IconRight instead for accessibility reasons',\n    }),\n  onRemove: PropTypes.func\n    .description('Callback triggered when removing a pill with the close icon')\n    .defaultValue(() => null),\n  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n  onInputChange: PropTypes.func\n    .description('Callback triggered when user provides input to the input pill')\n    .defaultValue(() => null),\n  onInputClear: PropTypes.func\n    .description('Callback triggered when the user clears an input pill')\n    .defaultValue(() => null),\n  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n  disabled: PropTypes.bool\n    .description('Whether the pill should be disabled. Only for value and removable pill')\n    .defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n  applyTooltipOverflowWrap: PropTypes.bool\n    .description(\n      'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n    )\n    .defaultValue(false),\n  hasError: PropTypes.bool\n    .description('Whether the pill should be in an error state. Only for input pill')\n    .defaultValue(false),\n  inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n  menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n    .description('Props for the menu button pill')\n    .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n  trailingComma: PropTypes.bool.description(\n    'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n  ),\n  dropdownProps: PropTypes.object\n    .description(\n      'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n    )\n    .defaultValue({})\n    .deprecated({ version: '25.3' }),\n  onDropdownClick: PropTypes.func\n    .description(\n      'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n    )\n    .defaultValue(() => null)\n    .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  'data-testid': PropTypes.string.description('root element data-testid'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n  ...globalAttributesPropTypes,\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillT.GroupProps>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { PILL_V2_SLOTS, DSPillV2Name } from './constants/index.js';\n\nexport namespace DSPillT {\n  export interface DefaultProps {\n    innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    applyTooltipOverflowWrap: boolean;\n    hasError: boolean;\n    ariaLabel: string;\n    size: 'm' | 's';\n    labelTruncated: boolean;\n    tooltipValue: string;\n    iconLeft: JSX.Element | null;\n    IconLeft: React.ComponentType<{ label: string }> | null;\n    IconRight: React.ComponentType<{ label: string }> | null;\n    iconRight: JSX.Element | null;\n    onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputPlaceholder: string;\n    onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n    onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputWidth: number;\n    inputRender: React.ComponentType<any>;\n    dropdownProps: DSDropdownMenuT.Props;\n    onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    tabIndex: TypescriptHelpersT.WCAGTabIndex;\n  }\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPillV2Name, typeof PILL_V2_SLOTS> {\n    inputId?: string;\n    menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n    trailingComma?: boolean;\n  }\n  export interface RequiredProps {\n    label: string;\n    type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n  }\n\n  export interface Props\n    extends RequiredProps,\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends RequiredProps,\n      DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface DSPillButtonDefaultPropsT {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n  export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n    type?: 'left' | 'right' | 'only';\n    width?: string;\n    height?: string;\n    applyAriaDisabled?: boolean;\n  }\n  export interface InternalButtonProps\n    extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface DefaultGroupPropsT {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n  export interface GroupProps extends GlobalAttributesT {\n    width?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n  export interface InternalGroupProps extends GlobalAttributesT {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  applyTooltipOverflowWrap: false, // turn on for > 25.1\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  IconLeft: null,\n  IconRight: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  // TODO: remove DSInput in favor of V2\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  inputRender: DSInput,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nconst pillTypes = PropTypes.oneOf([\n  'label',\n  'labelOnly',\n  'value',\n  'input',\n  'dropdown',\n  'removable',\n  'readonly',\n  'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_V2_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Label to show in the pill').isRequired,\n  type: pillTypes.description('The type of pill that you want to render').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n    .defaultValue(() => null),\n  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n  ariaLabel: PropTypes.string\n    .description('Aria label for the pill. If not provided we will use the label')\n    .defaultValue(''),\n  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n  iconLeft: PropTypes.node\n    .description('A component to show int the left of a readonly pill')\n    .defaultValue(null)\n    .deprecated({\n      version: '4.x',\n      message: 'Use IconLeft instead for accessibility reasons',\n    }),\n  IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n  IconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n  iconRight: PropTypes.node\n    .description('A component to show in the right of a readonly pill')\n    .defaultValue(null)\n    .deprecated({\n      version: '4.x',\n      message: 'Use IconRight instead for accessibility reasons',\n    }),\n  onRemove: PropTypes.func\n    .description('Callback triggered when removing a pill with the close icon')\n    .defaultValue(() => null),\n  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n  onInputChange: PropTypes.func\n    .description('Callback triggered when user provides input to the input pill')\n    .defaultValue(() => null),\n  onInputClear: PropTypes.func\n    .description('Callback triggered when the user clears an input pill')\n    .defaultValue(() => null),\n  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n  disabled: PropTypes.bool\n    .description('Whether the pill should be disabled. Only for value and removable pill')\n    .defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n  applyTooltipOverflowWrap: PropTypes.bool\n    .description(\n      'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n    )\n    .defaultValue(false),\n  hasError: PropTypes.bool\n    .description('Whether the pill should be in an error state. Only for input pill')\n    .defaultValue(false),\n  inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n  menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n    .description('Props for the menu button pill')\n    .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n  trailingComma: PropTypes.bool.description(\n    'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n  ),\n  dropdownProps: PropTypes.object\n    .description(\n      'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n    )\n    .defaultValue({})\n    .deprecated({ version: '25.3' }),\n  onDropdownClick: PropTypes.func\n    .description(\n      'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n    )\n    .defaultValue(() => null)\n    .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-pills-v2-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPillV2 } from '../index.js';\nimport type { DSPillT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPillT.Props;\ntype ComponentPropsInternals = DSPillT.InternalProps;\ntype ComponentPropsDefaultProps = DSPillT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPillT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPillT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  type: 'value',\n  label: 'label',\n};\nconst testOptionalProps: Required<ComponentPropsOptionalProps> = {\n  inputId: 'dsId',\n  menuButtonProps: {\n    options: [],\n    selectedItems: [],\n    onItemSelected: () => {},\n    onActivateItem: () => {},\n  },\n  trailingComma: true,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  ariaLabel: '',\n  size: 'm',\n  tooltipValue: '',\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  inputWidth: 72,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  IconLeft: () => null,\n  IconRight: () => null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n  applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  trailingComma: false,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  trailingComma: false,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  trailingComma: false,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSPillV2 {...testExplicitDefinition} />\n    <DSPillV2 {...testInferedTypeCompatibility} />\n    <DSPillV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSPillV2\n      type=\"value\"\n      label=\"label\"\n      inputId=\"dsId\"\n      innerRef={() => null}\n      disabled={false}\n      applyAriaDisabled={false}\n      readOnly={false}\n      hasError={false}\n      ariaLabel=\"\"\n      size=\"m\"\n      labelTruncated\n      tooltipValue=\"\"\n      iconLeft={null}\n      iconRight={null}\n      onRemove={() => null}\n      inputPlaceholder=\"\"\n      onInputChange={() => null}\n      onInputClear={() => null}\n      inputWidth={72}\n      // inputRender={() => <input type=\"text\"></input>}\n      dropdownProps={{\n        options: [],\n        isSkeleton: false,\n        isOpened: false,\n      }}\n      trailingComma={false}\n      onDropdownClick={() => null}\n      tabIndex={0}\n    >\n      Button Label\n    </DSPillV2>\n  </>\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPillV2 } from '../index.js';\nimport type { DSPillT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPillT.Props;\ntype ComponentPropsInternals = DSPillT.InternalProps;\ntype ComponentPropsDefaultProps = DSPillT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPillT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPillT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  type: 'value',\n  label: 'label',\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  inputId: 'dsId',\n  menuButtonProps: {\n    options: [],\n    selectedItems: [],\n    onItemSelected: () => {},\n    onActivateItem: () => {},\n  },\n  trailingComma: true,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  ariaLabel: '',\n  size: 'm',\n  tooltipValue: '',\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  inputWidth: 72,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  IconLeft: () => null,\n  IconRight: () => null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n  applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  trailingComma: false,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  trailingComma: false,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  trailingComma: false,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSPillV2 {...testExplicitDefinition} />\n    <DSPillV2 {...testInferedTypeCompatibility} />\n    <DSPillV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSPillV2\n      type=\"value\"\n      label=\"label\"\n      inputId=\"dsId\"\n      innerRef={() => null}\n      disabled={false}\n      applyAriaDisabled={false}\n      readOnly={false}\n      hasError={false}\n      ariaLabel=\"\"\n      size=\"m\"\n      labelTruncated\n      tooltipValue=\"\"\n      iconLeft={null}\n      iconRight={null}\n      onRemove={() => null}\n      inputPlaceholder=\"\"\n      onInputChange={() => null}\n      onInputClear={() => null}\n      inputWidth={72}\n      // inputRender={() => <input type=\"text\"></input>}\n      dropdownProps={{\n        options: [],\n        isSkeleton: false,\n        isOpened: false,\n      }}\n      trailingComma={false}\n      onDropdownClick={() => null}\n      tabIndex={0}\n    >\n      Button Label\n    </DSPillV2>\n  </>\n);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/components/Pill.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { DSPillName } from "../DSPillDefinitions.js";
+import { DSPillName } from "../constants/index.js";
 import { DSPillV2DefaultProps, DSPillV2PropTypesSchema } from "../react-desc-prop-types.js";
 import {
   DropdownPill,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Pill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
   "mappings": "AAAA,YAAY,WAAW;ACgCd;AAhCT,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB,+BAA6C;AAC5E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;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,oBAAoB,6BAAoD,OAAO,oBAAoB;AACzG,iCAA+B,mBAAmB,yBAAyB,UAAU;AACrF,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB,IAAI;AAE9C,SAAO,oBAAC,iBAAe,GAAG,mBAAmB;AAC/C;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
   "names": []
 }

package/dist/esm/components/index.js

@@ -1,5 +1,3 @@
 import * as React from "react";
 export * from "./Pill.js";
-export * from "./PillGroup.js";
-export * from "./PillButton.js";
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Pill.js';\nexport * from './PillGroup.js';\nexport * from './PillButton.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Pill.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
   "names": []
 }

package/dist/esm/components/styled.js

@@ -3,6 +3,9 @@ import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { Grid } from "@elliemae/ds-grid";
 import { DSMenuButton } from "@elliemae/ds-menu-button";
 import { css, styled } from "@elliemae/ds-system";
+import { PILL_V2_SLOTS, DSPillV2Name } from "../constants/index.js";
+import { PILL_BUTTON_SLOTS } from "../parts/DSPillButton/constants/index.js";
+import { PILL_GROUP_SLOTS } from "../parts/DSPillGroup/constants/index.js";
 const borderOutside = ({
   color,
   size = 1,
@@ -54,25 +57,31 @@ const commonPillWrapperCss = css`
   cursor: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "not-allowed" : "default"};
   color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
 `;
-const StyledLabelPillWrapper = styled(Grid)`
+const StyledLabelPillWrapper = styled(Grid, { name: DSPillV2Name, slot: 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 = styled(Grid)`
+const StyledLabelOnlyPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })`
   ${commonPillWrapperCss}
 
   font-weight: ${(props) => props.theme.fontWeights.regular};
   padding-left: ${(props) => props.hasIcon || props.applyAriaDisabled ? "0px !important" : "12px"};
 `;
-const StyledValuePillWrapper = styled(Grid)`
+const StyledValuePillWrapper = styled(Grid, {
+  name: DSPillV2Name,
+  slot: PILL_V2_SLOTS.WRAPPER
+})`
   ${commonPillWrapperCss}
 
   font-weight: ${(props) => props.theme.fontWeights.regular};
   padding-left: ${(props) => props.hasIcon || props.disabled ? "0px !important" : "12px"};
 `;
-const StyledInputPillWrapper = styled(Grid)`
+const StyledInputPillWrapper = styled(Grid, {
+  name: DSPillV2Name,
+  slot: PILL_V2_SLOTS.WRAPPER
+})`
   ${commonPillWrapperCss}
 
   background: ${(props) => props.theme.colors.neutral["000"]};
@@ -107,19 +116,25 @@ const StyledInputPillWrapper = styled(Grid)`
     height: 100%;
   }
 `;
-const StyledDropdownPillWrapper = styled(Grid)`
+const StyledDropdownPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })`
   ${commonPillWrapperCss}
   font-weight: ${(props) => props.theme.fontWeights.semibold};
 
   padding: 0 0 0 12px;
 `;
-const StyledReadonlyPillWrapper = styled(Grid)`
+const StyledReadonlyPillWrapper = styled(Grid, {
+  name: DSPillV2Name,
+  slot: 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 = styled(Grid)`
+const StyledRemovablePillWrapper = styled(Grid, {
+  name: DSPillV2Name,
+  slot: PILL_V2_SLOTS.WRAPPER
+})`
   ${commonPillWrapperCss}
   font-weight: ${(props) => props.theme.fontWeights.regular};
   padding: 0 0 0 12px;
@@ -129,7 +144,7 @@ const StyledRemovablePillWrapper = styled(Grid)`
     line-height: 1rem;
   }
 `;
-const StyledPillGroup = styled(Grid)`
+const StyledPillGroup = styled(Grid, { name: DSPillV2Name, slot: PILL_GROUP_SLOTS.PILL_GROUP })`
   width: ${({ width }) => width};
 
   // Pill edges
@@ -201,7 +216,11 @@ const StyledSpanWithTooltip = styled.span`
     ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}
   }
 `;
-const StyledPillButton = styled(DSButtonV2)`
+const StyledPillButton = styled(DSButtonV2, {
+  name: DSPillV2Name,
+  slot: PILL_BUTTON_SLOTS.PILL_BUTTON,
+  preserveLegacyDataTestId: true
+})`
   display: grid;
   place-items: center;
 
@@ -232,7 +251,7 @@ const StyledPillButton = styled(DSButtonV2)`
 
   cursor: pointer;
 `;
-const StyledPillMenuButton = styled(DSMenuButton)`
+const StyledPillMenuButton = styled(DSMenuButton, { name: DSPillV2Name, slot: PILL_V2_SLOTS.PILL_MENU_BUTTON })`
   display: grid;
   place-items: center;
 

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
   "names": []
 }

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

@@ -5,7 +5,7 @@ import { ChevronSmallDown } from "@elliemae/ds-icons";
 import { mergeRefs } from "@elliemae/ds-system";
 import React2, { useMemo, useRef } from "react";
 import { uid } from "uid";
-import { DSPillButton } from "../PillButton.js";
+import { DSPillButton } from "../../parts/DSPillButton/DSPillButton.js";
 import { TextComponent } from "../TextComponent.js";
 import { StyledDropdownPillWrapper } from "../styled.js";
 const DropdownPill = React2.memo(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/DropdownPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
   "mappings": "AAAA,YAAY,WAAW;ACmBjB,SAUE,KAVF;AAlBN,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAE1B,OAAOA,UAAS,SAAS,cAAc;AACvC,SAAS,WAAW;AAEpB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAEnC,MAAM,eAAeA,OAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,aAAa,OAAiC,IAAI;AAExD,UAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,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,8BAAC,iBAAc,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,UAAU,UAAU,YAAY,QAAwD;AAAA,kBACxF,cAAY,aAAa;AAAA,kBACzB,MAAK;AAAA,kBACL,SAAS;AAAA,kBAET,8BAAC,oBAAiB,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/esm/components/types/InputPill.js

@@ -4,7 +4,7 @@ import React2, { useCallback, useMemo, useRef, useState } from "react";
 import { uid } from "uid";
 import { CloseXsmall } from "@elliemae/ds-icons";
 import { StyledInputPillWrapper } from "../styled.js";
-import { DSPillButton } from "../PillButton.js";
+import { DSPillButton } from "../../parts/DSPillButton/DSPillButton.js";
 const InputPill = React2.memo(
   ({
     label,