@elliemae/ds-legacy-pills 1.0.0-rc.1

package/dist/cjs/deprecated/DropdownPill.js

@@ -0,0 +1,103 @@
+"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 DropdownPill_exports = {};
+__export(DropdownPill_exports, {
+  DSDropdownPillWithSchema: () => DSDropdownPillWithSchema,
+  DropdownPill: () => DropdownPill
+});
+module.exports = __toCommonJS(DropdownPill_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_legacy_props_helpers = require("@elliemae/ds-legacy-props-helpers");
+var import_ds_legacy_dropdownmenu = require("@elliemae/ds-legacy-dropdownmenu");
+var import_ds_legacy_icons = require("@elliemae/ds-legacy-icons");
+var import_ds_legacy_shared = require("@elliemae/ds-legacy-shared");
+var import_Pill = require("./Pill.js");
+const DropdownPill = ({
+  containerProps = {},
+  label = "",
+  variant,
+  tabIndex = -1,
+  closeMenuOnItemSelection = false,
+  maxWidth,
+  minWidth,
+  ...dropdownProps
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  const [chevronEl, chevronRef] = (0, import_react.useState)();
+  const { focusFirst } = (0, import_ds_legacy_shared.useFocusGroupItem)(ref);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ds_legacy_dropdownmenu.DSDropdownMenu,
+    {
+      ...dropdownProps,
+      closeMenuOnItemSelection,
+      maxWidth,
+      hideIfNotVisible: true,
+      menuProps: { className: "dropdown-pill-menu", zIndex: 100 },
+      minWidth,
+      onClose: focusFirst,
+      referenceNode: chevronEl,
+      triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Pill.Pill,
+        {
+          "data-testid": "dropdown-pill",
+          className: "dropdown-pill",
+          containerProps: { role: "listbox", ...containerProps },
+          innerRef: ref,
+          label,
+          rightAddon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: chevronRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_icons.ChevronDown, { className: "dropdown-pill-chevron-down", "data-testid": "dropdown-pill-button" }) }),
+          tabIndex,
+          variant
+        }
+      )
+    }
+  );
+};
+const props = {
+  /** props injected to component wrapper */
+  containerProps: import_ds_legacy_props_helpers.PropTypes.object.description("props injected to component wrapper"),
+  /** labeled pill text label */
+  label: import_ds_legacy_props_helpers.PropTypes.string.isRequired.description("pill text label"),
+  /** pill variant */
+  variant: import_ds_legacy_props_helpers.PropTypes.oneOf(["value", "title"]).description("pill variant"),
+  /** html focus border */
+  tabIndex: import_ds_legacy_props_helpers.PropTypes.number.description("html focus order"),
+  /** close menu on item selection */
+  closeMenuOnItemSelection: import_ds_legacy_props_helpers.PropTypes.bool.description("close menu on item selection"),
+  /** pill max width */
+  maxWidth: import_ds_legacy_props_helpers.PropTypes.oneOfType([import_ds_legacy_props_helpers.PropTypes.string, import_ds_legacy_props_helpers.PropTypes.number]).description("pill max width"),
+  /** pill min width */
+  minWidth: import_ds_legacy_props_helpers.PropTypes.oneOfType([import_ds_legacy_props_helpers.PropTypes.string, import_ds_legacy_props_helpers.PropTypes.number]).description("pill min width")
+};
+DropdownPill.propTypes = props;
+DropdownPill.displayName = "DropdownPill";
+const DSDropdownPillWithSchema = (0, import_ds_legacy_props_helpers.describe)(DropdownPill);
+DSDropdownPillWithSchema.propTypes = props;
+//# sourceMappingURL=DropdownPill.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/deprecated/DropdownPill.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 } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-legacy-props-helpers';\nimport { DSDropdownMenu } from '@elliemae/ds-legacy-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-legacy-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-legacy-shared';\nimport { Pill } from './Pill.js';\n\nconst DropdownPill = ({\n  containerProps = {},\n  label = '',\n  variant,\n  tabIndex = -1,\n  closeMenuOnItemSelection = false,\n  maxWidth,\n  minWidth,\n  ...dropdownProps\n}) => {\n  const ref = useRef(null);\n  const [chevronEl, chevronRef] = useState();\n  const { focusFirst } = useFocusGroupItem(ref);\n  return (\n    <DSDropdownMenu\n      {...dropdownProps}\n      closeMenuOnItemSelection={closeMenuOnItemSelection}\n      maxWidth={maxWidth}\n      hideIfNotVisible\n      menuProps={{ className: 'dropdown-pill-menu', zIndex: 100 }}\n      minWidth={minWidth}\n      onClose={focusFirst}\n      referenceNode={chevronEl}\n      triggerComponent={\n        <Pill\n          data-testid=\"dropdown-pill\"\n          className=\"dropdown-pill\"\n          containerProps={{ role: 'listbox', ...containerProps }}\n          innerRef={ref}\n          label={label}\n          rightAddon={\n            <div ref={chevronRef}>\n              <ChevronDown className=\"dropdown-pill-chevron-down\" data-testid=\"dropdown-pill-button\" />\n            </div>\n          }\n          tabIndex={tabIndex}\n          variant={variant}\n        />\n      }\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  /** pill variant */\n  variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),\n  /** html focus border */\n  tabIndex: PropTypes.number.description('html focus order'),\n  /** close menu on item selection */\n  closeMenuOnItemSelection: PropTypes.bool.description('close menu on item selection'),\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};\n\nDropdownPill.propTypes = props;\nDropdownPill.displayName = 'DropdownPill';\nconst DSDropdownPillWithSchema = describe(DropdownPill);\nDSDropdownPillWithSchema.propTypes = props;\n\nexport { DropdownPill, DSDropdownPillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CT;AAvCd,mBAAwC;AACxC,qCAAoC;AACpC,oCAA+B;AAC/B,6BAA4B;AAC5B,8BAAkC;AAClC,kBAAqB;AAErB,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,2BAA2B;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,CAAC,WAAW,UAAU,QAAI,uBAAS;AACzC,QAAM,EAAE,WAAW,QAAI,2CAAkB,GAAG;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,kBAAgB;AAAA,MAChB,WAAW,EAAE,WAAW,sBAAsB,QAAQ,IAAI;AAAA,MAC1D;AAAA,MACA,SAAS;AAAA,MACT,eAAe;AAAA,MACf,kBACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAU;AAAA,UACV,gBAAgB,EAAE,MAAM,WAAW,GAAG,eAAe;AAAA,UACrD,UAAU;AAAA,UACV;AAAA,UACA,YACE,4CAAC,SAAI,KAAK,YACR,sDAAC,sCAAY,WAAU,8BAA6B,eAAY,wBAAuB,GACzF;AAAA,UAEF;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,yCAAU,OAAO,YAAY,qCAAqC;AAAA;AAAA,EAElF,OAAO,yCAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,SAAS,yCAAU,MAAM,CAAC,SAAS,OAAO,CAAC,EAAE,YAAY,cAAc;AAAA;AAAA,EAEvE,UAAU,yCAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA,EAEzD,0BAA0B,yCAAU,KAAK,YAAY,8BAA8B;AAAA;AAAA,EAEnF,UAAU,yCAAU,UAAU,CAAC,yCAAU,QAAQ,yCAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,UAAU,yCAAU,UAAU,CAAC,yCAAU,QAAQ,yCAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAClG;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,yCAAS,YAAY;AACtD,yBAAyB,YAAY;",
+  "names": []
+}

