@qualtrics/plugin-ui-react 1.4.0-alpha.13 → 1.4.0-alpha.16

package/dist/main.es.js

@@ -0,0 +1,3560 @@
+/*! @license @qualtrics/plugin-ui-react 1.4.0-alpha.3
+Qualtrics Software License Agreement
+
+1. General.
+1.1 Introduction.  The software, programs, files, and/or code provided to you hereunder (collectively, the ?Software?) is hereby licensed to you subject to the terms of this License Agreement (this ?Agreement?). This Agreement forms a legally binding contract between you and Qualtrics, LLC (?Qualtrics?) in relation to your use of the Software. This Agreement relates solely to the Software provided under this Agreement and does not extend to, or provide any rights in connection with, any other products or services, including without limitation Qualtrics? software-as-a-service offerings and related services and products provided by Qualtrics to you or third parties (collectively, the ?Qualtrics Services?).
+1.2 Acceptance of Agreement.  By accessing or using the Software, you acknowledge and agree to all of the terms and conditions of this Agreement. You may not access or use the Software if you do not accept this Agreement. You may not use the Software and may not accept this Agreement if you are a person barred from receiving the Software under the laws or regulations of the United States or other countries, including the country in which you are resident or from which you use the Software. If you are agreeing to be bound by this Agreement on behalf of your employer or other organization, you represent and warrant that you have full legal authority to bind your employer or such organization to this Agreement. If you do not have the requisite authority, you may not accept this Agreement or use the Software on behalf of your employer or organization.
+
+2. License and Use.
+2.1 Grant of License.  Subject to the terms of this Agreement, Qualtrics grants you a limited, worldwide, royalty-free, non-assignable, non-exclusive, non-sublicensable, and revocable license to use the Software solely to interface or interact with, or to develop applications that interface or interact with, the Qualtrics Services.  Qualtrics reserves the right to revoke this license at any time for any reason.
+2.2 Acceptable Use.  You may not use the Software for any purpose not expressly permitted by this Agreement. You may not use the Software in connection with any activity, including the development or distribution of an application, that interferes with, disrupts, damages, or accesses in an unauthorized manner the servers, networks, or other properties or services of Qualtrics or any third party. Except to the extent explicitly authorized by the Software or as otherwise required by applicable third party licenses, you may not copy (except for routine backup purposes), modify, adapt, redistribute, decompile, reverse engineer, disassemble, or create derivative works of the Software or any part of the Software. You agree to use the Software only for purposes that are permitted by (a) this Agreement and (b) any applicable law, regulation or generally accepted practices or guidelines in the relevant jurisdictions (including any laws regarding the export of data or software to and from the United States or other relevant countries). You may not use this Software in connection with applications that are competitive with or disparaging toward Qualtrics or Qualtrics Services or that interface or interact with products or services that are competitive with Qualtrics Services. 
+2.3 Responsibility for Use.  You agree that you are solely responsible for (and that Qualtrics has no responsibility to you or to any third party for) any data, content, or resources that you create, transmit or display and for the consequences of your actions (including any loss or damage which Qualtrics may suffer) by doing so. You agree that you are solely responsible for (and that Qualtrics has no responsibility to you or to any third party for) any breach of your obligations under this Agreement, any applicable third party contract or terms of service, or any applicable law or regulation, and for the consequences (including any loss or damage that Qualtrics or any third party may suffer) of any such breach. 
+
+3 IP Ownership.
+3.1 Qualtrics IP.  You agree that as between you and Qualtrics, Qualtrics owns all legal right, title and interest in and to the Software and related materials, including any Intellectual Property Rights in the Software. Qualtrics reserves all rights not expressly granted to you. As used herein, ?Intellectual Property Rights? means any and all rights under patent law, copyright law, trade secret law, trademark law, and/or any other intellectual property or proprietary rights.
+3.2 Your IP.  Subject to the preceding subsection and other terms of this Agreement, Qualtrics agrees that it obtains no right, title or interest from you (or your licensors) under this Agreement in or to any software applications that you develop using the Software, including any Intellectual Property Rights in those applications.
+3.3 Trademarks.  Nothing in this Agreement gives you a right to use any of Qualtrics? trade names, trademarks, service marks, logos, domain names, or other distinctive brand features. You agree that you will not remove, obscure, or alter any proprietary rights notices (including copyright and trademark notices) that may be affixed to or contained within the Software.
+3.4 Open Source.  Use, reproduction and distribution of components of the Software licensed under an open source software license, if any, are governed solely by the terms of the applicable open source software license.
+
+4. Privacy and Information.
+4.1 Your Privacy Responsibilities.  You agree that if you use the Software to develop applications for users, you will protect the privacy and legal rights of those users. If you use any Software or Qualtrics Service to retrieve a user?s data, you acknowledge and agree that you will retrieve data only with the user?s consent and in accordance with applicable laws. If your application stores personal or sensitive information provided by users, it must do so securely and in accordance with applicable law. If a user provides your application with Qualtrics account information, your application may only use that information to access the user?s Qualtrics account when, and for the limited purposes for which, the user has given you permission to do so.
+4.2 Qualtrics Privacy Responsibilities.  In order to innovate on and improve the Software, Qualtrics may collect certain usage information and statistics from your use of thereof. The data collected will be anonymized and/or maintained in accordance with the Qualtrics Privacy Statement available online. 
+
+5. Term
+5.1 Term; Termination.  This Agreement will commence on the earlier of when you click through to accept its terms or when you access or use the Software. This Agreement will continue in effect until terminated by either you or Qualtrics.  You may terminate this Agreement at any time by ceasing to access and use the Software and returning or destroying all copies and portions of the Software and related materials.  Qualtrics may terminate this Agreement at any time by ceasing to make the Software available to you or by providing notice of termination to you in any reasonable form.
+5.2 Effect of Termination.  Upon termination of this Agreement for any reason, all of your rights hereunder will immediately terminate, and you must immediately cease to access and use the Software and return or destroy all copies and portions of the Software and related materials. Sectionsˇ3, 5, 6, 7, 8, 9, and 10 will survive indefinitely notwithstanding the termination of this Agreement.
+
+6. DISCLAIMER OF WARRANTIES.  YOU EXPRESSLY UNDERSTAND AND AGREE THAT YOUR USE OF THE SOFTWARE AND ANY MATERIAL DOWNLOADED OR OTHERWISE OBTAINED IN CONNECTION WITH USE OF THE SOFTWARE IS AT YOUR OWN DISCRETION AND AT YOUR SOLE RISK. YOU ARE SOLELY RESPONSIBLE FOR ANY DAMAGE TO YOUR COMPUTER SYSTEM OR OTHER DEVICE OR LOSS OF DATA THAT RESULTS FORM SUCH USE. THE SOFTWARE IS PROVIDED ?AS IS? AND ?AS AVAILABLE? WITHOUT WARRANTY OF ANY KIND FROM QUALTRICS OR ANY OTHER PERSON. QUALTRICS EXPRESSLY DISCLAIMS ALL REPRESENTATIONS, WARRANTIES AND CONDITIONS OF ANY KIND, WHETHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY IMPLIED WARRANTIES AND CONDITIONS OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.
+
+7. LIMITATION OF LIABILITY.  YOU EXPRESSLY UNDERSTAND AND AGREE THAT NEITHER QUALTRICS NOR ITS AFFILIATES NOR THEIR RESPECTIVE DIRECTORS, OFFICERS, EMPLOYEES, OR AGENTS SHALL BE LIABLE TO YOU UNDER ANY THEORY OF LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL OR EXEMPLARY DAMAGES THAT MAY BE INCURRED BY YOU ARISING FROM OR RELATING TO THE SOFTWARE OR THIS AGREEMENT, INCLUDING WITHOUT LIMITATION ANY LOSS OF DATA, WHETHER OR NOT QUALTRICS OR ITS REPRESENTATIVES HAVE BEEN ADVISED OF OR SHOULD HAVE BEEN AWARE OF THE POSSIBILITY OF ANY SUCH LOSSES ARISING. 
+
+8. Indemnification.  To the maximum extent permitted by law, you agree to defend, indemnify and hold harmless Qualtrics, its affiliates and their respective directors, officers, employees and agents from and against any and all claims, actions, suits or proceedings, as well as any and all losses, liabilities, damages, costs and expenses (including reasonable attorneys? fees) arising out of or relating to (a) your use of the Software, (b) any application or work you develop with the Software that infringes any Intellectual Property Right of any person or defames any person or violates their rights of publicity or privacy, and/or (c) any breach or non-compliance by you of this Agreement. 
+
+9. Modification.
+9.1 Modification of Software.  You understand and agree that the substance, form, and nature of the Software that Qualtrics provides may change without prior notice to you and that future versions of the Software may be incompatible with applications developed on previous versions of the Software. You agree that Qualtrics may stop (permanently or temporarily) providing the Software or any features within the Software to you or to users generally at Qualtrics? sole discretion, without prior notice to you.
+9.2 Modification of Agreement.  Qualtrics may modify this Agreement at any time by posting a revised version or by providing notice to you in any reasonable form. The modified Agreement will become effective immediately upon such posting or notification. By continuing to use the Software after the effective date of any modifications to this Agreement, you agree to be bound by the modified terms. It is your responsibility to check the online location of this Agreement regularly for modifications. Qualtrics last modified this Agreement on the date listed at the end of this Agreement.
+
+10. Miscellaneous
+10.1 Export Restrictions.  The Software may be subject to United States export laws and regulations. You acknowledge and agree that you will comply with all domestic and international export laws and regulations that apply to the Software. These laws include restrictions on destinations, end users, and end use.
+10.2 Waiver.  You agree that if Qualtrics does not exercise or enforce any legal right or remedy that is contained in this Agreement (or that Qualtrics has the benefit of under any applicable law), then this will not result in a waiver of Qualtrics? rights and those rights or remedies will still be available to Qualtrics.
+10.3 Severability.  If any court of law rules that any provision of this Agreement is invalid, then that provision will be removed from this Agreement without affecting the rest of this Agreement. The remaining provisions of this Agreement will continue to be valid and enforceable to the maximum extent possible under applicable law.
+10.4 Third-Party Beneficiaries.  You acknowledge and agree that each of Qualtrics? affiliates is a third-party beneficiary to this Agreement and shall be entitled to directly enforce, and rely upon, any provision of this Agreement that confers a benefit on (or rights in favor of) it. Other than this, no other person or company shall be third party beneficiaries to this Agreement.
+10.5 Assignment.  You may not assign, delegate, or transfer this Agreement or your rights, duties, or obligations under this Agreement without the prior written consent of Qualtrics. Qualtrics may freely assign this Agreement or its rights, duties, or obligations hereunder, without consent, including without limitation in the event of a merger, acquisition, corporate reorganization, or sale of all or substantially all of its assets.
+10.6 Choice of Law; Jurisdiction.  This Agreement, and your relationship with Qualtrics under this Agreement, shall be governed by the laws of the State of Utah without regard to its conflict of laws provisions. You and Qualtrics agree to submit to the exclusive jurisdiction of the courts located within Salt Lake County, Utah to resolve any legal matter arising from this Agreement. Notwithstanding the foregoing, you agree that Qualtrics shall still be allowed to apply for injunctive remedies (or an equivalent type of urgent legal relief) in any jurisdiction.
+10.7 Headings; Entire Agreement.  The headings contained in this Agreement are for convenience only and shall not be interpreted to limit or otherwise affect any provision of this Agreement. This Agreement constitutes the entire agreement between you and Qualtrics in relation to the Software. This Agreement completely replaces and supersedes any prior agreements between you and Qualtrics in relation to the Software. For the avoidance of doubt, and if applicable, your general use of Qualtrics Services will continue to be governed by the applicable, separate agreement between Qualtrics and you or your organization.
+
+Last updated August 28, 2019
+*/
+
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.promise.js';
+import 'core-js/modules/es.object.keys.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.find-index.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.array.for-each.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import React, { Component, useState, useEffect, useRef, useCallback } from 'react';
+import _get from 'lodash.get';
+import { Button, Icon, IconTypes, InputGroup, Input, LoadingSpinner, IconButton, Tooltip, SelectMenu, MenuItem, Label, FormField, InputField, Dropdown, DropdownButton, DropdownList, DropdownOption } from '@qualtrics/ui-react';
+import { ErrorIcon, PipedTextIcon, RemoveItemIcon, SuccessIcon, CheckIcon, AddIcon } from '@qualtrics/ui-react/icons';
+import 'core-js/modules/es.string.anchor.js';
+import _cloneDeep from 'lodash.clonedeep';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.is-array.js';
+import { Manager, Reference, Popper } from 'react-popper';
+import ReactDOM from 'react-dom';
+import uuid, { v4 } from 'uuid';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.function.name.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.array.find.js';
+import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/es.array.filter.js';
+import _cloneDeepWith from 'lodash.clonedeepwith';
+import 'core-js/modules/es.string.trim.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.search.js';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$m = ".react-app {\n  background-color: RGBA(0, 0, 0, 0.1); }\n";
+styleInject(css_248z$m);
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _regeneratorRuntime() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+  _regeneratorRuntime = function () {
+    return exports;
+  };
+
+  var exports = {},
+      Op = Object.prototype,
+      hasOwn = Op.hasOwnProperty,
+      $Symbol = "function" == typeof Symbol ? Symbol : {},
+      iteratorSymbol = $Symbol.iterator || "@@iterator",
+      asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
+      toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
+
+  function define(obj, key, value) {
+    return Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }), obj[key];
+  }
+
+  try {
+    define({}, "");
+  } catch (err) {
+    define = function (obj, key, value) {
+      return obj[key] = value;
+    };
+  }
+
+  function wrap(innerFn, outerFn, self, tryLocsList) {
+    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
+        generator = Object.create(protoGenerator.prototype),
+        context = new Context(tryLocsList || []);
+    return generator._invoke = function (innerFn, self, context) {
+      var state = "suspendedStart";
+      return function (method, arg) {
+        if ("executing" === state) throw new Error("Generator is already running");
+
+        if ("completed" === state) {
+          if ("throw" === method) throw arg;
+          return doneResult();
+        }
+
+        for (context.method = method, context.arg = arg;;) {
+          var delegate = context.delegate;
+
+          if (delegate) {
+            var delegateResult = maybeInvokeDelegate(delegate, context);
+
+            if (delegateResult) {
+              if (delegateResult === ContinueSentinel) continue;
+              return delegateResult;
+            }
+          }
+
+          if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
+            if ("suspendedStart" === state) throw state = "completed", context.arg;
+            context.dispatchException(context.arg);
+          } else "return" === context.method && context.abrupt("return", context.arg);
+          state = "executing";
+          var record = tryCatch(innerFn, self, context);
+
+          if ("normal" === record.type) {
+            if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
+            return {
+              value: record.arg,
+              done: context.done
+            };
+          }
+
+          "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
+        }
+      };
+    }(innerFn, self, context), generator;
+  }
+
+  function tryCatch(fn, obj, arg) {
+    try {
+      return {
+        type: "normal",
+        arg: fn.call(obj, arg)
+      };
+    } catch (err) {
+      return {
+        type: "throw",
+        arg: err
+      };
+    }
+  }
+
+  exports.wrap = wrap;
+  var ContinueSentinel = {};
+
+  function Generator() {}
+
+  function GeneratorFunction() {}
+
+  function GeneratorFunctionPrototype() {}
+
+  var IteratorPrototype = {};
+  define(IteratorPrototype, iteratorSymbol, function () {
+    return this;
+  });
+  var getProto = Object.getPrototypeOf,
+      NativeIteratorPrototype = getProto && getProto(getProto(values([])));
+  NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
+  var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
+
+  function defineIteratorMethods(prototype) {
+    ["next", "throw", "return"].forEach(function (method) {
+      define(prototype, method, function (arg) {
+        return this._invoke(method, arg);
+      });
+    });
+  }
+
+  function AsyncIterator(generator, PromiseImpl) {
+    function invoke(method, arg, resolve, reject) {
+      var record = tryCatch(generator[method], generator, arg);
+
+      if ("throw" !== record.type) {
+        var result = record.arg,
+            value = result.value;
+        return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
+          invoke("next", value, resolve, reject);
+        }, function (err) {
+          invoke("throw", err, resolve, reject);
+        }) : PromiseImpl.resolve(value).then(function (unwrapped) {
+          result.value = unwrapped, resolve(result);
+        }, function (error) {
+          return invoke("throw", error, resolve, reject);
+        });
+      }
+
+      reject(record.arg);
+    }
+
+    var previousPromise;
+
+    this._invoke = function (method, arg) {
+      function callInvokeWithMethodAndArg() {
+        return new PromiseImpl(function (resolve, reject) {
+          invoke(method, arg, resolve, reject);
+        });
+      }
+
+      return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+    };
+  }
+
+  function maybeInvokeDelegate(delegate, context) {
+    var method = delegate.iterator[context.method];
+
+    if (undefined === method) {
+      if (context.delegate = null, "throw" === context.method) {
+        if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel;
+        context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method");
+      }
+
+      return ContinueSentinel;
+    }
+
+    var record = tryCatch(method, delegate.iterator, context.arg);
+    if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
+    var info = record.arg;
+    return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
+  }
+
+  function pushTryEntry(locs) {
+    var entry = {
+      tryLoc: locs[0]
+    };
+    1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
+  }
+
+  function resetTryEntry(entry) {
+    var record = entry.completion || {};
+    record.type = "normal", delete record.arg, entry.completion = record;
+  }
+
+  function Context(tryLocsList) {
+    this.tryEntries = [{
+      tryLoc: "root"
+    }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
+  }
+
+  function values(iterable) {
+    if (iterable) {
+      var iteratorMethod = iterable[iteratorSymbol];
+      if (iteratorMethod) return iteratorMethod.call(iterable);
+      if ("function" == typeof iterable.next) return iterable;
+
+      if (!isNaN(iterable.length)) {
+        var i = -1,
+            next = function next() {
+          for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
+
+          return next.value = undefined, next.done = !0, next;
+        };
+
+        return next.next = next;
+      }
+    }
+
+    return {
+      next: doneResult
+    };
+  }
+
+  function doneResult() {
+    return {
+      value: undefined,
+      done: !0
+    };
+  }
+
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
+    var ctor = "function" == typeof genFun && genFun.constructor;
+    return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
+  }, exports.mark = function (genFun) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
+  }, exports.awrap = function (arg) {
+    return {
+      __await: arg
+    };
+  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+    return this;
+  }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
+    void 0 === PromiseImpl && (PromiseImpl = Promise);
+    var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
+    return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
+      return result.done ? result.value : iter.next();
+    });
+  }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
+    return this;
+  }), define(Gp, "toString", function () {
+    return "[object Generator]";
+  }), exports.keys = function (object) {
+    var keys = [];
+
+    for (var key in object) keys.push(key);
+
+    return keys.reverse(), function next() {
+      for (; keys.length;) {
+        var key = keys.pop();
+        if (key in object) return next.value = key, next.done = !1, next;
+      }
+
+      return next.done = !0, next;
+    };
+  }, exports.values = values, Context.prototype = {
+    constructor: Context,
+    reset: function (skipTempReset) {
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
+    },
+    stop: function () {
+      this.done = !0;
+      var rootRecord = this.tryEntries[0].completion;
+      if ("throw" === rootRecord.type) throw rootRecord.arg;
+      return this.rval;
+    },
+    dispatchException: function (exception) {
+      if (this.done) throw exception;
+      var context = this;
+
+      function handle(loc, caught) {
+        return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
+      }
+
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i],
+            record = entry.completion;
+        if ("root" === entry.tryLoc) return handle("end");
+
+        if (entry.tryLoc <= this.prev) {
+          var hasCatch = hasOwn.call(entry, "catchLoc"),
+              hasFinally = hasOwn.call(entry, "finallyLoc");
+
+          if (hasCatch && hasFinally) {
+            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+          } else if (hasCatch) {
+            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+          } else {
+            if (!hasFinally) throw new Error("try statement without catch or finally");
+            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+          }
+        }
+      }
+    },
+    abrupt: function (type, arg) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+
+        if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
+          var finallyEntry = entry;
+          break;
+        }
+      }
+
+      finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
+      var record = finallyEntry ? finallyEntry.completion : {};
+      return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
+    },
+    complete: function (record, afterLoc) {
+      if ("throw" === record.type) throw record.arg;
+      return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
+    },
+    finish: function (finallyLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
+      }
+    },
+    catch: function (tryLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+
+        if (entry.tryLoc === tryLoc) {
+          var record = entry.completion;
+
+          if ("throw" === record.type) {
+            var thrown = record.arg;
+            resetTryEntry(entry);
+          }
+
+          return thrown;
+        }
+      }
+
+      throw new Error("illegal catch attempt");
+    },
+    delegateYield: function (iterable, resultName, nextLoc) {
+      return this.delegate = {
+        iterator: values(iterable),
+        resultName: resultName,
+        nextLoc: nextLoc
+      }, "next" === this.method && (this.arg = undefined), ContinueSentinel;
+    }
+  }, exports;
+}
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+        args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+
+      _next(undefined);
+    });
+  };
+}
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var uniqueIdCounter = 0;
+var EventRegistry = function () {
+  function EventRegistry(isSingletonHandler) {
+    var _this = this;
+
+    _classCallCheck(this, EventRegistry);
+
+    _defineProperty(this, "register", function (callback) {
+      var id;
+
+      if (_this.isSingletonHandler) {
+        _this.handler = callback;
+        return function () {
+          return _this.handler = undefined;
+        };
+      } else {
+        id = uniqueIdCounter++;
+
+        _this.handlers.push({
+          callback: callback,
+          id: id
+        });
+
+        return function () {
+          _this.unregister(id);
+        };
+      }
+    });
+
+    this.isSingletonHandler = !!isSingletonHandler;
+    this.handlers = [];
+
+    this.handler = function () {};
+  }
+
+  _createClass(EventRegistry, [{
+    key: "unregister",
+    value: function unregister(id) {
+      var foundIdx;
+
+      if (this.isSingletonHandler) {
+        return;
+      }
+
+      foundIdx = this.handlers.findIndex(function (handler) {
+        return handler.id === id;
+      });
+
+      if (foundIdx !== -1) {
+        this.handlers.splice(foundIdx, 1);
+      }
+    }
+  }, {
+    key: "trigger",
+    value: function trigger(data) {
+      if (this.isSingletonHandler) {
+        return this.handler(data);
+      } else {
+        this.handlers.forEach(function (handler) {
+          handler.callback(data);
+        });
+      }
+    }
+  }]);
+
+  return EventRegistry;
+}();
+
+var globalObj = (typeof global === "undefined" ? "undefined" : _typeof(global)) !== undefined ? global : (typeof self === "undefined" ? "undefined" : _typeof(self)) !== undefined ? self : (typeof window === "undefined" ? "undefined" : _typeof(window)) !== undefined ? window : {};
+var pluginSdkClient;
+var events = {
+  'actions_task': {
+    save: new EventRegistry(true)
+  }
+};
+var pluginTypeHandlers = {
+  'actions_task': {
+    save: function save(data) {
+      return events['actions_task'].save.trigger(data);
+    }
+  }
+};
+var PluginSdkService = {
+  getPluginSdkClient: getPluginSdkClient
+};
+
+function getPluginSdkClient(handlers) {
+  var isAlpha = !globalObj.PluginClient;
+
+  if (pluginSdkClient !== undefined) {
+    if (isAlpha) {
+      return pluginSdkClient;
+    } else {
+      return new Promise(function (resolve) {
+        return resolve(pluginSdkClient);
+      });
+    }
+  }
+
+  if (isAlpha) {
+    return initializeLegacyPluginClient(globalObj.PluginSDKClient);
+  } else if (!isAlpha && globalObj.PluginClient !== undefined) {
+    return initializePluginClient(globalObj.PluginClient, handlers);
+  } else {
+    throw new Error('No PluginClient or PluginSDKClient found on global object');
+  }
+}
+
+function initializePluginClient(client, handlerConfig) {
+  var registerHandler;
+
+  var _getDefaultHandlersFo = getDefaultHandlersForPluginType(handlerConfig),
+      pluginType = _getDefaultHandlersFo.pluginType,
+      eventHandlers = _getDefaultHandlersFo.eventHandlers;
+
+  registerHandler = function registerHandler(eventType, callback) {
+    var availableHandlers;
+    availableHandlers = Object.keys(eventHandlers);
+
+    if (availableHandlers.includes(eventType)) {
+      return events[pluginType][eventType].register(callback);
+    } else {
+      return function () {};
+    }
+  };
+
+  return client.initialize(eventHandlers).then(function (initializedClient) {
+    if (typeof initializedClient.registerHandler !== 'function') {
+      initializedClient.registerHandler = registerHandler;
+    }
+
+    pluginSdkClient = initializedClient;
+    return pluginSdkClient;
+  });
+}
+
+function getDefaultHandlersForPluginType(handlerConfig) {
+  var pluginType, eventHandlers;
+  pluginType = undefined;
+  eventHandlers = {};
+
+  if (_typeof(handlerConfig) === 'object') {
+    eventHandlers = handlerConfig;
+  } else if (typeof handlerConfig === 'string') {
+    pluginType = handlerConfig;
+    eventHandlers = pluginTypeHandlers[handlerConfig] || {};
+  } else {
+    eventHandlers = handlerConfig;
+  }
+
+  return {
+    pluginType: pluginType,
+    eventHandlers: eventHandlers
+  };
+}
+
+function initializeLegacyPluginClient(client) {
+  console.error('Warning - Initializing outdated version of PluginSDKClient. Please upgrade to PluginClient v1.0.0');
+  pluginSdkClient = client.initialize();
+  return pluginSdkClient;
+}
+
+var languageCodeMapping = {
+  DA: 'da',
+  DE: 'de',
+  EN: 'en',
+  'EN-GB': 'en-GB',
+  ES: 'es',
+  'ES-ES': 'es-419',
+  FI: 'fi',
+  FR: 'fr',
+  'FR-CA': 'fr-CA',
+  ID: 'id',
+  IT: 'it',
+  JA: 'ja',
+  KO: 'ko',
+  MS: 'ms',
+  NL: 'nl',
+  PB: 'pb',
+  PT: 'pt',
+  'PT-BR': 'pt-BR',
+  'RI-GI': 'ri-GI',
+  RU: 'ru',
+  SV: 'sv',
+  TH: 'th',
+  'ZH-S': 'zh-Hans',
+  'ZH-T': 'zh-Hant'
+};
+function languageCodeAdapter(languageCode) {
+  var adaptedCode;
+  adaptedCode = languageCodeMapping[languageCode];
+
+  if (adaptedCode === undefined) {
+    throw new Error("No language code mapping found for supplied code: '".concat(languageCode, "'"));
+  }
+
+  return adaptedCode;
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+var Portal = function (_Component) {
+  _inherits(Portal, _Component);
+
+  var _super = _createSuper(Portal);
+
+  function Portal() {
+    var _this;
+
+    _classCallCheck(this, Portal);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "rootSelector", document.body);
+
+    _defineProperty(_assertThisInitialized(_this), "container", document.createElement('div'));
+
+    return _this;
+  }
+
+  _createClass(Portal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.rootSelector.appendChild(this.container);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.rootSelector.removeChild(this.container);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return ReactDOM.createPortal(this.props.children, this.container);
+    }
+  }]);
+
+  return Portal;
+}(Component);
+
+var css_248z$l = ".q-popover {\n  position: absolute;\n  z-index: 1000;\n  padding: 4px 0;\n  font-size: 14px;\n  line-height: 20px;\n  color: #32363A;\n  fill: #333;\n  list-style: none;\n  min-width: 160px;\n  max-width: 500px;\n  min-height: 10px;\n  max-height: 99%;\n  background: #fff;\n  border-radius: 4px;\n  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 0px 10px 1px rgba(0, 0, 0, 0.14), 0 0px 10px 2px rgba(0, 0, 0, 0.12);\n  z-index: 9000; }\n\nbody .q-popover {\n  max-height: 50vh;\n  overflow-y: scroll;\n  max-width: 30vw; }\n";
+styleInject(css_248z$l);
+
+var globalClickRegistry = new EventRegistry();
+var DEFAULT_PLACEMENT = 'bottom-start';
+var DEFAULT_ANCHOR = React.createElement(Button, null, " anchor ");
+var defaultModifiers = [];
+initGlobalListener();
+function Popover(props) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var modifiers = [].concat(defaultModifiers, _toConsumableArray(props.modifiers || []));
+
+  var closePopover = function closePopover() {
+    setIsOpen(false);
+    props.onClose && props.onClose();
+  };
+
+  var anchorEl = function anchorEl(_ref) {
+    var ref = _ref.ref;
+    var anchor;
+
+    if (typeof props.anchor === 'function') {
+      anchor = props.anchor(ref);
+    } else {
+      anchor = props.anchor;
+      anchor = React.createElement("div", {
+        ref: ref,
+        className: "popover-anchor-container"
+      }, props.anchor || DEFAULT_ANCHOR);
+    }
+
+    return anchor;
+  };
+
+  useEffect(function () {
+    var unregisterFn, ignoreClickSelector;
+    ignoreClickSelector = props.ignoreClickSelector;
+    unregisterFn = globalClickRegistry.register(function (clickEvent) {
+      var ignoreClickEl;
+
+      if (ignoreClickSelector) {
+        ignoreClickEl = clickEvent.target.closest(ignoreClickSelector);
+      }
+
+      if (!ignoreClickEl) {
+        closePopover();
+      }
+    });
+    return function () {
+      unregisterFn();
+    };
+  }, []);
+  useEffect(function () {
+    if (!props.show) {
+      closePopover();
+    } else {
+      setIsOpen(props.show);
+    }
+  }, [props.show]);
+  return React.createElement(Manager, null, React.createElement(Reference, null, anchorEl), React.createElement(Portal, null, isOpen && React.createElement(Popper, {
+    placement: props.placement || DEFAULT_PLACEMENT,
+    modifiers: modifiers
+  }, function (_ref2) {
+    var ref = _ref2.ref,
+        style = _ref2.style,
+        placement = _ref2.placement,
+        arrowProps = _ref2.arrowProps,
+        scheduleUpdate = _ref2.update;
+    var children;
+    children = [];
+
+    if (Array.isArray(props.children)) {
+      children = props.children;
+    } else if (props.children !== undefined) {
+      children = [props.children];
+    }
+
+    children.forEach(function (child) {
+      var optionsRef;
+
+      if (child.props.optionsRef) {
+        optionsRef = child.props.optionsRef;
+        optionsRef.current.scheduleUpdate = scheduleUpdate;
+      }
+    });
+    return React.createElement("div", {
+      ref: ref,
+      "data-placement": placement,
+      style: _objectSpread2({}, style),
+      className: "q-popover"
+    }, props.children, React.createElement("div", {
+      ref: arrowProps.ref,
+      style: arrowProps.style
+    }));
+  })));
+}
+
+function initGlobalListener() {
+  window.addEventListener('click', function (evt) {
+    var popoverEl;
+    popoverEl = evt.target.closest('.q-popover');
+
+    if (popoverEl === null) {
+      globalClickRegistry.trigger(evt);
+    } else {
+      evt.stopPropagation();
+      evt.stopImmediatePropagation();
+    }
+  });
+}
+
+var css_248z$k = ".piped-text-menu-list .piped-text-popover-menu > * {\n  min-height: 32px; }\n";
+styleInject(css_248z$k);
+
+/**
+ * Copied from: https://gitlab-app.eng.qops.net/cfe/ui/-/blob/master/packages/ui-react/src/hooks/useId/useId.js
+ * Returns an ID that is stable across renders.
+ * @param {string=} defaultExternalId - ID to be used instead of a randomly generated ID. This ID is only considered on mount, so changes to this ID are ignored.
+ * @returns {String} If an external ID is passed in, the external ID. Otherwise, a randomly generated ID.
+ */
+function useId(defaultExternalId) {
+    var currentId = useState(function () {
+        return defaultExternalId !== null && defaultExternalId !== void 0 ? defaultExternalId : v4();
+    })[0];
+    return currentId;
+}
+
+var css_248z$j = "";
+styleInject(css_248z$j);
+
+function PipedTextMenuLoadError(props) {
+    return (React.createElement("div", { className: "piped-text-popover-container" },
+        React.createElement("div", { className: "piped-text-error-container" },
+            React.createElement("div", { className: "piped-text-error-icon" },
+                React.createElement(ErrorIcon, { size: "medium" })),
+            props.errorText && (React.createElement("div", { className: "piped-text-error-text" }, props.errorText)))));
+}
+
+var EMBEDDED_DATA_LOCATOR = 'embeddedData';
+function checkEmbeddedDataMenuItem(menuItem) {
+    return menuItem.value === EMBEDDED_DATA_LOCATOR;
+}
+function checkDecoratedMenuItem(menuItem) {
+    return (menuItem.header === true)
+        || (menuItem.disabled === true);
+}
+function checkSubmenuMenuItemItem(menuItem) {
+    return !!menuItem.hasSubmenu;
+}
+function checkMenuItemFocusable(menuItem) {
+    var isEmbeddedData, isSubmenu, isDefaultMenuItem;
+    isEmbeddedData = checkEmbeddedDataMenuItem(menuItem);
+    isSubmenu = checkSubmenuMenuItemItem(menuItem);
+    isDefaultMenuItem = checkDefaultMenuItem(menuItem);
+    return (isEmbeddedData
+        || isSubmenu
+        || isDefaultMenuItem);
+}
+function checkDefaultMenuItem(menuItem) {
+    return !(checkEmbeddedDataMenuItem(menuItem)
+        || checkDecoratedMenuItem(menuItem)
+        || checkSubmenuMenuItemItem(menuItem));
+}
+
+var css_248z$i = "div[role=\"menu\"] .piped-text-search-input-container {\n  padding: 5px 10px; }\n\n.piped-text-search-input {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  align-content: center;\n  padding: 4px 8px 8px; }\n  .piped-text-search-input input.q-plugin-popover-input {\n    box-sizing: border-box;\n    height: 36px;\n    padding: 7px 9px; }\n\n.piped-text-menu-empty-anchor {\n  /* the margin-right hack was not in harmony with tao.\n      now, the empty-anchor is truly empty */ }\n\n.piped-text-submenu-item-container {\n  position: relative; }\n  .piped-text-submenu-item-container .piped-text-menu .piped-text-submenu-anchor {\n    position: absolute;\n    z-index: -1;\n    bottom: 0;\n    top: 0;\n    left: 0;\n    right: 0;\n    min-width: 100%; }\n\n.piped-text-submenu-item {\n  padding-right: 24px; }\n\n.piped-text-information-message {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  color: #74777A;\n  text-align: center;\n  white-space: pre-line; }\n\n.piped-text-loading-spinner {\n  width: fit-content;\n  margin: 0 auto; }\n\n.piped-text-error-container {\n  color: #BB0000; }\n  .piped-text-error-container .piped-text-error-icon {\n    padding: 8px 0; }\n    .piped-text-error-container .piped-text-error-icon svg {\n      fill: #BB0000;\n      display: block;\n      margin: 0 auto; }\n  .piped-text-error-container .piped-text-error-text {\n    text-align: center;\n    white-space: pre-line;\n    padding: 0 12px 8px; }\n\n.piped-text-menu-item-container.highlighted-menu-item {\n  background: RGBA(50, 54, 58, 0.08); }\n\n.piped-text-menu-item-container .piped-text-menu-item, .piped-text-menu-item-container .piped-text-submenu-item {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis; }\n  .piped-text-menu-item-container .piped-text-menu-item:not(.piped-text-header):not(.piped-text-disabled):hover, .piped-text-menu-item-container .piped-text-submenu-item:not(.piped-text-header):not(.piped-text-disabled):hover {\n    cursor: pointer; }\n  .piped-text-menu-item-container .piped-text-menu-item.piped-text-header, .piped-text-menu-item-container .piped-text-submenu-item.piped-text-header {\n    font-size: 12px;\n    line-height: 16px;\n    font-weight: 700;\n    padding: 12px; }\n  .piped-text-menu-item-container .piped-text-menu-item.piped-text-disabled:not(.piped-text-header), .piped-text-menu-item-container .piped-text-submenu-item.piped-text-disabled:not(.piped-text-header) {\n    color: RGB(116, 119, 122); }\n";
+styleInject(css_248z$i);
+
+var css_248z$h = "";
+styleInject(css_248z$h);
+
+// const WrappedPipedTextMenu = PipedTextMenu as PipedTextMenuType;
+var PipedTextSubmenuItem = React.forwardRef(function PipedTextSubmenuItem(props, ref) {
+    var submenuAnchorRef = useRef(null);
+    var submenuAnchorId = useId();
+    var menuItem = props.menuItem;
+    return (React.createElement("div", { "data-testid": "piped-text-submenu", className: "piped-text-submenu-item-container", role: 'presentation' },
+        menuItem.show && (React.createElement(PipedTextMenu, { "aria-labelledby": submenuAnchorId, 
+            //@ts-ignore
+            items: menuItem.submenu.items, show: menuItem.show, placement: "right-start", onClose: function () {
+                menuItem.show = false;
+            }, allowCustom: menuItem.submenu.allowCustom, customScheme: menuItem.submenu.customScheme, customInputMessage: menuItem.submenu.customInputMessage, searchPlaceholder: menuItem.submenu.searchPlaceholder, errorText: menuItem.submenu.errorText, onSelected: menuItemClicked, anchor: function (ref) { return (React.createElement("div", { ref: ref, className: "piped-text-submenu-anchor" })); }, anchorRef: submenuAnchorRef, keyboardCtrl: props.keyboardCtrl, pipedTextMenuId: props.pipedTextMenuId })),
+        React.createElement("div", { id: submenuAnchorId, className: "piped-text-submenu-item", ref: submenuAnchorRef },
+            React.createElement("div", { className: "label-text" }, menuItem.label),
+            React.createElement("div", { className: "piped-text-icon" },
+                React.createElement(Icon, { type: IconTypes.ChevronRight, size: "medium" })))));
+    function menuItemClicked(menuItem) {
+        props.onMenuItemClick(menuItem);
+    }
+});
+
+var css_248z$g = "div[role=\"menu\"] .piped-text-search-input-container {\n  padding: 5px 10px; }\n\n.piped-text-search-input {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  align-content: center;\n  padding: 4px 8px 8px; }\n  .piped-text-search-input input.q-plugin-popover-input {\n    box-sizing: border-box;\n    height: 36px;\n    padding: 7px 9px; }\n\n.piped-text-menu-empty-anchor {\n  /* the margin-right hack was not in harmony with tao.\n      now, the empty-anchor is truly empty */ }\n\n.piped-text-submenu-item-container {\n  position: relative; }\n  .piped-text-submenu-item-container .piped-text-menu .piped-text-submenu-anchor {\n    position: absolute;\n    z-index: -1;\n    bottom: 0;\n    top: 0;\n    left: 0;\n    right: 0;\n    min-width: 100%; }\n\n.piped-text-submenu-item {\n  padding-right: 24px; }\n\n.piped-text-information-message {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  color: #74777A;\n  text-align: center;\n  white-space: pre-line; }\n\n.piped-text-loading-spinner {\n  width: fit-content;\n  margin: 0 auto; }\n\n.piped-text-error-container {\n  color: #BB0000; }\n  .piped-text-error-container .piped-text-error-icon {\n    padding: 8px 0; }\n    .piped-text-error-container .piped-text-error-icon svg {\n      fill: #BB0000;\n      display: block;\n      margin: 0 auto; }\n  .piped-text-error-container .piped-text-error-text {\n    text-align: center;\n    white-space: pre-line;\n    padding: 0 12px 8px; }\n\n.embedded-data-menu {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  align-content: center;\n  padding: 4px 8px 8px; }\n  .embedded-data-menu input.q-plugin-popover-input {\n    box-sizing: border-box;\n    height: 36px;\n    padding: 7px 9px; }\n";
+styleInject(css_248z$g);
+
+var css_248z$f = "";
+styleInject(css_248z$f);
+
+var TEXT_INPUT_KEYS_TO_ALLOW = [
+    'ArrowDown',
+    'Escape',
+    'Tab',
+    'PageUp',
+    'Home',
+    'PageDown',
+    'End',
+    'Enter',
+];
+var PipedTextMenuFocusItem = /** @class */ (function () {
+    function PipedTextMenuFocusItem(currentContainer, menuItems) {
+        this.currentContainer = currentContainer;
+        this.menuItems = menuItems;
+        this.highlightedIdx = -1;
+    }
+    PipedTextMenuFocusItem.prototype.setMenuItems = function (menuItems) {
+        this.menuItems = menuItems;
+    };
+    PipedTextMenuFocusItem.prototype.findMenuItemIdx = function (menuItemRef) {
+        return this.menuItems.findIndex(function (menuItem) {
+            return menuItem.current === menuItemRef.current;
+        });
+    };
+    return PipedTextMenuFocusItem;
+}());
+var PipedTextMenuKeyboardCtrl = /** @class */ (function () {
+    function PipedTextMenuKeyboardCtrl() {
+        this.menuFocusItems = [];
+        this.currFocusItemIdx = -1;
+    }
+    PipedTextMenuKeyboardCtrl.prototype.getFocusMenu = function (containerRef) {
+        var foundMenuFocusItemIdx;
+        foundMenuFocusItemIdx = this.menuFocusItems.findIndex(function (focusItem) {
+            return focusItem.currentContainer.current === containerRef.current;
+        });
+        if (foundMenuFocusItemIdx === -1) {
+            return undefined;
+        }
+        return this.menuFocusItems[foundMenuFocusItemIdx];
+    };
+    PipedTextMenuKeyboardCtrl.prototype.getCurrentFocusMenu = function () {
+        return this.menuFocusItems[this.currFocusItemIdx];
+    };
+    PipedTextMenuKeyboardCtrl.prototype.addMenu = function (containerRef, menuItemRefs) {
+        var menuToSet, foundMenuFocusItemIdx;
+        foundMenuFocusItemIdx = this.menuFocusItems.findIndex(function (menuFocusItem) {
+            return menuFocusItem.currentContainer.current === containerRef.current;
+        });
+        if ((this.menuFocusItems.length === 0)
+            || (foundMenuFocusItemIdx === -1)) {
+            menuToSet = new PipedTextMenuFocusItem(containerRef, menuItemRefs);
+            this.menuFocusItems.push(menuToSet);
+        }
+        else {
+            menuToSet = this.menuFocusItems[foundMenuFocusItemIdx];
+            menuToSet.setMenuItems(menuItemRefs);
+        }
+    };
+    PipedTextMenuKeyboardCtrl.prototype.removeMenu = function (containerRef) {
+        var foundMenuFocusItemIdx;
+        foundMenuFocusItemIdx = this.menuFocusItems.findIndex(function (menuFocusItem) {
+            return menuFocusItem.currentContainer.current === containerRef.current;
+        });
+        if (foundMenuFocusItemIdx === -1) {
+            console.error(this);
+            console.error(containerRef);
+            throw new Error('Could not find a matching PipedTextMenu');
+        }
+        this.menuFocusItems.splice(foundMenuFocusItemIdx, 1);
+    };
+    PipedTextMenuKeyboardCtrl.prototype.handleKeyEvent = function ($e) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var key;
+        var currFocusMenu, nextFocusMenu, nextFocusElemRef;
+        var highlightedItem;
+        key = $e.key;
+        currFocusMenu = this.getCurrentFocusMenu();
+        if (currFocusMenu === undefined) {
+            // technically an error case...
+            return;
+        }
+        switch (key) {
+            case 'ArrowDown':
+                /*
+                  In the current focused submenu, advance to the next available menu item
+                    and set it to highlighted, and trigger a focus on the menu item element
+                */
+                if (currFocusMenu.highlightedIdx < (currFocusMenu.menuItems.length - 1)) {
+                    nextFocusElemRef = currFocusMenu.menuItems[currFocusMenu.highlightedIdx + 1];
+                    this.setFocusMenuHighlightedIdx(currFocusMenu.currentContainer, nextFocusElemRef);
+                    (_a = nextFocusElemRef === null || nextFocusElemRef === void 0 ? void 0 : nextFocusElemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+                break;
+            case 'ArrowUp':
+                /*
+                  In the current focused submenu, advance to the previous available menu item
+                    and set it to highlighted, and trigger a focus on the menu item element
+                */
+                if (currFocusMenu.highlightedIdx > 0) {
+                    nextFocusElemRef = currFocusMenu.menuItems[currFocusMenu.highlightedIdx - 1];
+                    this.setFocusMenuHighlightedIdx(currFocusMenu.currentContainer, nextFocusElemRef);
+                    (_b = nextFocusElemRef === null || nextFocusElemRef === void 0 ? void 0 : nextFocusElemRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                break;
+            case 'ArrowRight':
+                this.focusNextSubmenu();
+                break;
+            case 'ArrowLeft':
+            case 'Escape':
+                /*
+                  Set the previous (parent) submenu as the current focused menu.
+                  If it has a child menuitem to highlight, focus the highlighted menu item.
+                  If no menuitem is highlighted in the target submenu, call focus() on the
+                    container element; the container element focus event handler is expected to
+                    respond to the event and set it's own highlighted element and index.
+                */
+                if (this.currFocusItemIdx > 0) {
+                    $e.stopPropagation();
+                    nextFocusMenu = this.menuFocusItems[this.currFocusItemIdx - 1];
+                    if (nextFocusMenu !== undefined) {
+                        highlightedItem = nextFocusMenu.menuItems[nextFocusMenu.highlightedIdx];
+                        if (highlightedItem === undefined) {
+                            (_d = (_c = nextFocusMenu.currentContainer) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.focus();
+                        }
+                        else {
+                            (_e = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.current) === null || _e === void 0 ? void 0 : _e.focus();
+                        }
+                    }
+                }
+                break;
+            case 'PageUp':
+            case 'Home':
+                /*
+                  Focus the first menuitem in the current focus menu
+                */
+                nextFocusElemRef = currFocusMenu.menuItems[0];
+                if (nextFocusElemRef) {
+                    this.setFocusMenuHighlightedIdx(currFocusMenu.currentContainer, nextFocusElemRef);
+                    (_f = nextFocusElemRef === null || nextFocusElemRef === void 0 ? void 0 : nextFocusElemRef.current) === null || _f === void 0 ? void 0 : _f.focus();
+                }
+                break;
+            case 'PageDown':
+            case 'End':
+                /*
+                  Focus the last menuitem in the current focus menu
+                */
+                nextFocusElemRef = currFocusMenu.menuItems[currFocusMenu.menuItems.length - 1];
+                if (nextFocusElemRef) {
+                    this.setFocusMenuHighlightedIdx(currFocusMenu.currentContainer, nextFocusElemRef);
+                    (_g = nextFocusElemRef === null || nextFocusElemRef === void 0 ? void 0 : nextFocusElemRef.current) === null || _g === void 0 ? void 0 : _g.focus();
+                }
+                break;
+        }
+    };
+    PipedTextMenuKeyboardCtrl.prototype.focusNextSubmenu = function () {
+        var _a, _b, _c;
+        var currFocusMenu, nextFocusMenu, highlightedItem;
+        currFocusMenu = this.getCurrentFocusMenu();
+        if (currFocusMenu === undefined) {
+            // technically an error case...
+            return;
+        }
+        nextFocusMenu = this.menuFocusItems[this.currFocusItemIdx + 1];
+        if (nextFocusMenu !== undefined) {
+            highlightedItem = nextFocusMenu.menuItems[nextFocusMenu.highlightedIdx];
+            if (highlightedItem === undefined) {
+                (_b = (_a = nextFocusMenu.currentContainer) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            else {
+                (_c = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.current) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+        }
+    };
+    PipedTextMenuKeyboardCtrl.prototype.getCurrentFocusMenuRef = function () {
+        var _a;
+        return (_a = this.getCurrentFocusMenu()) === null || _a === void 0 ? void 0 : _a.currentContainer;
+    };
+    PipedTextMenuKeyboardCtrl.prototype.isMenuItemInCurrentFocusMenu = function (menuItemRef) {
+        var currentFocusMenu, foundFocusMenuItemRef;
+        currentFocusMenu = this.getCurrentFocusMenu();
+        foundFocusMenuItemRef = currentFocusMenu.menuItems.find(function (menuItem) {
+            return menuItem.current === menuItemRef.current;
+        });
+        return foundFocusMenuItemRef !== undefined;
+    };
+    PipedTextMenuKeyboardCtrl.prototype.setFocus = function (focusedEl) {
+        var foundMenuFocusItemIdx;
+        foundMenuFocusItemIdx = this.menuFocusItems.findIndex(function (menuFocusItem) {
+            return menuFocusItem.currentContainer.current === focusedEl;
+        });
+        if (foundMenuFocusItemIdx === -1) {
+            console.error(this);
+            console.error(focusedEl);
+            throw new Error('Could not find a matching PipedTextMenu');
+        }
+        this.currFocusItemIdx = foundMenuFocusItemIdx;
+    };
+    PipedTextMenuKeyboardCtrl.prototype.getFocusMenuHighlightedIdx = function (containerRef) {
+        var focusMenu;
+        focusMenu = this.getFocusMenu(containerRef);
+        if (focusMenu === undefined) {
+            return -1;
+        }
+        return focusMenu.highlightedIdx;
+    };
+    PipedTextMenuKeyboardCtrl.prototype.setFocusMenuHighlightedIdx = function (containerRef, highlightedItemRef) {
+        var foundMenuFocusItem, foundHighlightedItemIdx;
+        foundMenuFocusItem = this.getFocusMenu(containerRef);
+        if (foundMenuFocusItem === undefined) {
+            return;
+        }
+        foundHighlightedItemIdx = foundMenuFocusItem.findMenuItemIdx(highlightedItemRef);
+        if (foundHighlightedItemIdx === -1) {
+            return;
+        }
+        foundMenuFocusItem.highlightedIdx = foundHighlightedItemIdx;
+    };
+    return PipedTextMenuKeyboardCtrl;
+}());
+
+function EmbeddedDataInput(props) {
+    var _a = useState(''), inputValue = _a[0], setInputValue = _a[1];
+    var _b = useState(false), isInputInvalid = _b[0], setIsInputInvalid = _b[1];
+    var containerRef = useRef();
+    var inputRef = useRef();
+    useEffect(function () {
+        props.keyboardCtrl.addMenu(containerRef, [
+            inputRef,
+        ]);
+    }, [
+        containerRef
+    ]);
+    useEffect(function () {
+        var $destroy = function () {
+            props.keyboardCtrl.removeMenu(containerRef);
+        };
+        return $destroy;
+    }, []);
+    return (React.createElement("div", { className: 'embedded-data-input', tabIndex: -1, "aria-labelledby": props.ariaLabelledById, ref: containerRef, onFocus: handleContainerFocus, onKeyDown: handleContainerKeyDown },
+        React.createElement(InputGroup, null,
+            React.createElement(Input, { onChange: function ($e) {
+                    handleInputChange($e);
+                }, invalid: isInputInvalid, onKeyDown: handleInputKeyDown, className: 'q-plugin-popover-input', ref: inputRef }),
+            React.createElement(Button, { kind: 'primary', onClick: handleAddButtonClick, onKeyDown: handleAddButtonKeyDown, onFocus: function ($e) {
+                    $e.stopPropagation();
+                } },
+                React.createElement(Icon, { type: IconTypes.Add })))));
+    function handleContainerFocus($e) {
+        var _a;
+        if ($e.currentTarget === containerRef.current) {
+            props.keyboardCtrl.setFocus(containerRef.current);
+            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            props.keyboardCtrl.setFocusMenuHighlightedIdx(containerRef, inputRef);
+            $e.stopPropagation();
+            $e.preventDefault();
+        }
+    }
+    function handleContainerKeyDown($e) {
+        switch ($e.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'ArrowRight':
+            case 'ArrowLeft':
+            case 'Escape':
+                props.keyboardCtrl.handleKeyEvent($e);
+                $e.preventDefault(); // prevent scroll
+                break;
+            case 'Enter':
+                handleAddButtonClick();
+                /*
+                  We don't want Enter key events to bubble, because when the
+                    menu closes after enter the focus will return to the
+                    piped-text anchor button, and Enter would reopen the base menu
+                */
+                $e.stopPropagation();
+                $e.preventDefault();
+                break;
+            case 'PageUp':
+            case 'Home':
+            case 'PageDown':
+            case 'End':
+                $e.stopPropagation();
+                $e.preventDefault();
+                break;
+        }
+    }
+    function handleInputKeyDown($e) {
+        var key = $e.key;
+        if (!TEXT_INPUT_KEYS_TO_ALLOW.includes($e.key)) {
+            $e.stopPropagation();
+        }
+        if (!$e.shiftKey && (key === 'Tab')) {
+            /*
+              User can tab forward to focus add Button element
+                without closing the popover menu
+            */
+            $e.stopPropagation();
+        }
+    }
+    function handleAddButtonKeyDown($e) {
+        if ($e.shiftKey && ($e.key === 'Tab')) {
+            /*
+              User can shift+tab back to focus Text Input element
+                without closing the popover menu
+            */
+            $e.stopPropagation();
+        }
+    }
+    function handleAddButtonClick() {
+        var locatorString;
+        // Indicate a validation error if the inputValue is empty.
+        //  We do not need to provide an error message, via UX guidelines
+        //  input validation errors indicate "Required" implicitly by default.
+        if ((inputValue || '').trim().length < 1) {
+            setIsInputInvalid(true);
+            return;
+        }
+        locatorString = "${e://Field/".concat(inputValue, "}");
+        props.onSelect(locatorString);
+    }
+    function handleInputChange($e) {
+        var nextInputValue = ($e.target.value || '').trim();
+        var uriEncodedValue = encodeURIComponent(nextInputValue);
+        setInputValue(uriEncodedValue);
+        if ((uriEncodedValue.length > 0) && isInputInvalid) {
+            setIsInputInvalid(false);
+        }
+    }
+}
+
+var EmbeddedDataMenu = React.forwardRef(function EmbeddedDataMenu(props, ref) {
+    var anchor = props.anchor;
+    var onClose = props.onClose || (function () { return undefined; });
+    var popoverClassName = 'embedded-data-menu-content';
+    var ignoreClickSelector = popoverClassName;
+    var onSelect = props.onSelect || (function () { return undefined; });
+    return (React.createElement(Popover, { show: props.show, anchor: anchor, onClose: onClose, ignoreClickSelector: ignoreClickSelector, placement: props.placement || 'right-start' },
+        React.createElement("div", { className: "embedded-data-menu", ref: ref },
+            React.createElement(EmbeddedDataInput, { onSelect: onSelect, keyboardCtrl: props.keyboardCtrl, ariaLabelledById: props.ariaLabelledById }))));
+});
+
+/*
+  Combines refs for using ForwardRef to manage a localRef in the component, while
+    still allowing the passed ref to function
+
+  See following reference implementations:
+    https://gitlab-app.eng.qops.net/cfe/ui/-/blob/master/packages/ui-react/src/utils/mergeRefs/mergeRefs.ts
+    https://github.com/gregberge/react-merge-refs/blob/main/src/index.tsx
+*/
+function mergeRefs(refs) {
+    return function (value) {
+        refs.forEach(function (ref) {
+            if ((typeof ref) === 'function') {
+                ref(value);
+            }
+            else if (ref !== null) {
+                ref.current = value;
+            }
+        });
+    };
+}
+
+// export const EMBEDDED_DATA_LOCATOR = 'embeddedData';
+var PipedTextMenuItem = React.forwardRef(function PipedTextMenuItem(props, ref) {
+    var _a = useState(), ariaHaspopup = _a[0], setAriaHaspopup = _a[1];
+    var _b = useState(), tabIndex = _b[0], setTabIndex = _b[1];
+    var _c = useState(), role = _c[0], setRole = _c[1];
+    var _d = useState(), _isSubmenu = _d[0], setIsSubmenu = _d[1];
+    var _e = useState(), _isDecorated = _e[0], setIsDecorated = _e[1];
+    var _f = useState(), _isFocusable = _f[0], setIsFocusable = _f[1];
+    var _g = useState(), _isEmbeddedDataMenu = _g[0], setIsEmbeddedDataMenu = _g[1];
+    var localRef = useRef();
+    var submenuItemId = useId();
+    var pipedTextMenuId = useId();
+    useEffect(function () {
+        var nextIsFocusable, nextIsDecorated, nextIsSubmenu, nextIsEmbeddedDataMenu;
+        var nextTabIndex, nextAriaHaspopup, nextRole;
+        if (props.menuItem === undefined) {
+            return;
+        }
+        nextIsFocusable = checkMenuItemFocusable(props.menuItem);
+        nextIsSubmenu = checkSubmenuMenuItemItem(props.menuItem);
+        nextIsEmbeddedDataMenu = checkEmbeddedDataMenuItem(props.menuItem);
+        nextIsDecorated = checkDecoratedMenuItem(props.menuItem);
+        if (nextIsFocusable) {
+            nextTabIndex = -1;
+            nextRole = 'menuitem';
+        }
+        if (nextIsSubmenu || nextIsEmbeddedDataMenu) {
+            nextAriaHaspopup = 'menu';
+        }
+        setAriaHaspopup(nextAriaHaspopup);
+        setTabIndex(nextTabIndex);
+        setRole(nextRole);
+        setIsSubmenu(nextIsSubmenu);
+        setIsDecorated(nextIsDecorated);
+        setIsFocusable(nextIsFocusable);
+        setIsEmbeddedDataMenu(nextIsEmbeddedDataMenu);
+    }, [
+        props.menuItem,
+    ]);
+    return (React.createElement("div", { className: 'piped-text-menu-item-container ' + ((props.isHighlighted)
+            ? 'highlighted-menu-item'
+            : ''), ref: mergeRefs([
+            ref,
+            localRef,
+        ]), "aria-haspopup": ariaHaspopup, tabIndex: tabIndex, role: role, id: ariaHaspopup ? submenuItemId : undefined, "aria-controls": ariaHaspopup ? pipedTextMenuId : undefined, "aria-expanded": props.menuItem.show, onFocus: function ($e) {
+            handleMenuItemFocused(props.menuItem);
+        }, onKeyDown: function ($e) {
+            handleKeyDown($e);
+        }, onMouseEnter: handleMouseEnter, onClick: handleClick }, getMenuItemContent(props.menuItem)));
+    function getMenuItemContent(menuItem) {
+        var innerContent, menuItemEl;
+        var menuItemHeaderClass, menuItemDisabledClass, menuItemClassName;
+        if (_isSubmenu) {
+            innerContent = (React.createElement(PipedTextSubmenuItem, { key: menuItem.key, menuItem: menuItem, onMenuItemClick: handleMenuItemClick, keyboardCtrl: props.keyboardCtrl, pipedTextMenuId: pipedTextMenuId }));
+        }
+        else if (_isDecorated) {
+            menuItemHeaderClass = (menuItem.header === true)
+                ? 'piped-text-header'
+                : '';
+            menuItemDisabledClass = (menuItem.disabled === true)
+                ? 'piped-text-disabled'
+                : '';
+            menuItemClassName = "piped-text-menu-item ".concat(menuItemHeaderClass, " ").concat(menuItemDisabledClass);
+            innerContent = (React.createElement("div", { className: menuItemClassName }, menuItem.label));
+        }
+        else if (_isEmbeddedDataMenu) {
+            innerContent = (React.createElement("div", { role: 'presentation' },
+                React.createElement(EmbeddedDataMenu, { show: menuItem.show, onSelect: handleEmbeddedDataSelect, anchor: function (_ref) { return (React.createElement("div", { ref: _ref, className: "embedded-data-menu-anchor", "aria-hidden": 'true' })); }, keyboardCtrl: props.keyboardCtrl, ariaLabelledById: submenuItemId }),
+                React.createElement("div", { className: "piped-text-submenu-item" },
+                    React.createElement("div", { className: 'label-text' }, menuItem.label),
+                    React.createElement("div", { className: "piped-text-icon" },
+                        React.createElement(Icon, { type: IconTypes.ChevronRight, size: 'medium' })))));
+        }
+        else {
+            innerContent = (React.createElement("div", { className: "piped-text-menu-item", role: 'presentation' }, menuItem.label));
+        }
+        menuItemEl = (React.createElement("div", { className: "piped-text-menu-item-content", role: 'presentation' }, innerContent));
+        return menuItemEl;
+    }
+    function handleClick($e) {
+        if (_isSubmenu || _isEmbeddedDataMenu) {
+            handleSubmenuItemClick(props.menuItem);
+        }
+        else if (_isFocusable) {
+            handleMenuItemClick(props.menuItem);
+        }
+    }
+    function handleMouseEnter($e) {
+        if (_isSubmenu || _isEmbeddedDataMenu) {
+            handleSubmenuHover(props.menuItem);
+        }
+        else if (_isFocusable) {
+            handleMenuItemHovered(props.menuItem);
+        }
+    }
+    function handleKeyDown($e) {
+        if (!props.isHighlighted) {
+            return;
+        }
+        if (!props.keyboardCtrl.isMenuItemInCurrentFocusMenu(localRef)) {
+            return;
+        }
+        if (($e.key === ' ')
+            || ($e.key === 'Enter')) {
+            if (_isSubmenu || _isEmbeddedDataMenu) {
+                props.onSubmenuItemClick(props.menuItem);
+            }
+            else {
+                props.onMenuItemClicked(props.menuItem);
+            }
+            $e.preventDefault(); // prevent scroll
+        }
+    }
+    function handleMenuItemFocused(menuItem) {
+        if (_isSubmenu || _isEmbeddedDataMenu) {
+            props.onSubmenuHover(menuItem, localRef);
+        }
+        else {
+            props.onMenuItemHover(menuItem, localRef);
+        }
+    }
+    function handleSubmenuItemClick(menuItem) {
+        props.onSubmenuItemClick(menuItem);
+    }
+    function handleMenuItemClick(menuItem) {
+        props.onMenuItemClicked(menuItem);
+    }
+    function handleSubmenuHover(menuItem) {
+        props.onSubmenuHover(menuItem, localRef);
+    }
+    function handleMenuItemHovered(menuItem) {
+        props.onMenuItemHover(menuItem, localRef);
+    }
+    function handleEmbeddedDataSelect(edLocator) {
+        var edMenuItem;
+        /* Instead of returning the menuItem, we'll construct one that matches the interface.
+            There is no mappable "menuItem" here, when ED values are added they can be different
+            potentially every time, so we trigger events generically ad hoc
+        */
+        edMenuItem = {
+            value: {
+                locator: edLocator,
+            },
+        };
+        props.onMenuItemClicked(edMenuItem);
+    }
+});
+
+var PipedTextSearchInput = React.forwardRef(function PipedTextSearchInput(props, ref) {
+    var textInputRef = React.useRef();
+    return (React.createElement("div", { className: 'piped-text-search-input', tabIndex: -1, ref: ref, onFocus: handleContainerFocus },
+        React.createElement("form", { onSubmit: props.onSearchSubmit },
+            React.createElement(Input, { small: true, full: true, className: "q-plugin-popover-input", ref: textInputRef, placeholder: props.searchPlaceholder, value: props.value, onChange: props.onInputChange, onClick: props.onInputClick, onKeyDown: handleKeyDown, role: 'searchbox' }))));
+    function handleKeyDown($e) {
+        if (!TEXT_INPUT_KEYS_TO_ALLOW.includes($e.key)) {
+            $e.stopPropagation();
+        }
+    }
+    function handleContainerFocus($e) {
+        var _a;
+        if ($e.target !== textInputRef.current) {
+            (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        props.onFocus($e);
+    }
+});
+
+var PipedTextMenuList = React.forwardRef(function PipedTextMenuList(props, ref) {
+    var _this = this;
+    var _a, _b;
+    var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
+    var _d = useState(false), isLoadError = _d[0], setIsLoadError = _d[1];
+    var _e = useState(), menuItems = _e[0], setMenuItems = _e[1];
+    var _f = useState(), itemsToRender = _f[0], setItemsToRender = _f[1];
+    var _g = useState(), menuChildren = _g[0], setMenuChildren = _g[1];
+    var _h = useState(), focusMenuItems = _h[0], setFocusMenuItems = _h[1];
+    var _j = useState(''), searchValue = _j[0], setSearchValue = _j[1];
+    var _k = useState(false), autoFocusedOnOpen = _k[0], setAutoFocusedOnOpen = _k[1];
+    var pipedTextMenuId = (_a = props.pipedTextMenuId) !== null && _a !== void 0 ? _a : useId();
+    var externalAriaLabelledBy = props['aria-labelledby'];
+    var localRef = useRef();
+    var searchRef = useRef();
+    /*
+      We need to track whether or not the menu component has rendered, and the
+        localRef is available, so that we can add it to the keyboardCtrl
+        before the menuItems have finished loading
+    */
+    var _l = useState(false), isLocalRefReady = _l[0], setIsLocalRefReady = _l[1];
+    var localRefReadyCb = useCallback(function (node) {
+        if (node) {
+            setIsLocalRefReady(true);
+        }
+    }, []);
+    var _m = useState(false), isSearchRefReady = _m[0], setIsSearchRefReady = _m[1];
+    var searchRefReadyCb = useCallback(function (node) {
+        if (node) {
+            setIsSearchRefReady(true);
+        }
+    }, []);
+    var isRoot = props.keyboardCtrl === undefined;
+    var _o = useState(isRoot
+        ? new PipedTextMenuKeyboardCtrl
+        : props.keyboardCtrl), keyboardCtrl = _o[0]; _o[1];
+    var schedulePopoverUpdate = function () {
+        var _a;
+        if (typeof ((_a = props.popoverOptionsRef) === null || _a === void 0 ? void 0 : _a.current.scheduleUpdate) === 'function') {
+            props.popoverOptionsRef.current.scheduleUpdate();
+        }
+    };
+    useEffect(function () {
+        var $destroy = function () {
+            keyboardCtrl.removeMenu(localRef);
+        };
+        return $destroy;
+    }, []);
+    useEffect(function () {
+        var nextMenuItemRefs, focusMenuItemRefs;
+        if (localRef.current
+            && searchRef.current
+            && menuChildren
+            && !isLoading) {
+            focusMenuItemRefs = React.Children.map(focusMenuItems, function (menuChild) {
+                return menuChild.ref;
+            });
+            nextMenuItemRefs = __spreadArray([
+                searchRef
+            ], focusMenuItemRefs, true);
+            keyboardCtrl.addMenu(localRef, nextMenuItemRefs);
+            if (isRoot && (autoFocusedOnOpen === false)) {
+                setTimeout(function () {
+                    var _a;
+                    /*
+                      Hack - see https://github.com/floating-ui/react-popper/issues/395
+                        Without this, the page jitters on focus as the page scroll position
+                        updates. Using setTimeout, we give Popper one render cycle to
+                        set its own position before triggering the autofocus - then the input
+                        element will have correct positioning by the time we call .focus()
+                    */
+                    (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+                setAutoFocusedOnOpen(true);
+            }
+        }
+    }, [
+        localRef,
+        menuChildren,
+        keyboardCtrl,
+        isLoading,
+    ]);
+    useEffect(function () {
+        var menuItemRefs;
+        if (isLocalRefReady) {
+            menuItemRefs = [];
+            if (isSearchRefReady) {
+                menuItemRefs.push(searchRef);
+            }
+            keyboardCtrl.addMenu(localRef, menuItemRefs);
+        }
+    }, [
+        isLocalRefReady,
+        isSearchRefReady,
+    ]);
+    useEffect(function () {
+        if (props.items === undefined) {
+            return;
+        }
+        (function () { return __awaiter(_this, void 0, void 0, function () {
+            var rawMenuItems, nextMenuItems;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!((typeof props.items) === 'function')) return [3 /*break*/, 5];
+                        setIsLoading(true);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, props.items()];
+                    case 2:
+                        rawMenuItems = _a.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        _a.sent();
+                        setIsLoadError(true);
+                        return [3 /*break*/, 4];
+                    case 4:
+                        setIsLoading(false);
+                        return [3 /*break*/, 6];
+                    case 5:
+                        rawMenuItems = props.items;
+                        _a.label = 6;
+                    case 6:
+                        try {
+                            nextMenuItems = pipedTextDataAdapter(rawMenuItems);
+                            setMenuItems(nextMenuItems);
+                        }
+                        catch (e) {
+                            setIsLoadError(true);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [
+        props.items,
+    ]);
+    useEffect(function () {
+        var nextItemsToRender;
+        if (menuItems === undefined) {
+            return;
+        }
+        nextItemsToRender = (menuItems || []).filter(matchesSearch);
+        setItemsToRender(nextItemsToRender);
+    }, [
+        searchValue,
+        menuItems,
+    ]);
+    useEffect(function () {
+        var nextMenuChildren;
+        if (!Array.isArray(itemsToRender)) {
+            return;
+        }
+        nextMenuChildren = getPipedTextMenuItems(itemsToRender);
+        setMenuChildren(nextMenuChildren);
+    }, [
+        itemsToRender,
+    ]);
+    schedulePopoverUpdate();
+    return (React.createElement("div", { className: "piped-text-menu-list ".concat((_b = props.className) !== null && _b !== void 0 ? _b : ''), ref: mergeRefs([
+            ref,
+            localRef,
+            localRefReadyCb,
+        ]), id: pipedTextMenuId, "aria-labelledby": externalAriaLabelledBy, role: "menu", 
+        // role="listbox"
+        tabIndex: (props.tabIndex === undefined)
+            ? -1
+            : props.tabIndex, onKeyDown: function ($e) {
+            handleKeyDown($e);
+        }, onFocus: function ($e) {
+            handleMenuListFocus($e);
+        } },
+        React.createElement("div", { className: "piped-text-popover-menu", role: 'presentation' }, ((isLoadError)
+            ? (React.createElement(PipedTextMenuLoadError, { errorText: props.errorText }))
+            : (React.createElement(React.Fragment, null,
+                React.createElement(PipedTextSearchInput, { ref: mergeRefs([
+                        searchRef,
+                        searchRefReadyCb,
+                    ]), value: searchValue, onSearchSubmit: handleSearchSubmit, searchPlaceholder: props.searchPlaceholder, onInputChange: function ($e) { return onSearchInputChange($e); }, onInputClick: function ($e) { return handleSearchInputClick($e); }, onFocus: function () {
+                        handleSearchFocus();
+                    } }),
+                (isLoading)
+                    ? (React.createElement("div", { className: "piped-text-loading-spinner" },
+                        React.createElement(LoadingSpinner, { show: true, size: "medium" })))
+                    : menuChildren))))));
+    function handleMenuListFocus($e) {
+        var _a;
+        if ($e.currentTarget === localRef.current) {
+            keyboardCtrl.setFocus(localRef.current);
+            if (keyboardCtrl.getFocusMenuHighlightedIdx(localRef) === -1) {
+                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            $e.stopPropagation();
+            $e.preventDefault();
+        }
+    }
+    function handleKeyDown($e) {
+        var currFocusMenuContainerRef;
+        switch ($e.key) {
+            case 'Tab':
+                onClose();
+        }
+        props === null || props === void 0 ? void 0 : props.menuKeyDown($e);
+        currFocusMenuContainerRef = keyboardCtrl.getCurrentFocusMenuRef();
+        if (localRef.current !== (currFocusMenuContainerRef === null || currFocusMenuContainerRef === void 0 ? void 0 : currFocusMenuContainerRef.current)) {
+            return;
+        }
+        switch ($e.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'ArrowRight':
+            case 'ArrowLeft':
+            case 'Escape':
+            case 'PageUp':
+            case 'Home':
+            case 'PageDown':
+            case 'End':
+                keyboardCtrl.handleKeyEvent($e);
+                $e.preventDefault(); // prevent scroll
+                break;
+        }
+    }
+    function onClose() {
+        var _a;
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+    function onSearchInputChange(evt) {
+        var nextSearchValue;
+        nextSearchValue = evt.target.value;
+        setSearchValue(nextSearchValue);
+    }
+    function handleSearchInputClick(evt) {
+        evt.stopPropagation();
+    }
+    function matchesSearch(menuItem) {
+        var searchVal;
+        searchVal = searchValue || '';
+        return JSON.stringify(menuItem).toLowerCase().includes(searchVal.toLowerCase());
+    }
+    function handleSearchSubmit(e) {
+        var searchVal, locator, selected;
+        e.preventDefault();
+        if (!(props.allowCustom === true && props.customScheme)) {
+            return;
+        }
+        searchVal = searchValue.trim();
+        if (searchVal === '') {
+            return;
+        }
+        locator = "${".concat(props.customScheme, "://Field/").concat(encodeURIComponent(searchVal), "}");
+        selected = {
+            value: {
+                locator: locator,
+            },
+        };
+        props.onSelected(selected);
+        onClose();
+    }
+    function getPipedTextMenuItems(_menuItems) {
+        var pipedTextMenuItems, nextFocusMenuItems;
+        var focusItemIdx, currHighlightedIdx;
+        pipedTextMenuItems = [];
+        nextFocusMenuItems = [];
+        if (_menuItems.length === 0 && props.allowCustom === true && props.customInputMessage) {
+            return (React.createElement("div", null,
+                React.createElement("div", { className: "piped-text-information-message" }, props.customInputMessage)));
+        }
+        focusItemIdx = 0;
+        currHighlightedIdx = keyboardCtrl.getFocusMenuHighlightedIdx(localRef);
+        pipedTextMenuItems = _menuItems.map(function (menuItem) {
+            var isFocusable, menuItemEl;
+            var isHighlighted;
+            var menuItemRef = React.createRef();
+            isFocusable = checkMenuItemFocusable(menuItem);
+            isHighlighted = (isFocusable) && ((currHighlightedIdx - 1) === focusItemIdx);
+            menuItemEl = (React.createElement(PipedTextMenuItem, { ref: menuItemRef, key: menuItem.key, menuItem: menuItem, onSubmenuHover: submenuHovered, onMenuItemHover: menuSelectItemHovered, onMenuItemClicked: menuItemClicked, onSubmenuItemClick: submenuItemClicked, onEmbeddedDataItemClick: embeddedDataItemClicked, keyboardCtrl: keyboardCtrl, isHighlighted: isHighlighted }));
+            if (isFocusable) {
+                nextFocusMenuItems.push(menuItemEl);
+                focusItemIdx++;
+            }
+            return menuItemEl;
+        });
+        setFocusMenuItems(nextFocusMenuItems);
+        return pipedTextMenuItems;
+    }
+    function submenuHovered(menuItem, menuItemRef) {
+        var nextMenuItems;
+        nextMenuItems = menuItems.slice();
+        handleMenuItemHovered(menuItem, menuItemRef);
+        closeSubmenus(nextMenuItems);
+        setMenuItems(nextMenuItems);
+        if (!menuItem.show) {
+            menuItem.show = true;
+        }
+    }
+    function menuSelectItemHovered(menuItem, menuItemRef) {
+        var nextMenuItems;
+        nextMenuItems = menuItems.slice();
+        handleMenuItemHovered(menuItem, menuItemRef);
+        closeSubmenus(nextMenuItems);
+        setMenuItems(nextMenuItems);
+    }
+    function handleSearchFocus() {
+        var _a;
+        var nextMenuItems;
+        nextMenuItems = (_a = menuItems === null || menuItems === void 0 ? void 0 : menuItems.slice()) !== null && _a !== void 0 ? _a : [];
+        keyboardCtrl.setFocusMenuHighlightedIdx(localRef, searchRef);
+        closeSubmenus(nextMenuItems);
+        setMenuItems(nextMenuItems);
+    }
+    function handleMenuItemHovered(menuItem, menuItemRef) {
+        var _a;
+        keyboardCtrl.setFocusMenuHighlightedIdx(localRef, menuItemRef);
+        (_a = menuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function menuItemClicked(menuItem) {
+        if (!menuItem.disabled) {
+            props.onSelected(menuItem);
+        }
+    }
+    function submenuItemClicked(menuItem) {
+        console.log('PipedTextMenuList submenu click');
+        keyboardCtrl.focusNextSubmenu();
+    }
+    function embeddedDataItemClicked(menuItem) {
+        // let nextMenuItems: PipedTextMenuItemData[];
+        // nextMenuItems = menuItems.slice();
+        // menuItem.show = true;
+        // setMenuItems(nextMenuItems);
+    }
+});
+function closeSubmenus(menuItems) {
+    menuItems.forEach(function (item) {
+        if (item.show) {
+            item.show = false;
+        }
+    });
+}
+
+var css_248z$e = "div[role=\"menu\"] .piped-text-search-input-container {\n  padding: 5px 10px; }\n\n.piped-text-search-input {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  align-content: center;\n  padding: 4px 8px 8px; }\n  .piped-text-search-input input.q-plugin-popover-input {\n    box-sizing: border-box;\n    height: 36px;\n    padding: 7px 9px; }\n\n.piped-text-menu-empty-anchor {\n  /* the margin-right hack was not in harmony with tao.\n      now, the empty-anchor is truly empty */ }\n\n.piped-text-submenu-item-container {\n  position: relative; }\n  .piped-text-submenu-item-container .piped-text-menu .piped-text-submenu-anchor {\n    position: absolute;\n    z-index: -1;\n    bottom: 0;\n    top: 0;\n    left: 0;\n    right: 0;\n    min-width: 100%; }\n\n.piped-text-submenu-item {\n  padding-right: 24px; }\n\n.piped-text-information-message {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  color: #74777A;\n  text-align: center;\n  white-space: pre-line; }\n\n.piped-text-loading-spinner {\n  width: fit-content;\n  margin: 0 auto; }\n\n.piped-text-error-container {\n  color: #BB0000; }\n  .piped-text-error-container .piped-text-error-icon {\n    padding: 8px 0; }\n    .piped-text-error-container .piped-text-error-icon svg {\n      fill: #BB0000;\n      display: block;\n      margin: 0 auto; }\n  .piped-text-error-container .piped-text-error-text {\n    text-align: center;\n    white-space: pre-line;\n    padding: 0 12px 8px; }\n";
+styleInject(css_248z$e);
+
+/* eslint-disable-next-line prefer-arrow-callback */
+var PipedTextMenu = React.forwardRef(function PipedTextMenu(props, ref) {
+    var optionsRef = useRef({});
+    var _a = useState(props.show), isMenuOpen = _a[0], setIsMenuOpen = _a[1];
+    var externalAriaLabelledBy = props['aria-labelledby'];
+    var onClose = props.onClose || (function () { return undefined; });
+    /*
+      This ref is left for use cases where the
+        container popover may need to be referenced
+        directly
+    */
+    var _b = useState(null); _b[0]; var setPopoverEl = _b[1];
+    var popoverRefCb = useCallback(function (el) {
+        setPopoverEl(el);
+    }, []);
+    useEffect(function () {
+        if (props.show) {
+            setIsMenuOpen(true);
+        }
+    }, [props.show]);
+    useEffect(function () {
+        return function () { return onClose(); };
+    }, []);
+    var _onClose = function () {
+        onToggleClick(false);
+        onClose();
+    };
+    var onToggleClick = function (force) {
+        var nextIsMenuOpen;
+        nextIsMenuOpen = ((typeof force) === 'boolean')
+            ? force
+            : !isMenuOpen;
+        setIsMenuOpen(nextIsMenuOpen);
+    };
+    return (React.createElement("div", { className: "piped-text-menu" },
+        React.createElement(Popover, { show: isMenuOpen, onClose: _onClose, placement: props.placement || 'right-start', anchor: props.anchor, ignoreClickSelector: props.ignoreClickSelector },
+            React.createElement(PipedTextMenuList, { className: "piped-text-popover-container", items: props.items, errorText: props.errorText, "aria-labelledby": externalAriaLabelledBy, ref: popoverRefCb, allowCustom: props.allowCustom, customInputMessage: props.customInputMessage, customScheme: props.customScheme, searchPlaceholder: props.searchPlaceholder, onSelected: function (menuItem) {
+                    props.onSelected(menuItem);
+                    closeAndFocusAnchor();
+                }, onClose: function () { return onClose(); }, popoverOptionsRef: optionsRef, keyboardCtrl: props.keyboardCtrl, menuKeyDown: handleMenuKeyDown, pipedTextMenuId: props.pipedTextMenuId }),
+            React.createElement(OptionsPlaceholder, { optionsRef: optionsRef }))));
+    function handleMenuKeyDown($e) {
+        switch ($e.key) {
+            case 'Tab':
+            case 'Escape':
+                closeAndFocusAnchor();
+                break;
+        }
+    }
+    function closeAndFocusAnchor() {
+        var _a, _b;
+        onClose();
+        (_b = (_a = props.anchorRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+});
+function OptionsPlaceholder(props) {
+    return (React.createElement("div", null));
+}
+/*
+  Takes piped text menu input data and formats it to be compatible
+    with the piped-text-select component(s)
+*/
+function pipedTextDataAdapter(pipedTextData, recursed) {
+    var uniqueKey;
+    if (!recursed) {
+        pipedTextData = _cloneDeep(pipedTextData);
+    }
+    uniqueKey = 1;
+    pipedTextData.forEach(function (pipedTextItem) {
+        pipedTextItem.key = pipedTextItem.key || uniqueKey++;
+        pipedTextItem.hasSubmenu = (!!_get(pipedTextItem, 'submenu.items.length') || ((typeof _get(pipedTextItem, 'submenu.items')) === 'function'));
+        if (pipedTextItem.hasSubmenu || pipedTextItem.value === EMBEDDED_DATA_LOCATOR) {
+            pipedTextItem.show = false; // used by menu component to show/hide submenu popover
+        }
+        if (pipedTextItem.hasSubmenu) {
+            if (!(typeof pipedTextItem.submenu.items === 'function')) {
+                pipedTextDataAdapter(pipedTextItem.submenu.items, true);
+            }
+        }
+    });
+    return pipedTextData;
+}
+
+var css_248z$d = ".piped-text-dropdown button[type=button].popover-toggle-button {\n  min-width: 128px; }\n\n.piped-text-popover-container {\n  padding: 0; }\n  .piped-text-popover-container > * {\n    min-height: 32px; }\n  .piped-text-popover-container .piped-text-submenu-item .label-text, .piped-text-popover-container .piped-text-submenu-item > .piped-text-icon {\n    display: inline-block;\n    vertical-align: middle;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    -webkit-hyphens: auto;\n    -ms-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto; }\n  .piped-text-popover-container .piped-text-submenu-item .piped-text-icon {\n    display: inline-block;\n    box-sizing: content-box;\n    position: absolute;\n    right: 0;\n    max-width: 24px;\n    min-width: 24px;\n    max-height: 24px; }\n    .piped-text-popover-container .piped-text-submenu-item .piped-text-icon > svg {\n      position: relative;\n      margin-left: -5px;\n      margin-top: -3px; }\n";
+styleInject(css_248z$d);
+
+var defaultAnchor = function defaultAnchor(ref) {
+  return React.createElement("div", {
+    ref: ref,
+    className: "piped-text-menu-empty-anchor"
+  });
+};
+
+function PipedTextSelect(props) {
+  var _useState = useState(props.show),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMenuOpen = _useState2[0],
+      setIsMenuOpen = _useState2[1];
+
+  var _useState3 = useState(initializePipedText()),
+      _useState4 = _slicedToArray(_useState3, 2),
+      pipedTextItems = _useState4[0],
+      setPipedTextItems = _useState4[1];
+
+  var defaultAnchorRef = useRef(null);
+  var externalAnchor = props.anchor;
+  var ariaLabelledBy = props['aria-labelledby'];
+  useEffect(function () {
+    return function () {
+      return onClose();
+    };
+  }, []);
+  useEffect(function () {
+    var nextIsMenuOpen;
+    nextIsMenuOpen = props.show;
+    setIsMenuOpen(nextIsMenuOpen);
+  }, [props.show]);
+  useEffect(function () {
+    var formattedPipedText = initializePipedText();
+    setPipedTextItems(formattedPipedText);
+  }, [props.items]);
+
+  var onClose = function onClose() {
+    if (props.onClose) {
+      props.onClose();
+    }
+  };
+
+  var onSelect = function onSelect(selected) {
+    props.onSelect(selected);
+    onClose();
+  };
+
+  var actualAnchor = externalAnchor !== undefined ? React.cloneElement(externalAnchor, {
+    ref: externalAnchor.ref
+  }) : defaultAnchor(defaultAnchorRef);
+  var anchorRef = props.anchorRef || actualAnchor.ref;
+  return React.createElement("div", {
+    className: "piped-text-dropdown"
+  }, isMenuOpen && React.createElement(PipedTextMenu, {
+    onClose: onClose,
+    show: isMenuOpen,
+    onSelected: onSelect,
+    items: pipedTextItems,
+    anchor: actualAnchor,
+    anchorRef: anchorRef,
+    ignoreClickSelector: props.ignoreClickSelector,
+    "aria-labelledby": ariaLabelledBy
+  }));
+
+  function initializePipedText() {
+    if (props.items) {
+      return pipedTextDataAdapter(props.items);
+    }
+  }
+}
+
+var css_248z$c = ".piped-text-input .piped-text-input-toggle, .piped-text-input .piped-text-select-container {\n  display: inline-block; }\n\n.piped-text-input .piped-text-input-toggle {\n  display: flex; }\n  .piped-text-input .piped-text-input-toggle input {\n    flex: 1 1;\n    box-sizing: border-box; }\n  .piped-text-input .piped-text-input-toggle.multiline-input textarea {\n    flex: 1 1;\n    box-sizing: border-box; }\n  .piped-text-input .piped-text-input-toggle input + button, .piped-text-input .piped-text-input-toggle textarea + button {\n    margin-left: 4px; }\n\n.piped-text-input .addon-text-container {\n  /*\n      These styles are intended to match CFE QDS components,\n        notably FormField and InputField.\n        See: https://gitlab-app.eng.qops.net/cfe/ui/-/blob/master/packages/ui-react/src/FormField/Caption.less\n    */\n  margin-top: 6px; }\n  .piped-text-input .addon-text-container .helper-text, .piped-text-input .addon-text-container .error-text {\n    font-size: 12px; }\n  .piped-text-input .addon-text-container .helper-text {\n    color: #74777a;\n    fill: #74777a; }\n    .piped-text-input .addon-text-container .helper-text + .error-text {\n      margin-top: 4px; }\n  .piped-text-input .addon-text-container .error-text {\n    display: flex;\n    align-items: center;\n    color: #b00;\n    fill: #b00; }\n    .piped-text-input .addon-text-container .error-text .error-text-icon svg {\n      margin-left: -2px;\n      margin-right: 3px;\n      width: 16px;\n      height: 16px; }\n";
+styleInject(css_248z$c);
+
+function PipedTextInput(props) {
+    var _a = useState(false), showMenu = _a[0], setShowMenu = _a[1];
+    var _b = useState(), cursorPosition = _b[0], setCursorPosition = _b[1];
+    var pipedTextButtonId = useId();
+    var pipedTextButtonRef = useRef(null);
+    /*
+      This has to be an Object type ref instead of 'string' or React will lose
+        track of state, and the supplied props input value will become stale
+    */
+    var _c = useState({
+        value: props.value || ''
+    }), inputRefValue = _c[0], setInputRefValue = _c[1];
+    var items = props.items, value = props.value, placeholder = props.placeholder, onChange = props.onChange, onSelect = props.onSelect, onClose = props.onClose, errorText = props.errorText, helperText = props.helperText, _d = props.multiline, multiline = _d === void 0 ? false : _d, restProps = __rest(props, ["items", "value", "placeholder", "onChange", "onSelect", "onClose", "errorText", "helperText", "multiline"]);
+    useEffect(function () {
+        updateCursorPosition();
+        if (onSelect !== undefined && (typeof onSelect) !== 'function') {
+            throw new Error('PipedTextInput: onSelect property must be a function');
+        }
+        if (onChange !== undefined && (typeof onChange) !== 'function') {
+            throw new Error('PipedTextInput: onChange property must be a function');
+        }
+    }, []);
+    useEffect(function () {
+        var nextInputValue;
+        if ((typeof value) === 'string') {
+            nextInputValue = value;
+        }
+        else {
+            nextInputValue = '';
+        }
+        setInputRefValue({
+            value: nextInputValue,
+        });
+    }, [props.value]);
+    return (React.createElement("div", { className: "piped-text-input" },
+        React.createElement("div", { className: 'piped-text-input-toggle popover-toggle' + (multiline ? ' multiline-input' : '') },
+            React.createElement(Input, __assign({ value: inputRefValue.value, onChange: function (evt) {
+                    onInputChange(evt);
+                }, onBlur: onInputBlur, placeholder: placeholder, multiline: multiline }, restProps)),
+            React.createElement(IconButton, { id: pipedTextButtonId, "aria-label": "PipedText", "aria-haspopup": "menu", "aria-expanded": showMenu ? true : undefined, role: "button", onClick: toggleMenu, ref: pipedTextButtonRef },
+                React.createElement(PipedTextIcon, null)),
+            React.createElement("div", { className: "piped-text-select-container" },
+                React.createElement(PipedTextSelect, { items: items, onSelect: pipedTextSelected, show: showMenu, onClose: handleClose, ignoreClickSelector: "piped-text-input-toggle", anchorRef: pipedTextButtonRef, "aria-labelledby": pipedTextButtonId }))),
+        showAddonText() && (React.createElement("div", { className: "addon-text-container" },
+            helperText && (React.createElement("div", { className: "helper-text" }, helperText)),
+            errorText && (React.createElement("div", { className: "error-text" },
+                React.createElement("div", { className: "error-text-icon" },
+                    React.createElement(ErrorIcon, null)),
+                React.createElement("div", { className: "error-text-content" }, errorText)))))));
+    function showAddonText() {
+        return ((helperText !== undefined) || (errorText !== undefined));
+    }
+    function updateCursorPosition() {
+        if ((cursorPosition === undefined) && value) {
+            var initialCursorPositon = (value.length - 1) || 0;
+            setCursorPosition(initialCursorPositon);
+        }
+        else {
+            // default to 0 if no cursorPosition is found or no value is passed
+            setCursorPosition(0);
+        }
+    }
+    function handleClose() {
+        if (onClose) {
+            onClose();
+        }
+        setShowMenu(false);
+    }
+    function pipedTextSelected(selected) {
+        var nextInputValue, prependString, appendString;
+        handleSelect(selected);
+        if (_get(selected, 'value.locator')) {
+            prependString = inputRefValue.value.substring(0, cursorPosition);
+            appendString = inputRefValue.value.substring(cursorPosition);
+            nextInputValue = "".concat(prependString).concat(selected.value.locator).concat(appendString);
+            setInputRefValue({
+                value: nextInputValue,
+            });
+            handleChange(nextInputValue);
+        }
+    }
+    function toggleMenu() {
+        var nextShowMenu;
+        nextShowMenu = !showMenu;
+        if (!nextShowMenu) {
+            handleClose();
+        }
+        setShowMenu(nextShowMenu);
+    }
+    function onInputChange(evt) {
+        var nextInputValue;
+        nextInputValue = evt.target.value;
+        setInputRefValue({
+            value: nextInputValue,
+        });
+        handleChange(nextInputValue, evt);
+    }
+    function onInputBlur(evt) {
+        var nextCursorPosition;
+        nextCursorPosition = evt.target.selectionStart;
+        setCursorPosition(nextCursorPosition);
+    }
+    function handleChange(value, evt) {
+        if (onChange) {
+            onChange(value, evt);
+        }
+    }
+    function handleSelect(selected) {
+        if (onSelect) {
+            onSelect(selected);
+        }
+    }
+}
+
+var css_248z$b = ".field-row {\n  min-width: 475px;\n  display: flex;\n  align-items: center; }\n  .field-row .field-selector, .field-row .field-input, .field-row .delete-row, .field-row .required-indicator {\n    display: inline-block; }\n  .field-row .field-selector, .field-row .field-input {\n    padding: 0 10px; }\n  .field-row .custom-field-name, .field-row .field-input, .field-row .delete-row {\n    box-sizing: border-box; }\n  .field-row .field-selector {\n    min-width: 30%; }\n    .field-row .field-selector.required-field button:hover {\n      cursor: not-allowed; }\n    .field-row .field-selector .required-indicator-container {\n      padding-left: 12px;\n      display: flex;\n      color: #32363A; }\n      .field-row .field-selector .required-indicator-container .required-indicator-text {\n        min-width: 0;\n        font-size: 14px; }\n      .field-row .field-selector .required-indicator-container .required-indicator-symbol {\n        margin-top: -2px; }\n    .field-row .field-selector .left-align {\n      text-align: left; }\n    .field-row .field-selector .custom-field-name {\n      padding-left: 16px;\n      padding-right: 30px; }\n      .field-row .field-selector .custom-field-name input {\n        text-align: center;\n        display: inline-block;\n        width: 100%;\n        padding: 0; }\n  .field-row .field-input-container {\n    display: flex;\n    flex: 1 0;\n    align-items: center; }\n    .field-row .field-input-container .field-input {\n      flex: 1;\n      min-width: 0;\n      margin-right: 4px; }\n    .field-row .field-input-container .delete-row {\n      max-width: 36px;\n      margin-left: 12px;\n      vertical-align: middle; }\n      .field-row .field-input-container .delete-row .icon-wrapper {\n        display: block;\n        width: fit-content;\n        margin: 0 auto;\n        min-width: 41px; }\n        .field-row .field-input-container .delete-row .icon-wrapper:hover {\n          cursor: pointer; }\n  .field-row .full-width {\n    width: 100%; }\n";
+styleInject(css_248z$b);
+
+function FieldRow(props) {
+  var _useState = useState(props.children),
+      _useState2 = _slicedToArray(_useState, 2),
+      children = _useState2[0],
+      setChildren = _useState2[1];
+
+  useEffect(function () {
+    var nextChildren;
+
+    if (!Array.isArray(children)) {
+      nextChildren = [];
+      nextChildren.push(children);
+      setChildren(nextChildren);
+    }
+  }, []);
+  useEffect(function () {
+    var nextChildren;
+    nextChildren = props.children.slice();
+    setChildren(nextChildren);
+  }, [props.children]);
+
+  var getRowDelete = function getRowDelete() {
+    var handleDelete = function handleDelete() {
+      if (typeof props.onRemove === 'function') {
+        props.onRemove(props.id);
+      }
+    };
+
+    return React.createElement("div", {
+      className: "icon-wrapper",
+      onClick: handleDelete
+    }, !props.required && React.createElement(IconButton, {
+      "aria-label": "RemoveRow",
+      size: "medium"
+    }, React.createElement(RemoveItemIcon, null)));
+  };
+
+  var handleFieldSwitch = function handleFieldSwitch(newFieldId) {
+    if (typeof props.onFieldSwitch === 'function') {
+      props.onFieldSwitch(props.id, newFieldId);
+    }
+  };
+
+  var handleFieldNameChange = function handleFieldNameChange(event) {
+    if (typeof props.onFieldNameChange === 'function') {
+      props.onFieldNameChange(props.id, event);
+    }
+  };
+
+  var handleFieldValueChange = function handleFieldValueChange(value, event) {
+    if (typeof props.onFieldValueChange === 'function') {
+      props.onFieldValueChange(props.id, value, event);
+    }
+  };
+
+  var shouldDisableTooltip = function shouldDisableTooltip(tooltipValue) {
+    if (typeof tooltipValue === 'string') {
+      return tooltipValue.trim().length === 0;
+    }
+
+    if (typeof tooltipValue === 'function' || tooltipValue === undefined || tooltipValue === null) {
+      return true;
+    }
+
+    return "".concat(tooltipValue).trim().length === 0;
+  };
+
+  var getFieldSelector = function getFieldSelector() {
+    var getInternalContent = function getInternalContent() {
+      if (props.isCustom) {
+        return React.createElement(Input, {
+          full: true,
+          value: props.fieldName === undefined ? '' : props.fieldName,
+          placeholder: props.customNamePlaceholder === undefined ? '' : props.customNamePlaceholder,
+          className: "custom-field-name",
+          onChange: handleFieldNameChange
+        });
+      }
+
+      if (props.required || !props.children || Array.isArray(children) && children.length === 0) {
+        if (props.subMenu) {
+          return React.createElement(SelectMenu, {
+            searchable: props.searchable !== undefined && props.searchable !== false,
+            defaultLabel: props.fieldName || '',
+            label: props.fieldName,
+            className: "full-width left-align",
+            onChange: handleFieldSwitch
+          }, createMenuItems([{
+            id: props.id,
+            name: props.fieldName,
+            subMenu: props.subMenu,
+            subMenuLabel: props.subMenuLabel
+          }]));
+        } else {
+          return React.createElement("div", {
+            className: "required-indicator-container"
+          }, React.createElement("div", {
+            className: "required-indicator-text"
+          }, props.fieldName), props.required && React.createElement("div", {
+            className: "required-indicator-symbol"
+          }, "*"));
+        }
+      }
+
+      return React.createElement(SelectMenu, {
+        searchable: props.searchable !== undefined && props.searchable !== false,
+        defaultLabel: props.fieldName || '',
+        label: props.fieldName,
+        className: "full-width left-align",
+        onChange: handleFieldSwitch
+      }, createMenuItems(children));
+    };
+
+    var tooltipContent = React.createElement("div", null, props.nameTooltip);
+    return React.createElement(Tooltip, {
+      disabled: !props.isCustom || shouldDisableTooltip(props.nameTooltip),
+      placement: "top",
+      content: tooltipContent
+    }, React.createElement("div", null, getInternalContent()));
+  };
+
+  var createMenuItems = function createMenuItems(items) {
+    return items.map(function (_ref) {
+      var id = _ref.id,
+          name = _ref.name,
+          subMenu = _ref.subMenu,
+          subMenuLabel = _ref.subMenuLabel;
+      return subMenu !== undefined ? React.createElement(SelectMenu, {
+        label: subMenuLabel ? subMenuLabel : name,
+        key: id
+      }, createMenuItems(subMenu)) : React.createElement(MenuItem, {
+        key: id,
+        value: id
+      }, name);
+    });
+  };
+
+  var getFieldInput = function getFieldInput() {
+    var getInternalContent = function getInternalContent() {
+      if (props.customInput) {
+        return props.customInput;
+      } else {
+        return React.createElement(PipedTextInput, {
+          items: props.pipedTextItems,
+          value: props.value === undefined ? '' : props.value,
+          onChange: handleFieldValueChange,
+          placeholder: props.valuePlaceholder === undefined ? '' : props.valuePlaceholder
+        });
+      }
+    };
+
+    var tooltipContent = React.createElement("div", null, props.valueTooltip);
+    return React.createElement(Tooltip, {
+      disabled: shouldDisableTooltip(props.valueTooltip),
+      placement: "top",
+      content: tooltipContent
+    }, React.createElement("div", null, getInternalContent()));
+  };
+
+  return React.createElement("div", {
+    className: "field-row"
+  }, React.createElement("div", {
+    className: "field-selector ".concat(props.required && !props.subMenu ? 'required-field' : '')
+  }, getFieldSelector()), React.createElement("div", {
+    className: "field-input-container"
+  }, React.createElement("div", {
+    className: "field-input"
+  }, getFieldInput()), React.createElement("div", {
+    className: "delete-row"
+  }, getRowDelete())));
+}
+
+var css_248z$a = "";
+styleInject(css_248z$a);
+
+function FieldItem(props) {
+  var label = props.name || undefined;
+
+  var handleClick = function handleClick() {
+    if (typeof props.onClick === 'function') {
+      props.onClick(props.id);
+    }
+  };
+
+  return React.createElement("div", {
+    className: "field-item",
+    onClick: handleClick
+  }, label);
+}
+
+var css_248z$9 = ".task-fields .add-field-button {\n  margin-right: 100px; }\n  .task-fields .add-field-button .add-field-button-label {\n    padding: 0 3px; }\n\n.task-fields .field-table {\n  padding-right: 100px;\n  overflow-x: auto; }\n  .task-fields .field-table .field-headers {\n    margin-bottom: 10px;\n    padding-left: 12px; }\n    .task-fields .field-table .field-headers .field-row {\n      color: #6A6D70;\n      font-weight: bold; }\n      .task-fields .field-table .field-headers .field-row .field-selector label, .task-fields .field-table .field-headers .field-row .field-input label {\n        font-size: 12px; }\n      .task-fields .field-table .field-headers .field-row .field-selector {\n        padding-top: 0;\n        padding-right: 24px;\n        padding-bottom: 0;\n        padding-left: 0; }\n      .task-fields .field-table .field-headers .field-row .field-input {\n        padding-top: 0;\n        padding-right: 0;\n        padding-bottom: 0;\n        padding-left: 12px; }\n  .task-fields .field-table .field-rows {\n    padding-bottom: 12px; }\n    .task-fields .field-table .field-rows .field-row {\n      border-top: 1px solid #E5E5E5; }\n      .task-fields .field-table .field-rows .field-row .field-selector {\n        padding-top: 8px;\n        padding-right: 12px;\n        padding-bottom: 8px;\n        padding-left: 12px; }\n      .task-fields .field-table .field-rows .field-row .field-input {\n        border-left: 1px solid #E5E5E5;\n        padding-top: 8px;\n        padding-right: 0;\n        padding-bottom: 8px;\n        padding-left: 12px; }\n\n.q-popover .field-item {\n  padding: 5px 32px; }\n  .q-popover .field-item:hover {\n    cursor: pointer;\n    user-select: none;\n    background: #007ac0;\n    color: #fff;\n    fill: #fff; }\n";
+styleInject(css_248z$9);
+
+var uuidv4 = uuid.v4;
+var CUSTOM_TYPE = 'custom';
+function TaskFields(props) {
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      fieldsInUse = _useState2[0],
+      setFieldsInUse = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      availableFields = _useState4[0],
+      setAvailableFields = _useState4[1];
+
+  var _useState5 = useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      allFieldOptions = _useState6[0],
+      setAllFieldOptions = _useState6[1];
+
+  var onFieldSwitch = function onFieldSwitch(oldId, newId) {
+    if (typeof props.onFieldSwitch === 'function') {
+      props.onFieldSwitch(oldId, newId);
+    }
+  };
+
+  var onFieldValueChange = function onFieldValueChange(fieldId, value, event) {
+    if (typeof props.onFieldInputChange === 'function') {
+      props.onFieldInputChange(fieldId, value, event);
+    }
+  };
+
+  var onFieldNameChange = function onFieldNameChange(fieldId, event) {
+    var changeFn = _get(props, 'customFieldOptions.onCustomFieldNameChange');
+
+    if (typeof changeFn === 'function') {
+      changeFn(fieldId, event);
+    }
+  };
+
+  var getFieldRows = function getFieldRows() {
+    return fieldsInUse.map(function (field) {
+      return React.createElement(FieldRow, {
+        customInput: field.children,
+        required: field.required,
+        fieldName: field.name,
+        id: field.id,
+        subMenu: field.subMenu,
+        subMenuLabel: field.subMenuLabel,
+        nameTooltip: field.type === CUSTOM_TYPE ? _get(props, 'customFieldOptions.nameTooltip', '') : field.nameTooltip,
+        valueTooltip: field.type === CUSTOM_TYPE ? _get(props, 'customFieldOptions.valueTooltip', '') : field.valueTooltip,
+        onFieldNameChange: onFieldNameChange,
+        onFieldValueChange: onFieldValueChange,
+        onFieldSwitch: onFieldSwitch,
+        onRemove: onFieldRemove,
+        isCustom: field.type === CUSTOM_TYPE,
+        key: field.id,
+        value: field.value,
+        valuePlaceholder: field.type === CUSTOM_TYPE ? _get(props, 'customFieldOptions.valuePlaceholder', '') : field.valuePlaceholder,
+        customNamePlaceholder: _get(props, 'customFieldOptions.namePlaceholder', ''),
+        pipedTextItems: props.pipedTextItems,
+        searchable: props.searchable
+      }, allFieldOptions && getFieldsForFieldRow(availableFields, allFieldOptions, field.id));
+    });
+  };
+
+  var getFieldsForFieldRow = function getFieldsForFieldRow(allAvailableFields, allFields, fieldId) {
+    var fieldsToAdd = allAvailableFields.slice();
+    allFields.forEach(function (field) {
+      if (field.subMenu !== undefined && fieldId === field.id) {
+        var foundIndex = fieldsToAdd.findIndex(function (fieldToAdd) {
+          return fieldToAdd.id === field.id;
+        });
+
+        if (foundIndex === -1) {
+          fieldsToAdd.push(field);
+        }
+      }
+    });
+    return fieldsToAdd;
+  };
+
+  var onFieldAdd = function onFieldAdd(fieldId) {
+    if (typeof props.onFieldAdd === 'function') {
+      props.onFieldAdd(fieldId);
+    }
+  };
+
+  var onCustomFieldAdd = function onCustomFieldAdd() {
+    var handleFn = _get(props, 'customFieldOptions.onCustomFieldAdd', function () {});
+
+    handleFn();
+  };
+
+  var getAvailableFields = function getAvailableFields() {
+    return availableFields.map(function (field) {
+      return React.createElement(FieldItem, {
+        name: field.name,
+        type: field.type,
+        required: field.required,
+        key: field.id,
+        id: field.id,
+        subMenu: field.subMenu,
+        subMenuLabel: field.subMenuLabel
+      });
+    });
+  };
+
+  var onFieldRemove = function onFieldRemove(fieldId) {
+    if (typeof props.onFieldRemove === 'function') {
+      props.onFieldRemove(fieldId);
+    }
+  };
+
+  var getFieldsInUse = function getFieldsInUse(allFieldOptions) {
+    var nextFieldsInUse = [];
+    var taskFieldsChildren;
+
+    if (allFieldOptions === undefined) {
+      return undefined;
+    }
+
+    if (!Array.isArray(props.children)) {
+      taskFieldsChildren = [];
+      taskFieldsChildren.push(props.children);
+    } else {
+      taskFieldsChildren = props.children;
+    }
+
+    nextFieldsInUse = getRequiredFields(taskFieldsChildren);
+    nextFieldsInUse = getFieldsWithValues(nextFieldsInUse);
+    nextFieldsInUse = getInlineFields(nextFieldsInUse, taskFieldsChildren);
+    return nextFieldsInUse;
+
+    function getInlineFields(fieldsInUse, fieldChildren) {
+      var nextFieldsInUse = fieldsInUse.slice();
+      var values = props.values || [];
+      nextFieldsInUse = nextFieldsInUse.map(function (nextFieldInUse) {
+        var foundFieldValue, foundNextChild, foundFieldOption;
+        foundFieldValue = values.find(function (value) {
+          return value.id === nextFieldInUse.id;
+        });
+        foundFieldOption = fieldChildren.find(function (child) {
+          return child.props.id === foundFieldValue.id;
+        });
+
+        if (foundFieldOption !== undefined && !nextFieldInUse.required) {
+          foundNextChild = fieldChildren.find(function (nextChild) {
+            return nextChild.props.id === foundFieldValue.id;
+          });
+          nextFieldInUse = Object.assign({}, nextFieldInUse, {
+            name: foundNextChild.props.name,
+            id: foundNextChild.props.id,
+            children: foundNextChild.props.children,
+            nameTooltip: foundNextChild.props.nameTooltip,
+            valueTooltip: foundNextChild.props.valueTooltip,
+            valuePlaceholder: foundNextChild.props.valuePlaceholder,
+            subMenu: foundNextChild.props.subMenu,
+            subMenuLabel: foundNextChild.props.subMenuLabel
+          });
+        }
+
+        return nextFieldInUse;
+      });
+      return nextFieldsInUse;
+    }
+
+    function getRequiredFields(fieldsToSearch) {
+      var requiredFields = [];
+      fieldsToSearch.forEach(function (field) {
+        if (field.props.required) {
+          requiredFields.push({
+            required: field.props.required,
+            name: field.props.name,
+            id: field.props.id,
+            children: field.props.children,
+            nameTooltip: field.props.nameTooltip,
+            valueTooltip: field.props.valueTooltip,
+            value: field.props.value || undefined,
+            valuePlaceholder: field.props.valuePlaceholder,
+            subMenu: field.props.subMenu,
+            subMenuLabel: field.props.subMenuLabel
+          });
+        }
+      });
+      return requiredFields;
+    }
+
+    function getFieldsWithValues(fieldsInUse) {
+      var nextFieldsInUse = fieldsInUse.slice();
+      var fieldValues = props.values || [];
+      fieldValues.forEach(function (currentField) {
+        var fieldMetadata = allFieldOptions.find(function (field) {
+          return field.id === currentField.id;
+        });
+
+        if (fieldMetadata !== undefined) {
+          setFieldValue(nextFieldsInUse, currentField, fieldMetadata);
+        } else if (props.customFieldOptions) {
+          var customFieldValue = {
+            required: false,
+            name: currentField.name,
+            id: currentField.id,
+            value: currentField.value,
+            nameTooltip: _get(props, 'customFieldOptions.nameTooltip', ''),
+            valueTooltip: _get(props, 'customFieldOptions.valueTooltip', ''),
+            namePlaceholder: _get(props, 'customFieldOptions.namePlaceholder', ''),
+            type: CUSTOM_TYPE,
+            subMenu: currentField.subMenu,
+            subMenuLabel: currentField.subMenuLabel
+          };
+          nextFieldsInUse.push(customFieldValue);
+        }
+      });
+      return nextFieldsInUse;
+
+      function setFieldValue(fieldsInUse, fieldValue, fieldMetadata) {
+        var field = fieldsInUse.find(function (field) {
+          return field.id === fieldValue.id;
+        });
+
+        if (field !== undefined) {
+          field.value = fieldValue.value;
+        } else {
+          var newField = _cloneDeepWith(fieldMetadata, function (value) {
+            if (React.isValidElement(value)) {
+              return React.cloneElement(value);
+            }
+          });
+
+          newField.value = fieldValue.value;
+          fieldsInUse.push(newField);
+        }
+      }
+    }
+  };
+
+  var updateAvailableFields = function updateAvailableFields() {
+    var nextAllFieldOptions = props.children.map(function (child) {
+      var childProps = child.props;
+      return {
+        required: childProps.required,
+        name: childProps.name,
+        id: childProps.id,
+        children: childProps.children,
+        nameTooltip: childProps.nameTooltip,
+        valueTooltip: childProps.valueTooltip,
+        valuePlaceholder: childProps.valuePlaceholder,
+        subMenu: childProps.subMenu,
+        subMenuLabel: childProps.subMenuLabel
+      };
+    });
+    var nextFieldsInUse = getFieldsInUse(nextAllFieldOptions);
+    var nextAvailableFields = nextAllFieldOptions.filter(function (field) {
+      var foundFieldIdx = nextFieldsInUse.findIndex(function (usedField) {
+        return field.id === usedField.id;
+      });
+      return foundFieldIdx === -1;
+    });
+    setAllFieldOptions(nextAllFieldOptions);
+    setFieldsInUse(nextFieldsInUse);
+    setAvailableFields(nextAvailableFields);
+  };
+
+  useEffect(function () {
+    updateAvailableFields();
+  }, []);
+  useEffect(function () {
+    updateAvailableFields();
+  }, [props.values]);
+  return React.createElement("div", {
+    className: "task-fields"
+  }, React.createElement("div", {
+    className: "field-table",
+    tabIndex: "0"
+  }, React.createElement("div", {
+    className: "field-headers"
+  }, React.createElement(AddFieldHeaders, {
+    itemHeaderText: props.fieldItemsHeaderText,
+    inputHeaderText: props.fieldInputsHeaderText
+  })), React.createElement("div", {
+    className: "field-rows"
+  }, getFieldRows())), React.createElement("div", {
+    className: "add-field-container"
+  }, React.createElement(AddFieldButton, {
+    label: props.addFieldLabel,
+    onFieldAdded: onFieldAdd,
+    disableAddFieldPopover: props.disableAddFieldPopover,
+    allowCustom: props.customFieldOptions,
+    customLabel: _get(props, 'customFieldOptions.label', ''),
+    onCustomFieldAdded: props.customFieldOptions ? onCustomFieldAdd : function () {}
+  }, getAvailableFields())));
+}
+
+function AddFieldButton(props) {
+  var label = props.label || '';
+  var customLabel = props.customLabel || '';
+  var disableAddFieldPopover = props.disableAddFieldPopover;
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      popoverShow = _useState8[0],
+      setPopoverShow = _useState8[1];
+
+  var customId = uuidv4();
+  var CUSTOM_OPTION = React.createElement(FieldItem, {
+    key: customId,
+    onClick: function onClick() {
+      props.onCustomFieldAdded();
+      setPopoverShow(false);
+    },
+    id: customId,
+    name: customLabel
+  });
+
+  var onPopoverClose = function onPopoverClose() {
+    setPopoverShow(false);
+  };
+
+  var children = [];
+
+  var onPopoverAnchorClick = function onPopoverAnchorClick() {
+    if (!disableAddFieldPopover) {
+      setPopoverShow(!popoverShow);
+    } else {
+      props.onFieldAdded(props.children !== 0 ? getFieldIdWhenPopoverIsClicked(props.children[0].props) : '');
+    }
+  };
+
+  var getFieldIdWhenPopoverIsClicked = function getFieldIdWhenPopoverIsClicked(field) {
+    if (field.subMenu) {
+      return getFieldIdWhenPopoverIsClicked(field.subMenu[0]);
+    } else {
+      return field.id;
+    }
+  };
+
+  children = props.children.map(function (child) {
+    return React.createElement(FieldItem, {
+      name: child.props.name,
+      key: child.props.id,
+      id: child.props.id,
+      subMenu: child.props.subMenu,
+      onClick: function onClick(fieldId) {
+        setPopoverShow(false);
+        props.onFieldAdded(fieldId);
+      }
+    });
+  });
+
+  if (props.allowCustom) {
+    children.push(CUSTOM_OPTION);
+  }
+
+  return React.createElement("div", {
+    className: "add-field-button-container"
+  }, React.createElement(Popover, {
+    show: popoverShow,
+    onClose: onPopoverClose,
+    ignoreClickSelector: ".add-field-button",
+    anchor: React.createElement(Button, {
+      disabled: children.length === 0,
+      kind: "secondary",
+      className: "add-field-button",
+      onClick: onPopoverAnchorClick
+    }, React.createElement("span", {
+      className: "add-field-button-label"
+    }, label))
+  }, children));
+}
+
+function AddFieldHeaders(props) {
+  var itemHeaderText = props.itemHeaderText,
+      inputHeaderText = props.inputHeaderText;
+
+  if (itemHeaderText || inputHeaderText) {
+    return React.createElement("div", {
+      className: "field-row"
+    }, React.createElement("div", {
+      className: "field-selector"
+    }, React.createElement(Label, null, itemHeaderText)), React.createElement("div", {
+      className: "field-input"
+    }, React.createElement(Label, null, inputHeaderText)));
+  } else {
+    return null;
+  }
+}
+
+var css_248z$8 = ".select-item .item {\n  padding: 5px 32px;\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%; }\n  .select-item .item .checked-container, .select-item .item .item-content {\n    display: inline-block; }\n  .select-item .item .checked-container {\n    margin-bottom: -3px;\n    transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 0.1s; }\n    .select-item .item .checked-container.checked {\n      opacity: 1; }\n    .select-item .item .checked-container:not(.checked) {\n      opacity: 0; }\n  .select-item .item:hover {\n    cursor: pointer;\n    user-select: none;\n    background: #007ac0;\n    color: #fff;\n    fill: #fff; }\n";
+styleInject(css_248z$8);
+
+function SelectItem(props) {
+  var checked = props.checked || false;
+  var children = props.children || '';
+  return React.createElement("div", {
+    className: "select-item",
+    onClick: function onClick(event) {
+      return props.onChange(props.value, event);
+    }
+  }, React.createElement("div", {
+    className: "item"
+  }, React.createElement("div", {
+    className: "checked-container ".concat(checked ? 'checked' : '')
+  }, React.createElement(Icon, {
+    type: IconTypes.Check,
+    size: "medium"
+  })), React.createElement("div", {
+    className: "item-content"
+  }, children)));
+}
+
+var css_248z$7 = "";
+styleInject(css_248z$7);
+
+function MultiselectDropdown(props) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDropdownOpen = _useState2[0],
+      setIsDropdownOpen = _useState2[1];
+
+  var label = props.label || '';
+
+  var onPopoverClose = function onPopoverClose() {
+    setIsDropdownOpen(false);
+  };
+
+  var handleChange = function handleChange(value, event) {
+    if (typeof props.onChange === 'function') {
+      props.onChange(value, event);
+    }
+  };
+
+  var renderToggleButton = function renderToggleButton() {
+    return React.createElement("div", {
+      className: "multiselect-dropdown-toggle"
+    }, React.createElement(Button, {
+      onClick: function onClick() {
+        setIsDropdownOpen(!isDropdownOpen);
+      }
+    }, label));
+  };
+
+  var children = props.children || [];
+
+  if (!Array.isArray(children)) {
+    var temp = [];
+    temp.push(children);
+    children = temp;
+  }
+
+  return React.createElement("div", {
+    className: "multiselect-dropdown"
+  }, React.createElement(Popover, {
+    show: isDropdownOpen,
+    onClose: onPopoverClose,
+    ignoreClickSelector: ".multiselect-dropdown-toggle",
+    anchor: renderToggleButton()
+  }, children.map(function (child) {
+    return React.createElement(SelectItem, {
+      onChange: handleChange,
+      checked: child.props.checked,
+      value: child.props.value,
+      key: child.props.value
+    }, child.props.children);
+  })));
+}
+
+var css_248z$6 = ".dynamic-search-input .search-input {\n  box-sizing: border-box; }\n\n.dynamic-search-popover-child {\n  padding: 5px 32px; }\n  .dynamic-search-popover-child:hover {\n    cursor: pointer;\n    user-select: none;\n    background: #007ac0;\n    color: #fff;\n    fill: #fff; }\n";
+styleInject(css_248z$6);
+
+function DynamicSearchInput(props) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDropdownOpen = _useState2[0],
+      setIsDropdownOpen = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      searchResults = _useState4[0],
+      setSearchResults = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      inputValue = _useState6[0],
+      setInputValue = _useState6[1];
+
+  useEffect(function () {
+    if (props.search && typeof props.search !== 'function') {
+      throw new Error('DynamicSearchInput: Expected function for search property');
+    }
+
+    if (props.onChange && typeof props.onChange !== 'function') {
+      throw new Error("DynamicSearchInput: Expected onChange to be a function. Received type ".concat(_typeof(props.onChange)));
+    }
+
+    if (!props.search && props.items === undefined) {
+      throw new Error('DynamicSearchInput: Expected one of either items or search function but found neither');
+    }
+
+    if (props.search && props.items !== undefined) {
+      throw new Error('DynamicSearchInput: Expected one of either items or search function but found both');
+    }
+
+    if (props.items !== undefined) {
+      if (!Array.isArray(props.items)) {
+        throw new Error('DynamicSearchInput: expected items property to be an Array');
+      }
+
+      props.items.forEach(function (item) {
+        if (item.props.label === undefined) {
+          throw new Error('DynamicSearchInput: expected items in items property to have "label" property');
+        }
+      });
+    }
+  }, []);
+
+  var handleChange = function handleChange(value, event) {
+    if (typeof props.onChange === 'function') {
+      props.onChange(value, event);
+    }
+  };
+
+  var handleSearchItemSelected = function handleSearchItemSelected(value) {
+    setInputValue(value);
+    handleChange(value);
+    setIsDropdownOpen(false);
+  };
+
+  var onPopoverClose = function onPopoverClose() {
+    setIsDropdownOpen(false);
+  };
+
+  var defaultSearch = function () {
+    var _ref = _asyncToGenerator(_regeneratorRuntime().mark(function _callee(value) {
+      var results;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              value = ((value || '') + '').trim().toLowerCase();
+
+              if (!(value === '')) {
+                _context.next = 3;
+                break;
+              }
+
+              return _context.abrupt("return", []);
+
+            case 3:
+              results = props.items.filter(function (item) {
+                return item.props.label.toLowerCase().includes(value);
+              });
+              return _context.abrupt("return", results);
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function defaultSearch(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var handleInputChange = function () {
+    var _ref2 = _asyncToGenerator(_regeneratorRuntime().mark(function _callee2(event) {
+      var inputVal, searchFunc, results, resultsType, nextSearchResults;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              event.persist();
+              inputVal = _get(event, 'target.value', '');
+              searchFunc = props.search ? props.search : defaultSearch;
+              _context2.next = 5;
+              return searchFunc(inputVal);
+
+            case 5:
+              results = _context2.sent;
+
+              if (Array.isArray(results)) {
+                _context2.next = 9;
+                break;
+              }
+
+              resultsType = typeof results === 'undefined' && 'undefined' || results === null && 'null' || results.constructor && results.constructor.name || results;
+              throw new Error("DynamicSearchInput: expected result from search function to be Array, but was ".concat(resultsType));
+
+            case 9:
+              nextSearchResults = results.map(function (result) {
+                if (_get(result, 'props.label') === undefined) {
+                  throw new Error('DynamicSearchInput: expected search result array values to have label property but found none');
+                }
+
+                return React.createElement(SearchItem, {
+                  key: result.props.id,
+                  onClick: function onClick() {
+                    handleSearchItemSelected(result.props.label);
+                  }
+                }, result);
+              });
+              setInputValue(inputVal);
+
+              if (nextSearchResults.length > 0) {
+                setIsDropdownOpen(true);
+              } else {
+                setIsDropdownOpen(false);
+              }
+
+              setSearchResults(nextSearchResults);
+              handleChange(inputVal, event);
+
+            case 14:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function handleInputChange(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return React.createElement("div", {
+    className: "dynamic-search-input"
+  }, React.createElement(Popover, {
+    show: isDropdownOpen,
+    onClose: onPopoverClose,
+    anchor: React.createElement(Input, {
+      className: "search-input",
+      full: true,
+      small: true,
+      placeholder: props.placeholder,
+      value: inputValue,
+      onChange: handleInputChange
+    })
+  }, searchResults));
+}
+
+function SearchItem(props) {
+  return React.createElement("div", {
+    className: "dynamic-search-popover-child",
+    onClick: props.onClick
+  }, props.children);
+}
+
+var css_248z$5 = ".capture-event .capture-event-controls {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 20px; }\n  .capture-event .capture-event-controls .status-message {\n    font-size: 12px;\n    line-height: 16px;\n    display: flex;\n    align-items: center;\n    gap: 4px; }\n    .capture-event .capture-event-controls .status-message.pending {\n      color: #74777a; }\n    .capture-event .capture-event-controls .status-message.success {\n      color: #107e3e;\n      fill: #107e3e; }\n    .capture-event .capture-event-controls .status-message.failure {\n      color: #bb0000;\n      fill: #bb0000; }\n";
+styleInject(css_248z$5);
+
+function CaptureEvent(props) {
+    return (React.createElement("div", { className: "capture-event" },
+        React.createElement("div", { className: "capture-event-controls" },
+            getCaptureEventButton(),
+            getStatusMessage()),
+        props.payload !== undefined && (React.createElement(FormField, { isReadOnly: true },
+            React.createElement(InputField, { "aria-readonly": true, label: props.payloadLabelTranslation, multiline: true, readOnly: true, full: true, value: props.payload, className: "polled-response-output" })))));
+    function getCaptureEventButton() {
+        if (props.status === 'pending') {
+            return (React.createElement("div", { className: "capture-event-button-container" },
+                React.createElement(Button, { kind: "secondary", onClick: function () { return props.onCancel(); } }, props.cancelCaptureTranslation)));
+        }
+        else {
+            return (React.createElement("div", { className: "capture-event-button-container" },
+                React.createElement(Button, { kind: "primary", onClick: function () { return props.onStart(); } }, props.startCaptureTranslation)));
+        }
+    }
+    function getStatusMessage() {
+        var statusMessages = {
+            default: ['', undefined],
+            pending: [props.pendingStatusTranslation, React.createElement(LoadingSpinner, { size: "small", show: true })],
+            success: [props.successStatusTranslation, React.createElement(SuccessIcon, { size: "small" })],
+            failure: [props.failureStatusTranslation, React.createElement(ErrorIcon, { size: "small" })]
+        };
+        var _a = statusMessages[props.status], statusLabel = _a[0], statusIcon = _a[1];
+        return (React.createElement("div", { className: "status-message ".concat(props.status) },
+            statusIcon,
+            statusLabel));
+    }
+}
+
+var css_248z$4 = ".copy-text {\n  display: flex;\n  column-gap: 8px; }\n  .copy-text .input-container {\n    width: 100%; }\n    .copy-text .input-container .input-textbox {\n      width: 100%; }\n  .copy-text .copy-button-container .selected-button {\n    display: flex; }\n    .copy-text .copy-button-container .selected-button .selected-button-text {\n      display: flex;\n      align-self: center; }\n";
+styleInject(css_248z$4);
+
+var COPY_BUTTON_SELECTED_TEXT_TIME = 1.5 * 1000; // seconds * milliseconds
+function CopyText(props) {
+    var _a = useState(false), copyButtonSelected = _a[0], setCopyButtonSelected = _a[1];
+    return (React.createElement("div", { className: "copy-text" },
+        React.createElement("div", { className: "input-container" },
+            React.createElement(Input, { className: "input-textbox", defaultValue: props.text, "aria-readonly": true, readOnly: true })),
+        React.createElement("div", { className: "copy-button-container" },
+            React.createElement(Button, { kind: "secondary", disabled: copyButtonSelected, onClick: copyTextToClipboard }, getCopyButtonContent()))));
+    function copyTextToClipboard() {
+        try {
+            navigator.clipboard.writeText(props.text);
+            setCopyButtonSelected(true);
+            setTimeout(function () { return setCopyButtonSelected(false); }, COPY_BUTTON_SELECTED_TEXT_TIME);
+        }
+        catch (err) {
+            console.error('Failed to copy text');
+            console.error(err);
+        }
+    }
+    function getCopyButtonContent() {
+        if (copyButtonSelected) {
+            return (React.createElement("div", { className: "selected-button" },
+                React.createElement("div", { className: "selected-button-icon" },
+                    React.createElement(CheckIcon, null)),
+                React.createElement("div", { className: "selected-button-text" }, props.copySelectedTranslation)));
+        }
+        else {
+            return (React.createElement("div", { className: "default-button" }, props.copyTranslation));
+        }
+    }
+}
+
+var css_248z$3 = ".field-mapper {\n  padding-bottom: 12px; }\n  .field-mapper .field-mapper-row-container .field-mapper-row {\n    border-top: 1px solid #E5E5E5; }\n  .field-mapper .field-mapper-row-container.field-mapper-header-row {\n    margin-bottom: 10px;\n    padding-left: 12px; }\n    .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-row {\n      border: 0; }\n    .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-key, .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-value {\n      border: 0;\n      display: flex;\n      align-items: center; }\n      .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-key .field-mapper-header-cell, .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-value .field-mapper-header-cell {\n        color: #6A6D70;\n        font-weight: bold;\n        font-size: 12px; }\n    .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-key {\n      padding-top: 0;\n      padding-right: 24px;\n      padding-bottom: 0;\n      padding-left: 0; }\n    .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-value {\n      padding-top: 0;\n      padding-right: 0;\n      padding-bottom: 0;\n      padding-left: 12px; }\n  .field-mapper .add-field-button-container {\n    padding-top: 12px; }\n";
+styleInject(css_248z$3);
+
+function isString(val) {
+    return (typeof val) === 'string';
+}
+
+var css_248z$2 = ".field-mapper-row .field-mapper-row-content {\n  display: flex; }\n  .field-mapper-row .field-mapper-row-content .field-mapper-key-container {\n    flex: 4; }\n  .field-mapper-row .field-mapper-row-content .field-mapper-value-container {\n    flex: 7; }\n  .field-mapper-row .field-mapper-row-content .remove-row-container {\n    min-height: 100%;\n    padding: 8px 12px;\n    border-left: 1px solid #E5E5E5; }\n    .field-mapper-row .field-mapper-row-content .remove-row-container.hide-remove-button {\n      border: 0; }\n    .field-mapper-row .field-mapper-row-content .remove-row-container .empty-remove-button {\n      min-width: 36px; }\n";
+styleInject(css_248z$2);
+
+var css_248z$1 = ".field-mapper-key {\n  display: flex;\n  align-items: center;\n  padding-top: 8px;\n  padding-right: 12px;\n  padding-bottom: 8px;\n  padding-left: 12px;\n  height: 100%; }\n  .field-mapper-key .required-field-container {\n    display: flex; }\n    .field-mapper-key .required-field-container .required-field-text {\n      min-width: 0;\n      font-size: 14px; }\n    .field-mapper-key .required-field-container .required-field-symbol {\n      margin-top: -2px; }\n";
+styleInject(css_248z$1);
+
+var FieldMapperKey = React.forwardRef(function FieldMapperKey(props, ref) {
+    var _a, _b, _c, _d, _e;
+    var availableFields;
+    var onFieldKeyChange;
+    availableFields = Array.isArray(props.availableFields)
+        ? props.availableFields
+        : [];
+    onFieldKeyChange = (typeof props.onChange === 'function')
+        ? props.onChange
+        : function () { return undefined; };
+    return (React.createElement("div", { className: "field-mapper-key" + (props.className ? ' ' + props.className : ''), ref: ref }, (React.Children.count(props.children) > 0)
+        ? props.children
+        : (React.createElement("div", { className: "field-mapper-key-dropdown" }, fieldMapperKeyDropdownDisabled()
+            ? (React.createElement(Button, { disabled: true }, (_a = props.selectedField) === null || _a === void 0 ? void 0 : _a.label))
+            : (((_b = props.selectedField) === null || _b === void 0 ? void 0 : _b.required) === true)
+                ? (React.createElement("div", { className: "required-field-container" },
+                    React.createElement("div", { className: "required-field-text" }, (_c = props.selectedField) === null || _c === void 0 ? void 0 : _c.label),
+                    React.createElement("div", { className: "required-field-symbol" }, "*")))
+                : (React.createElement(Dropdown, { onChange: handleFieldKeyChange },
+                    React.createElement(DropdownButton, { label: (_d = props.selectedField) === null || _d === void 0 ? void 0 : _d.label }),
+                    React.createElement(DropdownList, null, (_e = props.availableFields) === null || _e === void 0 ? void 0 : _e.map(function (fieldItem) {
+                        return (React.createElement(DropdownOption, { key: fieldItem.key, label: fieldItem.label, value: fieldItem.value }));
+                    }))))))));
+    function handleFieldKeyChange(value) {
+        var foundSelectedFieldKey;
+        foundSelectedFieldKey = availableFields.find(function (availableField) {
+            return availableField.value === value;
+        });
+        if (foundSelectedFieldKey === undefined) {
+            return;
+        }
+        onFieldKeyChange(props.selectedField, foundSelectedFieldKey);
+    }
+    function fieldMapperKeyDropdownDisabled() {
+        var hasAvailableFields;
+        hasAvailableFields = (availableFields === null || availableFields === void 0 ? void 0 : availableFields.length) > 0;
+        return !hasAvailableFields;
+    }
+});
+
+var css_248z = ".field-mapper-value {\n  border-left: 1px solid #E5E5E5;\n  padding-top: 8px;\n  padding-right: 12px;\n  padding-bottom: 8px;\n  padding-left: 12px;\n  height: 100%; }\n";
+styleInject(css_248z);
+
+var FieldMapperValue = React.forwardRef(function FieldMapperValue(props, ref) {
+    var _a, _b;
+    return (React.createElement("div", { className: "field-mapper-value" + (props.className ? ' ' + props.className : ''), ref: ref }, (React.Children.count(props.children) > 0)
+        ? props.children
+        : (React.createElement("div", { className: "piped-text-input-value-container" },
+            React.createElement(PipedTextInput, { items: (_a = props.pipedTextItems) !== null && _a !== void 0 ? _a : [], onChange: (_b = props.onChange) !== null && _b !== void 0 ? _b : (function () { return undefined; }) })))));
+});
+
+var FieldMapperRow = React.forwardRef(function FieldMapperRow(props, ref) {
+    return (React.createElement("div", { className: "field-mapper-row" + (props.className ? ' ' + props.className : ''), ref: ref },
+        React.createElement("div", { className: "field-mapper-row-content" },
+            React.Children.map(props.children, function (child) {
+                return getWrappedKeyValue(child);
+            }),
+            React.createElement("div", { className: 'remove-row-container' + ((props.showRemove === false) ? ' hide-remove-button' : '') }, (props.showRemove === false)
+                ? (React.createElement("div", { className: "empty-remove-button" }))
+                : (React.createElement(IconButton
+                /*
+                  TODO: Require an i18n string to be passed in for a11y labels
+                */
+                , { "aria-label": "Remove", onClick: function ($e) { return handleRemoveClick(); } },
+                    React.createElement(RemoveItemIcon, null)))))));
+    function handleRemoveClick(evt) {
+        var _a;
+        (_a = props.onFieldRemove) === null || _a === void 0 ? void 0 : _a.call(props, props.selectedField);
+    }
+    function getWrappedKeyValue(child) {
+        var _a, _b, _c, _d;
+        var wrappedEl;
+        var fieldMapperKeyProps, fieldMapperValueProps;
+        var includeAvailableFields, includeSelectedField, includeOnFieldKeyChange;
+        var includePipedTextItems, includeOnFieldValueChange;
+        fieldMapperKeyProps = {};
+        fieldMapperValueProps = {};
+        switch (child.type) {
+            case FieldMapperKey:
+                includeAvailableFields = (!Array.isArray(child.props.availableFields)
+                    && (((_a = props.availableFields) === null || _a === void 0 ? void 0 : _a.length) > 0));
+                includeSelectedField = (((typeof child.props.selectedField) !== 'object')
+                    && (props.selectedField !== undefined));
+                includeOnFieldKeyChange = (((typeof child.props.onChange) !== 'function')
+                    && ((typeof props.onFieldKeyChange) === 'function'));
+                if (includeAvailableFields) {
+                    fieldMapperKeyProps.availableFields = (_c = (_b = props.availableFields) === null || _b === void 0 ? void 0 : _b.slice()) !== null && _c !== void 0 ? _c : [];
+                }
+                if (includeSelectedField) {
+                    fieldMapperKeyProps.selectedField = Object.assign({}, props.selectedField);
+                }
+                if (includeOnFieldKeyChange) {
+                    fieldMapperKeyProps.onChange = function (prevField, fieldItem) {
+                        props.onFieldKeyChange(prevField, fieldItem);
+                    };
+                }
+                if (React.isValidElement(child)
+                    && (includeAvailableFields
+                        || includeSelectedField)) {
+                    child = React.cloneElement(child, fieldMapperKeyProps);
+                }
+                wrappedEl = (React.createElement("div", { className: "field-mapper-key-container" }, child));
+                break;
+            case FieldMapperValue:
+                includePipedTextItems = (!Array.isArray(child.props.pipedTextItems)
+                    && (((_d = props.pipedTextItems) === null || _d === void 0 ? void 0 : _d.length) > 0));
+                includeOnFieldValueChange = (((typeof child.props.onChange) !== 'function')
+                    && ((typeof props.onFieldValueChange) === 'function'));
+                if (includePipedTextItems) {
+                    fieldMapperValueProps.pipedTextItems = props.pipedTextItems;
+                }
+                if (includeOnFieldValueChange) {
+                    fieldMapperValueProps.onChange = function (value) {
+                        props.onFieldValueChange(props.selectedField, value);
+                    };
+                }
+                if (React.isValidElement(child)
+                    && includePipedTextItems) {
+                    child = React.cloneElement(child, fieldMapperValueProps);
+                }
+                wrappedEl = (React.createElement("div", { className: "field-mapper-value-container" }, child));
+                break;
+            default:
+                wrappedEl = child;
+        }
+        return wrappedEl;
+    }
+});
+
+var MISSING_TRANSLATION_WARNING = '{{MISSING_I18N_STRING}}';
+var FieldMapper = React.forwardRef(function FieldMapper(props, ref) {
+    var _a, _b, _c, _d, _e, _f;
+    return (React.createElement("div", { className: 'field-mapper ' + ((_a = props.className) !== null && _a !== void 0 ? _a : ''), ref: ref },
+        hasHeaderRow() && (React.createElement("div", { className: "field-mapper-row-container field-mapper-header-row" },
+            React.createElement(FieldMapperRow, { showRemove: false },
+                React.createElement(FieldMapperKey, null,
+                    React.createElement("div", { className: "field-mapper-header-cell field-mapper-key-header" }, (_b = props.fieldKeysHeaderText) !== null && _b !== void 0 ? _b : '')),
+                React.createElement(FieldMapperValue, null,
+                    React.createElement("div", { className: "field-mapper-header-cell field-mapper-value-header" }, (_c = props.fieldValuesHeaderText) !== null && _c !== void 0 ? _c : ''))))),
+        React.createElement("div", { className: "field-mapper-row-container" }, React.Children.map(props.children, function (child) {
+            return getWrappedFieldRow(child);
+        })),
+        React.createElement("div", { className: "add-field-button-container" }, isAddFieldDisabled()
+            ? (React.createElement(Button, { disabled: true, kind: "secondary", className: "add-field-button" },
+                React.createElement("div", { className: "add-field-icon" },
+                    React.createElement(AddIcon, null)),
+                React.createElement("div", { className: "add-field-button-label" }, (_d = props.addFieldLabel) !== null && _d !== void 0 ? _d : MISSING_TRANSLATION_WARNING)))
+            : (React.createElement(Dropdown, null,
+                React.createElement(DropdownButton, null,
+                    React.createElement(Button, { className: "add-field-button", kind: "secondary" },
+                        React.createElement("div", { className: "add-field-icon" },
+                            React.createElement(AddIcon, null)),
+                        React.createElement("div", { className: "add-field-button-label" }, (_e = props.addFieldLabel) !== null && _e !== void 0 ? _e : MISSING_TRANSLATION_WARNING))),
+                React.createElement(DropdownList, null, (_f = props.availableFields) === null || _f === void 0 ? void 0 : _f.map(function (fieldItem) {
+                    return (React.createElement(DropdownOption, { key: fieldItem.key, value: fieldItem.value, label: fieldItem.label, onSelect: function ($e) {
+                            handleDropdownSelect(fieldItem.value);
+                        } }));
+                })))))));
+    function hasHeaderRow() {
+        return (isString(props.fieldKeysHeaderText)
+            || isString(props.fieldValuesHeaderText));
+    }
+    function getWrappedFieldRow(child) {
+        var _a, _b, _c;
+        var wrappedEl;
+        var fieldMapperRowProps;
+        var includeAvailableFields, includeOnFieldRemove, includePipedTextItems, includeOnFieldKeyChange, includeOnFieldValueChange, includeShowRemove;
+        fieldMapperRowProps = {};
+        switch (child.type) {
+            case FieldMapperRow:
+                wrappedEl = child;
+                break;
+            default:
+                wrappedEl = (React.createElement(FieldMapperRow, null, child));
+        }
+        includeAvailableFields = (!Array.isArray(wrappedEl.props.availableFields)
+            && (((_a = props.availableFields) === null || _a === void 0 ? void 0 : _a.length) > 0));
+        includeOnFieldRemove = (((typeof wrappedEl.props.onFieldRemove) !== 'function')
+            && ((typeof props.onFieldRemove) === 'function'));
+        includePipedTextItems = (!Array.isArray(wrappedEl.props.pipedTextItems)
+            && (((_b = props.pipedTextItems) === null || _b === void 0 ? void 0 : _b.length) > 0));
+        includeOnFieldKeyChange = (((typeof wrappedEl.props.onFieldKeyChange) !== 'function')
+            && (typeof props.onFieldKeyChange === 'function'));
+        includeOnFieldValueChange = (((typeof wrappedEl.props.onFieldValueChange) !== 'function')
+            && (typeof props.onFieldValueChange === 'function'));
+        includeShowRemove = (((typeof wrappedEl.props.showRemove !== 'boolean'))
+            && ((typeof ((_c = child.props.selectedField) === null || _c === void 0 ? void 0 : _c.required)) === 'boolean'));
+        if (includeAvailableFields) {
+            fieldMapperRowProps.availableFields = props.availableFields.slice();
+        }
+        if (includeOnFieldRemove) {
+            fieldMapperRowProps.onFieldRemove = function (fieldItem) {
+                return props.onFieldRemove(fieldItem);
+            };
+        }
+        if (includePipedTextItems) {
+            fieldMapperRowProps.pipedTextItems = props.pipedTextItems;
+        }
+        if (includeOnFieldKeyChange) {
+            fieldMapperRowProps.onFieldKeyChange = function (prevField, fieldItem) {
+                return props.onFieldKeyChange(prevField, fieldItem);
+            };
+        }
+        if (includeOnFieldValueChange) {
+            fieldMapperRowProps.onFieldValueChange = function (fieldItem, inputValue) {
+                return props.onFieldValueChange(fieldItem, inputValue);
+            };
+        }
+        if (includeShowRemove) {
+            fieldMapperRowProps.showRemove = !child.props.selectedField.required;
+        }
+        wrappedEl = React.cloneElement(wrappedEl, fieldMapperRowProps);
+        return wrappedEl;
+    }
+    function handleDropdownSelect(value) {
+        var foundFieldMapperItem;
+        foundFieldMapperItem = props.availableFields.find(function (availableField) {
+            return availableField.value === value;
+        });
+        if (foundFieldMapperItem) {
+            props.onFieldAdd(foundFieldMapperItem);
+        }
+    }
+    function isAddFieldDisabled() {
+        var hasAvailableFields;
+        hasAvailableFields = ((Array.isArray(props.availableFields))
+            && (props.availableFields.length > 0));
+        return !hasAvailableFields;
+    }
+});
+
+export { CaptureEvent, CopyText, DynamicSearchInput, FieldItem, FieldMapper, FieldMapperKey, FieldMapperRow, FieldMapperValue, MultiselectDropdown, PipedTextInput, PipedTextSelect, PluginSdkService, Popover, SelectItem, TaskFields, languageCodeAdapter };