@schematichq/schematic-react 0.2.0-rc.2 → 0.2.0-rc.3

package/dist/schematic-react.cjs.js

@@ -67,6 +67,728 @@ var require_shallowequal = __commonJS({
   }
 });
 
+// node_modules/lodash.merge/index.js
+var require_lodash = __commonJS({
+  "node_modules/lodash.merge/index.js"(exports, module2) {
+    var LARGE_ARRAY_SIZE = 200;
+    var HASH_UNDEFINED = "__lodash_hash_undefined__";
+    var HOT_COUNT = 800;
+    var HOT_SPAN = 16;
+    var MAX_SAFE_INTEGER = 9007199254740991;
+    var argsTag = "[object Arguments]";
+    var arrayTag = "[object Array]";
+    var asyncTag = "[object AsyncFunction]";
+    var boolTag = "[object Boolean]";
+    var dateTag = "[object Date]";
+    var errorTag = "[object Error]";
+    var funcTag = "[object Function]";
+    var genTag = "[object GeneratorFunction]";
+    var mapTag = "[object Map]";
+    var numberTag = "[object Number]";
+    var nullTag = "[object Null]";
+    var objectTag = "[object Object]";
+    var proxyTag = "[object Proxy]";
+    var regexpTag = "[object RegExp]";
+    var setTag = "[object Set]";
+    var stringTag = "[object String]";
+    var undefinedTag = "[object Undefined]";
+    var weakMapTag = "[object WeakMap]";
+    var arrayBufferTag = "[object ArrayBuffer]";
+    var dataViewTag = "[object DataView]";
+    var float32Tag = "[object Float32Array]";
+    var float64Tag = "[object Float64Array]";
+    var int8Tag = "[object Int8Array]";
+    var int16Tag = "[object Int16Array]";
+    var int32Tag = "[object Int32Array]";
+    var uint8Tag = "[object Uint8Array]";
+    var uint8ClampedTag = "[object Uint8ClampedArray]";
+    var uint16Tag = "[object Uint16Array]";
+    var uint32Tag = "[object Uint32Array]";
+    var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+    var reIsHostCtor = /^\[object .+?Constructor\]$/;
+    var reIsUint = /^(?:0|[1-9]\d*)$/;
+    var typedArrayTags = {};
+    typedArrayTags[float32Tag] = typedArrayTags[float64Tag] = typedArrayTags[int8Tag] = typedArrayTags[int16Tag] = typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] = typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] = typedArrayTags[uint32Tag] = true;
+    typedArrayTags[argsTag] = typedArrayTags[arrayTag] = typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] = typedArrayTags[dataViewTag] = typedArrayTags[dateTag] = typedArrayTags[errorTag] = typedArrayTags[funcTag] = typedArrayTags[mapTag] = typedArrayTags[numberTag] = typedArrayTags[objectTag] = typedArrayTags[regexpTag] = typedArrayTags[setTag] = typedArrayTags[stringTag] = typedArrayTags[weakMapTag] = false;
+    var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
+    var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+    var root = freeGlobal || freeSelf || Function("return this")();
+    var freeExports = typeof exports == "object" && exports && !exports.nodeType && exports;
+    var freeModule = freeExports && typeof module2 == "object" && module2 && !module2.nodeType && module2;
+    var moduleExports = freeModule && freeModule.exports === freeExports;
+    var freeProcess = moduleExports && freeGlobal.process;
+    var nodeUtil = function() {
+      try {
+        var types = freeModule && freeModule.require && freeModule.require("util").types;
+        if (types) {
+          return types;
+        }
+        return freeProcess && freeProcess.binding && freeProcess.binding("util");
+      } catch (e) {
+      }
+    }();
+    var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
+    function apply(func, thisArg, args) {
+      switch (args.length) {
+        case 0:
+          return func.call(thisArg);
+        case 1:
+          return func.call(thisArg, args[0]);
+        case 2:
+          return func.call(thisArg, args[0], args[1]);
+        case 3:
+          return func.call(thisArg, args[0], args[1], args[2]);
+      }
+      return func.apply(thisArg, args);
+    }
+    function baseTimes(n, iteratee) {
+      var index = -1, result = Array(n);
+      while (++index < n) {
+        result[index] = iteratee(index);
+      }
+      return result;
+    }
+    function baseUnary(func) {
+      return function(value) {
+        return func(value);
+      };
+    }
+    function getValue(object, key) {
+      return object == null ? void 0 : object[key];
+    }
+    function overArg(func, transform) {
+      return function(arg) {
+        return func(transform(arg));
+      };
+    }
+    var arrayProto = Array.prototype;
+    var funcProto = Function.prototype;
+    var objectProto = Object.prototype;
+    var coreJsData = root["__core-js_shared__"];
+    var funcToString = funcProto.toString;
+    var hasOwnProperty = objectProto.hasOwnProperty;
+    var maskSrcKey = function() {
+      var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || "");
+      return uid ? "Symbol(src)_1." + uid : "";
+    }();
+    var nativeObjectToString = objectProto.toString;
+    var objectCtorString = funcToString.call(Object);
+    var reIsNative = RegExp(
+      "^" + funcToString.call(hasOwnProperty).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
+    );
+    var Buffer2 = moduleExports ? root.Buffer : void 0;
+    var Symbol2 = root.Symbol;
+    var Uint8Array2 = root.Uint8Array;
+    var allocUnsafe = Buffer2 ? Buffer2.allocUnsafe : void 0;
+    var getPrototype = overArg(Object.getPrototypeOf, Object);
+    var objectCreate = Object.create;
+    var propertyIsEnumerable = objectProto.propertyIsEnumerable;
+    var splice = arrayProto.splice;
+    var symToStringTag = Symbol2 ? Symbol2.toStringTag : void 0;
+    var defineProperty = function() {
+      try {
+        var func = getNative(Object, "defineProperty");
+        func({}, "", {});
+        return func;
+      } catch (e) {
+      }
+    }();
+    var nativeIsBuffer = Buffer2 ? Buffer2.isBuffer : void 0;
+    var nativeMax = Math.max;
+    var nativeNow = Date.now;
+    var Map2 = getNative(root, "Map");
+    var nativeCreate = getNative(Object, "create");
+    var baseCreate = /* @__PURE__ */ function() {
+      function object() {
+      }
+      return function(proto) {
+        if (!isObject(proto)) {
+          return {};
+        }
+        if (objectCreate) {
+          return objectCreate(proto);
+        }
+        object.prototype = proto;
+        var result = new object();
+        object.prototype = void 0;
+        return result;
+      };
+    }();
+    function Hash(entries) {
+      var index = -1, length2 = entries == null ? 0 : entries.length;
+      this.clear();
+      while (++index < length2) {
+        var entry = entries[index];
+        this.set(entry[0], entry[1]);
+      }
+    }
+    function hashClear() {
+      this.__data__ = nativeCreate ? nativeCreate(null) : {};
+      this.size = 0;
+    }
+    function hashDelete(key) {
+      var result = this.has(key) && delete this.__data__[key];
+      this.size -= result ? 1 : 0;
+      return result;
+    }
+    function hashGet(key) {
+      var data = this.__data__;
+      if (nativeCreate) {
+        var result = data[key];
+        return result === HASH_UNDEFINED ? void 0 : result;
+      }
+      return hasOwnProperty.call(data, key) ? data[key] : void 0;
+    }
+    function hashHas(key) {
+      var data = this.__data__;
+      return nativeCreate ? data[key] !== void 0 : hasOwnProperty.call(data, key);
+    }
+    function hashSet(key, value) {
+      var data = this.__data__;
+      this.size += this.has(key) ? 0 : 1;
+      data[key] = nativeCreate && value === void 0 ? HASH_UNDEFINED : value;
+      return this;
+    }
+    Hash.prototype.clear = hashClear;
+    Hash.prototype["delete"] = hashDelete;
+    Hash.prototype.get = hashGet;
+    Hash.prototype.has = hashHas;
+    Hash.prototype.set = hashSet;
+    function ListCache(entries) {
+      var index = -1, length2 = entries == null ? 0 : entries.length;
+      this.clear();
+      while (++index < length2) {
+        var entry = entries[index];
+        this.set(entry[0], entry[1]);
+      }
+    }
+    function listCacheClear() {
+      this.__data__ = [];
+      this.size = 0;
+    }
+    function listCacheDelete(key) {
+      var data = this.__data__, index = assocIndexOf(data, key);
+      if (index < 0) {
+        return false;
+      }
+      var lastIndex = data.length - 1;
+      if (index == lastIndex) {
+        data.pop();
+      } else {
+        splice.call(data, index, 1);
+      }
+      --this.size;
+      return true;
+    }
+    function listCacheGet(key) {
+      var data = this.__data__, index = assocIndexOf(data, key);
+      return index < 0 ? void 0 : data[index][1];
+    }
+    function listCacheHas(key) {
+      return assocIndexOf(this.__data__, key) > -1;
+    }
+    function listCacheSet(key, value) {
+      var data = this.__data__, index = assocIndexOf(data, key);
+      if (index < 0) {
+        ++this.size;
+        data.push([key, value]);
+      } else {
+        data[index][1] = value;
+      }
+      return this;
+    }
+    ListCache.prototype.clear = listCacheClear;
+    ListCache.prototype["delete"] = listCacheDelete;
+    ListCache.prototype.get = listCacheGet;
+    ListCache.prototype.has = listCacheHas;
+    ListCache.prototype.set = listCacheSet;
+    function MapCache(entries) {
+      var index = -1, length2 = entries == null ? 0 : entries.length;
+      this.clear();
+      while (++index < length2) {
+        var entry = entries[index];
+        this.set(entry[0], entry[1]);
+      }
+    }
+    function mapCacheClear() {
+      this.size = 0;
+      this.__data__ = {
+        "hash": new Hash(),
+        "map": new (Map2 || ListCache)(),
+        "string": new Hash()
+      };
+    }
+    function mapCacheDelete(key) {
+      var result = getMapData(this, key)["delete"](key);
+      this.size -= result ? 1 : 0;
+      return result;
+    }
+    function mapCacheGet(key) {
+      return getMapData(this, key).get(key);
+    }
+    function mapCacheHas(key) {
+      return getMapData(this, key).has(key);
+    }
+    function mapCacheSet(key, value) {
+      var data = getMapData(this, key), size = data.size;
+      data.set(key, value);
+      this.size += data.size == size ? 0 : 1;
+      return this;
+    }
+    MapCache.prototype.clear = mapCacheClear;
+    MapCache.prototype["delete"] = mapCacheDelete;
+    MapCache.prototype.get = mapCacheGet;
+    MapCache.prototype.has = mapCacheHas;
+    MapCache.prototype.set = mapCacheSet;
+    function Stack(entries) {
+      var data = this.__data__ = new ListCache(entries);
+      this.size = data.size;
+    }
+    function stackClear() {
+      this.__data__ = new ListCache();
+      this.size = 0;
+    }
+    function stackDelete(key) {
+      var data = this.__data__, result = data["delete"](key);
+      this.size = data.size;
+      return result;
+    }
+    function stackGet(key) {
+      return this.__data__.get(key);
+    }
+    function stackHas(key) {
+      return this.__data__.has(key);
+    }
+    function stackSet(key, value) {
+      var data = this.__data__;
+      if (data instanceof ListCache) {
+        var pairs = data.__data__;
+        if (!Map2 || pairs.length < LARGE_ARRAY_SIZE - 1) {
+          pairs.push([key, value]);
+          this.size = ++data.size;
+          return this;
+        }
+        data = this.__data__ = new MapCache(pairs);
+      }
+      data.set(key, value);
+      this.size = data.size;
+      return this;
+    }
+    Stack.prototype.clear = stackClear;
+    Stack.prototype["delete"] = stackDelete;
+    Stack.prototype.get = stackGet;
+    Stack.prototype.has = stackHas;
+    Stack.prototype.set = stackSet;
+    function arrayLikeKeys(value, inherited) {
+      var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length2 = result.length;
+      for (var key in value) {
+        if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes && // Safari 9 has enumerable `arguments.length` in strict mode.
+        (key == "length" || // Node.js 0.10 has enumerable non-index properties on buffers.
+        isBuff && (key == "offset" || key == "parent") || // PhantomJS 2 has enumerable non-index properties on typed arrays.
+        isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || // Skip index properties.
+        isIndex(key, length2)))) {
+          result.push(key);
+        }
+      }
+      return result;
+    }
+    function assignMergeValue(object, key, value) {
+      if (value !== void 0 && !eq(object[key], value) || value === void 0 && !(key in object)) {
+        baseAssignValue(object, key, value);
+      }
+    }
+    function assignValue(object, key, value) {
+      var objValue = object[key];
+      if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) || value === void 0 && !(key in object)) {
+        baseAssignValue(object, key, value);
+      }
+    }
+    function assocIndexOf(array, key) {
+      var length2 = array.length;
+      while (length2--) {
+        if (eq(array[length2][0], key)) {
+          return length2;
+        }
+      }
+      return -1;
+    }
+    function baseAssignValue(object, key, value) {
+      if (key == "__proto__" && defineProperty) {
+        defineProperty(object, key, {
+          "configurable": true,
+          "enumerable": true,
+          "value": value,
+          "writable": true
+        });
+      } else {
+        object[key] = value;
+      }
+    }
+    var baseFor = createBaseFor();
+    function baseGetTag(value) {
+      if (value == null) {
+        return value === void 0 ? undefinedTag : nullTag;
+      }
+      return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+    }
+    function baseIsArguments(value) {
+      return isObjectLike(value) && baseGetTag(value) == argsTag;
+    }
+    function baseIsNative(value) {
+      if (!isObject(value) || isMasked(value)) {
+        return false;
+      }
+      var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
+      return pattern.test(toSource(value));
+    }
+    function baseIsTypedArray(value) {
+      return isObjectLike(value) && isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
+    }
+    function baseKeysIn(object) {
+      if (!isObject(object)) {
+        return nativeKeysIn(object);
+      }
+      var isProto = isPrototype(object), result = [];
+      for (var key in object) {
+        if (!(key == "constructor" && (isProto || !hasOwnProperty.call(object, key)))) {
+          result.push(key);
+        }
+      }
+      return result;
+    }
+    function baseMerge(object, source, srcIndex, customizer, stack) {
+      if (object === source) {
+        return;
+      }
+      baseFor(source, function(srcValue, key) {
+        stack || (stack = new Stack());
+        if (isObject(srcValue)) {
+          baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
+        } else {
+          var newValue = customizer ? customizer(safeGet(object, key), srcValue, key + "", object, source, stack) : void 0;
+          if (newValue === void 0) {
+            newValue = srcValue;
+          }
+          assignMergeValue(object, key, newValue);
+        }
+      }, keysIn);
+    }
+    function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) {
+      var objValue = safeGet(object, key), srcValue = safeGet(source, key), stacked = stack.get(srcValue);
+      if (stacked) {
+        assignMergeValue(object, key, stacked);
+        return;
+      }
+      var newValue = customizer ? customizer(objValue, srcValue, key + "", object, source, stack) : void 0;
+      var isCommon = newValue === void 0;
+      if (isCommon) {
+        var isArr = isArray(srcValue), isBuff = !isArr && isBuffer(srcValue), isTyped = !isArr && !isBuff && isTypedArray(srcValue);
+        newValue = srcValue;
+        if (isArr || isBuff || isTyped) {
+          if (isArray(objValue)) {
+            newValue = objValue;
+          } else if (isArrayLikeObject(objValue)) {
+            newValue = copyArray(objValue);
+          } else if (isBuff) {
+            isCommon = false;
+            newValue = cloneBuffer(srcValue, true);
+          } else if (isTyped) {
+            isCommon = false;
+            newValue = cloneTypedArray(srcValue, true);
+          } else {
+            newValue = [];
+          }
+        } else if (isPlainObject(srcValue) || isArguments(srcValue)) {
+          newValue = objValue;
+          if (isArguments(objValue)) {
+            newValue = toPlainObject(objValue);
+          } else if (!isObject(objValue) || isFunction(objValue)) {
+            newValue = initCloneObject(srcValue);
+          }
+        } else {
+          isCommon = false;
+        }
+      }
+      if (isCommon) {
+        stack.set(srcValue, newValue);
+        mergeFunc(newValue, srcValue, srcIndex, customizer, stack);
+        stack["delete"](srcValue);
+      }
+      assignMergeValue(object, key, newValue);
+    }
+    function baseRest(func, start) {
+      return setToString(overRest(func, start, identity), func + "");
+    }
+    var baseSetToString = !defineProperty ? identity : function(func, string) {
+      return defineProperty(func, "toString", {
+        "configurable": true,
+        "enumerable": false,
+        "value": constant(string),
+        "writable": true
+      });
+    };
+    function cloneBuffer(buffer, isDeep) {
+      if (isDeep) {
+        return buffer.slice();
+      }
+      var length2 = buffer.length, result = allocUnsafe ? allocUnsafe(length2) : new buffer.constructor(length2);
+      buffer.copy(result);
+      return result;
+    }
+    function cloneArrayBuffer(arrayBuffer) {
+      var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
+      new Uint8Array2(result).set(new Uint8Array2(arrayBuffer));
+      return result;
+    }
+    function cloneTypedArray(typedArray, isDeep) {
+      var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;
+      return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
+    }
+    function copyArray(source, array) {
+      var index = -1, length2 = source.length;
+      array || (array = Array(length2));
+      while (++index < length2) {
+        array[index] = source[index];
+      }
+      return array;
+    }
+    function copyObject(source, props, object, customizer) {
+      var isNew = !object;
+      object || (object = {});
+      var index = -1, length2 = props.length;
+      while (++index < length2) {
+        var key = props[index];
+        var newValue = customizer ? customizer(object[key], source[key], key, object, source) : void 0;
+        if (newValue === void 0) {
+          newValue = source[key];
+        }
+        if (isNew) {
+          baseAssignValue(object, key, newValue);
+        } else {
+          assignValue(object, key, newValue);
+        }
+      }
+      return object;
+    }
+    function createAssigner(assigner) {
+      return baseRest(function(object, sources) {
+        var index = -1, length2 = sources.length, customizer = length2 > 1 ? sources[length2 - 1] : void 0, guard = length2 > 2 ? sources[2] : void 0;
+        customizer = assigner.length > 3 && typeof customizer == "function" ? (length2--, customizer) : void 0;
+        if (guard && isIterateeCall(sources[0], sources[1], guard)) {
+          customizer = length2 < 3 ? void 0 : customizer;
+          length2 = 1;
+        }
+        object = Object(object);
+        while (++index < length2) {
+          var source = sources[index];
+          if (source) {
+            assigner(object, source, index, customizer);
+          }
+        }
+        return object;
+      });
+    }
+    function createBaseFor(fromRight) {
+      return function(object, iteratee, keysFunc) {
+        var index = -1, iterable = Object(object), props = keysFunc(object), length2 = props.length;
+        while (length2--) {
+          var key = props[fromRight ? length2 : ++index];
+          if (iteratee(iterable[key], key, iterable) === false) {
+            break;
+          }
+        }
+        return object;
+      };
+    }
+    function getMapData(map, key) {
+      var data = map.__data__;
+      return isKeyable(key) ? data[typeof key == "string" ? "string" : "hash"] : data.map;
+    }
+    function getNative(object, key) {
+      var value = getValue(object, key);
+      return baseIsNative(value) ? value : void 0;
+    }
+    function getRawTag(value) {
+      var isOwn = hasOwnProperty.call(value, symToStringTag), tag = value[symToStringTag];
+      try {
+        value[symToStringTag] = void 0;
+        var unmasked = true;
+      } catch (e) {
+      }
+      var result = nativeObjectToString.call(value);
+      if (unmasked) {
+        if (isOwn) {
+          value[symToStringTag] = tag;
+        } else {
+          delete value[symToStringTag];
+        }
+      }
+      return result;
+    }
+    function initCloneObject(object) {
+      return typeof object.constructor == "function" && !isPrototype(object) ? baseCreate(getPrototype(object)) : {};
+    }
+    function isIndex(value, length2) {
+      var type = typeof value;
+      length2 = length2 == null ? MAX_SAFE_INTEGER : length2;
+      return !!length2 && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length2);
+    }
+    function isIterateeCall(value, index, object) {
+      if (!isObject(object)) {
+        return false;
+      }
+      var type = typeof index;
+      if (type == "number" ? isArrayLike(object) && isIndex(index, object.length) : type == "string" && index in object) {
+        return eq(object[index], value);
+      }
+      return false;
+    }
+    function isKeyable(value) {
+      var type = typeof value;
+      return type == "string" || type == "number" || type == "symbol" || type == "boolean" ? value !== "__proto__" : value === null;
+    }
+    function isMasked(func) {
+      return !!maskSrcKey && maskSrcKey in func;
+    }
+    function isPrototype(value) {
+      var Ctor = value && value.constructor, proto = typeof Ctor == "function" && Ctor.prototype || objectProto;
+      return value === proto;
+    }
+    function nativeKeysIn(object) {
+      var result = [];
+      if (object != null) {
+        for (var key in Object(object)) {
+          result.push(key);
+        }
+      }
+      return result;
+    }
+    function objectToString(value) {
+      return nativeObjectToString.call(value);
+    }
+    function overRest(func, start, transform) {
+      start = nativeMax(start === void 0 ? func.length - 1 : start, 0);
+      return function() {
+        var args = arguments, index = -1, length2 = nativeMax(args.length - start, 0), array = Array(length2);
+        while (++index < length2) {
+          array[index] = args[start + index];
+        }
+        index = -1;
+        var otherArgs = Array(start + 1);
+        while (++index < start) {
+          otherArgs[index] = args[index];
+        }
+        otherArgs[start] = transform(array);
+        return apply(func, this, otherArgs);
+      };
+    }
+    function safeGet(object, key) {
+      if (key === "constructor" && typeof object[key] === "function") {
+        return;
+      }
+      if (key == "__proto__") {
+        return;
+      }
+      return object[key];
+    }
+    var setToString = shortOut(baseSetToString);
+    function shortOut(func) {
+      var count = 0, lastCalled = 0;
+      return function() {
+        var stamp = nativeNow(), remaining = HOT_SPAN - (stamp - lastCalled);
+        lastCalled = stamp;
+        if (remaining > 0) {
+          if (++count >= HOT_COUNT) {
+            return arguments[0];
+          }
+        } else {
+          count = 0;
+        }
+        return func.apply(void 0, arguments);
+      };
+    }
+    function toSource(func) {
+      if (func != null) {
+        try {
+          return funcToString.call(func);
+        } catch (e) {
+        }
+        try {
+          return func + "";
+        } catch (e) {
+        }
+      }
+      return "";
+    }
+    function eq(value, other) {
+      return value === other || value !== value && other !== other;
+    }
+    var isArguments = baseIsArguments(/* @__PURE__ */ function() {
+      return arguments;
+    }()) ? baseIsArguments : function(value) {
+      return isObjectLike(value) && hasOwnProperty.call(value, "callee") && !propertyIsEnumerable.call(value, "callee");
+    };
+    var isArray = Array.isArray;
+    function isArrayLike(value) {
+      return value != null && isLength(value.length) && !isFunction(value);
+    }
+    function isArrayLikeObject(value) {
+      return isObjectLike(value) && isArrayLike(value);
+    }
+    var isBuffer = nativeIsBuffer || stubFalse;
+    function isFunction(value) {
+      if (!isObject(value)) {
+        return false;
+      }
+      var tag = baseGetTag(value);
+      return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+    }
+    function isLength(value) {
+      return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+    }
+    function isObject(value) {
+      var type = typeof value;
+      return value != null && (type == "object" || type == "function");
+    }
+    function isObjectLike(value) {
+      return value != null && typeof value == "object";
+    }
+    function isPlainObject(value) {
+      if (!isObjectLike(value) || baseGetTag(value) != objectTag) {
+        return false;
+      }
+      var proto = getPrototype(value);
+      if (proto === null) {
+        return true;
+      }
+      var Ctor = hasOwnProperty.call(proto, "constructor") && proto.constructor;
+      return typeof Ctor == "function" && Ctor instanceof Ctor && funcToString.call(Ctor) == objectCtorString;
+    }
+    var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
+    function toPlainObject(value) {
+      return copyObject(value, keysIn(value));
+    }
+    function keysIn(object) {
+      return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);
+    }
+    var merge2 = createAssigner(function(object, source, srcIndex) {
+      baseMerge(object, source, srcIndex);
+    });
+    function constant(value) {
+      return function() {
+        return value;
+      };
+    }
+    function identity(value) {
+      return value;
+    }
+    function stubFalse() {
+      return false;
+    }
+    module2.exports = merge2;
+  }
+});
+
 // node_modules/classnames/index.js
 var require_classnames = __commonJS({
   "node_modules/classnames/index.js"(exports, module2) {
@@ -5658,6 +6380,9 @@ var vt = function() {
 var St = "__sc-".concat(f, "__");
 "undefined" != typeof window && (window[St] || (window[St] = 0), 1 === window[St] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window[St] += 1);
 
+// src/context/embed.tsx
+var import_lodash = __toESM(require_lodash());
+
 // node_modules/@stripe/stripe-js/dist/index.mjs
 var V3_URL = "https://js.stripe.com/v3";
 var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
@@ -6728,7 +7453,8 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     component: json["component"] == null ? void 0 : ComponentResponseDataFromJSON(json["component"]),
     featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
     stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
-    subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"])
+    subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"]),
+    upcomingInvoice: json["upcoming_invoice"] == null ? void 0 : InvoiceResponseDataFromJSON(json["upcoming_invoice"])
   };
 }
 
@@ -6929,11 +7655,9 @@ function parseEditorState(data) {
   });
   return arr;
 }