package/dist/cjs/deprecated/InputPill.js

@@ -0,0 +1,87 @@
+"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 InputPill_exports = {};
+__export(InputPill_exports, {
+  InputPill: () => InputPill
+});
+module.exports = __toCommonJS(InputPill_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_legacy_utilities = require("@elliemae/ds-legacy-utilities");
+var import_ds_legacy_icons = require("@elliemae/ds-legacy-icons");
+var import_ds_legacy_classnames = require("@elliemae/ds-legacy-classnames");
+var import_ds_legacy_form = require("@elliemae/ds-legacy-form");
+var import_Pill = require("./Pill.js");
+const StyledInputPill = (0, import_ds_legacy_classnames.aggregatedClasses)(import_Pill.Pill)("input-pill", null, ({ value }) => ({
+  value
+}));
+const InputPill = ({
+  containerProps = {},
+  placeholder = "Enter Value",
+  onChange = () => {
+  },
+  onRemove,
+  value,
+  type,
+  ...otherProps
+}) => {
+  (0, import_ds_legacy_utilities.useDeprecateComponent)({ componentName: "ds-pills", version: "TBD Date: 2023 Q3" });
+  let TypeOfInput = import_ds_legacy_form.DSInput;
+  switch (type) {
+    case "inputText":
+      TypeOfInput = import_ds_legacy_form.DSInput;
+      break;
+    case "inputMask":
+      TypeOfInput = import_ds_legacy_form.DSInputMask;
+      break;
+    default:
+      break;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledInputPill,
+    {
+      className: "input-pill",
+      classProps: { value },
+      containerProps,
+      label: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        TypeOfInput,
+        {
+          "data-testid": "input-pill",
+          onChange,
+          placeholder,
+          value,
+          ...otherProps
+        }
+      ),
+      rightAddon: value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_icons.CloseXsmall, { className: "remove-pill-button", "data-testid": "remove-pill-button", onClick: onRemove }),
+      tabIndex: -1
+    }
+  );
+};
+//# sourceMappingURL=InputPill.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/deprecated/InputPill.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-legacy-utilities';\n\nimport { CloseXsmall } from '@elliemae/ds-legacy-icons';\nimport { aggregatedClasses } from '@elliemae/ds-legacy-classnames';\nimport { DSInput, DSInputMask } from '@elliemae/ds-legacy-form';\nimport { Pill } from './Pill.js';\n\nconst StyledInputPill = aggregatedClasses(Pill)('input-pill', null, ({ value }) => ({\n  value,\n}));\n\nexport const InputPill = ({\n  containerProps = {},\n  placeholder = 'Enter Value',\n  onChange = () => {},\n  onRemove,\n  value,\n  type,\n  ...otherProps\n}) => {\n  useDeprecateComponent({ componentName: 'ds-pills', version: 'TBD Date: 2023 Q3' });\n\n  let TypeOfInput = DSInput;\n  // TODO: implement the DSTimeInput, see how because it returns a moment()\n  // TODO: implement the DSDateInput\n  switch (type) {\n    case 'inputText':\n      TypeOfInput = DSInput;\n      break;\n    case 'inputMask':\n      TypeOfInput = DSInputMask;\n      break;\n    default:\n      break;\n  }\n\n  return (\n    <StyledInputPill\n      className=\"input-pill\"\n      classProps={{ value }}\n      containerProps={containerProps}\n      label={\n        <TypeOfInput\n          data-testid=\"input-pill\"\n          onChange={onChange}\n          placeholder={placeholder}\n          value={value}\n          {...otherProps}\n        />\n      }\n      rightAddon={\n        value && <CloseXsmall className=\"remove-pill-button\" data-testid=\"remove-pill-button\" onClick={onRemove} />\n      }\n      tabIndex={-1}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Cf;AA1CR,iCAAsC;AAEtC,6BAA4B;AAC5B,kCAAkC;AAClC,4BAAqC;AACrC,kBAAqB;AAErB,MAAM,sBAAkB,+CAAkB,gBAAI,EAAE,cAAc,MAAM,CAAC,EAAE,MAAM,OAAO;AAAA,EAClF;AACF,EAAE;AAEK,MAAM,YAAY,CAAC;AAAA,EACxB,iBAAiB,CAAC;AAAA,EAClB,cAAc;AAAA,EACd,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,wDAAsB,EAAE,eAAe,YAAY,SAAS,oBAAoB,CAAC;AAEjF,MAAI,cAAc;AAGlB,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,oBAAc;AACd;AAAA,IACF,KAAK;AACH,oBAAc;AACd;AAAA,IACF;AACE;AAAA,EACJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAY,EAAE,MAAM;AAAA,MACpB;AAAA,MACA,OACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,MAEF,YACE,SAAS,4CAAC,sCAAY,WAAU,sBAAqB,eAAY,sBAAqB,SAAS,UAAU;AAAA,MAE3G,UAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "names": []
+}

