@washingtonpost/subs-de-inputs 1.0.0-react18.0 → 1.0.0-react18.1

package/dist/subs-de-inputs.esm.js

@@ -1,540 +1,360 @@
-import { getCookie, WPGeo, JSON_HEADERS, ENDPOINTS, ResponseStatus } from '@washingtonpost/subs-sdk';
+import { getCookie, WPGeo, JSON_HEADERS, ResponseStatus, ENDPOINTS } from '@washingtonpost/subs-sdk';
 import React, { useState, useEffect } from 'react';
-import { Select, theme, styled } from '@washingtonpost/wpds-ui-kit';
+import { Icon, theme, Select, styled } from '@washingtonpost/wpds-ui-kit';
+import { useWindowSize, useScript, ScriptStatus } from '@washingtonpost/subs-hooks';
+import { ChevronDown } from '@washingtonpost/wpds-assets';
 
-var CollectionBehaviors = {
+const CollectionBehaviors = {
   COLLECT: 'COLLECT',
   DO_NOT_COLLECT: 'DO_NOT_COLLECT'
 };
-var AttributesState = {
+const AttributesState = {
   SUCCESS: '100'
 };
-var IngestResponseState = {
+const IngestType = {
+  EXPLICIT: 'explicit',
+  IMPLICIT: 'implicit'
+};
+const IngestResponseState = {
   SUCCESS: '100',
   SYSTEM_ERROR: '101',
   INVALID_TYPE: '102',
   INVALID_IDENTIFIER: '103',
   INVALID_DATA: '104',
   INVALID_ATTRIBUTE_DEFINITION: '105',
-  INVALID_META_DEFINITION: '106'
+  INVALID_META_DEFINITION: '106',
+  UNAUTHENTICATED: '107',
+  MISMATCHED_IDENTIFIER: '108',
+  DISABLED_ATTRIBUTE_DEFINITION: '109',
+  DO_NOT_COLLECT: '110'
 };
 
-var hasRequiredPrivacyCookies = function hasRequiredPrivacyCookies() {
+const hasRequiredPrivacyCookies = () => {
   var _WPGeo;
   if (typeof window === 'undefined') {
     return false;
   }
-  var wp_usp = getCookie('wp_usp');
-  var countryCode = (_WPGeo = WPGeo()) == null ? void 0 : _WPGeo.country_code;
+  const wp_usp = getCookie('wp_usp');
+  const countryCode = (_WPGeo = WPGeo()) === null || _WPGeo === void 0 ? void 0 : _WPGeo.country_code;
   return !!(wp_usp && countryCode === 'US');
 };
 
-function _regeneratorRuntime() {
-  _regeneratorRuntime = function () {
-    return e;
-  };
-  var t,
-    e = {},
-    r = Object.prototype,
-    n = r.hasOwnProperty,
-    o = Object.defineProperty || function (t, e, r) {
-      t[e] = r.value;
-    },
-    i = "function" == typeof Symbol ? Symbol : {},
-    a = i.iterator || "@@iterator",
-    c = i.asyncIterator || "@@asyncIterator",
-    u = i.toStringTag || "@@toStringTag";
-  function define(t, e, r) {
-    return Object.defineProperty(t, e, {
-      value: r,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
-    }), t[e];
+const base = `${ENDPOINTS.base}/de/v1`;
+const attributesCache = {};
+const getAttributes = async ({
+  fieldName
+}) => {
+  if (attributesCache[fieldName]) {
+    return attributesCache[fieldName];
   }
+  const fieldNames = [fieldName];
   try {
-    define({}, "");
-  } catch (t) {
-    define = function (t, e, r) {
-      return t[e] = r;
-    };
-  }
-  function wrap(t, e, r, n) {
-    var i = e && e.prototype instanceof Generator ? e : Generator,
-      a = Object.create(i.prototype),
-      c = new Context(n || []);
-    return o(a, "_invoke", {
-      value: makeInvokeMethod(t, r, c)
-    }), a;
-  }
-  function tryCatch(t, e, r) {
-    try {
-      return {
-        type: "normal",
-        arg: t.call(e, r)
-      };
-    } catch (t) {
-      return {
-        type: "throw",
-        arg: t
-      };
-    }
-  }
-  e.wrap = wrap;
-  var h = "suspendedStart",
-    l = "suspendedYield",
-    f = "executing",
-    s = "completed",
-    y = {};
-  function Generator() {}
-  function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
-  var p = {};
-  define(p, a, function () {
-    return this;
-  });
-  var d = Object.getPrototypeOf,
-    v = d && d(d(values([])));
-  v && v !== r && n.call(v, a) && (p = v);
-  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
-  function defineIteratorMethods(t) {
-    ["next", "throw", "return"].forEach(function (e) {
-      define(t, e, function (t) {
-        return this._invoke(e, t);
-      });
+    const url = new URL(`${base}/attributes`);
+    url.searchParams.set('attributes', fieldNames.join(','));
+    const data = await fetch(url.toString(), {
+      credentials: 'include',
+      headers: JSON_HEADERS
     });
-  }
-  function AsyncIterator(t, e) {
-    function invoke(r, o, i, a) {
-      var c = tryCatch(t[r], t, o);
-      if ("throw" !== c.type) {
-        var u = c.arg,
-          h = u.value;
-        return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
-          invoke("next", t, i, a);
-        }, function (t) {
-          invoke("throw", t, i, a);
-        }) : e.resolve(h).then(function (t) {
-          u.value = t, i(u);
-        }, function (t) {
-          return invoke("throw", t, i, a);
-        });
-      }
-      a(c.arg);
+    const json = await data.json();
+    if (data.ok && json.status === ResponseStatus.SUCCESS) {
+      const attributes = json.attributes || [];
+      attributesCache[fieldName] = attributes;
+      return attributes;
+    } else {
+      return [];
     }
-    var r;
-    o(this, "_invoke", {
-      value: function (t, n) {
-        function callInvokeWithMethodAndArg() {
-          return new e(function (e, r) {
-            invoke(t, n, e, r);
-          });
-        }
-        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
-      }
-    });
-  }
-  function makeInvokeMethod(e, r, n) {
-    var o = h;
-    return function (i, a) {
-      if (o === f) throw Error("Generator is already running");
-      if (o === s) {
-        if ("throw" === i) throw a;
-        return {
-          value: t,
-          done: !0
-        };
-      }
-      for (n.method = i, n.arg = a;;) {
-        var c = n.delegate;
-        if (c) {
-          var u = maybeInvokeDelegate(c, n);
-          if (u) {
-            if (u === y) continue;
-            return u;
-          }
-        }
-        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
-          if (o === h) throw o = s, n.arg;
-          n.dispatchException(n.arg);
-        } else "return" === n.method && n.abrupt("return", n.arg);
-        o = f;
-        var p = tryCatch(e, r, n);
-        if ("normal" === p.type) {
-          if (o = n.done ? s : l, p.arg === y) continue;
-          return {
-            value: p.arg,
-            done: n.done
-          };
-        }
-        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
-      }
-    };
-  }
-  function maybeInvokeDelegate(e, r) {
-    var n = r.method,
-      o = e.iterator[n];
-    if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
-    var i = tryCatch(o, e.iterator, r.arg);
-    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
-    var a = i.arg;
-    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
-  }
-  function pushTryEntry(t) {
-    var e = {
-      tryLoc: t[0]
-    };
-    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
+  } catch (e) {
+    console.debug(e);
+    return [];
   }
-  function resetTryEntry(t) {
-    var e = t.completion || {};
-    e.type = "normal", delete e.arg, t.completion = e;
+};
+const ingest = async ({
+  submitData: {
+    fieldName,
+    value
+  },
+  type = IngestType.IMPLICIT,
+  source
+}) => {
+  const url = `${base}/ingest`;
+  const wapo_login_id = getCookie('wapo_login_id');
+  if (!hasRequiredPrivacyCookies()) {
+    throw new Error('does not satisfy cookie check');
   }
-  function Context(t) {
-    this.tryEntries = [{
-      tryLoc: "root"
-    }], t.forEach(pushTryEntry, this), this.reset(!0);
+  let attributeInfo = attributesCache[fieldName];
+  if (!attributeInfo) {
+    attributeInfo = await getAttributes({
+      fieldName
+    });
   }
-  function values(e) {
-    if (e || "" === e) {
-      var r = e[a];
-      if (r) return r.call(e);
-      if ("function" == typeof e.next) return e;
-      if (!isNaN(e.length)) {
-        var o = -1,
-          i = function next() {
-            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
-            return next.value = t, next.done = !0, next;
-          };
-        return i.next = i;
-      }
-    }
-    throw new TypeError(typeof e + " is not iterable");
+  if (attributeInfo[0] && attributeInfo[0].name === fieldName && attributeInfo[0].collection_behavior === CollectionBehaviors.DO_NOT_COLLECT) {
+    throw new Error('do not collect');
   }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
-    value: GeneratorFunctionPrototype,
-    configurable: !0
-  }), o(GeneratorFunctionPrototype, "constructor", {
-    value: GeneratorFunction,
-    configurable: !0
-  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
-    var e = "function" == typeof t && t.constructor;
-    return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
-  }, e.mark = function (t) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
-  }, e.awrap = function (t) {
-    return {
-      __await: t
-    };
-  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
-    return this;
-  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
-    void 0 === i && (i = Promise);
-    var a = new AsyncIterator(wrap(t, r, n, o), i);
-    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
-      return t.done ? t.value : a.next();
-    });
-  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
-    return this;
-  }), define(g, "toString", function () {
-    return "[object Generator]";
-  }), e.keys = function (t) {
-    var e = Object(t),
-      r = [];
-    for (var n in e) r.push(n);
-    return r.reverse(), function next() {
-      for (; r.length;) {
-        var t = r.pop();
-        if (t in e) return next.value = t, next.done = !1, next;
-      }
-      return next.done = !0, next;
-    };
-  }, e.values = values, Context.prototype = {
-    constructor: Context,
-    reset: function (e) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
-    },
-    stop: function () {
-      this.done = !0;
-      var t = this.tryEntries[0].completion;
-      if ("throw" === t.type) throw t.arg;
-      return this.rval;
-    },
-    dispatchException: function (e) {
-      if (this.done) throw e;
-      var r = this;
-      function handle(n, o) {
-        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
-      }
-      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
-        var i = this.tryEntries[o],
-          a = i.completion;
-        if ("root" === i.tryLoc) return handle("end");
-        if (i.tryLoc <= this.prev) {
-          var c = n.call(i, "catchLoc"),
-            u = n.call(i, "finallyLoc");
-          if (c && u) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          } else if (c) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
-          } else {
-            if (!u) throw Error("try statement without catch or finally");
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          }
-        }
-      }
-    },
-    abrupt: function (t, e) {
-      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
-        var o = this.tryEntries[r];
-        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
-          var i = o;
-          break;
-        }
-      }
-      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
-      var a = i ? i.completion : {};
-      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
-    },
-    complete: function (t, e) {
-      if ("throw" === t.type) throw t.arg;
-      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
-    },
-    finish: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
-      }
-    },
-    catch: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.tryLoc === t) {
-          var n = r.completion;
-          if ("throw" === n.type) {
-            var o = n.arg;
-            resetTryEntry(r);
-          }
-          return o;
-        }
-      }
-      throw Error("illegal catch attempt");
+  const jucid = localStorage.getItem('uuid');
+  const ga = getCookie('_ga');
+  const payload = {
+    jucid,
+    ga,
+    type,
+    wapo_login_id,
+    // TODO: move this to BE to read from cookie headers
+    data: {
+      [fieldName]: [value]
     },
-    delegateYield: function (e, r, n) {
-      return this.delegate = {
-        iterator: values(e),
-        resultName: r,
-        nextLoc: n
-      }, "next" === this.method && (this.arg = t), y;
+    metadata: {
+      source
     }
-  }, e;
-}
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  };
   try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