-async function fetchComponent(id, accessToken, options) {
+async function fetchComponent(id, api) {
   const settings = { ...defaultSettings };
   const nodes = [];
-  const config = new Configuration({ ...options, apiKey: accessToken });
-  const api = new CheckoutApi(config);
   const response = await api.hydrateComponent({ componentId: id });
   const { data } = response;
   if (data.component?.ast) {
@@ -6959,7 +7683,10 @@ async function fetchComponent(id, accessToken, options) {
   };
 }
 var EmbedContext = (0, import_react2.createContext)({
-  data: {},
+  api: null,
+  data: {
+    activePlans: []
+  },
   nodes: [],
   settings: { ...defaultSettings },
   stripe: null,
@@ -6983,7 +7710,10 @@ var EmbedProvider = ({
   const styleRef = (0, import_react2.useRef)(null);
   const [state, setState] = (0, import_react2.useState)(() => {
     return {
-      data: {},
+      api: null,
+      data: {
+        activePlans: []
+      },
       nodes: [],
       settings: { ...defaultSettings },
       stripe: null,
@@ -7011,13 +7741,21 @@ var EmbedProvider = ({
     styleRef.current = style;
   }, []);
   (0, import_react2.useEffect)(() => {
-    if (!id || !accessToken) {
+    if (!accessToken) {
       return;
     }
-    fetchComponent(id, accessToken, apiConfig).then(async (resolvedData) => {
+    const config = new Configuration({ ...apiConfig, apiKey: accessToken });
+    const api = new CheckoutApi(config);
+    setState((prev2) => ({ ...prev2, api }));
+  }, [accessToken, apiConfig]);
+  (0, import_react2.useEffect)(() => {
+    if (!id || !state.api) {
+      return;
+    }
+    fetchComponent(id, state.api).then(async (resolvedData) => {
       setState((prev2) => ({ ...prev2, ...resolvedData }));
     }).catch((error) => setState((prev2) => ({ ...prev2, error })));
-  }, [id, accessToken, apiConfig]);
+  }, [id, state.api]);
   (0, import_react2.useEffect)(() => {
     const fontSet = /* @__PURE__ */ new Set([]);
     Object.values(state.settings.theme.typography).forEach(({ fontFamily }) => {
@@ -7032,19 +7770,21 @@ var EmbedProvider = ({
   }, [state.settings.theme.typography]);
   const setData = (0, import_react2.useCallback)(
     (data) => {
-      setState((prev2) => ({
-        ...prev2,
-        data: Object.assign({}, data)
-      }));
+      setState((prev2) => {
+        const updated = { ...prev2 };
+        (0, import_lodash.default)(updated.data, data);
+        return updated;
+      });
     },
     [setState]
   );
   const updateSettings = (0, import_react2.useCallback)(
     (settings) => {
-      setState((prev2) => ({
-        ...prev2,
-        settings: Object.assign({}, prev2.settings, settings)
-      }));
+      setState((prev2) => {
+        const updated = { ...prev2 };
+        (0, import_lodash.default)(updated.settings, settings);
+        return updated;
+      });
     },
     [setState]
   );
@@ -7097,9 +7837,9 @@ var EmbedProvider = ({
                 }
               }
             },
-            ...state.data.stripeEmbed?.customerEkey && {
+            ...state.data.stripeEmbed?.customerEkey ? {
               clientSecret: state.data.stripeEmbed.customerEkey
-            }
+            } : { mode: "payment", currency: "usd", amount: 999999 }
           },
           children
         }
@@ -7111,6 +7851,7 @@ var EmbedProvider = ({
     EmbedContext.Provider,
     {
       value: {
+        api: state.api,
         data: state.data,
         nodes: state.nodes,
         settings: state.settings,
@@ -7157,11 +7898,11 @@ var require_browser_polyfill = __commonJS2({
   "node_modules/cross-fetch/dist/browser-polyfill.js"(exports) {
     (function(self2) {
       var irrelevant = function(exports2) {
-        var global = typeof globalThis !== "undefined" && globalThis || typeof self2 !== "undefined" && self2 || typeof global !== "undefined" && global;
+        var global2 = typeof globalThis !== "undefined" && globalThis || typeof self2 !== "undefined" && self2 || typeof global2 !== "undefined" && global2;
         var support = {
-          searchParams: "URLSearchParams" in global,
-          iterable: "Symbol" in global && "iterator" in Symbol,
-          blob: "FileReader" in global && "Blob" in global && function() {
+          searchParams: "URLSearchParams" in global2,
+          iterable: "Symbol" in global2 && "iterator" in Symbol,
+          blob: "FileReader" in global2 && "Blob" in global2 && function() {
             try {
               new Blob();
               return true;
@@ -7169,8 +7910,8 @@ var require_browser_polyfill = __commonJS2({
               return false;
             }
           }(),
-          formData: "FormData" in global,
-          arrayBuffer: "ArrayBuffer" in global
+          formData: "FormData" in global2,
+          arrayBuffer: "ArrayBuffer" in global2
         };
         function isDataView(obj) {
           return obj && DataView.prototype.isPrototypeOf(obj);
@@ -7547,7 +8288,7 @@ var require_browser_polyfill = __commonJS2({
           }
           return new Response(null, { status, headers: { location: url } });
         };
-        exports2.DOMException = global.DOMException;
+        exports2.DOMException = global2.DOMException;
         try {
           new exports2.DOMException();
         } catch (err2) {
@@ -7599,7 +8340,7 @@ var require_browser_polyfill = __commonJS2({
             };
             function fixUrl(url) {
               try {
-                return url === "" && global.location.href ? global.location.href : url;
+                return url === "" && global2.location.href ? global2.location.href : url;
               } catch (e) {
                 return url;
               }
@@ -7638,11 +8379,11 @@ var require_browser_polyfill = __commonJS2({
           });
         }
         fetch2.polyfill = true;
-        if (!global.fetch) {
-          global.fetch = fetch2;
-          global.Headers = Headers;
-          global.Request = Request;
-          global.Response = Response;
+        if (!global2.fetch) {
+          global2.fetch = fetch2;
+          global2.Headers = Headers;
+          global2.Request = Request;
+          global2.Response = Response;
         }
         exports2.Headers = Headers;
         exports2.Request = Request;
@@ -8477,15 +9218,96 @@ var ProgressBar = ({
 var import_react6 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 var import_react_stripe_js3 = require("@stripe/react-stripe-js");
+
+// src/components/elements/plan-manager/styles.ts
+var StyledButton = dt(Button2)`
+  font-family: "Public Sans", sans-serif;
+  font-weight: 500;
+  text-align: center;
+  width: 100%;
+  ${({ disabled, $color = "primary", theme }) => {
+  const { l: l2 } = hexToHSL(theme[$color]);
+  const textColor = disabled ? "#989898" : l2 > 50 ? "#000000" : "#FFFFFF";
+  return lt`
+      color: ${textColor};
+
+      ${Text} {
+        color: ${textColor};
+      }
+    `;
+}};
+
+  ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
+  const color = disabled ? "#EEEEEE" : theme[$color];
+  return $variant === "filled" ? lt`
+          background-color: ${color};
+          border-color: ${color};
+        ` : lt`
+          background-color: transparent;
+          border-color: #d2d2d2;
+          color: #194bfb;
+          ${Text} {
+            color: #194bfb;
+          }
+        `;
+}}
+
+  &:hover {
+    ${({ disabled }) => disabled && "cursor: not-allowed;"}
+    ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
+  const specified = theme[$color];
+  const lightened = lighten(specified, 15);
+  const color = disabled ? "#EEEEEE" : specified === lightened ? darken(specified, 15) : lightened;
+  return $variant === "filled" ? lt`
+            background-color: ${color};
+            border-color: ${color};
+          ` : lt`
+            background-color: ${color};
+            border-color: ${color};
+            color: #ffffff;
+            ${Text} {
+              color: #ffffff;
+            }
+          `;
+}}
+  }
+
+  ${({ $size = "md" }) => {
+  switch ($size) {
+    case "sm":
+      return lt`
+          font-size: ${15 / 16}rem;
+          padding: ${12 / 16}rem 0;
+          border-radius: ${6 / 16}rem;
+        `;
+    case "md":
+      return lt`
+          font-size: ${17 / 16}rem;
+          padding: ${16 / 16}rem 0;
+          border-radius: ${8 / 16}rem;
+        `;
+    case "lg":
+      return lt`
+          font-size: ${19 / 16}rem;
+          padding: ${20 / 16}rem 0;
+          border-radius: ${10 / 16}rem;
+        `;
+  }
+}}
+`;
+
+// src/components/elements/plan-manager/CheckoutForm.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var CheckoutForm = () => {
+var CheckoutForm = ({ plan, period }) => {
   const stripe = (0, import_react_stripe_js3.useStripe)();
   const elements = (0, import_react_stripe_js3.useElements)();
+  const { api, data } = useEmbed();
   const [message, setMessage] = (0, import_react6.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
-    if (!stripe || !elements) {
+    const priceId = period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
+    if (!api || !stripe || !elements || !priceId) {
       return;
     }
     setIsLoading(true);
@@ -8546,22 +9368,13 @@ var CheckoutForm = () => {
           message && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: "payment-message", children: message })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "button",
+          StyledButton,
           {
-            disabled: isLoading || !stripe || !elements,
             id: "submit",
-            style: {
-              backgroundColor: "#000000",
-              color: "#ffffff",
-              paddingTop: ".75rem",
-              paddingBottom: ".75rem",
-              fontSize: "15px",
-              width: "100%",
-              borderRadius: ".5rem",
-              textAlign: "center",
-              cursor: "pointer"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: "button-text", style: { marginTop: "2.5rem" }, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "spinner", id: "spinner" }) : "Save payment method" })
+            disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.customerEkey,
+            $size: "md",
+            $color: "secondary",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
           }
         ) })
       ]
@@ -8569,86 +9382,12 @@ var CheckoutForm = () => {
   );
 };
 
-// src/components/elements/plan-manager/styles.ts
-var StyledButton = dt(Button2)`
-  font-family: "Public Sans", sans-serif;
-  font-weight: 500;
-  text-align: center;
-  width: 100%;
-
-  ${({ $color = "primary", theme }) => {
-  const { l: l2 } = hexToHSL(theme[$color]);
-  const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
-  return lt`
-      color: ${textColor};
-
-      ${Text} {
-        color: ${textColor};
-      }
-    `;
-}};
-
-  ${({ $color = "primary", theme, $variant = "filled" }) => {
-  const color = theme[$color];
-  return $variant === "filled" ? lt`
-          background-color: ${color};
-          border-color: ${color};
-        ` : lt`
-          background-color: transparent;
-          border-color: #d2d2d2;
-          color: #194bfb;
-          ${Text} {
-            color: #194bfb;
-          }
-        `;
-}}
-
-  &:hover {
-    ${({ $color = "primary", theme, $variant = "filled" }) => {
-  const specified = theme[$color];
-  const lightened = lighten(specified, 15);
-  const color = specified === lightened ? darken(specified, 15) : lightened;
-  return $variant === "filled" ? lt`
-            background-color: ${color};
-            border-color: ${color};
-          ` : lt`
-            background-color: ${color};
-            border-color: ${color};
-            color: #ffffff;
-            ${Text} {
-              color: #ffffff;
-            }
-          `;
-}}
-  }
-
-  ${({ $size = "md" }) => {
-  switch ($size) {
-    case "sm":
-      return lt`
-          font-size: ${15 / 16}rem;
-          padding: ${12 / 16}rem 0;
-          border-radius: ${6 / 16}rem;
-        `;
-    case "md":
-      return lt`
-          font-size: ${17 / 16}rem;
-          padding: ${16 / 16}rem 0;
-          border-radius: ${8 / 16}rem;
-        `;
-    case "lg":
-      return lt`
-          font-size: ${19 / 16}rem;
-          padding: ${20 / 16}rem 0;
-          border-radius: ${10 / 16}rem;
-        `;
-  }
-}}
-`;
-
 // src/components/elements/plan-manager/PlanManager.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var OverlayHeader = ({ children }) => {
+var OverlayHeader = ({
+  children,
+  onClose
+}) => {
   const { setLayout } = useEmbed();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Flex,
@@ -8671,6 +9410,9 @@ var OverlayHeader = ({ children }) => {
             $cursor: "pointer",
             onClick: () => {
               setLayout("portal");
+              if (onClose) {
+                onClose();
+              }
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
           }
@@ -8735,8 +9477,20 @@ var OverlayWrapper = ({
 var OverlaySideBar = ({
   pricePeriod,
   setPricePeriod,
-  setCheckoutStage
+  checkoutStage,
+  setCheckoutStage,
+  currentPlan,
+  selectedPlan
 }) => {
+  const { api } = useEmbed();
+  const savingsPercentage = (0, import_react7.useMemo)(() => {
+    if (selectedPlan && pricePeriod === "month") {
+      const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
+      const yearly = selectedPlan?.yearlyPrice?.price || 0;
+      return (monthly - yearly) / monthly * 100;
+    }
+    return 0;
+  }, [selectedPlan, pricePeriod]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Flex,
     {
@@ -8758,32 +9512,7 @@ var OverlaySideBar = ({
             $padding: "1.5rem",
             $borderBottom: "1px solid #DEDEDE",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $justifyContent: "space-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: "Subscription" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                  Flex,
-                  {
-                    $border: "1px solid #D9D9D9",
-                    $padding: ".15rem .45rem .15rem .55rem",
-                    $alignItems: "center",
-                    $borderRadius: "5px",
-                    $fontSize: "12px",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $marginRight: ".5rem", children: "$ USD" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                        Icon2,
-                        {
-                          name: "chevron-down",
-                          style: {
-                            fontSize: "20px",
-                            lineHeight: "1em"
-                          }
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $flexDirection: "row", $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 Flex,
                 {
@@ -8821,7 +9550,11 @@ var OverlaySideBar = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "11px", $color: "#194BFB", children: "Save up to 33% with yearly billing" })
+              savingsPercentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "11px", $color: "#194BFB", children: [
+                "Save up to ",
+                savingsPercentage,
+                "% with yearly billing"
+              ] })
             ]
           }
         ),
@@ -8846,7 +9579,7 @@ var OverlaySideBar = ({
                   $color: "#5D5D5D",
                   $gap: ".5rem",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    currentPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       Flex,
                       {
                         $flexDirection: "row",
@@ -8855,50 +9588,56 @@ var OverlaySideBar = ({
                         $fontSize: "14px",
                         $color: "#5D5D5D",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: "Free" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: currentPlan.name }),
                           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
-                            "$0/",
-                            pricePeriod
+                            "$",
+                            currentPlan.planPrice,
+                            "/",
+                            currentPlan.planPeriod
                           ] })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      Box,
-                      {
-                        $width: "100%",
-                        $textAlign: "left",
-                        $opacity: "50%",
-                        $marginBottom: "-.25rem",
-                        $marginTop: "-.25rem",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          Icon2,
-                          {
-                            name: "arrow-down",
-                            style: {
-                              display: "inline-block"
+                    selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        Box,
+                        {
+                          $width: "100%",
+                          $textAlign: "left",
+                          $opacity: "50%",
+                          $marginBottom: "-.25rem",
+                          $marginTop: "-.25rem",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            Icon2,
+                            {
+                              name: "arrow-down",
+                              style: {
+                                display: "inline-block"
+                              }
                             }
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                      Flex,
-                      {
-                        $flexDirection: "row",
-                        $alignItems: "center",
-                        $justifyContent: "space-between",
-                        $fontSize: "14px",
-                        $color: "#5D5D5D",
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#000000", $fontWeight: "600", children: "Professional" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
-                            "$285/",
-                            pricePeriod
-                          ] })
-                        ]
-                      }
-                    )
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                        Flex,
+                        {
+                          $flexDirection: "row",
+                          $alignItems: "center",
+                          $justifyContent: "space-between",
+                          $fontSize: "14px",
+                          $color: "#5D5D5D",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#000000", $fontWeight: "600", children: selectedPlan.name }),
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
+                              "$",
+                              pricePeriod === "month" ? selectedPlan.monthlyPrice?.price : selectedPlan.yearlyPrice?.price,
+                              "/",
+                              pricePeriod
+                            ] })
+                          ]
+                        }
+                      )
+                    ] })
                   ]
                 }
               )
@@ -8915,25 +9654,57 @@ var OverlaySideBar = ({
             $height: "auto",
             $padding: "1.5rem",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#5D5D5D", $justifyContent: "space-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
-                  "Monthly total:",
-                  " "
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "12px", $color: "#000000", children: "$285/mo" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                Flex,
+                {
+                  $fontSize: "12px",
+                  $color: "#5D5D5D",
+                  $justifyContent: "space-between",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
+                      "Monthly total:",
+                      " "
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#000000", children: [
+                      "$",
+                      pricePeriod === "month" ? selectedPlan.monthlyPrice?.price : selectedPlan.yearlyPrice?.price,
+                      "/",
+                      pricePeriod
+                    ] })
+                  ]
+                }
+              ),
+              checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 StyledButton,
                 {
                   $size: "sm",
                   onClick: () => {
                     setCheckoutStage("checkout");
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: ".5rem", $alignItems: "center", $justifyContent: "center", children: [
+                  ...!selectedPlan && { disabled: true },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", $justifyContent: "center", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Next: Checkout" }),
                     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "arrow-right" })
                   ] })
                 }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                StyledButton,
+                {
+                  disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id,
+                  onClick: async () => {
+                    const priceId = pricePeriod === "month" ? selectedPlan?.monthlyPrice?.id : selectedPlan?.yearlyPrice?.id;
+                    if (!api || !selectedPlan || !priceId)
+                      return;
+                    await api.checkout({
+                      changeSubscriptionRequestBody: {
+                        newPlanId: selectedPlan.id,
+                        newPriceId: priceId
+                      }
+                    });
+                  },
+                  $size: "md",
+                  children: "Pay now"
+                }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
             ]
@@ -8977,23 +9748,15 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
     "plan"
   );
   const [planPeriod, setPlanPeriod] = (0, import_react7.useState)("month");
+  const [selectedPlan, setSelectedPlan] = (0, import_react7.useState)();
   const { data, settings, layout, stripe, setLayout } = useEmbed();
   const { currentPlan, canChangePlan, availablePlans } = (0, import_react7.useMemo)(() => {
-    const canChangePlan2 = stripe !== null;
-    const availablePlans2 = data.activePlans?.map(
-      ({ name, description, current, monthlyPrice, yearlyPrice }) => ({
-        name,
-        description,
-        price: planPeriod === "month" ? monthlyPrice?.price : yearlyPrice?.price,
-        current
-      })
-    );
     return {
       currentPlan: data.company?.plan,
-      canChangePlan: canChangePlan2,
-      availablePlans: availablePlans2
+      canChangePlan: stripe !== null,
+      availablePlans: data.activePlans
     };
-  }, [data.company, data.activePlans, stripe, planPeriod]);
+  }, [data.company, data.activePlans, stripe]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Flex,
@@ -9075,23 +9838,41 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(OverlayWrapper, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: "1rem", children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               Box,
               {
                 $width: "15px",
                 $height: "15px",
+                $backgroundColor: "white",
                 $border: "2px solid #DDDDDD",
-                $borderRadius: "999px",
-                $backgroundColor: "white"
+                $borderRadius: "999px"
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              IconRound,
+              {
+                name: "check",
+                style: {
+                  color: "#FFFFFF",
+                  backgroundColor: "#DDDDDD",
+                  fontSize: 16,
+                  width: "1rem",
+                  height: "1rem"
+                }
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "div",
               {
-                ...checkoutStage === "plan" && {
+                tabIndex: 0,
+                ...checkoutStage === "plan" ? {
                   style: {
                     fontWeight: "700"
                   }
+                } : {
+                  style: {
+                    cursor: "pointer"
+                  },
+                  onClick: () => setCheckoutStage("plan")
                 },
                 children: "1. Select plan"
               }
@@ -9118,6 +9899,7 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "div",
               {
+                tabIndex: 0,
                 ...checkoutStage === "checkout" && {
                   style: {
                     fontWeight: "700"
@@ -9125,13 +9907,6 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
                 },
                 children: "2. Checkout"
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              Icon2,
-              {
-                name: "chevron-right",
-                style: { fontSize: 16, color: "#D0D0D0" }
-              }
             )
           ] })
         ] }) }),
@@ -9192,8 +9967,8 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
                             $height: "100%",
                             $flexDirection: "column",
                             $backgroundColor: "white",
-                            $border: plan?.current ? `2px solid #194BFB` : "",
                             $flex: "1",
+                            $border: `2px solid ${plan.id === selectedPlan?.id ? "#194BFB" : "transparent"}`,
                             $borderRadius: ".5rem",
                             $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)",
                             children: [
@@ -9205,26 +9980,26 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
                                   $gap: "1rem",
                                   $width: "100%",
                                   $height: "auto",
-                                  $padding: "1.5rem",
+                                  $padding: "2rem 1.5rem 1.5rem",
                                   $borderBottom: "1px solid #DEDEDE",
                                   children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: plan?.name }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 14, children: plan?.description }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: plan.name }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 14, children: plan.description }),
                                     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { children: [
                                       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $fontSize: ".90rem", children: "$" }),