package/dist/cjs/deprecated/LabeledDropdownPills.js

@@ -0,0 +1,112 @@
+"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 LabeledDropdownPills_exports = {};
+__export(LabeledDropdownPills_exports, {
+  DSLabeledDropdownPillsWithSchema: () => DSLabeledDropdownPillsWithSchema,
+  LabeledDropdownPills: () => LabeledDropdownPills
+});
+module.exports = __toCommonJS(LabeledDropdownPills_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_legacy_utilities = require("@elliemae/ds-legacy-utilities");
+var import_ds_legacy_props_helpers = require("@elliemae/ds-legacy-props-helpers");
+var import_PillGroup = require("./PillGroup.js");
+var import_LabeledDropdownSinglePill = require("./LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js");
+var import_LabeledDropdownMultiPill = require("./LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js");
+var import_LabeledDropdownCascadeMenuPill = require("./LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js");
+const DropdownPills = {
+  single: import_LabeledDropdownSinglePill.LabeledDropdownSinglePill,
+  multi: import_LabeledDropdownMultiPill.LabeledDropdownMultiPills,
+  cascaded: import_LabeledDropdownCascadeMenuPill.LabeledDropdownCascadeMenuPill
+};
+const createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;
+const LabeledDropdownPills = ({
+  label = "",
+  value,
+  type,
+  onFocusNextGroup,
+  onFocusPreviousGroup,
+  onFocusGroupSet,
+  maxWidth,
+  minWidth,
+  fixed,
+  className,
+  ...menuProps
+}) => {
+  const Component = createDropdownPill(type);
+  (0, import_ds_legacy_utilities.useDeprecateComponent)({ componentName: "ds-pills", version: "TBD Date: 2023 Q3" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_PillGroup.PillGroup,
+    {
+      onFocusGroupSet,
+      onFocusNextGroup,
+      onFocusPreviousGroup,
+      containerProps: { className },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...menuProps, label, maxWidth, minWidth, value, fixed })
+    }
+  );
+};
+const props = {
+  /** pill type */
+  type: import_ds_legacy_props_helpers.PropTypes.oneOf(["single", "multi", "cascaded"]).description("pill type"),
+  /** focus next group callback */
+  onFocusNextGroup: import_ds_legacy_props_helpers.PropTypes.func.description("focus next group callback"),
+  /** focus prev group callback */
+  onFocusPreviousGroup: import_ds_legacy_props_helpers.PropTypes.func.description("focus prev group callback"),
+  /** focus group set callback */
+  onFocusGroupSet: import_ds_legacy_props_helpers.PropTypes.func.description("focus group set callback"),
+  /** pill max width */
+  maxWidth: import_ds_legacy_props_helpers.PropTypes.oneOfType([import_ds_legacy_props_helpers.PropTypes.string, import_ds_legacy_props_helpers.PropTypes.number]).description("pill max width"),
+  /** pill min width */
+  minWidth: import_ds_legacy_props_helpers.PropTypes.oneOfType([import_ds_legacy_props_helpers.PropTypes.string, import_ds_legacy_props_helpers.PropTypes.number]).description("pill min width"),
+  /** fixed pill */
+  fixed: import_ds_legacy_props_helpers.PropTypes.bool.description("fixed pill"),
+  /** pill label text */
+  label: import_ds_legacy_props_helpers.PropTypes.string.isRequired.description("pill label text"),
+  /** additional className */
+  className: import_ds_legacy_props_helpers.PropTypes.string.description("Additional className"),
+  /** pill value */
+  value: import_ds_legacy_props_helpers.PropTypes.oneOfType([
+    import_ds_legacy_props_helpers.PropTypes.arrayOf(
+      import_ds_legacy_props_helpers.PropTypes.shape({
+        id: import_ds_legacy_props_helpers.PropTypes.string,
+        label: import_ds_legacy_props_helpers.PropTypes.string
+      })
+    ),
+    import_ds_legacy_props_helpers.PropTypes.shape({
+      id: import_ds_legacy_props_helpers.PropTypes.string,
+      label: import_ds_legacy_props_helpers.PropTypes.string
+    })
+  ]).description("pill value")
+};
+LabeledDropdownPills.propTypes = props;
+LabeledDropdownPills.displayName = "LabeledDropdownPills";
+const DSLabeledDropdownPillsWithSchema = (0, import_ds_legacy_props_helpers.describe)(LabeledDropdownPills);
+DSLabeledDropdownPillsWithSchema.propTypes = props;
+//# sourceMappingURL=LabeledDropdownPills.js.map

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

