@elliemae/ds-pills 3.22.0-rc.0 → 3.22.0-rc.2

package/dist/cjs/deprecated/LabeledDropdownPills.js

@@ -56,6 +56,7 @@ const LabeledDropdownPills = ({
   maxWidth,
   minWidth,
   fixed,
+  className,
   ...menuProps
 }) => {
   const Component = createDropdownPill(type);
@@ -66,6 +67,7 @@ const LabeledDropdownPills = ({
       onFocusGroupSet,
       onFocusNextGroup,
       onFocusPreviousGroup,
+      containerProps: { className },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...menuProps, label, maxWidth, minWidth, value, fixed })
     }
   );
@@ -87,6 +89,8 @@ const props = {
   fixed: import_ds_props_helpers.PropTypes.bool.description("fixed pill"),
   /** pill label text */
   label: import_ds_props_helpers.PropTypes.string.isRequired.description("pill label text"),
+  /** additional className */
+  className: import_ds_props_helpers.PropTypes.string.description("Additional className"),
   /** pill value */
   value: import_ds_props_helpers.PropTypes.oneOfType([
     import_ds_props_helpers.PropTypes.arrayOf(

package/dist/cjs/deprecated/LabeledDropdownPills.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/deprecated/LabeledDropdownPills.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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 { PillGroup } from './PillGroup.js';\nimport { LabeledDropdownSinglePill } from './LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js';\nimport { LabeledDropdownMultiPills } from './LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js';\nimport { LabeledDropdownCascadeMenuPill } from './LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js';\n\nconst DropdownPills = {\n  single: LabeledDropdownSinglePill,\n  multi: LabeledDropdownMultiPills,\n  cascaded: LabeledDropdownCascadeMenuPill,\n};\n\nconst createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;\n\nconst LabeledDropdownPills = ({\n  label = '',\n  value,\n  type,\n  onFocusNextGroup,\n  onFocusPreviousGroup,\n  onFocusGroupSet,\n  maxWidth,\n  minWidth,\n  fixed,\n  ...menuProps\n}) => {\n  const Component = createDropdownPill(type);\n  useDeprecateComponent({ componentName: 'ds-pills', version: 'TBD Date: 2023 Q3' });\n\n  return (\n    <PillGroup\n      onFocusGroupSet={onFocusGroupSet}\n      onFocusNextGroup={onFocusNextGroup}\n      onFocusPreviousGroup={onFocusPreviousGroup}\n    >\n      <Component {...menuProps} label={label} maxWidth={maxWidth} minWidth={minWidth} value={value} fixed={fixed} />\n    </PillGroup>\n  );\n};\n\nconst props = {\n  /** pill type */\n  type: PropTypes.oneOf(['single', 'multi', 'cascaded']).description('pill type'),\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 max width */\n  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n  /** pill min width */\n  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n  /** fixed pill */\n  fixed: PropTypes.bool.description('fixed pill'),\n  /** pill label text */\n  label: PropTypes.string.isRequired.description('pill label text'),\n  /** pill value */\n  value: PropTypes.oneOfType([\n    PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string,\n        label: PropTypes.string,\n      }),\n    ),\n    PropTypes.shape({\n      id: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  ]).description('pill value'),\n};\n\nLabeledDropdownPills.propTypes = props;\nLabeledDropdownPills.displayName = 'LabeledDropdownPills';\nconst DSLabeledDropdownPillsWithSchema = describe(LabeledDropdownPills);\nDSLabeledDropdownPillsWithSchema.propTypes = props;\n\nexport { LabeledDropdownPills, DSLabeledDropdownPillsWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCjB;AApCN,0BAAsC;AACtC,8BAAoC;AACpC,uBAA0B;AAC1B,uCAA0C;AAC1C,sCAA0C;AAC1C,4CAA+C;AAE/C,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,qBAAqB,CAAC,SAAS,cAAc,IAAI,KAAK,cAAc;AAE1E,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,YAAY,mBAAmB,IAAI;AACzC,iDAAsB,EAAE,eAAe,YAAY,SAAS,oBAAoB,CAAC;AAEjF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC,aAAW,GAAG,WAAW,OAAc,UAAoB,UAAoB,OAAc,OAAc;AAAA;AAAA,EAC9G;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,MAAM,kCAAU,MAAM,CAAC,UAAU,SAAS,UAAU,CAAC,EAAE,YAAY,WAAW;AAAA;AAAA,EAE9E,kBAAkB,kCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAExE,sBAAsB,kCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAE5E,iBAAiB,kCAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAEtE,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,OAAO,kCAAU,KAAK,YAAY,YAAY;AAAA;AAAA,EAE9C,OAAO,kCAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,OAAO,kCAAU,UAAU;AAAA,IACzB,kCAAU;AAAA,MACR,kCAAU,MAAM;AAAA,QACd,IAAI,kCAAU;AAAA,QACd,OAAO,kCAAU;AAAA,MACnB,CAAC;AAAA,IACH;AAAA,IACA,kCAAU,MAAM;AAAA,MACd,IAAI,kCAAU;AAAA,MACd,OAAO,kCAAU;AAAA,IACnB,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,YAAY;AAC7B;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,uCAAmC,kCAAS,oBAAoB;AACtE,iCAAiC,YAAY;",
+  "sourcesContent": ["/* 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 { PillGroup } from './PillGroup.js';\nimport { LabeledDropdownSinglePill } from './LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js';\nimport { LabeledDropdownMultiPills } from './LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js';\nimport { LabeledDropdownCascadeMenuPill } from './LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js';\n\nconst DropdownPills = {\n  single: LabeledDropdownSinglePill,\n  multi: LabeledDropdownMultiPills,\n  cascaded: LabeledDropdownCascadeMenuPill,\n};\n\nconst createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;\n\nconst LabeledDropdownPills = ({\n  label = '',\n  value,\n  type,\n  onFocusNextGroup,\n  onFocusPreviousGroup,\n  onFocusGroupSet,\n  maxWidth,\n  minWidth,\n  fixed,\n  className,\n  ...menuProps\n}) => {\n  const Component = createDropdownPill(type);\n  useDeprecateComponent({ componentName: 'ds-pills', version: 'TBD Date: 2023 Q3' });\n\n  return (\n    <PillGroup\n      onFocusGroupSet={onFocusGroupSet}\n      onFocusNextGroup={onFocusNextGroup}\n      onFocusPreviousGroup={onFocusPreviousGroup}\n      containerProps={{ className }}\n    >\n      <Component {...menuProps} label={label} maxWidth={maxWidth} minWidth={minWidth} value={value} fixed={fixed} />\n    </PillGroup>\n  );\n};\n\nconst props = {\n  /** pill type */\n  type: PropTypes.oneOf(['single', 'multi', 'cascaded']).description('pill type'),\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 max width */\n  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n  /** pill min width */\n  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n  /** fixed pill */\n  fixed: PropTypes.bool.description('fixed pill'),\n  /** pill label text */\n  label: PropTypes.string.isRequired.description('pill label text'),\n  /** additional className */\n  className: PropTypes.string.description('Additional className'),\n  /** pill value */\n  value: PropTypes.oneOfType([\n    PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string,\n        label: PropTypes.string,\n      }),\n    ),\n    PropTypes.shape({\n      id: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  ]).description('pill value'),\n};\n\nLabeledDropdownPills.propTypes = props;\nLabeledDropdownPills.displayName = 'LabeledDropdownPills';\nconst DSLabeledDropdownPillsWithSchema = describe(LabeledDropdownPills);\nDSLabeledDropdownPillsWithSchema.propTypes = props;\n\nexport { LabeledDropdownPills, DSLabeledDropdownPillsWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CjB;AAtCN,0BAAsC;AACtC,8BAAoC;AACpC,uBAA0B;AAC1B,uCAA0C;AAC1C,sCAA0C;AAC1C,4CAA+C;AAE/C,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,qBAAqB,CAAC,SAAS,cAAc,IAAI,KAAK,cAAc;AAE1E,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,YAAY,mBAAmB,IAAI;AACzC,iDAAsB,EAAE,eAAe,YAAY,SAAS,oBAAoB,CAAC;AAEjF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,EAAE,UAAU;AAAA,MAE5B,sDAAC,aAAW,GAAG,WAAW,OAAc,UAAoB,UAAoB,OAAc,OAAc;AAAA;AAAA,EAC9G;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,MAAM,kCAAU,MAAM,CAAC,UAAU,SAAS,UAAU,CAAC,EAAE,YAAY,WAAW;AAAA;AAAA,EAE9E,kBAAkB,kCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAExE,sBAAsB,kCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAE5E,iBAAiB,kCAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAEtE,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,OAAO,kCAAU,KAAK,YAAY,YAAY;AAAA;AAAA,EAE9C,OAAO,kCAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,WAAW,kCAAU,OAAO,YAAY,sBAAsB;AAAA;AAAA,EAE9D,OAAO,kCAAU,UAAU;AAAA,IACzB,kCAAU;AAAA,MACR,kCAAU,MAAM;AAAA,QACd,IAAI,kCAAU;AAAA,QACd,OAAO,kCAAU;AAAA,MACnB,CAAC;AAAA,IACH;AAAA,IACA,kCAAU,MAAM;AAAA,MACd,IAAI,kCAAU;AAAA,MACd,OAAO,kCAAU;AAAA,IACnB,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,YAAY;AAC7B;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,uCAAmC,kCAAS,oBAAoB;AACtE,iCAAiC,YAAY;",
   "names": []
 }

package/dist/cjs/deprecated/LabeledPills.js

@@ -38,12 +38,21 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_PillGroup = require("./PillGroup.js");
 var import_RemovablePill = require("./RemovablePill.js");
 var import_Pill = require("./Pill.js");
-const LabeledPills = ({ children, label = "", leftAddon, onFocusGroupSet, onFocusNextGroup, onFocusPreviousGroup }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+const LabeledPills = ({
+  children,
+  label = "",
+  leftAddon,
+  onFocusGroupSet,
+  onFocusNextGroup,
+  onFocusPreviousGroup,
+  className
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
   import_PillGroup.PillGroup,
   {
     onFocusGroupSet,
     onFocusNextGroup,
     onFocusPreviousGroup,
+    containerProps: { className },
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pill.Pill, { label, leftAddon, variant: "title", "data-testid": "pill-title" }),
       children
@@ -66,7 +75,9 @@ const props = {
   /** focus prev group callback */
   onFocusPreviousGroup: import_ds_props_helpers.PropTypes.func.description("focus prev group callback"),
   /** focus group set callback */
-  onFocusGroupSet: import_ds_props_helpers.PropTypes.func.description("focus group set callback")
+  onFocusGroupSet: import_ds_props_helpers.PropTypes.func.description("focus group set callback"),
+  /** additional className */
+  className: import_ds_props_helpers.PropTypes.string.description("Additional className")
 };
 LabeledPills.propTypes = props;
 LabeledPills.displayName = "LabeledPills";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/deprecated/LabeledPills.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWrB;AANF,8BAAoC;AACpC,uBAA0B;AAC1B,2BAA8B;AAC9B,kBAAqB;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,kDAAC,oBAAK,OAAc,WAAsB,SAAQ,SAAQ,eAAY,cAAa;AAAA,MAClF;AAAA;AAAA;AACH;AAGF,MAAM,QAAQ;AAAA;AAAA,EAEZ,OAAO,kCAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,UAAU,kCAAU;AAAA,IAClB,kCAAU,MAAM;AAAA,MACd,MAAM,kCAAU,MAAM,CAAC,kCAAU,WAAW,gBAAI,GAAG,kCAAU,WAAW,kCAAa,CAAC,CAAC;AAAA,IACzF,CAAC;AAAA,EACH,EAAE,WAAW,YAAY,0BAA0B;AAAA;AAAA,EAEnD,WAAW,kCAAU,KAAK,YAAY,yBAAyB;AAAA;AAAA,EAE/D,kBAAkB,kCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAExE,sBAAsB,kCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAE5E,iBAAiB,kCAAU,KAAK,YAAY,0BAA0B;AACxE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,kCAAS,YAAY;AACtD,yBAAyB,YAAY;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBrB;AAdF,8BAAoC;AACpC,uBAA0B;AAC1B,2BAA8B;AAC9B,kBAAqB;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,kDAAC,oBAAK,OAAc,WAAsB,SAAQ,SAAQ,eAAY,cAAa;AAAA,MAClF;AAAA;AAAA;AACH;AAGF,MAAM,QAAQ;AAAA;AAAA,EAEZ,OAAO,kCAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,UAAU,kCAAU;AAAA,IAClB,kCAAU,MAAM;AAAA,MACd,MAAM,kCAAU,MAAM,CAAC,kCAAU,WAAW,gBAAI,GAAG,kCAAU,WAAW,kCAAa,CAAC,CAAC;AAAA,IACzF,CAAC;AAAA,EACH,EAAE,WAAW,YAAY,0BAA0B;AAAA;AAAA,EAEnD,WAAW,kCAAU,KAAK,YAAY,yBAAyB;AAAA;AAAA,EAE/D,kBAAkB,kCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAExE,sBAAsB,kCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAE5E,iBAAiB,kCAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAEtE,WAAW,kCAAU,OAAO,YAAY,sBAAsB;AAChE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,kCAAS,YAAY;AACtD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/cjs/deprecated/OverflowPill.js

@@ -39,7 +39,7 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_shared = require("@elliemae/ds-shared");
 var import_ds_tooltip = require("@elliemae/ds-tooltip");
 var import_Pill = require("./Pill.js");
-const OverflowPill = ({ containerProps = {}, label = "", options = [] }) => {
+const OverflowPill = ({ containerProps = {}, label = "", options = [], className = "" }) => {
   const ref = (0, import_react.useRef)(null);
   const [tooltipIsOpen, setTooltipIsOpen] = (0, import_react.useState)(false);
   const [tooltipText, setTooltipText] = (0, import_react.useState)("");
@@ -64,7 +64,7 @@ const OverflowPill = ({ containerProps = {}, label = "", options = [] }) => {
       triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Pill.Pill,
         {
-          className: "overflow-pill",
+          className: `${"overflow-pill"} ${className}`,
           containerProps,
           innerRef: ref,
           label,
@@ -82,7 +82,9 @@ const props = {
   /** pill text label */
   label: import_ds_props_helpers.PropTypes.string.isRequired.description("pill text label"),
   /** overflow pills options */
-  options: import_ds_props_helpers.PropTypes.array.description("overflow pills options")
+  options: import_ds_props_helpers.PropTypes.array.description("overflow pills options"),
+  /** additional className */
+  className: import_ds_props_helpers.PropTypes.string.description("Additional className")
 };
 OverflowPill.propTypes = props;
 OverflowPill.displayName = "OverflowPill";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/deprecated/OverflowPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCf;AA/BR,mBAAmD;AACnD,8BAAoC;AACpC,uBAAkC;AAClC,wBAA0B;AAC1B,kBAAqB;AAErB,MAAM,eAAe,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,CAAC,EAAE,MAAM;AAC1E,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AAEjD,8BAAU,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,0CAAkB,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,kCAAU,OAAO,YAAY,iCAAiC;AAAA;AAAA,EAE9E,OAAO,kCAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,SAAS,kCAAU,MAAM,YAAY,wBAAwB;AAC/D;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,kCAAS,YAAY;AACtD,yBAAyB,YAAY;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCf;AA/BR,mBAAmD;AACnD,8BAAoC;AACpC,uBAAkC;AAClC,wBAA0B;AAC1B,kBAAqB;AAErB,MAAM,eAAe,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,CAAC,GAAG,YAAY,GAAG,MAAM;AAC1F,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AAEjD,8BAAU,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,0CAAkB,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,kCAAU,OAAO,YAAY,iCAAiC;AAAA;AAAA,EAE9E,OAAO,kCAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,SAAS,kCAAU,MAAM,YAAY,wBAAwB;AAAA;AAAA,EAE7D,WAAW,kCAAU,OAAO,YAAY,sBAAsB;AAChE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,kCAAS,YAAY;AACtD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/cjs/deprecated/RemovablePill.js

@@ -40,13 +40,13 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_shared = require("@elliemae/ds-shared");
 var import_Pill = require("./Pill.js");
-const RemovablePill = ({ containerProps = {}, label = "", onRemove, size = "m", leftAddon }) => {
+const RemovablePill = ({ containerProps = {}, label = "", onRemove, size = "m", leftAddon, className = "" }) => {
   const ref = (0, import_react.useRef)(null);
   const { focusPrevious } = (0, import_ds_shared.useFocusGroupItem)(ref);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Pill.Pill,
     {
-      className: "removable-pill",
+      className: `${"removable-pill"} ${className}`,
       "data-testid": "removable-pill",
       containerProps,
       innerRef: ref,
@@ -75,7 +75,9 @@ const props = {
   /** pill size */
   size: import_ds_props_helpers.PropTypes.oneOf(["m", "l"]).description("pill size"),
   /** addon component to left */
-  leftAddon: import_ds_props_helpers.PropTypes.node.description("addon component to left")
+  leftAddon: import_ds_props_helpers.PropTypes.node.description("addon component to left"),
+  /** additional className */
+  className: import_ds_props_helpers.PropTypes.string.description("Additional className")
 };
 RemovablePill.propTypes = props;
 RemovablePill.displayName = "RemovablePill";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/deprecated/RemovablePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Bf;AA1BR,mBAA8B;AAC9B,0BAA2B;AAC3B,8BAAoC;AACpC,sBAA4B;AAC5B,uBAAkC;AAClC,kBAAqB;AAErB,MAAM,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,OAAO,KAAK,UAAU,MAAM;AAC9F,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,EAAE,cAAc,QAAI,oCAAkB,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,mBAAe,gCAAW,QAAQ,GAAG;AACjD,mBAAS;AACT,kBAAI,gCAAW,aAAa;AAAG,0BAAc;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,YACE,4CAAC,+BAAY,MAAK,UAAS,eAAY,sBAAqB,WAAU,sBAAqB,SAAS,UAAU;AAAA,MAEhH,UAAU;AAAA;AAAA,EACZ;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,kCAAU,OAAO,YAAY,qCAAqC;AAAA;AAAA,EAElF,OAAO,kCAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,UAAU,kCAAU,KAAK,YAAY,uBAAuB;AAAA;AAAA,EAE5D,MAAM,kCAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,WAAW;AAAA;AAAA,EAEzD,WAAW,kCAAU,KAAK,YAAY,yBAAyB;AACjE;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,gCAA4B,kCAAS,aAAa;AACxD,0BAA0B,YAAY;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Bf;AA1BR,mBAA8B;AAC9B,0BAA2B;AAC3B,8BAAoC;AACpC,sBAA4B;AAC5B,uBAAkC;AAClC,kBAAqB;AAErB,MAAM,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,OAAO,KAAK,WAAW,YAAY,GAAG,MAAM;AAC9G,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,EAAE,cAAc,QAAI,oCAAkB,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,mBAAe,gCAAW,QAAQ,GAAG;AACjD,mBAAS;AACT,kBAAI,gCAAW,aAAa;AAAG,0BAAc;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,YACE,4CAAC,+BAAY,MAAK,UAAS,eAAY,sBAAqB,WAAU,sBAAqB,SAAS,UAAU;AAAA,MAEhH,UAAU;AAAA;AAAA,EACZ;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,kCAAU,OAAO,YAAY,qCAAqC;AAAA;AAAA,EAElF,OAAO,kCAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,UAAU,kCAAU,KAAK,YAAY,uBAAuB;AAAA;AAAA,EAE5D,MAAM,kCAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,WAAW;AAAA;AAAA,EAEzD,WAAW,kCAAU,KAAK,YAAY,yBAAyB;AAAA;AAAA,EAE/D,WAAW,kCAAU,OAAO,YAAY,sBAAsB;AAChE;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,gCAA4B,kCAAS,aAAa;AACxD,0BAA0B,YAAY;",
   "names": []
 }

package/dist/esm/deprecated/LabeledDropdownPills.js

@@ -22,6 +22,7 @@ const LabeledDropdownPills = ({
   maxWidth,
   minWidth,
   fixed,
+  className,
   ...menuProps
 }) => {
   const Component = createDropdownPill(type);
@@ -32,6 +33,7 @@ const LabeledDropdownPills = ({
       onFocusGroupSet,
       onFocusNextGroup,
       onFocusPreviousGroup,
+      containerProps: { className },
       children: /* @__PURE__ */ jsx(Component, { ...menuProps, label, maxWidth, minWidth, value, fixed })
     }
   );
@@ -53,6 +55,8 @@ const props = {
   fixed: PropTypes.bool.description("fixed pill"),
   /** pill label text */
   label: PropTypes.string.isRequired.description("pill label text"),
+  /** additional className */
+  className: PropTypes.string.description("Additional className"),
   /** pill value */
   value: PropTypes.oneOfType([
     PropTypes.arrayOf(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/LabeledDropdownPills.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 { PillGroup } from './PillGroup.js';\nimport { LabeledDropdownSinglePill } from './LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js';\nimport { LabeledDropdownMultiPills } from './LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js';\nimport { LabeledDropdownCascadeMenuPill } from './LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js';\n\nconst DropdownPills = {\n  single: LabeledDropdownSinglePill,\n  multi: LabeledDropdownMultiPills,\n  cascaded: LabeledDropdownCascadeMenuPill,\n};\n\nconst createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;\n\nconst LabeledDropdownPills = ({\n  label = '',\n  value,\n  type,\n  onFocusNextGroup,\n  onFocusPreviousGroup,\n  onFocusGroupSet,\n  maxWidth,\n  minWidth,\n  fixed,\n  ...menuProps\n}) => {\n  const Component = createDropdownPill(type);\n  useDeprecateComponent({ componentName: 'ds-pills', version: 'TBD Date: 2023 Q3' });\n\n  return (\n    <PillGroup\n      onFocusGroupSet={onFocusGroupSet}\n      onFocusNextGroup={onFocusNextGroup}\n      onFocusPreviousGroup={onFocusPreviousGroup}\n    >\n      <Component {...menuProps} label={label} maxWidth={maxWidth} minWidth={minWidth} value={value} fixed={fixed} />\n    </PillGroup>\n  );\n};\n\nconst props = {\n  /** pill type */\n  type: PropTypes.oneOf(['single', 'multi', 'cascaded']).description('pill type'),\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 max width */\n  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n  /** pill min width */\n  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n  /** fixed pill */\n  fixed: PropTypes.bool.description('fixed pill'),\n  /** pill label text */\n  label: PropTypes.string.isRequired.description('pill label text'),\n  /** pill value */\n  value: PropTypes.oneOfType([\n    PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string,\n        label: PropTypes.string,\n      }),\n    ),\n    PropTypes.shape({\n      id: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  ]).description('pill value'),\n};\n\nLabeledDropdownPills.propTypes = props;\nLabeledDropdownPills.displayName = 'LabeledDropdownPills';\nconst DSLabeledDropdownPillsWithSchema = describe(LabeledDropdownPills);\nDSLabeledDropdownPillsWithSchema.propTypes = props;\n\nexport { LabeledDropdownPills, DSLabeledDropdownPillsWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyCjB;AApCN,SAAS,6BAA6B;AACtC,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,sCAAsC;AAE/C,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,qBAAqB,CAAC,SAAS,cAAc,IAAI,KAAK,cAAc;AAE1E,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,YAAY,mBAAmB,IAAI;AACzC,wBAAsB,EAAE,eAAe,YAAY,SAAS,oBAAoB,CAAC;AAEjF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,aAAW,GAAG,WAAW,OAAc,UAAoB,UAAoB,OAAc,OAAc;AAAA;AAAA,EAC9G;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,MAAM,UAAU,MAAM,CAAC,UAAU,SAAS,UAAU,CAAC,EAAE,YAAY,WAAW;AAAA;AAAA,EAE9E,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,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,OAAO,UAAU,KAAK,YAAY,YAAY;AAAA;AAAA,EAE9C,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,OAAO,UAAU,UAAU;AAAA,IACzB,UAAU;AAAA,MACR,UAAU,MAAM;AAAA,QACd,IAAI,UAAU;AAAA,QACd,OAAO,UAAU;AAAA,MACnB,CAAC;AAAA,IACH;AAAA,IACA,UAAU,MAAM;AAAA,MACd,IAAI,UAAU;AAAA,MACd,OAAO,UAAU;AAAA,IACnB,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,YAAY;AAC7B;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,mCAAmC,SAAS,oBAAoB;AACtE,iCAAiC,YAAY;",
+  "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 { PillGroup } from './PillGroup.js';\nimport { LabeledDropdownSinglePill } from './LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js';\nimport { LabeledDropdownMultiPills } from './LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js';\nimport { LabeledDropdownCascadeMenuPill } from './LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js';\n\nconst DropdownPills = {\n  single: LabeledDropdownSinglePill,\n  multi: LabeledDropdownMultiPills,\n  cascaded: LabeledDropdownCascadeMenuPill,\n};\n\nconst createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;\n\nconst LabeledDropdownPills = ({\n  label = '',\n  value,\n  type,\n  onFocusNextGroup,\n  onFocusPreviousGroup,\n  onFocusGroupSet,\n  maxWidth,\n  minWidth,\n  fixed,\n  className,\n  ...menuProps\n}) => {\n  const Component = createDropdownPill(type);\n  useDeprecateComponent({ componentName: 'ds-pills', version: 'TBD Date: 2023 Q3' });\n\n  return (\n    <PillGroup\n      onFocusGroupSet={onFocusGroupSet}\n      onFocusNextGroup={onFocusNextGroup}\n      onFocusPreviousGroup={onFocusPreviousGroup}\n      containerProps={{ className }}\n    >\n      <Component {...menuProps} label={label} maxWidth={maxWidth} minWidth={minWidth} value={value} fixed={fixed} />\n    </PillGroup>\n  );\n};\n\nconst props = {\n  /** pill type */\n  type: PropTypes.oneOf(['single', 'multi', 'cascaded']).description('pill type'),\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 max width */\n  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n  /** pill min width */\n  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n  /** fixed pill */\n  fixed: PropTypes.bool.description('fixed pill'),\n  /** pill label text */\n  label: PropTypes.string.isRequired.description('pill label text'),\n  /** additional className */\n  className: PropTypes.string.description('Additional className'),\n  /** pill value */\n  value: PropTypes.oneOfType([\n    PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string,\n        label: PropTypes.string,\n      }),\n    ),\n    PropTypes.shape({\n      id: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  ]).description('pill value'),\n};\n\nLabeledDropdownPills.propTypes = props;\nLabeledDropdownPills.displayName = 'LabeledDropdownPills';\nconst DSLabeledDropdownPillsWithSchema = describe(LabeledDropdownPills);\nDSLabeledDropdownPillsWithSchema.propTypes = props;\n\nexport { LabeledDropdownPills, DSLabeledDropdownPillsWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2CjB;AAtCN,SAAS,6BAA6B;AACtC,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,sCAAsC;AAE/C,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,qBAAqB,CAAC,SAAS,cAAc,IAAI,KAAK,cAAc;AAE1E,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,YAAY,mBAAmB,IAAI;AACzC,wBAAsB,EAAE,eAAe,YAAY,SAAS,oBAAoB,CAAC;AAEjF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,EAAE,UAAU;AAAA,MAE5B,8BAAC,aAAW,GAAG,WAAW,OAAc,UAAoB,UAAoB,OAAc,OAAc;AAAA;AAAA,EAC9G;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,MAAM,UAAU,MAAM,CAAC,UAAU,SAAS,UAAU,CAAC,EAAE,YAAY,WAAW;AAAA;AAAA,EAE9E,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,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,OAAO,UAAU,KAAK,YAAY,YAAY;AAAA;AAAA,EAE9C,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,WAAW,UAAU,OAAO,YAAY,sBAAsB;AAAA;AAAA,EAE9D,OAAO,UAAU,UAAU;AAAA,IACzB,UAAU;AAAA,MACR,UAAU,MAAM;AAAA,QACd,IAAI,UAAU;AAAA,QACd,OAAO,UAAU;AAAA,MACnB,CAAC;AAAA,IACH;AAAA,IACA,UAAU,MAAM;AAAA,MACd,IAAI,UAAU;AAAA,MACd,OAAO,UAAU;AAAA,IACnB,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,YAAY;AAC7B;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,mCAAmC,SAAS,oBAAoB;AACtE,iCAAiC,YAAY;",
   "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;",
+  "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;",
+  "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/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;",
+  "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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pills",
-  "version": "3.22.0-rc.0",
+  "version": "3.22.0-rc.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pills",
   "files": [
@@ -149,29 +149,29 @@
   "dependencies": {
     "prop-types": "~15.8.1",
     "uid": "~2.0.1",
-    "@elliemae/ds-button": "3.22.0-rc.0",
-    "@elliemae/ds-button-v2": "3.22.0-rc.0",
-    "@elliemae/ds-classnames": "3.22.0-rc.0",
-    "@elliemae/ds-dropdownmenu": "3.22.0-rc.0",
-    "@elliemae/ds-icons": "3.22.0-rc.0",
-    "@elliemae/ds-grid": "3.22.0-rc.0",
-    "@elliemae/ds-form": "3.22.0-rc.0",
-    "@elliemae/ds-pills-v2": "3.22.0-rc.0",
-    "@elliemae/ds-popover": "3.22.0-rc.0",
-    "@elliemae/ds-modal": "3.22.0-rc.0",
-    "@elliemae/ds-props-helpers": "3.22.0-rc.0",
-    "@elliemae/ds-system": "3.22.0-rc.0",
-    "@elliemae/ds-shared": "3.22.0-rc.0",
-    "@elliemae/ds-truncated-tooltip-text": "3.22.0-rc.0",
-    "@elliemae/ds-utilities": "3.22.0-rc.0",
-    "@elliemae/ds-tooltip": "3.22.0-rc.0"
+    "@elliemae/ds-button": "3.22.0-rc.2",
+    "@elliemae/ds-form": "3.22.0-rc.2",
+    "@elliemae/ds-grid": "3.22.0-rc.2",
+    "@elliemae/ds-modal": "3.22.0-rc.2",
+    "@elliemae/ds-pills-v2": "3.22.0-rc.2",
+    "@elliemae/ds-icons": "3.22.0-rc.2",
+    "@elliemae/ds-button-v2": "3.22.0-rc.2",
+    "@elliemae/ds-props-helpers": "3.22.0-rc.2",
+    "@elliemae/ds-shared": "3.22.0-rc.2",
+    "@elliemae/ds-system": "3.22.0-rc.2",
+    "@elliemae/ds-tooltip": "3.22.0-rc.2",
+    "@elliemae/ds-truncated-tooltip-text": "3.22.0-rc.2",
+    "@elliemae/ds-utilities": "3.22.0-rc.2",
+    "@elliemae/ds-dropdownmenu": "3.22.0-rc.2",
+    "@elliemae/ds-popover": "3.22.0-rc.2",
+    "@elliemae/ds-classnames": "3.22.0-rc.2"
   },
   "devDependencies": {
     "@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-rc.0"
+    "@elliemae/ds-monorepo-devops": "3.22.0-rc.2"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",