-                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: plan?.price ? plan.price : "350" }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price }),
                                       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $display: "inline-block", $fontSize: ".75rem", children: [
                                         "/",
                                         planPeriod
                                       ] })
                                     ] }),
-                                    plan?.current && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                    (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                                       Flex,
                                       {
                                         $position: "absolute",
                                         $right: "1rem",
                                         $top: "1rem",
-                                        $fontSize: ".75rem",
+                                        $fontSize: ".625rem",
                                         $color: "white",
                                         $backgroundColor: "#194BFB",
                                         $borderRadius: "999px",
@@ -9245,22 +10020,30 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
                                   $width: "100%",
                                   $height: "auto",
                                   $padding: "1.5rem",
-                                  children: [{}, {}, {}].map(() => {
-                                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexShrink: "0", $gap: "1rem", children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                        IconRound,
-                                        {
-                                          name: "server-search",
-                                          size: "tn",
-                                          colors: ["#00000", "#F5F5F5"]
-                                        }
-                                      ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: ".75rem", $color: "#00000", children: "5 Queries/mo" }) })
-                                    ] });
+                                  children: plan.features.map((feature) => {
+                                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                                      Flex,
+                                      {
+                                        $flexShrink: "0",
+                                        $gap: "1rem",
+                                        children: [
+                                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                            IconRound,
+                                            {
+                                              name: feature.icon,
+                                              size: "tn",
+                                              colors: ["#000000", "#F5F5F5"]
+                                            }
+                                          ),
+                                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: ".75rem", $color: "#00000", children: feature.name }) })
+                                        ]
+                                      },
+                                      feature.id
+                                    );
                                   })
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                                 Flex,
                                 {
                                   $flexDirection: "column",
@@ -9269,58 +10052,64 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
                                   $width: "100%",
                                   $height: "auto",
                                   $padding: "1.5rem",
-                                  children: plan.current ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                                    Flex,
-                                    {
-                                      $flexDirection: "row",
-                                      $gap: ".5rem",
-                                      $justifyContent: "center",
-                                      $alignItems: "center",
-                                      children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                          Icon2,
-                                          {
-                                            name: "check-rounded",
-                                            style: {
-                                              fontSize: 24,
-                                              lineHeight: "1em",
-                                              color: "#194BFB"
+                                  children: [
+                                    plan.id === selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                                      Flex,
+                                      {
+                                        $justifyContent: "center",
+                                        $alignItems: "center",
+                                        $gap: "0.25rem",
+                                        $fontSize: "0.9375rem",
+                                        $padding: "0.625rem 0",
+                                        children: [
+                                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                            Icon2,
+                                            {
+                                              name: "check-rounded",
+                                              style: {
+                                                fontSize: 20,
+                                                lineHeight: "1",
+                                                color: "#194BFB"
+                                              }
                                             }
-                                          }
-                                        ),
-                                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                          "span",
-                                          {
-                                            style: {
-                                              fontSize: "1rem",
-                                              color: "#7B7B7B"
-                                            },
-                                            children: "Selected"
-                                          }
-                                        )
-                                      ]
-                                    }
-                                  ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                    StyledButton,
-                                    {
-                                      $size: "sm",
-                                      $color: "secondary",
-                                      $variant: "outline",
-                                      onClick: () => {
-                                      },
-                                      children: "Select"
-                                    }
-                                  )
+                                          ),
+                                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                            "span",
+                                            {
+                                              style: {
+                                                color: "#7B7B7B",
+                                                lineHeight: "1.4"
+                                              },
+                                              children: "Selected"
+                                            }
+                                          )
+                                        ]
+                                      }
+                                    ),
+                                    !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                      StyledButton,
+                                      {
+                                        $size: "sm",
+                                        $color: "secondary",
+                                        $variant: "outline",
+                                        onClick: () => {
+                                          setSelectedPlan(plan);
+                                        },
+                                        children: "Select"
+                                      }
+                                    )
+                                  ]
                                 }
                               )
                             ]