@@ -0,0 +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-legacy-utilities';\nimport { PropTypes, describe } from '@elliemae/ds-legacy-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,iCAAsC;AACtC,qCAAoC;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,wDAAsB,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,yCAAU,MAAM,CAAC,UAAU,SAAS,UAAU,CAAC,EAAE,YAAY,WAAW;AAAA;AAAA,EAE9E,kBAAkB,yCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAExE,sBAAsB,yCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAE5E,iBAAiB,yCAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAEtE,UAAU,yCAAU,UAAU,CAAC,yCAAU,QAAQ,yCAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,UAAU,yCAAU,UAAU,CAAC,yCAAU,QAAQ,yCAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,OAAO,yCAAU,KAAK,YAAY,YAAY;AAAA;AAAA,EAE9C,OAAO,yCAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,WAAW,yCAAU,OAAO,YAAY,sBAAsB;AAAA;AAAA,EAE9D,OAAO,yCAAU,UAAU;AAAA,IACzB,yCAAU;AAAA,MACR,yCAAU,MAAM;AAAA,QACd,IAAI,yCAAU;AAAA,QACd,OAAO,yCAAU;AAAA,MACnB,CAAC;AAAA,IACH;AAAA,IACA,yCAAU,MAAM;AAAA,MACd,IAAI,yCAAU;AAAA,MACd,OAAO,yCAAU;AAAA,IACnB,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,YAAY;AAC7B;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,uCAAmC,yCAAS,oBAAoB;AACtE,iCAAiC,YAAY;",
+  "names": []
+}