+    const response = await fetch(url, {
+      method: 'POST',
+      credentials: 'include',
+      headers: JSON_HEADERS,
+      body: JSON.stringify(payload)
+    });
+    const json = await response.json();
+    return json;
+  } catch (e) {
+    console.debug(e);
+    return null;
   }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
+};
+
+const StyledMobileSelect = /*#__PURE__*/styled('select', {
+  padding: '12px 16px 12px 6px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%',
+  backgroundColor: '$secondary',
+  color: '$primary',
+  fontFamily: '$meta',
+  fontSize: '$100',
+  fontWeight: '$light',
+  lineHeight: '$125',
+  paddingBlockRight: '$125',
+  textOverflow: 'ellipsis',
+  position: 'relative',
+  borderColor: 'transparent',
+  borderRightWidth: '10px',
+  borderRightColor: 'transparent',
+  appearance: 'none',
+  '-webkit-appearance': 'none',
+  '&:disabled': {
+    backgroundColor: theme.colors.disabled,
+    borderColor: theme.colors.disabled,
+    color: theme.colors.onDisabled,
+    cursor: 'not-allowed'
   }
-}
-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 _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+});
+const StyledSelectWrapper = /*#__PURE__*/styled('div', {
+  width: '100%',
+  maxWidth: '380px',
+  borderRadius: '$012',
+  borderColor: '$subtle',
+  borderStyle: 'solid',
+  borderWidth: '1px',
+  backgroundColor: '$secondary',
+  position: 'relative'
+});
+const StyledMobileOption = /*#__PURE__*/styled('option', {
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  color: 'inherit'
+});
+/**
+ * Dropdown component.  Uses wpds-ui-kit on desktop and native select on mobile.
+ * @param {IDropdownProps} props The props.
+ * @returns {React.ReactElement} The dropdown.
+ */
+const Dropdown = ({
+  id,
+  label,
+  values,
+  required = false,
+  defaultValue,
+  onChange = () => {},
+  disabled = false
+}) => {
+  const [answer, setAnswer] = useState();
+  const {
+    isMobileSize
+  } = useWindowSize();
+  useEffect(() => {
+    if (answer) onChange(answer);
+  }, [answer]);
+  const disabledProp = disabled ? {
+    disabled: true
+  } : {};
+  // helps maintain state between WPDS and native dropdowns
+  const defaultValueProp = answer ? {
+    defaultValue: answer
+  } : defaultValue ? {
+    defaultValue
+  } : {};
+  const defaultValuePropMobile = value => {
+    if (answer) {
+      return value === answer ? {
+        selected: true
+      } : {};
     }
-    return target;
+    return value === defaultValue ? {
+      selected: true
+    } : {};
   };
-  return _extends.apply(this, arguments);
-}
-
-var base = ENDPOINTS.base + "/de/v1";
-var attributesCache = {};
-var getAttributes = /*#__PURE__*/function () {
-  var _ref2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
-    var fieldName, fieldNames, url, data, json, attributes;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          fieldName = _ref.fieldName;
-          if (!attributesCache[fieldName]) {
-            _context.next = 3;
-            break;
-          }
-          return _context.abrupt("return", attributesCache[fieldName]);
-        case 3:
-          fieldNames = [fieldName];
-          _context.prev = 4;
-          url = new URL(base + "/attributes");
-          url.searchParams.set('attributes', fieldNames.join(','));
-          _context.next = 9;
-          return fetch(url.toString(), {
-            credentials: 'include',
-            headers: JSON_HEADERS
-          });
-        case 9:
-          data = _context.sent;
-          _context.next = 12;
-          return data.json();
-        case 12:
-          json = _context.sent;
-          if (!(data.ok && json.status === ResponseStatus.SUCCESS)) {
-            _context.next = 19;
-            break;
-          }
-          attributes = json.attributes || [];
-          attributesCache[fieldName] = attributes;
-          return _context.abrupt("return", attributes);
-        case 19:
-          return _context.abrupt("return", []);
-        case 20:
-          _context.next = 26;
-          break;
-        case 22:
-          _context.prev = 22;
-          _context.t0 = _context["catch"](4);
-          console.debug(_context.t0);
-          return _context.abrupt("return", []);
-        case 26:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[4, 22]]);
-  }));
-  return function getAttributes(_x) {
-    return _ref2.apply(this, arguments);
-  };
-}();
+  return isMobileSize ? React.createElement(StyledSelectWrapper, null, React.createElement(StyledMobileSelect, {
+    id: "",
+    required: required,
+    onChange: e => setAnswer(e.target.value),
+    ...disabledProp
+  }, React.createElement("label", null, label), React.createElement(StyledMobileOption, {
+    value: "",
+    disabled: true,
+    selected: true,
+    style: {
+      color: '#666666'
+    }
+  }, label), values.map(value => React.createElement(StyledMobileOption, {
+    value: value,
+    key: value,
+    ...defaultValuePropMobile(value)
+  }, value))), React.createElement(Icon, {
+    label: "",
+    size: "100",
+    fill: theme.colors.gray80,
+    style: {
+      pointerEvents: 'none',
+      position: 'absolute',
+      right: '10px',
+      top: '50%',
+      transform: 'translateY(-50%)'
+    }
+  }, React.createElement(ChevronDown, {
+    style: {
+      position: 'absolute',
+      right: '10px'
+    }
+  }))) : React.createElement(Select.Root, {
+    onValueChange: e => setAnswer(e),
+    required: required,
+    ...defaultValueProp,
+    ...disabledProp
+  }, React.createElement(Select.Trigger, {
+    "data-test-id": `${id}-select-trigger`
+  }, React.createElement(Select.Label, null, label), React.createElement(Select.Value, null)), React.createElement(Select.Content, {
+    css: {
+      zIndex: theme.zIndices.page
+    },
+    "data-test-id": `${id}-select-content`
+  }, values.map(value => React.createElement(Select.Item, {
+    value: value,
+    key: value
+  }, value))));
+};
 