-                          }
+                          },
+                          plan.id
                         );
                       })
                     }
                   )
                 ] }),
-                checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutForm, {})
+                selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutForm, { plan: selectedPlan, period: planPeriod })
               ]
             }
           ),
@@ -9329,7 +10118,10 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
             {
               pricePeriod: planPeriod,
               setPricePeriod: setPlanPeriod,
-              setCheckoutStage
+              checkoutStage,
+              setCheckoutStage,
+              currentPlan,
+              selectedPlan
             }
           )
         ] })
@@ -9640,28 +10432,26 @@ function resolveDesignProps4(props) {
 var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
   const { data, settings, stripe } = useEmbed();
-  const { latestInvoice } = (0, import_react10.useMemo)(() => {
+  const { upcomingInvoice } = (0, import_react10.useMemo)(() => {
     return {
-      latestInvoice: {
-        ...data.subscription?.latestInvoice?.amountDue && {
-          amountDue: data.subscription.latestInvoice.amountDue
+      upcomingInvoice: {
+        ...data.upcomingInvoice?.amountDue && {
+          amountDue: data.upcomingInvoice.amountDue
         },
         ...data.subscription?.interval && {
           interval: data.subscription.interval
         },
-        ...data.subscription?.latestInvoice?.dueDate && {
-          dueDate: toPrettyDate(
-            new Date(data.subscription.latestInvoice.dueDate)
-          )
+        ...data.upcomingInvoice?.dueDate && {
+          dueDate: toPrettyDate(new Date(data.upcomingInvoice.dueDate))
         }
       }
     };
-  }, [data.subscription]);
-  if (!stripe || !data.subscription?.latestInvoice) {
+  }, [data.subscription, data.upcomingInvoice]);
+  if (!stripe || !data.upcomingInvoice) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
-    props.header.isVisible && latestInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -9677,13 +10467,13 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
             children: [
               props.header.prefix,
               " ",
-              latestInvoice.dueDate
+              upcomingInvoice.dueDate
             ]
           }
         )
       }
     ),
-    latestInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+    upcomingInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
       props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         Text,
         {
@@ -9701,7 +10491,7 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
                 children: "$"
               }
             ),