package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js

@@ -0,0 +1,134 @@
+"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 LabeledDropdownCascadeMenuPill_exports = {};
+__export(LabeledDropdownCascadeMenuPill_exports, {
+  LabeledDropdownCascadeMenuPill: () => LabeledDropdownCascadeMenuPill,
+  default: () => LabeledDropdownCascadeMenuPill_default
+});
+module.exports = __toCommonJS(LabeledDropdownCascadeMenuPill_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_legacy_utilities = require("@elliemae/ds-legacy-utilities");
+var import_PillGroup = require("../PillGroup.js");
+var import_RemovablePill = require("../RemovablePill.js");
+var import_DropdownPill = require("../DropdownPill.js");
+function renderMenuItems(options, factory) {
+  return options.map((option, index) => {
+    const ItemComponent = factory("radio");
+    if (option.type === "submenu") {
+      const SubmenuComponent = factory("submenu");
+      const ChildComponent = factory("selection-group");
+      return /* @__PURE__ */ (0, import_react.createElement)(SubmenuComponent, { ...option, key: option.id, item: option }, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ChildComponent,
+        {
+          ...option,
+          id: option.id,
+          item: option,
+          items: option.items,
+          itemValueAccessor: (item) => item,
+          multi: true
+        }
+      ));
+    }
+    return /* @__PURE__ */ (0, import_react.createElement)(ItemComponent, { ...option, key: option.id || index, item: option });
+  });
+}
+const getSubmenuOptionLabelById = (options, id) => {
+  const index = options.findIndex((option) => option.id === id);
+  return index ? options[index].label : "";
+};
+const LabeledDropdownCascadeMenuPill = ({
+  label,
+  options,
+  value: optionValue,
+  onChange,
+  onRemove,
+  value: selection = {},
+  placeholder = "---",
+  onFocusNextGroup,
+  onFocusPreviousGroup,
+  onFocusGroupSet,
+  maxWidth,
+  minWidth,
+  ...menuProps
+}) => {
+  const selectionId = Object.keys(selection)[0];
+  const selectionValues = selection[selectionId] || "";
+  const dropdownLabel = Array.isArray(selectionValues) ? getSubmenuOptionLabelById(options, selectionId) : selectionValues;
+  const handleSelectChange = ({ item, group }) => {
+    if ((0, import_ds_legacy_utilities.isFunction)(onChange)) {
+      const nextSelection = group ? {
+        [group.id]: (0, import_ds_legacy_utilities.addOrRemove)([...selection[group.id] || []], item, (o) => o.id)
+      } : {
+        [item.id]: item.label
+      };
+      onChange(nextSelection);
+    }
+  };
+  const removeOption = (option) => {
+    if ((0, import_ds_legacy_utilities.isFunction)(onChange)) {
+      const nextSelection = {
+        [selectionId]: selectionValues.filter((val) => option.id !== val.id)
+      };
+      onChange(nextSelection);
+    }
+    onRemove(option);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_PillGroup.PillGroup,
+    {
+      onFocusGroupSet,
+      onFocusNextGroup,
+      onFocusPreviousGroup,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_DropdownPill.DropdownPill,
+          {
+            ...menuProps,
+            itemsRenderer: renderMenuItems,
+            label: dropdownLabel || placeholder,
+            maxWidth,
+            minWidth,
+            onSelectChange: handleSelectChange,
+            options,
+            selection: {
+              [selectionId]: Array.isArray(selectionValues) ? selectionValues.map((v) => v.id) : selectionValues
+            },
+            singleGroupSelection: true,
+            variant: "title"
+          }
+        ),
+        Array.isArray(selectionValues) && selectionValues.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RemovablePill.RemovablePill, { label: option.label, onRemove: () => removeOption(option) }, option.id))
+      ]
+    }
+  );
+};
+var LabeledDropdownCascadeMenuPill_default = LabeledDropdownCascadeMenuPill;
+//# sourceMappingURL=LabeledDropdownCascadeMenuPill.js.map