-var DESelect = function DESelect(_ref) {
-  var source = _ref.source,
-    fieldName = _ref.fieldName,
-    label = _ref.label,
-    dataDictionaryConfig = _ref.dataDictionaryConfig,
-    defaultValue = _ref.defaultValue,
-    disabled = _ref.disabled,
-    submit = _ref.submit,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-    _ref$onFinished = _ref.onFinished,
-    onFinished = _ref$onFinished === void 0 ? function () {} : _ref$onFinished,
-    _ref$valuesFilter = _ref.valuesFilter,
-    valuesFilter = _ref$valuesFilter === void 0 ? function () {
-      return true;
-    } : _ref$valuesFilter,
-    children = _ref.children;
-  var _useState = useState(dataDictionaryConfig),
-    config = _useState[0],
-    setConfig = _useState[1];
-  var _useState2 = useState(''),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  useEffect(function () {
-    if (children) {
-      if (process.env.NODE_ENV !== "production") {
-        console.debug('childen props', children);
+const scriptSrc = `${ENDPOINTS.staticAssets === 'https://subscribe.washingtonpost.com/static' ? 'https://www.washingtonpost.com/subscribe/static/' : ENDPOINTS.staticAssets}/de-utils/twpdeu.min.js`;
+const DESelect = ({
+  source,
+  fieldName,
+  label,
+  dataDictionaryConfig,
+  defaultValue,
+  disabled,
+  submit,
+  onChange = () => {},
+  onFinished = () => {},
+  valuesFilter = () => true,
+  children
+}) => {
+  const [config, setConfig] = useState(dataDictionaryConfig);
+  const [selected, setSelected] = useState('');
+  const scriptStatus = useScript(scriptSrc);
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        var _window;
+        const config = await ((_window = window) === null || _window === void 0 || (_window = _window.__twpdeu) === null || _window === void 0 ? void 0 : _window.getFieldConfigs({
+          fieldName
+        }));
+        if (config) {
+          setConfig(config[0]);
+        } else {
+          console.error('unable to get config', fieldName);
+        }
+      } catch (e) {
+        console.warn('unable to get config', fieldName, e);
       }
-      return;
-    }
-    if (!config) {
-      _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var config;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return getAttributes({
-                fieldName: fieldName
-              });
-            case 2:
-              config = _context.sent;
-              if (process.env.NODE_ENV !== "production") {
-                console.debug('config from API', config);
-              }
-              setConfig(config[0]);
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }))();
+    };
+    if (scriptStatus === ScriptStatus.READY && !(children || config)) {
+      fetchConfig();
     }
-  }, []);
-  useEffect(function () {
-    if (submit && selected) {
-      if (process.env.NODE_ENV !== "production") {
-        console.error('push not implemented', selected, source);
+  }, [scriptStatus]);
+  useEffect(() => {
+    const submitSelected = async () => {
+      try {
+        var _window2;
+        // TODO: Log to GA?
+        const result = await ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.__twpdeu) === null || _window2 === void 0 ? void 0 : _window2.push({
+          submitData: {
+            fieldName,
+            value: selected
+          },
+          type: config !== null && config !== void 0 && config.explicit ? IngestType.EXPLICIT : IngestType.IMPLICIT,
+          source
+        }));
+        const isError = result ? result.status !== ResponseStatus.SUCCESS : true;
+        onFinished({
+          isFinished: true,
+          isError
+        });
+      } catch (e) {
+        onFinished({
+          isFinished: false,
+          isError: true
+        });
       }
-      onFinished({
-        isFinished: true,
-        isError: false
-      });
+    };
+    if (scriptStatus === ScriptStatus.READY && submit && selected) {
+      submitSelected();
     }
-  }, [submit, selected]);
-  if (!(children || config)) {
-    return React.createElement("span", null, "loading");
-  }
-  var defaultValueProp = defaultValue ? {
-    defaultValue: defaultValue
+  }, [scriptStatus, submit]);
+  const defaultValueProp = defaultValue && config ? {
+    defaultValue
   } : {};
