@elliemae/ds-pills 3.22.0-next.8 → 3.22.0-rc.1

package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.tsx"],
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { useCallback, useState, useEffect, useLayoutEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { isFunction, isString, useShouldRecalculate, usePrevious } from '@elliemae/ds-utilities';\nimport { DropdownPill } from '../DropdownPill.js';\nimport { InputPill } from '../InputPill.js';\nimport { Pill } from '../Pill.js';\nimport { RemovablePill } from '../RemovablePill.js';\nimport { hasOptionChanged } from './utils.js';\n\nconst LabeledDropdownSinglePill = ({\n  label,\n  labelIsValue = false,\n  options,\n  value,\n  onSelect = () => null,\n  onChange,\n  maxWidth,\n  minWidth,\n  fixed = false,\n  ...menuProps\n}) => {\n  const [optionValue, setOptionValue] = useState(value);\n  const prevOptions = usePrevious(options);\n  const areOptionsEqual = useShouldRecalculate(hasOptionChanged(prevOptions, options));\n\n  useEffect(() => setOptionValue(value), [value]);\n\n  useEffect(() => {\n    const selectedValue = options.find((option) => option.selected);\n\n    if (selectedValue) {\n      setOptionValue(selectedValue);\n    } else if (!selectedValue) {\n      setOptionValue(options[0]);\n    }\n  }, [areOptionsEqual]);\n\n  useLayoutEffect(() => {\n    if (optionValue) {\n      const selectedValue = options.find((option) => option.id === optionValue.id);\n      setOptionValue(selectedValue);\n    }\n  }, [options]);\n\n  const selectOption = useCallback(\n    (option) => {\n      if (isFunction(onChange)) {\n        onChange(option);\n      }\n      setOptionValue(option);\n      onSelect(option);\n    },\n    [onChange, onSelect],\n  );\n\n  const onChangeInputValue = useCallback(\n    ({ target: { value: inputValue } }) => {\n      const { onChangeInput } = optionValue;\n\n      onChangeInput && onChangeInput(inputValue);\n    },\n    [optionValue],\n  );\n\n  const removeOption = (removedOption) => {\n    const { onRemove } = menuProps;\n    const { onChangeInput } = optionValue;\n    setOptionValue(null);\n    onChangeInput && onChangeInput('');\n    const newOption = { ...removedOption, input: '' };\n    onRemove && onRemove(newOption, removedOption);\n  };\n\n  const renderPill = (option, fixed) => {\n    const { input, onChangeInput, ...otherProps } = option;\n    let SelectedPill;\n    if (isString(input)) {\n      SelectedPill = InputPill;\n    } else if (fixed) {\n      SelectedPill = Pill;\n    } else {\n      SelectedPill = RemovablePill;\n    }\n\n    return (\n      <SelectedPill\n        key={option.id}\n        label={option.label}\n        onChange={onChangeInputValue}\n        onRemove={(e) => removeOption(option, e)}\n        value={input}\n        {...otherProps}\n      />\n    );\n  };\n\n  const renderSelection = () => {\n    if (!labelIsValue) {\n      if (optionValue) return renderPill(optionValue, fixed);\n      return <Pill label=\"-\" />;\n    }\n  };\n\n  return (\n    <>\n      <DropdownPill\n        {...menuProps}\n        label={!labelIsValue ? label : optionValue?.label}\n        maxWidth={maxWidth}\n        minWidth={minWidth}\n        onSelectMenuItem={selectOption}\n        options={[\n          {\n            ...menuProps,\n            type: 'SelectionGroup',\n            id: 'multi-selection-views',\n            multi: false,\n            items: options,\n            closeOnClick: true,\n          },\n        ]}\n        selection={{\n          'multi-selection-views': optionValue ? [optionValue?.id] : '',\n        }}\n        variant=\"title\"\n      />\n      {renderSelection()}\n    </>\n  );\n};\n\nLabeledDropdownSinglePill.propTypes = {\n  label: PropTypes.string,\n  labelIsValue: PropTypes.bool,\n  options: PropTypes.array,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  onSelect: PropTypes.func,\n  onChange: PropTypes.func,\n  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  fixed: PropTypes.bool,\n};\n\nexport { LabeledDropdownSinglePill };\nexport default LabeledDropdownSinglePill;\n"],
   "mappings": "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",
   "names": ["fixed"]

package/dist/esm/deprecated/LabeledDropdownPillsTypes/utils.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/utils.tsx"],
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/utils.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport { isEqual } from '@elliemae/ds-utilities';\nimport { omit } from 'lodash';\n\nexport const hasOptionChanged = (prevOptions, options) => {\n  if (prevOptions && options) {\n    const prevOptionsOmited = prevOptions.map((option) => omit(option, ['input', 'onChangeInput', 'mask']));\n    const optionsOmited = options.map((option) => omit(option, ['input', 'onChangeInput', 'mask']));\n\n    return isEqual(prevOptionsOmited, optionsOmited);\n  }\n\n  return false;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,eAAe;AACxB,SAAS,YAAY;AAEd,MAAM,mBAAmB,CAAC,aAAa,YAAY;AACxD,MAAI,eAAe,SAAS;AAC1B,UAAM,oBAAoB,YAAY,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,SAAS,iBAAiB,MAAM,CAAC,CAAC;AACtG,UAAM,gBAAgB,QAAQ,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,SAAS,iBAAiB,MAAM,CAAC,CAAC;AAE9F,WAAO,QAAQ,mBAAmB,aAAa;AAAA,EACjD;AAEA,SAAO;AACT;",
   "names": []

package/dist/esm/deprecated/LabeledPills.js

@@ -4,12 +4,21 @@ import { PropTypes, describe } from "@elliemae/ds-props-helpers";
 import { PillGroup } from "./PillGroup.js";
 import { RemovablePill } from "./RemovablePill.js";
 import { Pill } from "./Pill.js";
-const LabeledPills = ({ children, label = "", leftAddon, onFocusGroupSet, onFocusNextGroup, onFocusPreviousGroup }) => /* @__PURE__ */ jsxs(
+const LabeledPills = ({
+  children,
+  label = "",
+  leftAddon,
+  onFocusGroupSet,
+  onFocusNextGroup,
+  onFocusPreviousGroup,
+  className
+}) => /* @__PURE__ */ jsxs(
   PillGroup,
   {
     onFocusGroupSet,
     onFocusNextGroup,
     onFocusPreviousGroup,
+    containerProps: { className },
     children: [
       /* @__PURE__ */ jsx(Pill, { label, leftAddon, variant: "title", "data-testid": "pill-title" }),
       children
@@ -32,7 +41,9 @@ const props = {
   /** focus prev group callback */
   onFocusPreviousGroup: PropTypes.func.description("focus prev group callback"),
   /** focus group set callback */
-  onFocusGroupSet: PropTypes.func.description("focus group set callback")
+  onFocusGroupSet: PropTypes.func.description("focus group set callback"),
+  /** additional className */
+  className: PropTypes.string.description("Additional className")
 };
 LabeledPills.propTypes = props;
 LabeledPills.displayName = "LabeledPills";

package/dist/esm/deprecated/LabeledPills.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/LabeledPills.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { PillGroup } from './PillGroup.js';\nimport { RemovablePill } from './RemovablePill.js';\nimport { Pill } from './Pill.js';\n\nconst LabeledPills = ({ children, label = '', leftAddon, onFocusGroupSet, onFocusNextGroup, onFocusPreviousGroup }) => (\n  <PillGroup\n    onFocusGroupSet={onFocusGroupSet}\n    onFocusNextGroup={onFocusNextGroup}\n    onFocusPreviousGroup={onFocusPreviousGroup}\n  >\n    <Pill label={label} leftAddon={leftAddon} variant=\"title\" data-testid=\"pill-title\" />\n    {children}\n  </PillGroup>\n);\n\nconst props = {\n  /** labeled pill text label */\n  label: PropTypes.string.isRequired.description('pill text label'),\n  /** pill to add the label to */\n  children: PropTypes.arrayOf(\n    PropTypes.shape({\n      type: PropTypes.oneOf([PropTypes.instanceOf(Pill), PropTypes.instanceOf(RemovablePill)]),\n    }),\n  ).isRequired.description('pill to add the label to'),\n  /** addon component to left */\n  leftAddon: PropTypes.node.description('addon component to left'),\n  /** focus next group callback */\n  onFocusNextGroup: PropTypes.func.description('focus next group callback'),\n  /** focus prev group callback */\n  onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),\n  /** focus group set callback */\n  onFocusGroupSet: PropTypes.func.description('focus group set callback'),\n};\n\nLabeledPills.propTypes = props;\nLabeledPills.displayName = 'LabeledPills';\nconst DSLabeledPillsWithSchema = describe(LabeledPills);\nDSLabeledPillsWithSchema.propTypes = props;\n\nexport { LabeledPills, DSLabeledPillsWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACWrB,SAKE,KALF;AANF,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AAErB,MAAM,eAAe,CAAC,EAAE,UAAU,QAAQ,IAAI,WAAW,iBAAiB,kBAAkB,qBAAqB,MAC/G;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,0BAAC,QAAK,OAAc,WAAsB,SAAQ,SAAQ,eAAY,cAAa;AAAA,MAClF;AAAA;AAAA;AACH;AAGF,MAAM,QAAQ;AAAA;AAAA,EAEZ,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,UAAU,UAAU;AAAA,IAClB,UAAU,MAAM;AAAA,MACd,MAAM,UAAU,MAAM,CAAC,UAAU,WAAW,IAAI,GAAG,UAAU,WAAW,aAAa,CAAC,CAAC;AAAA,IACzF,CAAC;AAAA,EACH,EAAE,WAAW,YAAY,0BAA0B;AAAA;AAAA,EAEnD,WAAW,UAAU,KAAK,YAAY,yBAAyB;AAAA;AAAA,EAE/D,kBAAkB,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAExE,sBAAsB,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAE5E,iBAAiB,UAAU,KAAK,YAAY,0BAA0B;AACxE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,2BAA2B,SAAS,YAAY;AACtD,yBAAyB,YAAY;",
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/LabeledPills.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { PillGroup } from './PillGroup.js';\nimport { RemovablePill } from './RemovablePill.js';\nimport { Pill } from './Pill.js';\n\nconst LabeledPills = ({\n  children,\n  label = '',\n  leftAddon,\n  onFocusGroupSet,\n  onFocusNextGroup,\n  onFocusPreviousGroup,\n  className,\n}) => (\n  <PillGroup\n    onFocusGroupSet={onFocusGroupSet}\n    onFocusNextGroup={onFocusNextGroup}\n    onFocusPreviousGroup={onFocusPreviousGroup}\n    containerProps={{ className }}\n  >\n    <Pill label={label} leftAddon={leftAddon} variant=\"title\" data-testid=\"pill-title\" />\n    {children}\n  </PillGroup>\n);\n\nconst props = {\n  /** labeled pill text label */\n  label: PropTypes.string.isRequired.description('pill text label'),\n  /** pill to add the label to */\n  children: PropTypes.arrayOf(\n    PropTypes.shape({\n      type: PropTypes.oneOf([PropTypes.instanceOf(Pill), PropTypes.instanceOf(RemovablePill)]),\n    }),\n  ).isRequired.description('pill to add the label to'),\n  /** addon component to left */\n  leftAddon: PropTypes.node.description('addon component to left'),\n  /** focus next group callback */\n  onFocusNextGroup: PropTypes.func.description('focus next group callback'),\n  /** focus prev group callback */\n  onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),\n  /** focus group set callback */\n  onFocusGroupSet: PropTypes.func.description('focus group set callback'),\n  /** additional className */\n  className: PropTypes.string.description('Additional className'),\n};\n\nLabeledPills.propTypes = props;\nLabeledPills.displayName = 'LabeledPills';\nconst DSLabeledPillsWithSchema = describe(LabeledPills);\nDSLabeledPillsWithSchema.propTypes = props;\n\nexport { LabeledPills, DSLabeledPillsWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBrB,SAME,KANF;AAdF,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AAErB,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,EAAE,UAAU;AAAA,IAE5B;AAAA,0BAAC,QAAK,OAAc,WAAsB,SAAQ,SAAQ,eAAY,cAAa;AAAA,MAClF;AAAA;AAAA;AACH;AAGF,MAAM,QAAQ;AAAA;AAAA,EAEZ,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,UAAU,UAAU;AAAA,IAClB,UAAU,MAAM;AAAA,MACd,MAAM,UAAU,MAAM,CAAC,UAAU,WAAW,IAAI,GAAG,UAAU,WAAW,aAAa,CAAC,CAAC;AAAA,IACzF,CAAC;AAAA,EACH,EAAE,WAAW,YAAY,0BAA0B;AAAA;AAAA,EAEnD,WAAW,UAAU,KAAK,YAAY,yBAAyB;AAAA;AAAA,EAE/D,kBAAkB,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAExE,sBAAsB,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAE5E,iBAAiB,UAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAEtE,WAAW,UAAU,OAAO,YAAY,sBAAsB;AAChE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,2BAA2B,SAAS,YAAY;AACtD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/deprecated/OverflowPill.js

@@ -5,7 +5,7 @@ import { PropTypes, describe } from "@elliemae/ds-props-helpers";
 import { useFocusGroupItem } from "@elliemae/ds-shared";
 import { DSTooltip } from "@elliemae/ds-tooltip";
 import { Pill } from "./Pill.js";
-const OverflowPill = ({ containerProps = {}, label = "", options = [] }) => {
+const OverflowPill = ({ containerProps = {}, label = "", options = [], className = "" }) => {
   const ref = useRef(null);
   const [tooltipIsOpen, setTooltipIsOpen] = useState(false);
   const [tooltipText, setTooltipText] = useState("");
@@ -30,7 +30,7 @@ const OverflowPill = ({ containerProps = {}, label = "", options = [] }) => {
       triggerComponent: /* @__PURE__ */ jsx(
         Pill,
         {
-          className: "overflow-pill",
+          className: `${"overflow-pill"} ${className}`,
           containerProps,
           innerRef: ref,
           label,
@@ -48,7 +48,9 @@ const props = {
   /** pill text label */
   label: PropTypes.string.isRequired.description("pill text label"),
   /** overflow pills options */
-  options: PropTypes.array.description("overflow pills options")
+  options: PropTypes.array.description("overflow pills options"),
+  /** additional className */
+  className: PropTypes.string.description("Additional className")
 };
 OverflowPill.propTypes = props;
 OverflowPill.displayName = "OverflowPill";

package/dist/esm/deprecated/OverflowPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/OverflowPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { useRef, useState, useEffect } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { DSTooltip } from '@elliemae/ds-tooltip';\nimport { Pill } from './Pill.js';\n\nconst OverflowPill = ({ containerProps = {}, label = '', options = [] }) => {\n  const ref = useRef(null);\n  const [tooltipIsOpen, setTooltipIsOpen] = useState(false);\n  const [tooltipText, setTooltipText] = useState('');\n\n  useEffect(() => {\n    let text = '';\n    options.forEach((option) => {\n      if (!tooltipText || option === options[0]) {\n        text = `${option.label}`;\n      } else {\n        text = text.concat(`, ${option.label}`);\n      }\n    });\n    setTooltipText(text);\n  }, [options]);\n\n  useFocusGroupItem(ref);\n\n  return (\n    <DSTooltip\n      isOpen={tooltipIsOpen}\n      title={tooltipText}\n      zIndex={11}\n      triggerComponent={\n        <Pill\n          className=\"overflow-pill\"\n          containerProps={containerProps}\n          innerRef={ref}\n          label={label}\n          tabIndex={-1}\n          onMouseEnter={() => setTooltipIsOpen(true)}\n          onMouseLeave={() => setTooltipIsOpen(false)}\n        />\n      }\n    />\n  );\n};\n\nconst props = {\n  /** props to inject to pill wrapper */\n  containerProps: PropTypes.object.description('props to inject to pill wrapper'),\n  /** pill text label */\n  label: PropTypes.string.isRequired.description('pill text label'),\n  /** overflow pills options */\n  options: PropTypes.array.description('overflow pills options'),\n};\n\nOverflowPill.propTypes = props;\nOverflowPill.displayName = 'OverflowPill';\nconst DSOverflowPillWithSchema = describe(OverflowPill);\nDSOverflowPillWithSchema.propTypes = props;\n\nexport { OverflowPill, DSOverflowPillWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmCf;AA/BR,SAAgB,QAAQ,UAAU,iBAAiB;AACnD,SAAS,WAAW,gBAAgB;AACpC,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAErB,MAAM,eAAe,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,CAAC,EAAE,MAAM;AAC1E,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,YAAU,MAAM;AACd,QAAI,OAAO;AACX,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,CAAC,eAAe,WAAW,QAAQ,CAAC,GAAG;AACzC,eAAO,GAAG,OAAO;AAAA,MACnB,OAAO;AACL,eAAO,KAAK,OAAO,KAAK,OAAO,OAAO;AAAA,MACxC;AAAA,IACF,CAAC;AACD,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,OAAO,CAAC;AAEZ,oBAAkB,GAAG;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,kBACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,UAAU;AAAA,UACV,cAAc,MAAM,iBAAiB,IAAI;AAAA,UACzC,cAAc,MAAM,iBAAiB,KAAK;AAAA;AAAA,MAC5C;AAAA;AAAA,EAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,iCAAiC;AAAA;AAAA,EAE9E,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,SAAS,UAAU,MAAM,YAAY,wBAAwB;AAC/D;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,2BAA2B,SAAS,YAAY;AACtD,yBAAyB,YAAY;",
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/OverflowPill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { useRef, useState, useEffect } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { DSTooltip } from '@elliemae/ds-tooltip';\nimport { Pill } from './Pill.js';\n\nconst OverflowPill = ({ containerProps = {}, label = '', options = [], className = '' }) => {\n  const ref = useRef(null);\n  const [tooltipIsOpen, setTooltipIsOpen] = useState(false);\n  const [tooltipText, setTooltipText] = useState('');\n\n  useEffect(() => {\n    let text = '';\n    options.forEach((option) => {\n      if (!tooltipText || option === options[0]) {\n        text = `${option.label}`;\n      } else {\n        text = text.concat(`, ${option.label}`);\n      }\n    });\n    setTooltipText(text);\n  }, [options]);\n\n  useFocusGroupItem(ref);\n\n  return (\n    <DSTooltip\n      isOpen={tooltipIsOpen}\n      title={tooltipText}\n      zIndex={11}\n      triggerComponent={\n        <Pill\n          className={`${'overflow-pill'} ${className}`}\n          containerProps={containerProps}\n          innerRef={ref}\n          label={label}\n          tabIndex={-1}\n          onMouseEnter={() => setTooltipIsOpen(true)}\n          onMouseLeave={() => setTooltipIsOpen(false)}\n        />\n      }\n    />\n  );\n};\n\nconst props = {\n  /** props to inject to pill wrapper */\n  containerProps: PropTypes.object.description('props to inject to pill wrapper'),\n  /** pill text label */\n  label: PropTypes.string.isRequired.description('pill text label'),\n  /** overflow pills options */\n  options: PropTypes.array.description('overflow pills options'),\n  /** additional className */\n  className: PropTypes.string.description('Additional className'),\n};\n\nOverflowPill.propTypes = props;\nOverflowPill.displayName = 'OverflowPill';\nconst DSOverflowPillWithSchema = describe(OverflowPill);\nDSOverflowPillWithSchema.propTypes = props;\n\nexport { OverflowPill, DSOverflowPillWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmCf;AA/BR,SAAgB,QAAQ,UAAU,iBAAiB;AACnD,SAAS,WAAW,gBAAgB;AACpC,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAErB,MAAM,eAAe,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,CAAC,GAAG,YAAY,GAAG,MAAM;AAC1F,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,YAAU,MAAM;AACd,QAAI,OAAO;AACX,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,CAAC,eAAe,WAAW,QAAQ,CAAC,GAAG;AACzC,eAAO,GAAG,OAAO;AAAA,MACnB,OAAO;AACL,eAAO,KAAK,OAAO,KAAK,OAAO,OAAO;AAAA,MACxC;AAAA,IACF,CAAC;AACD,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,OAAO,CAAC;AAEZ,oBAAkB,GAAG;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,kBACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,mBAAmB;AAAA,UACjC;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,UAAU;AAAA,UACV,cAAc,MAAM,iBAAiB,IAAI;AAAA,UACzC,cAAc,MAAM,iBAAiB,KAAK;AAAA;AAAA,MAC5C;AAAA;AAAA,EAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,iCAAiC;AAAA;AAAA,EAE9E,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,SAAS,UAAU,MAAM,YAAY,wBAAwB;AAAA;AAAA,EAE7D,WAAW,UAAU,OAAO,YAAY,sBAAsB;AAChE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,2BAA2B,SAAS,YAAY;AACtD,yBAAyB,YAAY;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/Pill.tsx"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/Pill.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst pillBlockName = 'pill';\n\nconst PillWrapper = aggregatedClasses('div')(pillBlockName, null, ({ size, variant }) => ({\n  [variant]: !!variant,\n  [size]: !!size,\n}));\nconst PillLabel = aggregatedClasses('span')(pillBlockName, 'label');\nconst PillAddon = aggregatedClasses('div')(pillBlockName, 'addon');\n\nconst Pill = ({\n  containerProps = {},\n  label = '',\n  leftAddon,\n  rightAddon,\n  variant = 'value',\n  size = 'm',\n  ...otherProps\n}) => {\n  useDeprecateComponent({ componentName: 'ds-pills', version: 'TBD Date: 2023 Q3' });\n\n  return (\n    <PillWrapper {...containerProps} classProps={{ variant, size }} {...otherProps}>\n      {leftAddon && <PillAddon>{leftAddon}</PillAddon>}\n      <PillLabel>{label}</PillLabel>\n      {rightAddon && <PillAddon>{rightAddon}</PillAddon>}\n    </PillWrapper>\n  );\n};\n\nconst props = {\n  /** props to inject to pill wrapper */\n  containerProps: PropTypes.object.description('props to inject to pill wrapper'),\n  /** pill text label */\n  label: PropTypes.string.isRequired.description('pill text label'),\n  /** pill size */\n  size: PropTypes.oneOf(['m', 'l']).description('pill size'),\n  /** pill variant */\n  variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),\n  /** addon component to left */\n  leftAddon: PropTypes.node.description('addon component to left'),\n  /** addon component to right */\n  rightAddon: PropTypes.node.description('addon component to right'),\n};\n\nPill.propTypes = props;\nPill.displayName = 'Pill';\nconst DSPillWithSchema = describe(Pill);\nDSPillWithSchema.propTypes = props;\n\nexport { Pill, DSPillWithSchema };\nexport default Pill;\n"],
   "mappings": "AAAA,YAAY,WAAW;AC8BnB,SACgB,KADhB;AAzBJ,SAAS,6BAA6B;AACtC,SAAS,WAAW,gBAAgB;AACpC,SAAS,yBAAyB;AAElC,MAAM,gBAAgB;AAEtB,MAAM,cAAc,kBAAkB,KAAK,EAAE,eAAe,MAAM,CAAC,EAAE,MAAM,QAAQ,OAAO;AAAA,EACxF,CAAC,OAAO,GAAG,CAAC,CAAC;AAAA,EACb,CAAC,IAAI,GAAG,CAAC,CAAC;AACZ,EAAE;AACF,MAAM,YAAY,kBAAkB,MAAM,EAAE,eAAe,OAAO;AAClE,MAAM,YAAY,kBAAkB,KAAK,EAAE,eAAe,OAAO;AAEjE,MAAM,OAAO,CAAC;AAAA,EACZ,iBAAiB,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,wBAAsB,EAAE,eAAe,YAAY,SAAS,oBAAoB,CAAC;AAEjF,SACE,qBAAC,eAAa,GAAG,gBAAgB,YAAY,EAAE,SAAS,KAAK,GAAI,GAAG,YACjE;AAAA,iBAAa,oBAAC,aAAW,qBAAU;AAAA,IACpC,oBAAC,aAAW,iBAAM;AAAA,IACjB,cAAc,oBAAC,aAAW,sBAAW;AAAA,KACxC;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,iCAAiC;AAAA;AAAA,EAE9E,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,MAAM,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,WAAW;AAAA;AAAA,EAEzD,SAAS,UAAU,MAAM,CAAC,SAAS,OAAO,CAAC,EAAE,YAAY,cAAc;AAAA;AAAA,EAEvE,WAAW,UAAU,KAAK,YAAY,yBAAyB;AAAA;AAAA,EAE/D,YAAY,UAAU,KAAK,YAAY,0BAA0B;AACnE;AAEA,KAAK,YAAY;AACjB,KAAK,cAAc;AACnB,MAAM,mBAAmB,SAAS,IAAI;AACtC,iBAAiB,YAAY;AAG7B,IAAO,eAAQ;",
   "names": []

package/dist/esm/deprecated/PillGroup.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/PillGroup.tsx"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/PillGroup.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { FocusGroupProvider } from '@elliemae/ds-shared';\n\nconst pillGroupBlockName = 'pill-group';\n\nexport const Container = aggregatedClasses('div')(pillGroupBlockName);\n\nconst PillGroup = ({ containerProps = {}, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, children }) => (\n  <FocusGroupProvider\n    keyBindings={{\n      Tab: 'next',\n    }}\n    onFocusGroupSet={onFocusGroupSet}\n    onFocusNextGroup={onFocusNextGroup}\n    onFocusPreviousGroup={onFocusPreviousGroup}\n    orientation=\"horizontal\"\n  >\n    <Container {...containerProps}>{children}</Container>\n  </FocusGroupProvider>\n);\n\nconst props = {\n  /** props injected to component wrapper */\n  containerProps: PropTypes.object.description('props injected to component wrapper'),\n  /** focus next group callback */\n  onFocusNextGroup: PropTypes.func.description('focus next group callback'),\n  /** focus prev group callback */\n  onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),\n  /** focus group set callback */\n  onFocusGroupSet: PropTypes.func.description('focus group set callback'),\n  /** pill components */\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired.description(\n    'pill components',\n  ),\n};\n\nPillGroup.propTypes = props;\nPillGroup.displayName = 'PillGroup';\nconst DSPillGroupWithSchema = describe(PillGroup);\nDSPillGroupWithSchema.propTypes = props;\n\nexport { PillGroup, DSPillGroupWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACuBnB;AAlBJ,SAAS,UAAU,iBAAiB;AACpC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAEnC,MAAM,qBAAqB;AAEpB,MAAM,YAAY,kBAAkB,KAAK,EAAE,kBAAkB;AAEpE,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,kBAAkB,sBAAsB,iBAAiB,SAAS,MAC1G;AAAA,EAAC;AAAA;AAAA,IACC,aAAa;AAAA,MACX,KAAK;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAY;AAAA,IAEZ,8BAAC,aAAW,GAAG,gBAAiB,UAAS;AAAA;AAC3C;AAGF,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,qCAAqC;AAAA;AAAA,EAElF,kBAAkB,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAExE,sBAAsB,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAE5E,iBAAiB,UAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAEtE,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,GAAG,UAAU,IAAI,CAAC,EAAE,WAAW;AAAA,IAC5F;AAAA,EACF;AACF;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;",
   "names": []

package/dist/esm/deprecated/ReadOnlyPill.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ReadOnlyPill.tsx"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ReadOnlyPill.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { InfoCircleSmall } from '@elliemae/ds-icons';\nimport { DSModal, MODAL_TYPE_V2 } from '@elliemae/ds-modal';\nimport { DSPopover } from '@elliemae/ds-popover';\nimport { Pill } from './Pill.js';\n\nconst ReadOnlyPill = ({\n  containerProps = {},\n  modalContent = '',\n  label = '',\n  leftAddon,\n  modalTitle = '',\n  tooltipText = '',\n}) => {\n  const ref = useRef(null);\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n  const toggle = () => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <>\n      <Pill\n        data-testid=\"read-only-pill\"\n        className=\"removable-pill\"\n        containerProps={containerProps}\n        innerRef={ref}\n        label={label}\n        leftAddon={leftAddon}\n        rightAddon={\n          <DSPopover\n            isOpen={tooltipText && isTooltipOpen}\n            content={tooltipText}\n            placement=\"top\"\n            showArrow\n            renderTrigger={({ ref }) => (\n              <InfoCircleSmall\n                role=\"button\"\n                data-testid=\"read-only-info-btn\"\n                className=\"remove-pill-button\"\n                onClick={toggle}\n                onMouseEnter={() => setIsTooltipOpen(true)}\n                onMouseLeave={() => setIsTooltipOpen(false)}\n                color={['brand-primary', '600']}\n                innerRef={ref}\n              />\n            )}\n          />\n        }\n        tabIndex={-1}\n      />\n      <DSModal\n        isOpen={isModalOpen}\n        showClose\n        shouldCloseOnOverlayClick\n        modalTitle={modalTitle}\n        modalType={MODAL_TYPE_V2.INFORMATION}\n        onClose={toggle}\n        version={2}\n      >\n        {modalContent}\n      </DSModal>\n    </>\n  );\n};\n\nconst props = {\n  /** props injected to component wrapper */\n  containerProps: PropTypes.object.description('props injected to component wrapper'),\n  /** labeled pill text label */\n  label: PropTypes.string.isRequired.description('pill text label'),\n  /** addon component to left */\n  leftAddon: PropTypes.node.description('addon component to left'),\n  /** read only pill modal content */\n  modalContent: PropTypes.string.description('read only pill modal content'),\n  /** read only pill modal title */\n  modalTitle: PropTypes.string.description('read only pill modal title'),\n  tooltipText: PropTypes.string.description('text to display in tooltip'),\n};\n\nReadOnlyPill.propTypes = props;\nReadOnlyPill.displayName = 'ReadOnlyPill';\nconst DSReadOnlyPillWithSchema = describe(ReadOnlyPill);\nDSReadOnlyPillWithSchema.propTypes = props;\n\nexport { ReadOnlyPill, DSReadOnlyPillWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;AC4BnB,mBAeU,KAfV;AAxBJ,SAAgB,QAAQ,gBAAgB;AACxC,SAAS,WAAW,gBAAgB;AACpC,SAAS,uBAAuB;AAChC,SAAS,SAAS,qBAAqB;AACvC,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAErB,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,eAAe;AAAA,EACf,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AAAA,EACb,cAAc;AAChB,MAAM;AACJ,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM,SAAS,MAAM;AACnB,mBAAe,CAAC,WAAW;AAAA,EAC7B;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,YACE;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,eAAe;AAAA,YACvB,SAAS;AAAA,YACT,WAAU;AAAA,YACV,WAAS;AAAA,YACT,eAAe,CAAC,EAAE,KAAAA,KAAI,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAc,MAAM,iBAAiB,IAAI;AAAA,gBACzC,cAAc,MAAM,iBAAiB,KAAK;AAAA,gBAC1C,OAAO,CAAC,iBAAiB,KAAK;AAAA,gBAC9B,UAAUA;AAAA;AAAA,YACZ;AAAA;AAAA,QAEJ;AAAA,QAEF,UAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,WAAS;AAAA,QACT,2BAAyB;AAAA,QACzB;AAAA,QACA,WAAW,cAAc;AAAA,QACzB,SAAS;AAAA,QACT,SAAS;AAAA,QAER;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,qCAAqC;AAAA;AAAA,EAElF,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,WAAW,UAAU,KAAK,YAAY,yBAAyB;AAAA;AAAA,EAE/D,cAAc,UAAU,OAAO,YAAY,8BAA8B;AAAA;AAAA,EAEzE,YAAY,UAAU,OAAO,YAAY,4BAA4B;AAAA,EACrE,aAAa,UAAU,OAAO,YAAY,4BAA4B;AACxE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,2BAA2B,SAAS,YAAY;AACtD,yBAAyB,YAAY;",
   "names": ["ref"]

package/dist/esm/deprecated/RemovablePill.js

@@ -6,13 +6,13 @@ import { PropTypes, describe } from "@elliemae/ds-props-helpers";
 import { CloseXsmall } from "@elliemae/ds-icons";
 import { useFocusGroupItem } from "@elliemae/ds-shared";
 import { Pill } from "./Pill.js";
-const RemovablePill = ({ containerProps = {}, label = "", onRemove, size = "m", leftAddon }) => {
+const RemovablePill = ({ containerProps = {}, label = "", onRemove, size = "m", leftAddon, className = "" }) => {
   const ref = useRef(null);
   const { focusPrevious } = useFocusGroupItem(ref);
   return /* @__PURE__ */ jsx(
     Pill,
     {
-      className: "removable-pill",
+      className: `${"removable-pill"} ${className}`,
       "data-testid": "removable-pill",
       containerProps,
       innerRef: ref,
@@ -41,7 +41,9 @@ const props = {
   /** pill size */
   size: PropTypes.oneOf(["m", "l"]).description("pill size"),
   /** addon component to left */
-  leftAddon: PropTypes.node.description("addon component to left")
+  leftAddon: PropTypes.node.description("addon component to left"),
+  /** additional className */
+  className: PropTypes.string.description("Additional className")
 };
 RemovablePill.propTypes = props;
 RemovablePill.displayName = "RemovablePill";

package/dist/esm/deprecated/RemovablePill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/RemovablePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { useRef } from 'react';\nimport { isFunction } from '@elliemae/ds-utilities';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { Pill } from './Pill.js';\n\nconst RemovablePill = ({ containerProps = {}, label = '', onRemove, size = 'm', leftAddon }) => {\n  const ref = useRef(null);\n  const { focusPrevious } = useFocusGroupItem(ref);\n  return (\n    <Pill\n      className=\"removable-pill\"\n      data-testid=\"removable-pill\"\n      containerProps={containerProps}\n      innerRef={ref}\n      size={size}\n      label={label}\n      leftAddon={leftAddon}\n      onKeyDown={(e) => {\n        if (e.key === 'Backspace' && isFunction(onRemove)) {\n          onRemove();\n          if (isFunction(focusPrevious)) focusPrevious();\n        }\n      }}\n      rightAddon={\n        <CloseXsmall role=\"button\" data-testid=\"remove-pill-button\" className=\"remove-pill-button\" onClick={onRemove} />\n      }\n      tabIndex={-1}\n    />\n  );\n};\n\nconst props = {\n  /** props injected to component wrapper */\n  containerProps: PropTypes.object.description('props injected to component wrapper'),\n  /** labeled pill text label */\n  label: PropTypes.string.isRequired.description('pill text label'),\n  /** remove click callback */\n  onRemove: PropTypes.func.description('remove click callback'),\n  /** pill size */\n  size: PropTypes.oneOf(['m', 'l']).description('pill size'),\n  /** addon component to left */\n  leftAddon: PropTypes.node.description('addon component to left'),\n};\n\nRemovablePill.propTypes = props;\nRemovablePill.displayName = 'RemovablePill';\nconst DSRemovablePillWithSchema = describe(RemovablePill);\nDSRemovablePillWithSchema.propTypes = props;\n\nexport { RemovablePill, DSRemovablePillWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8Bf;AA1BR,SAAgB,cAAc;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,WAAW,gBAAgB;AACpC,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,YAAY;AAErB,MAAM,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,OAAO,KAAK,UAAU,MAAM;AAC9F,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,EAAE,cAAc,IAAI,kBAAkB,GAAG;AAC/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,eAAe,WAAW,QAAQ,GAAG;AACjD,mBAAS;AACT,cAAI,WAAW,aAAa;AAAG,0BAAc;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,YACE,oBAAC,eAAY,MAAK,UAAS,eAAY,sBAAqB,WAAU,sBAAqB,SAAS,UAAU;AAAA,MAEhH,UAAU;AAAA;AAAA,EACZ;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,qCAAqC;AAAA;AAAA,EAElF,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,UAAU,UAAU,KAAK,YAAY,uBAAuB;AAAA;AAAA,EAE5D,MAAM,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,WAAW;AAAA;AAAA,EAEzD,WAAW,UAAU,KAAK,YAAY,yBAAyB;AACjE;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,4BAA4B,SAAS,aAAa;AACxD,0BAA0B,YAAY;",
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/RemovablePill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { useRef } from 'react';\nimport { isFunction } from '@elliemae/ds-utilities';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { Pill } from './Pill.js';\n\nconst RemovablePill = ({ containerProps = {}, label = '', onRemove, size = 'm', leftAddon, className = '' }) => {\n  const ref = useRef(null);\n  const { focusPrevious } = useFocusGroupItem(ref);\n  return (\n    <Pill\n      className={`${'removable-pill'} ${className}`}\n      data-testid=\"removable-pill\"\n      containerProps={containerProps}\n      innerRef={ref}\n      size={size}\n      label={label}\n      leftAddon={leftAddon}\n      onKeyDown={(e) => {\n        if (e.key === 'Backspace' && isFunction(onRemove)) {\n          onRemove();\n          if (isFunction(focusPrevious)) focusPrevious();\n        }\n      }}\n      rightAddon={\n        <CloseXsmall role=\"button\" data-testid=\"remove-pill-button\" className=\"remove-pill-button\" onClick={onRemove} />\n      }\n      tabIndex={-1}\n    />\n  );\n};\n\nconst props = {\n  /** props injected to component wrapper */\n  containerProps: PropTypes.object.description('props injected to component wrapper'),\n  /** labeled pill text label */\n  label: PropTypes.string.isRequired.description('pill text label'),\n  /** remove click callback */\n  onRemove: PropTypes.func.description('remove click callback'),\n  /** pill size */\n  size: PropTypes.oneOf(['m', 'l']).description('pill size'),\n  /** addon component to left */\n  leftAddon: PropTypes.node.description('addon component to left'),\n  /** additional className */\n  className: PropTypes.string.description('Additional className'),\n};\n\nRemovablePill.propTypes = props;\nRemovablePill.displayName = 'RemovablePill';\nconst DSRemovablePillWithSchema = describe(RemovablePill);\nDSRemovablePillWithSchema.propTypes = props;\n\nexport { RemovablePill, DSRemovablePillWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8Bf;AA1BR,SAAgB,cAAc;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,WAAW,gBAAgB;AACpC,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,YAAY;AAErB,MAAM,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,OAAO,KAAK,WAAW,YAAY,GAAG,MAAM;AAC9G,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,EAAE,cAAc,IAAI,kBAAkB,GAAG;AAC/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,oBAAoB;AAAA,MAClC,eAAY;AAAA,MACZ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,eAAe,WAAW,QAAQ,GAAG;AACjD,mBAAS;AACT,cAAI,WAAW,aAAa;AAAG,0BAAc;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,YACE,oBAAC,eAAY,MAAK,UAAS,eAAY,sBAAqB,WAAU,sBAAqB,SAAS,UAAU;AAAA,MAEhH,UAAU;AAAA;AAAA,EACZ;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,qCAAqC;AAAA;AAAA,EAElF,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,UAAU,UAAU,KAAK,YAAY,uBAAuB;AAAA;AAAA,EAE5D,MAAM,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,WAAW;AAAA;AAAA,EAEzD,WAAW,UAAU,KAAK,YAAY,yBAAyB;AAAA;AAAA,EAE/D,WAAW,UAAU,OAAO,YAAY,sBAAsB;AAChE;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,4BAA4B,SAAS,aAAa;AACxD,0BAA0B,YAAY;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/index.tsx"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Pill.js';\nexport * from './PillGroup.js';\nexport * from './LabeledDropdownPills.js';\nexport * from './LabeledPills.js';\nexport * from './DropdownPill.js';\nexport * from './RemovablePill.js';\nexport * from './ReadOnlyPill.js';\nexport * from './OverflowPill.js';\n\nexport { default } from './Pill.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,SAAS,WAAAA,gBAAe;",
   "names": ["default"]

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 export * from "./deprecated/index.js";
-export * from "./components/index.js";
 import { default as default2 } from "./deprecated/index.js";
+export * from "@elliemae/ds-pills-v2";
 export {
   default2 as default
 };

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './deprecated/index.js';\nexport * from './components/index.js';\nexport { default } from './deprecated/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,SAAS,WAAAA,gBAAe;",
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './deprecated/index.js';\nexport { default } from './deprecated/index.js';\nexport * from '@elliemae/ds-pills-v2';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,SAAS,WAAAA,gBAAe;AACxB,cAAc;",
   "names": ["default"]
 }

package/dist/types/deprecated/LabeledDropdownPills.d.ts

@@ -1,5 +1,5 @@
 declare const LabeledDropdownPills: {
-    ({ label, value, type, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, maxWidth, minWidth, fixed, ...menuProps }: {
+    ({ label, value, type, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, maxWidth, minWidth, fixed, className, ...menuProps }: {
         [x: string]: any;
         label?: string | undefined;
         value: any;
@@ -10,6 +10,7 @@ declare const LabeledDropdownPills: {
         maxWidth: any;
         minWidth: any;
         fixed: any;
+        className: any;
     }): import("react/jsx-runtime.js").JSX.Element;
     propTypes: {
         /** pill type */
@@ -28,6 +29,8 @@ declare const LabeledDropdownPills: {
         fixed: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /** pill label text */
         label: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /** additional className */
+        className: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /** pill value */
         value: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     };
@@ -44,5 +47,6 @@ declare const DSLabeledDropdownPillsWithSchema: import("@elliemae/ds-props-helpe
     maxWidth: any;
     minWidth: any;
     fixed: any;
+    className: any;
 }>;
 export { LabeledDropdownPills, DSLabeledDropdownPillsWithSchema };

package/dist/types/deprecated/LabeledPills.d.ts

@@ -1,11 +1,12 @@
 declare const LabeledPills: {
-    ({ children, label, leftAddon, onFocusGroupSet, onFocusNextGroup, onFocusPreviousGroup }: {
+    ({ children, label, leftAddon, onFocusGroupSet, onFocusNextGroup, onFocusPreviousGroup, className, }: {
         children: any;
         label?: string | undefined;
         leftAddon: any;
         onFocusGroupSet: any;
         onFocusNextGroup: any;
         onFocusPreviousGroup: any;
+        className: any;
     }): import("react/jsx-runtime.js").JSX.Element;
     propTypes: {
         /** labeled pill text label */
@@ -20,6 +21,8 @@ declare const LabeledPills: {
         onFocusPreviousGroup: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /** focus group set callback */
         onFocusGroupSet: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /** additional className */
+        className: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     };
     displayName: string;
 };
@@ -30,5 +33,6 @@ declare const DSLabeledPillsWithSchema: import("@elliemae/ds-props-helpers/dist/
     onFocusGroupSet: any;
     onFocusNextGroup: any;
     onFocusPreviousGroup: any;
+    className: any;
 }>;
 export { LabeledPills, DSLabeledPillsWithSchema };

package/dist/types/deprecated/OverflowPill.d.ts

@@ -1,8 +1,9 @@
 declare const OverflowPill: {
-    ({ containerProps, label, options }: {
+    ({ containerProps, label, options, className }: {
         containerProps?: {} | undefined;
         label?: string | undefined;
         options?: never[] | undefined;
+        className?: string | undefined;
     }): import("react/jsx-runtime.js").JSX.Element;
     propTypes: {
         /** props to inject to pill wrapper */
@@ -11,6 +12,8 @@ declare const OverflowPill: {
         label: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /** overflow pills options */
         options: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /** additional className */
+        className: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     };
     displayName: string;
 };
@@ -18,5 +21,6 @@ declare const DSOverflowPillWithSchema: import("@elliemae/ds-props-helpers/dist/
     containerProps?: {} | undefined;
     label?: string | undefined;
     options?: never[] | undefined;
+    className?: string | undefined;
 }>;
 export { OverflowPill, DSOverflowPillWithSchema };

package/dist/types/deprecated/RemovablePill.d.ts

@@ -1,10 +1,11 @@
 declare const RemovablePill: {
-    ({ containerProps, label, onRemove, size, leftAddon }: {
+    ({ containerProps, label, onRemove, size, leftAddon, className }: {
         containerProps?: {} | undefined;
         label?: string | undefined;
         onRemove: any;
         size?: string | undefined;
         leftAddon: any;
+        className?: string | undefined;
     }): import("react/jsx-runtime.js").JSX.Element;
     propTypes: {
         /** props injected to component wrapper */
@@ -17,6 +18,8 @@ declare const RemovablePill: {
         size: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /** addon component to left */
         leftAddon: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /** additional className */
+        className: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     };
     displayName: string;
 };
@@ -26,5 +29,6 @@ declare const DSRemovablePillWithSchema: import("@elliemae/ds-props-helpers/dist
     onRemove: any;
     size?: string | undefined;
     leftAddon: any;
+    className?: string | undefined;
 }>;
 export { RemovablePill, DSRemovablePillWithSchema };

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export * from './deprecated/index.js';
-export * from './components/index.js';
 export { default } from './deprecated/index.js';
+export * from '@elliemae/ds-pills-v2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pills",
-  "version": "3.22.0-next.8",
+  "version": "3.22.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pills",
   "files": [
@@ -149,28 +149,29 @@
   "dependencies": {
     "prop-types": "~15.8.1",
     "uid": "~2.0.1",
-    "@elliemae/ds-button": "3.22.0-next.8",
-    "@elliemae/ds-button-v2": "3.22.0-next.8",
-    "@elliemae/ds-form": "3.22.0-next.8",
-    "@elliemae/ds-icons": "3.22.0-next.8",
-    "@elliemae/ds-grid": "3.22.0-next.8",
-    "@elliemae/ds-modal": "3.22.0-next.8",
-    "@elliemae/ds-props-helpers": "3.22.0-next.8",
-    "@elliemae/ds-popover": "3.22.0-next.8",
-    "@elliemae/ds-shared": "3.22.0-next.8",
-    "@elliemae/ds-classnames": "3.22.0-next.8",
-    "@elliemae/ds-system": "3.22.0-next.8",
-    "@elliemae/ds-tooltip": "3.22.0-next.8",
-    "@elliemae/ds-dropdownmenu": "3.22.0-next.8",
-    "@elliemae/ds-utilities": "3.22.0-next.8",
-    "@elliemae/ds-truncated-tooltip-text": "3.22.0-next.8"
+    "@elliemae/ds-button": "3.22.0-rc.1",
+    "@elliemae/ds-form": "3.22.0-rc.1",
+    "@elliemae/ds-grid": "3.22.0-rc.1",
+    "@elliemae/ds-classnames": "3.22.0-rc.1",
+    "@elliemae/ds-icons": "3.22.0-rc.1",
+    "@elliemae/ds-dropdownmenu": "3.22.0-rc.1",
+    "@elliemae/ds-modal": "3.22.0-rc.1",
+    "@elliemae/ds-props-helpers": "3.22.0-rc.1",
+    "@elliemae/ds-shared": "3.22.0-rc.1",
+    "@elliemae/ds-system": "3.22.0-rc.1",
+    "@elliemae/ds-button-v2": "3.22.0-rc.1",
+    "@elliemae/ds-truncated-tooltip-text": "3.22.0-rc.1",
+    "@elliemae/ds-utilities": "3.22.0-rc.1",
+    "@elliemae/ds-pills-v2": "3.22.0-rc.1",
+    "@elliemae/ds-popover": "3.22.0-rc.1",
+    "@elliemae/ds-tooltip": "3.22.0-rc.1"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "~9.0.0-next.17",
+    "@elliemae/pui-cli": "~9.0.0-next.22",
     "@testing-library/react": "~12.1.3",
     "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.22.0-next.8"
+    "@elliemae/ds-monorepo-devops": "3.22.0-rc.1"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
@@ -183,14 +184,14 @@
     "typeSafety": false
   },
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
     "test": "pui-cli test --passWithNoTests",
-    "lint": "node ../../scripts/lint.mjs",
-    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
-    "dts": "node ../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "lint": "node ../../../scripts/lint.mjs",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
     "dev:build": "pnpm --filter {.}... build",
     "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
-    "checkDeps": "npm exec ../ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }
 }

package/dist/cjs/DSPillDefinitions.js

@@ -1,40 +0,0 @@
-"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 DSPillDefinitions_exports = {};
-__export(DSPillDefinitions_exports, {
-  DSPillButtonName: () => DSPillButtonName,
-  DSPillGroupName: () => DSPillGroupName,
-  DSPillName: () => DSPillName
-});
-module.exports = __toCommonJS(DSPillDefinitions_exports);
-var React = __toESM(require("react"));
-const DSPillName = "DSPill";
-const DSPillButtonName = "DSPillButton";
-const DSPillGroupName = "DSPillGroup";
-//# sourceMappingURL=DSPillDefinitions.js.map

package/dist/cjs/DSPillDefinitions.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DSPillDefinitions.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSPillName = 'DSPill';\n\nexport const DSPillButtonName = 'DSPillButton';\n\nexport const DSPillGroupName = 'DSPillGroup';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,aAAa;AAEnB,MAAM,mBAAmB;AAEzB,MAAM,kBAAkB;",
-  "names": []
-}

package/dist/cjs/components/Pill.js

@@ -1,60 +0,0 @@
-"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 Pill_exports = {};
-__export(Pill_exports, {
-  DSPillV2: () => DSPillV2,
-  DSPillV2WithSchema: () => DSPillV2WithSchema
-});
-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_props = require("../props.js");
-var import_types = require("./types/index.js");
-var import_DSPillDefinitions = require("../DSPillDefinitions.js");
-const pillComponentGetter = {
-  dropdown: import_types.DropdownPill,
-  input: import_types.InputPill,
-  label: import_types.LabelPill,
-  readonly: import_types.ReadOnlyPill,
-  removable: import_types.RemovablePill,
-  value: import_types.ValuePill
-};
-const DSPillV2 = (props) => {
-  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.DSPillV2DefaultProps);
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillV2PropTypes, import_DSPillDefinitions.DSPillName);
-  const { type } = propsWithDefaults;
-  const PillComponent = pillComponentGetter[type];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillComponent, { ...propsWithDefaults });
-};
-DSPillV2.propTypes = import_props.DSPillV2PropTypes;
-DSPillV2.displayName = import_DSPillDefinitions.DSPillName;
-const DSPillV2WithSchema = (0, import_ds_props_helpers.describe)(DSPillV2).description("Pill");
-DSPillV2WithSchema.propTypes = import_props.DSPillV2PropTypes;
-//# sourceMappingURL=Pill.js.map