-            latestInvoice.amountDue
+            upcomingInvoice.amountDue
           ]
         }
       ) }),
@@ -9736,7 +10526,7 @@ var resolveDesignProps5 = (props) => {
 };
 var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
-  const { data, settings, stripe, layout, setLayout } = useEmbed();
+  const { data, settings, stripe, layout } = useEmbed();
   const paymentMethod = (0, import_react11.useMemo)(() => {
     const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
     let monthsToExpiration;
@@ -9786,7 +10576,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
         ]
       }
     ),
-    paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -9795,28 +10585,10 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
         $background: `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`,
         $padding: "0.375rem 1rem",
         $borderRadius: "9999px",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
-            "\u{1F4B3} Card ending in ",
-            paymentMethod.cardLast4
-          ] }),
-          props.functions.allowEdit && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            Text,
-            {
-              tabIndex: 0,
-              onClick: () => {
-                if (layout !== "payment")
-                  return;
-                setLayout("payment");
-              },
-              $font: settings.theme.typography.link.fontFamily,
-              $size: settings.theme.typography.link.fontSize,
-              $weight: settings.theme.typography.link.fontWeight,
-              $color: settings.theme.typography.link.color,
-              children: "Edit"
-            }
-          )
-        ]
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
+          "\u{1F4B3} Card ending in ",
+          paymentMethod.cardLast4
+        ] })
       }
     ),
     layout === "payment" && (0, import_react_dom2.createPortal)(
@@ -10340,7 +11112,7 @@ function createRenderer(options) {
       component,
       {
         className,
-        ...component !== "div" && { resolvedProps },
+        ...component !== "div" && { ...resolvedProps },
         ...component !== "div" && Object.keys(custom).length > 0 && { custom },
         key: index
       },