-  var disabledProp = disabled ? {
+  const isLoading = !(children || config);
+  const disabledProp = disabled || isLoading ? {
     disabled: true
   } : {};
   // sort and filter out archived values
-  var values = config ? config.values.sort(function (a, b) {
-    return a.order - b.order;
-  }).filter(function (value) {
-    return value.archived !== true;
-  }).filter(valuesFilter) : [];
-  return React.createElement(SelectWrapper, null, React.createElement(Select.Root, _extends({
-    onValueChange: function onValueChange(e) {
+  const values = config ? config.values.sort((a, b) => a.order - b.order).filter(value => value.archived !== true).filter(valuesFilter) : [];
+  return React.createElement(SelectWrapper, null, children && React.createElement(Select.Root, {
+    onValueChange: e => {
+      setSelected(e);
       onChange({
         value: e
       });
+    },
+    ...defaultValueProp,
+    ...disabledProp
+  }, children), !children && !config && React.createElement(Dropdown, {
+    id: 'loading',
+    label: 'Loading...',
+    values: [],
+    disabled: true
+  }), !children && config && React.createElement(Dropdown, {
+    id: config.name,
+    label: label || config.name,
+    onChange: e => {
       setSelected(e);
-    }
-  }, defaultValueProp, disabledProp), children || null, !children && config && React.createElement(React.Fragment, null, React.createElement(Select.Trigger, {
-    "data-test-id": config.name + "-select-trigger"
-  }, React.createElement(Select.Label, null, label || config.name), React.createElement(Select.Value, null)), React.createElement(Select.Content, {
-    css: {
-      zIndex: theme.zIndices.page
+      onChange({
+        value: e
+      });
     },
-    "data-test-id": config.name + "-select-content"
-  }, values.map(function (value) {
-    return React.createElement(Select.Item, {
-      value: value.name,
-      key: value.name
-    }, value.name);
-  })))));
+    values: values.map(value => value.name),
+    defaultValue: defaultValue,
+    disabled: disabled
+  }));
 };
-var SelectWrapper = /*#__PURE__*/styled('div', {
+const SelectWrapper = /*#__PURE__*/styled('div', {
   boxSizing: 'border-box',
   display: 'flex',
   marginBottom: '$100',
@@ -547,5 +367,5 @@ var SelectWrapper = /*#__PURE__*/styled('div', {
   }
 });
 
-export { AttributesState, CollectionBehaviors, DESelect, IngestResponseState, getAttributes, hasRequiredPrivacyCookies };
+export { AttributesState, CollectionBehaviors, DESelect, IngestResponseState, IngestType, getAttributes, hasRequiredPrivacyCookies, ingest };
 //# sourceMappingURL=subs-de-inputs.esm.js.map