package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.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 { isFunction, addOrRemove } from '@elliemae/ds-legacy-utilities';\nimport { PillGroup } from '../PillGroup.js';\nimport { RemovablePill } from '../RemovablePill.js';\nimport { DropdownPill } from '../DropdownPill.js';\n\nfunction renderMenuItems(options, factory) {\n  return options.map((option, index) => {\n    const ItemComponent = factory('radio');\n\n    if (option.type === 'submenu') {\n      const SubmenuComponent = factory('submenu');\n      const ChildComponent = factory('selection-group');\n      return (\n        <SubmenuComponent {...option} key={option.id} item={option}>\n          <ChildComponent\n            {...option}\n            id={option.id}\n            item={option}\n            items={option.items}\n            itemValueAccessor={(item) => item}\n            multi\n          />\n        </SubmenuComponent>\n      );\n    }\n\n    return <ItemComponent {...option} key={option.id || index} item={option} />;\n  });\n}\n\nconst getSubmenuOptionLabelById = (options, id) => {\n  const index = options.findIndex((option) => option.id === id);\n  return index ? options[index].label : '';\n};\n\nconst LabeledDropdownCascadeMenuPill = ({\n  label,\n  options,\n  value: optionValue,\n  onChange,\n  onRemove,\n  value: selection = {},\n  placeholder = '---',\n  onFocusNextGroup,\n  onFocusPreviousGroup,\n  onFocusGroupSet,\n  maxWidth,\n  minWidth,\n  ...menuProps\n}) => {\n  const selectionId = Object.keys(selection)[0];\n  const selectionValues = selection[selectionId] || '';\n  const dropdownLabel = Array.isArray(selectionValues)\n    ? getSubmenuOptionLabelById(options, selectionId)\n    : selectionValues;\n\n  const handleSelectChange = ({ item, group }) => {\n    if (isFunction(onChange)) {\n      const nextSelection = group\n        ? {\n            [group.id]: addOrRemove([...(selection[group.id] || [])], item, (o) => o.id),\n          }\n        : {\n            [item.id]: item.label,\n          };\n      onChange(nextSelection);\n    }\n  };\n\n  const removeOption = (option) => {\n    if (isFunction(onChange)) {\n      const nextSelection = {\n        [selectionId]: selectionValues.filter((val) => option.id !== val.id),\n      };\n      onChange(nextSelection);\n    }\n    onRemove(option);\n  };\n\n  return (\n    <PillGroup\n      onFocusGroupSet={onFocusGroupSet}\n      onFocusNextGroup={onFocusNextGroup}\n      onFocusPreviousGroup={onFocusPreviousGroup}\n    >\n      <DropdownPill\n        {...menuProps}\n        itemsRenderer={renderMenuItems}\n        label={dropdownLabel || placeholder}\n        maxWidth={maxWidth}\n        minWidth={minWidth}\n        onSelectChange={handleSelectChange}\n        options={options}\n        selection={{\n          [selectionId]: Array.isArray(selectionValues) ? selectionValues.map((v) => v.id) : selectionValues,\n        }}\n        singleGroupSelection\n        variant=\"title\"\n      />\n      {Array.isArray(selectionValues) &&\n        selectionValues.map((option) => (\n          <RemovablePill key={option.id} label={option.label} onRemove={() => removeOption(option)} />\n        ))}\n    </PillGroup>\n  );\n};\n\nexport { LabeledDropdownCascadeMenuPill };\nexport default LabeledDropdownCascadeMenuPill;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js

@@ -0,0 +1,154 @@
+"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 LabeledDropdownMultiPill_exports = {};
+__export(LabeledDropdownMultiPill_exports, {
+  LabeledDropdownMultiPills: () => LabeledDropdownMultiPills,
+  default: () => LabeledDropdownMultiPill_default
+});
+module.exports = __toCommonJS(LabeledDropdownMultiPill_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lodash = require("lodash");
+var import_ds_legacy_utilities = require("@elliemae/ds-legacy-utilities");
+var import_RemovablePill = require("../RemovablePill.js");
+var import_Pill = require("../Pill.js");
+var import_OverflowPill = require("../OverflowPill.js");
+var import_DropdownPill = require("../DropdownPill.js");
+const LabeledDropdownMultiPills = ({
+  label,
+  options = [],
+  value = [],
+  onSelect = () => null,
+  onRemove = () => null,
+  onChange,
+  // if this is defined, then it's calculating the next result onSelect or onRemove
+  maxWidth,
+  minWidth,
+  ...menuProps
+}) => {
+  const [totalDefaultOptions, setTotalDefaultOptions] = (0, import_react.useState)(0);
+  const [selectedOptions, setSelectedOptions] = (0, import_react.useState)(value);
+  const [allOptions, setAllOptions] = (0, import_react.useState)(options);
+  const [overflowOptions, setOverflowOptions] = (0, import_react.useState)([]);
+  const overflowQuantity = 3;
+  (0, import_react.useEffect)(() => setSelectedOptions(value), [value]);
+  (0, import_react.useEffect)(() => {
+    const newOptions = allOptions.filter((option) => option.fixedItem);
+    if (newOptions.length > 0) {
+      setSelectedOptions(newOptions);
+    }
+    setTotalDefaultOptions(newOptions.length);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (totalDefaultOptions) {
+      const newOptions = allOptions.map((opt) => {
+        if (selectedOptions.length <= totalDefaultOptions && (0, import_lodash.find)(selectedOptions, { id: opt.id })) {
+          return { ...opt, fixedItem: true };
+        }
+        return { ...opt, fixedItem: false };
+      });
+      setAllOptions(newOptions);
+    }
+  }, [onSelect, onRemove, selectedOptions]);
+  (0, import_react.useEffect)(() => {
+    if (selectedOptions.length > overflowQuantity) {
+      const overflow = selectedOptions.filter((val, index) => index >= overflowQuantity);
+      setOverflowOptions(overflow);
+    }
+  }, [selectedOptions]);
+  const selectOption = (0, import_react.useCallback)(
+    (option) => {
+      if (!option.fixedItem) {
+        if ((0, import_ds_legacy_utilities.isFunction)(onChange)) {
+          const nextValue = (0, import_ds_legacy_utilities.addOrRemove)(selectedOptions, option, (item) => item.id);
+          setSelectedOptions(nextValue);
+          onChange(nextValue);
+        }
+        onSelect(option);
+      }
+    },
+    [selectedOptions]
+  );
+  const removeOption = (0, import_react.useCallback)(
+    (option) => {
+      if (!option.fixedItem || selectedOptions.length > totalDefaultOptions) {
+        if ((0, import_ds_legacy_utilities.isFunction)(onChange)) {
+          const nextValue = selectedOptions.filter((val) => option.id !== val.id);
+          setSelectedOptions(nextValue);
+          onChange(nextValue);
+        }
+        onRemove(option);
+      }
+    },
+    [selectedOptions]
+  );
+  const typeOfPill = () => {
+    if (selectedOptions.length > totalDefaultOptions) {
+      return import_RemovablePill.RemovablePill;
+    }
+    return import_Pill.Pill;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_DropdownPill.DropdownPill,
+      {
+        ...menuProps,
+        focusOnOpen: false,
+        label,
+        maxWidth,
+        minWidth,
+        onSelectMenuItem: selectOption,
+        options: [
+          {
+            ...menuProps,
+            type: "SelectionGroup",
+            id: "multi-selection-views",
+            multi: true,
+            items: allOptions
+          }
+        ],
+        selection: {
+          "multi-selection-views": selectedOptions ? selectedOptions.map((o) => o.id) : ""
+        },
+        variant: "title"
+      }
+    ),
+    selectedOptions && selectedOptions.map((option, index) => {
+      const TypeOfPill = typeOfPill();
+      if (index < overflowQuantity) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypeOfPill, { label: option.label, onRemove: () => removeOption(option) }, option.id);
+      }
+      return null;
+    }),
+    selectedOptions && selectedOptions.length > overflowQuantity && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverflowPill.OverflowPill, { label: `+ ${selectedOptions.length - overflowQuantity}`, options: overflowOptions })
+  ] });
+};
+var LabeledDropdownMultiPill_default = LabeledDropdownMultiPills;
+//# sourceMappingURL=LabeledDropdownMultiPill.js.map