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

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) {
@@ -1008,12 +1730,12 @@ var flush_block_only = (s2, last) => {
   s2.block_start = s2.strstart;
   flush_pending(s2.strm);
 };
-var put_byte = (s2, b) => {
-  s2.pending_buf[s2.pending++] = b;
+var put_byte = (s2, b2) => {
+  s2.pending_buf[s2.pending++] = b2;
 };
-var putShortMSB = (s2, b) => {
-  s2.pending_buf[s2.pending++] = b >>> 8 & 255;
-  s2.pending_buf[s2.pending++] = b & 255;
+var putShortMSB = (s2, b2) => {
+  s2.pending_buf[s2.pending++] = b2 >>> 8 & 255;
+  s2.pending_buf[s2.pending++] = b2 & 255;
 };
 var read_buf = (strm, buf, start, size) => {
   let len = strm.avail_in;
@@ -2295,10 +3017,8 @@ Deflate$1.prototype.push = function(data, flush_mode) {
   if (this.ended) {
     return false;
   }
-  if (flush_mode === ~~flush_mode)
-    _flush_mode = flush_mode;
-  else
-    _flush_mode = flush_mode === true ? Z_FINISH$2 : Z_NO_FLUSH$1;
+  if (flush_mode === ~~flush_mode) _flush_mode = flush_mode;
+  else _flush_mode = flush_mode === true ? Z_FINISH$2 : Z_NO_FLUSH$1;
   if (typeof data === "string") {
     strm.input = strings.string2buf(data);
   } else if (toString$1.call(data) === "[object ArrayBuffer]") {
@@ -2338,8 +3058,7 @@ Deflate$1.prototype.push = function(data, flush_mode) {
       strm.avail_out = 0;
       continue;
     }
-    if (strm.avail_in === 0)
-      break;
+    if (strm.avail_in === 0) break;
   }
   return true;
 };
@@ -3293,6 +4012,7 @@ var inflate$2 = (strm, flush) => {
           hold = 0;
           bits = 0;
           state.mode = TIME;
+        /* falls through */
         case TIME:
           while (bits < 32) {
             if (have === 0) {
@@ -3315,6 +4035,7 @@ var inflate$2 = (strm, flush) => {
           hold = 0;
           bits = 0;
           state.mode = OS;
+        /* falls through */
         case OS:
           while (bits < 16) {
             if (have === 0) {
@@ -3336,6 +4057,7 @@ var inflate$2 = (strm, flush) => {
           hold = 0;
           bits = 0;
           state.mode = EXLEN;
+        /* falls through */
         case EXLEN:
           if (state.flags & 1024) {
             while (bits < 16) {
@@ -3361,6 +4083,7 @@ var inflate$2 = (strm, flush) => {
             state.head.extra = null;
           }
           state.mode = EXTRA;
+        /* falls through */
         case EXTRA:
           if (state.flags & 1024) {
             copy2 = state.length;
@@ -3397,6 +4120,7 @@ var inflate$2 = (strm, flush) => {
           }
           state.length = 0;
           state.mode = NAME;
+        /* falls through */
         case NAME:
           if (state.flags & 2048) {
             if (have === 0) {
@@ -3422,6 +4146,7 @@ var inflate$2 = (strm, flush) => {
           }
           state.length = 0;
           state.mode = COMMENT;
+        /* falls through */
         case COMMENT:
           if (state.flags & 4096) {
             if (have === 0) {
@@ -3446,6 +4171,7 @@ var inflate$2 = (strm, flush) => {
             state.head.comment = null;
           }
           state.mode = HCRC;
+        /* falls through */
         case HCRC:
           if (state.flags & 512) {
             while (bits < 16) {
@@ -3484,6 +4210,7 @@ var inflate$2 = (strm, flush) => {
           hold = 0;
           bits = 0;
           state.mode = DICT;
+        /* falls through */
         case DICT:
           if (state.havedict === 0) {
             strm.next_out = put;
@@ -3496,10 +4223,12 @@ var inflate$2 = (strm, flush) => {
           }
           strm.adler = state.check = 1;
           state.mode = TYPE;
+        /* falls through */
         case TYPE:
           if (flush === Z_BLOCK || flush === Z_TREES) {
             break inf_leave;
           }
+        /* falls through */
         case TYPEDO:
           if (state.last) {
             hold >>>= bits & 7;
@@ -3564,8 +4293,10 @@ var inflate$2 = (strm, flush) => {
           if (flush === Z_TREES) {
             break inf_leave;
           }
+        /* falls through */
         case COPY_:
           state.mode = COPY;
+        /* falls through */
         case COPY:
           copy2 = state.length;
           if (copy2) {
@@ -3613,6 +4344,7 @@ var inflate$2 = (strm, flush) => {
           }
           state.have = 0;
           state.mode = LENLENS;
+        /* falls through */
         case LENLENS:
           while (state.have < state.ncode) {
             while (bits < 3) {
@@ -3642,6 +4374,7 @@ var inflate$2 = (strm, flush) => {
           }
           state.have = 0;
           state.mode = CODELENS;
+        /* falls through */
         case CODELENS:
           while (state.have < state.nlen + state.ndist) {
             for (; ; ) {
@@ -3759,8 +4492,10 @@ var inflate$2 = (strm, flush) => {
           if (flush === Z_TREES) {
             break inf_leave;
           }
+        /* falls through */
         case LEN_:
           state.mode = LEN;
+        /* falls through */
         case LEN:
           if (have >= 6 && left >= 258) {
             strm.next_out = put;
@@ -3842,6 +4577,7 @@ var inflate$2 = (strm, flush) => {
           }
           state.extra = here_op & 15;
           state.mode = LENEXT;
+        /* falls through */
         case LENEXT:
           if (state.extra) {
             n = state.extra;
@@ -3860,6 +4596,7 @@ var inflate$2 = (strm, flush) => {
           }
           state.was = state.length;
           state.mode = DIST;
+        /* falls through */
         case DIST:
           for (; ; ) {
             here = state.distcode[hold & (1 << state.distbits) - 1];
@@ -3910,6 +4647,7 @@ var inflate$2 = (strm, flush) => {
           state.offset = here_val;
           state.extra = here_op & 15;
           state.mode = DISTEXT;
+        /* falls through */
         case DISTEXT:
           if (state.extra) {
             n = state.extra;
@@ -3932,6 +4670,7 @@ var inflate$2 = (strm, flush) => {
             break;
           }
           state.mode = MATCH;
+        /* falls through */
         case MATCH:
           if (left === 0) {
             break inf_leave;
@@ -4008,6 +4747,7 @@ var inflate$2 = (strm, flush) => {
             bits = 0;
           }
           state.mode = LENGTH;
+        /* falls through */
         case LENGTH:
           if (state.wrap && state.flags) {
             while (bits < 32) {
@@ -4027,6 +4767,7 @@ var inflate$2 = (strm, flush) => {
             bits = 0;
           }
           state.mode = DONE;
+        /* falls through */
         case DONE:
           ret = Z_STREAM_END$1;
           break inf_leave;
@@ -4036,6 +4777,7 @@ var inflate$2 = (strm, flush) => {
         case MEM:
           return Z_MEM_ERROR$1;
         case SYNC:
+        /* falls through */
         default:
           return Z_STREAM_ERROR$1;
       }
@@ -4047,8 +4789,7 @@ var inflate$2 = (strm, flush) => {
   state.hold = hold;
   state.bits = bits;
   if (state.wsize || _out !== strm.avail_out && state.mode < BAD && (state.mode < CHECK || flush !== Z_FINISH$1)) {
-    if (updatewindow(strm, strm.output, strm.next_out, _out - strm.avail_out))
-      ;
+    if (updatewindow(strm, strm.output, strm.next_out, _out - strm.avail_out)) ;
   }
   _in -= strm.avail_in;
   _out -= strm.avail_out;
@@ -4216,12 +4957,9 @@ Inflate$1.prototype.push = function(data, flush_mode) {
   const chunkSize = this.options.chunkSize;
   const dictionary = this.options.dictionary;
   let status, _flush_mode, last_avail_out;
-  if (this.ended)
-    return false;
-  if (flush_mode === ~~flush_mode)
-    _flush_mode = flush_mode;
-  else
-    _flush_mode = flush_mode === true ? Z_FINISH : Z_NO_FLUSH;
+  if (this.ended) return false;
+  if (flush_mode === ~~flush_mode) _flush_mode = flush_mode;
+  else _flush_mode = flush_mode === true ? Z_FINISH : Z_NO_FLUSH;
   if (toString.call(data) === "[object ArrayBuffer]") {
     strm.input = new Uint8Array(data);
   } else {
@@ -4266,24 +5004,21 @@ Inflate$1.prototype.push = function(data, flush_mode) {
           let utf8str = strings.buf2string(strm.output, next_out_utf8);
           strm.next_out = tail;
           strm.avail_out = chunkSize - tail;
-          if (tail)
-            strm.output.set(strm.output.subarray(next_out_utf8, next_out_utf8 + tail), 0);
+          if (tail) strm.output.set(strm.output.subarray(next_out_utf8, next_out_utf8 + tail), 0);
           this.onData(utf8str);
         } else {
           this.onData(strm.output.length === strm.next_out ? strm.output : strm.output.subarray(0, strm.next_out));
         }
       }
     }
-    if (status === Z_OK && last_avail_out === 0)
-      continue;
+    if (status === Z_OK && last_avail_out === 0) continue;
     if (status === Z_STREAM_END) {
       status = inflate_1$2.inflateEnd(this.strm);
       this.onEnd(status);
       this.ended = true;
       return true;
     }
-    if (strm.avail_in === 0)
-      break;
+    if (strm.avail_in === 0) break;
   }
   return true;
 };
@@ -4305,8 +5040,7 @@ Inflate$1.prototype.onEnd = function(status) {
 function inflate$1(input, options) {
   const inflator = new Inflate$1(options);
   inflator.push(input);
-  if (inflator.err)
-    throw inflator.msg || messages[inflator.err];
+  if (inflator.err) throw inflator.msg || messages[inflator.err];
   return inflator.result;
 }
 function inflateRaw$1(input, options) {
@@ -4335,23 +5069,19 @@ var __assign = function() {
   __assign = Object.assign || function __assign2(t) {
     for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
       s2 = arguments[i2];
-      for (var p2 in s2)
-        if (Object.prototype.hasOwnProperty.call(s2, p2))
-          t[p2] = s2[p2];
+      for (var p2 in s2) if (Object.prototype.hasOwnProperty.call(s2, p2)) t[p2] = s2[p2];
     }
     return t;
   };
   return __assign.apply(this, arguments);
 };
 function __spreadArray(to, from2, pack) {
-  if (pack || arguments.length === 2)
-    for (var i2 = 0, l2 = from2.length, ar; i2 < l2; i2++) {
-      if (ar || !(i2 in from2)) {
-        if (!ar)
-          ar = Array.prototype.slice.call(from2, 0, i2);
-        ar[i2] = from2[i2];
-      }
+  if (pack || arguments.length === 2) for (var i2 = 0, l2 = from2.length, ar; i2 < l2; i2++) {
+    if (ar || !(i2 in from2)) {
+      if (!ar) ar = Array.prototype.slice.call(from2, 0, i2);
+      ar[i2] = from2[i2];
     }
+  }
   return to.concat(ar || Array.prototype.slice.call(from2));
 }
 
@@ -4359,8 +5089,7 @@ function __spreadArray(to, from2, pack) {
 function memoize(fn) {
   var cache = /* @__PURE__ */ Object.create(null);
   return function(arg) {
-    if (cache[arg] === void 0)
-      cache[arg] = fn(arg);
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
     return cache[arg];
   };
 }
@@ -4476,12 +5205,14 @@ function slice(begin, end) {
 }
 function token(type) {
   switch (type) {
+    // \0 \t \n \r \s whitespace token
     case 0:
     case 9:
     case 10:
     case 13:
     case 32:
       return 5;
+    // ! + , / > @ ~ isolate token
     case 33:
     case 43:
     case 44:
@@ -4489,17 +5220,21 @@ function token(type) {
     case 62:
     case 64:
     case 126:
+    // ; { } breakpoint token
     case 59:
     case 123:
     case 125:
       return 4;
+    // : accompanied token
     case 58:
       return 3;
+    // " ' ( [ opening delimit token
     case 34:
     case 39:
     case 40:
     case 91:
       return 2;
+    // ) ] closing delimit token
     case 41:
     case 93:
       return 1;
@@ -4532,17 +5267,21 @@ function escaping(index, count) {
 function delimiter(type) {
   while (next())
     switch (character) {
+      // ] ) " '
       case type:
         return position;
+      // " '
       case 34:
       case 39:
         if (type !== 34 && type !== 39)
           delimiter(character);
         break;
+      // (
       case 40:
         if (type === 41)
           delimiter(type);
         break;
+      // \
       case 92:
         next();
         break;
@@ -4585,26 +5324,31 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
   var characters2 = type;
   while (scanning)
     switch (previous = character2, character2 = next()) {
+      // (
       case 40:
         if (previous != 108 && charat(characters2, length2 - 1) == 58) {
           if (indexof(characters2 += replace(delimit(character2), "&", "&\f"), "&\f", abs(index ? points[index - 1] : 0)) != -1)
             ampersand = -1;
           break;
         }
+      // " ' [
       case 34:
       case 39:
       case 91:
         characters2 += delimit(character2);
         break;
+      // \t \n \r \s
       case 9:
       case 10:
       case 13:
       case 32:
         characters2 += whitespace(previous);
         break;
+      // \
       case 92:
         characters2 += escaping(caret() - 1, 7);
         continue;
+      // /
       case 47:
         switch (peek()) {
           case 42:
@@ -4615,23 +5359,28 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
             characters2 += "/";
         }
         break;
+      // {
       case 123 * variable:
         points[index++] = strlen(characters2) * ampersand;
+      // } ; \0
       case 125 * variable:
       case 59:
       case 0:
         switch (character2) {
+          // \0 }
           case 0:
           case 125:
             scanning = 0;
+          // ;
           case 59 + offset:
-            if (ampersand == -1)
-              characters2 = replace(characters2, /\f/g, "");
+            if (ampersand == -1) characters2 = replace(characters2, /\f/g, "");
             if (property > 0 && strlen(characters2) - length2)
               append(property > 32 ? declaration(characters2 + ";", rule, parent, length2 - 1, declarations) : declaration(replace(characters2, " ", "") + ";", rule, parent, length2 - 2, declarations), declarations);
             break;
+          // @ ;
           case 59:
             characters2 += ";";
+          // { rule/at-rule
           default:
             append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props = [], children = [], length2, rulesets), rulesets);
             if (character2 === 123)
@@ -4639,6 +5388,7 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
                 parse(characters2, root, reference, reference, props, rulesets, length2, points, children);
               else
                 switch (atrule === 99 && charat(characters2, 3) === 110 ? 100 : atrule) {
+                  // d l m s
                   case 100:
                   case 108:
                   case 109:
@@ -4651,6 +5401,7 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
         }
         index = offset = property = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo;
         break;
+      // :
       case 58:
         length2 = 1 + strlen(characters2), property = previous;
       default:
@@ -4661,17 +5412,21 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
             continue;
         }
         switch (characters2 += from(character2), character2 * variable) {
+          // &
           case 38:
             ampersand = offset > 0 ? 1 : (characters2 += "\f", -1);
             break;
+          // ,
           case 44:
             points[index++] = (strlen(characters2) - 1) * ampersand, ampersand = 1;
             break;
+          // @
           case 64:
             if (peek() === 45)
               characters2 += delimit(next());
             atrule = peek(), offset = length2 = strlen(type = characters2 += identifier(caret())), character2++;
             break;
+          // -
           case 45:
             if (previous === 45 && strlen(characters2) == 2)
               variable = 0;
@@ -4699,8 +5454,10 @@ function declaration(value, root, parent, length2, siblings) {
 // node_modules/stylis/src/Prefixer.js
 function prefix(value, length2, children) {
   switch (hash(value, length2)) {
+    // color-adjust
     case 5103:
       return WEBKIT + "print-" + value + value;
+    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
     case 5737:
     case 4201:
     case 3177:
@@ -4708,18 +5465,21 @@ function prefix(value, length2, children) {
     case 1641:
     case 4457:
     case 2921:
+    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
     case 5572:
     case 6356:
     case 5844:
     case 3191:
     case 6645:
     case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
     case 6391:
     case 5879:
     case 5623:
     case 6135:
     case 4599:
     case 4855:
+    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
     case 4215:
     case 6389:
     case 5109:
@@ -4727,57 +5487,77 @@ function prefix(value, length2, children) {
     case 5621:
     case 3829:
       return WEBKIT + value + value;
+    // tab-size
     case 4789:
       return MOZ + value + value;
+    // appearance, user-select, transform, hyphens, text-size-adjust
     case 5349:
     case 4246:
     case 4810:
     case 6968:
     case 2756:
       return WEBKIT + value + MOZ + value + MS + value + value;
+    // writing-mode
     case 5936:
       switch (charat(value, length2 + 11)) {
+        // vertical-l(r)
         case 114:
           return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb") + value;
+        // vertical-r(l)
         case 108:
           return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb-rl") + value;
+        // horizontal(-)tb
         case 45:
           return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "lr") + value;
       }
+    // flex, flex-direction, scroll-snap-type, writing-mode
     case 6828:
     case 4268:
     case 2903:
       return WEBKIT + value + MS + value + value;
+    // order
     case 6165:
       return WEBKIT + value + MS + "flex-" + value + value;
+    // align-items
     case 5187:
       return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + "box-$1$2" + MS + "flex-$1$2") + value;
+    // align-self
     case 5443:
       return WEBKIT + value + MS + "flex-item-" + replace(value, /flex-|-self/g, "") + (!match(value, /flex-|baseline/) ? MS + "grid-row-" + replace(value, /flex-|-self/g, "") : "") + value;
+    // align-content
     case 4675:
       return WEBKIT + value + MS + "flex-line-pack" + replace(value, /align-content|flex-|-self/g, "") + value;
+    // flex-shrink
     case 5548:
       return WEBKIT + value + MS + replace(value, "shrink", "negative") + value;
+    // flex-basis
     case 5292:
       return WEBKIT + value + MS + replace(value, "basis", "preferred-size") + value;
+    // flex-grow
     case 6060:
       return WEBKIT + "box-" + replace(value, "-grow", "") + WEBKIT + value + MS + replace(value, "grow", "positive") + value;
+    // transition
     case 4554:
       return WEBKIT + replace(value, /([^-])(transform)/g, "$1" + WEBKIT + "$2") + value;
+    // cursor
     case 6187:
       return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + "$1"), /(image-set)/, WEBKIT + "$1"), value, "") + value;
+    // background, background-image
     case 5495:
     case 3959:
       return replace(value, /(image-set\([^]*)/, WEBKIT + "$1$`$1");
+    // justify-content
     case 4968:
       return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + "box-pack:$3" + MS + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + WEBKIT + value + value;
+    // justify-self
     case 4200:
-      if (!match(value, /flex-|baseline/))
-        return MS + "grid-column-align" + substr(value, length2) + value;
+      if (!match(value, /flex-|baseline/)) return MS + "grid-column-align" + substr(value, length2) + value;
       break;
+    // grid-template-(columns|rows)
     case 2592:
     case 3360:
       return MS + replace(value, "template-", "") + value;
+    // grid-(row|column)-start
     case 4384:
     case 3616:
       if (children && children.some(function(element, index) {
@@ -4786,16 +5566,19 @@ function prefix(value, length2, children) {
         return ~indexof(value + (children = children[length2].value), "span", 0) ? value : MS + replace(value, "-start", "") + value + MS + "grid-row-span:" + (~indexof(children, "span", 0) ? match(children, /\d+/) : +match(children, /\d+/) - +match(value, /\d+/)) + ";";
       }
       return MS + replace(value, "-start", "") + value;
+    // grid-(row|column)-end
     case 4896:
     case 4128:
       return children && children.some(function(element) {
         return match(element.props, /grid-\w+-start/);
       }) ? value : MS + replace(replace(value, "-end", "-span"), "span ", "") + value;
+    // (margin|padding)-inline-(start|end)
     case 4095:
     case 3583:
     case 4068:
     case 2532:
       return replace(value, /(.+)-inline(.+)/, WEBKIT + "$1$2") + value;
+    // (min|max)?(width|height|inline-size|block-size)
     case 8116:
     case 7059:
     case 5753:
@@ -4810,32 +5593,41 @@ function prefix(value, length2, children) {
     case 4765:
       if (strlen(value) - 1 - length2 > 6)
         switch (charat(value, length2 + 1)) {
+          // (m)ax-content, (m)in-content
           case 109:
             if (charat(value, length2 + 4) !== 45)
               break;
+          // (f)ill-available, (f)it-content
           case 102:
             return replace(value, /(.+:)(.+)-([^]+)/, "$1" + WEBKIT + "$2-$3$1" + MOZ + (charat(value, length2 + 3) == 108 ? "$3" : "$2-$3")) + value;
+          // (s)tretch
           case 115:
             return ~indexof(value, "stretch", 0) ? prefix(replace(value, "stretch", "fill-available"), length2, children) + value : value;
         }
       break;
+    // grid-(column|row)
     case 5152:
     case 5920:
-      return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function(_2, a2, b, c2, d, e, f2) {
-        return MS + a2 + ":" + b + f2 + (c2 ? MS + a2 + "-span:" + (d ? e : +e - +b) + f2 : "") + value;
+      return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function(_2, a2, b2, c2, d, e, f2) {
+        return MS + a2 + ":" + b2 + f2 + (c2 ? MS + a2 + "-span:" + (d ? e : +e - +b2) + f2 : "") + value;
       });
+    // position: sticky
     case 4949:
       if (charat(value, length2 + 6) === 121)
         return replace(value, ":", ":" + WEBKIT) + value;
       break;
+    // display: (flex|inline-flex|grid|inline-grid)
     case 6444:
       switch (charat(value, charat(value, 14) === 45 ? 18 : 11)) {
+        // (inline-)?fle(x)
         case 120:
           return replace(value, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, "$1" + WEBKIT + (charat(value, 14) === 45 ? "inline-" : "") + "box$3$1" + WEBKIT + "$2$3$1" + MS + "$2box$3") + value;
+        // (inline-)?gri(d)
         case 100:
           return replace(value, ":", ":" + MS) + value;
       }
       break;
+    // scroll-margin, scroll-margin-(top|right|bottom|left)
     case 5719:
     case 2647:
     case 2135:
@@ -4856,8 +5648,7 @@ function serialize(children, callback) {
 function stringify(element, index, children, callback) {
   switch (element.type) {
     case LAYER:
-      if (element.children.length)
-        break;
+      if (element.children.length) break;
     case IMPORT:
     case DECLARATION:
       return element.return = element.return || element.value;
@@ -4866,8 +5657,7 @@ function stringify(element, index, children, callback) {
     case KEYFRAMES:
       return element.return = element.value + "{" + serialize(element.children, callback) + "}";
     case RULESET:
-      if (!strlen(element.value = element.props.join(",")))
-        return "";
+      if (!strlen(element.value = element.props.join(","))) return "";
   }
   return strlen(children = serialize(element.children, callback)) ? element.return = element.value + "{" + children + "}" : "";
 }
@@ -4903,12 +5693,14 @@ function prefixer(element, index, children, callback) {
           if (element.length)
             return combine(children = element.props, function(value) {
               switch (match(value, callback = /(::plac\w+|:read-\w+)/)) {
+                // :read-(only|write)
                 case ":read-only":
                 case ":read-write":
                   lift(copy(element, { props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")] }));
                   lift(copy(element, { props: [value] }));
                   assign2(element, { props: filter(children, callback) });
                   break;
+                // :placeholder
                 case "::placeholder":
                   lift(copy(element, { props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")] }));
                   lift(copy(element, { props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")] }));
@@ -4982,6 +5774,7 @@ var v = "6.1.13";
 var g = "/*!sc*/\n";
 var S = "undefined" != typeof window && "HTMLElement" in window;
 var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
+var b = {};
 var E = /invalid hook call/i;
 var N = /* @__PURE__ */ new Set();
 var P = function(t, n) {
@@ -4990,8 +5783,7 @@ var P = function(t, n) {
     try {
       var a2 = true;
       console.error = function(t2) {
-        for (var n2 = [], o3 = 1; o3 < arguments.length; o3++)
-          n2[o3 - 1] = arguments[o3];
+        for (var n2 = [], o3 = 1; o3 < arguments.length; o3++) n2[o3 - 1] = arguments[o3];
         E.test(t2) ? (a2 = false, N.delete(s2)) : i2.apply(void 0, __spreadArray([t2], n2, false));
       }, (0, import_react.useRef)(), a2 && !N.has(s2) && (console.warn(s2), N.add(s2));
     } catch (e) {
@@ -5019,15 +5811,13 @@ var j = function(e) {
 };
 function x(e) {
   var t, n = "";
-  for (t = Math.abs(e); t > k; t = t / k | 0)
-    n = j(t % k) + n;
+  for (t = Math.abs(e); t > k; t = t / k | 0) n = j(t % k) + n;
   return (j(t % k) + n).replace(T, "$1-$2");
 }
 var V;
 var F = 5381;
 var M = function(e, t) {
-  for (var n = t.length; n; )
-    e = 33 * e ^ t.charCodeAt(--n);
+  for (var n = t.length; n; ) e = 33 * e ^ t.charCodeAt(--n);
   return e;
 };
 var z = function(e) {
@@ -5090,24 +5880,17 @@ function ie(e, t) {
   return e && t ? "".concat(e, " ").concat(t) : e || t || "";
 }
 function ae(e, t) {
-  if (0 === e.length)
-    return "";
-  for (var n = e[0], o2 = 1; o2 < e.length; o2++)
-    n += t ? t + e[o2] : e[o2];
+  if (0 === e.length) return "";
+  for (var n = e[0], o2 = 1; o2 < e.length; o2++) n += t ? t + e[o2] : e[o2];
   return n;
 }
 function ce(e) {
   return null !== e && "object" == typeof e && e.constructor.name === Object.name && !("props" in e && e.$$typeof);
 }
 function le(e, t, n) {
-  if (void 0 === n && (n = false), !n && !ce(e) && !Array.isArray(e))
-    return t;
-  if (Array.isArray(t))
-    for (var o2 = 0; o2 < t.length; o2++)
-      e[o2] = le(e[o2], t[o2]);
-  else if (ce(t))
-    for (var o2 in t)
-      e[o2] = le(e[o2], t[o2]);
+  if (void 0 === n && (n = false), !n && !ce(e) && !Array.isArray(e)) return t;
+  if (Array.isArray(t)) for (var o2 = 0; o2 < t.length; o2++) e[o2] = le(e[o2], t[o2]);
+  else if (ce(t)) for (var o2 in t) e[o2] = le(e[o2], t[o2]);
   return e;
 }
 function ue(e, t) {
@@ -5115,17 +5898,14 @@ function ue(e, t) {
 }
 var pe = true ? { 1: "Cannot create styled-component for component: %s.\n\n", 2: "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n", 3: "Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n", 4: "The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n", 5: "The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n", 6: "Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n", 7: 'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n', 8: 'ThemeProvider: Please make your "theme" prop an object.\n\n', 9: "Missing document `<head>`\n\n", 10: "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n", 11: "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n", 12: "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n", 13: "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n", 14: 'ThemeProvider: "theme" prop is required.\n\n', 15: "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n", 16: "Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n", 17: "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n", 18: "ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`" } : {};
 function de() {
-  for (var e = [], t = 0; t < arguments.length; t++)
-    e[t] = arguments[t];
-  for (var n = e[0], o2 = [], r2 = 1, s2 = e.length; r2 < s2; r2 += 1)
-    o2.push(e[r2]);
+  for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t];
+  for (var n = e[0], o2 = [], r2 = 1, s2 = e.length; r2 < s2; r2 += 1) o2.push(e[r2]);
   return o2.forEach(function(e2) {
     n = n.replace(/%[a-z]/, e2);
   }), n;
 }
 function he(t) {
-  for (var n = [], o2 = 1; o2 < arguments.length; o2++)
-    n[o2 - 1] = arguments[o2];
+  for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
   return false ? new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t, " for more information.").concat(n.length > 0 ? " Args: ".concat(n.join(", ")) : "")) : new Error(de.apply(void 0, __spreadArray([pe[t]], n, false)).trim());
 }
 var fe = function() {
@@ -5133,33 +5913,25 @@ var fe = function() {
     this.groupSizes = new Uint32Array(512), this.length = 512, this.tag = e2;
   }
   return e.prototype.indexOfGroup = function(e2) {
-    for (var t = 0, n = 0; n < e2; n++)
-      t += this.groupSizes[n];
+    for (var t = 0, n = 0; n < e2; n++) t += this.groupSizes[n];
     return t;
   }, e.prototype.insertRules = function(e2, t) {
     if (e2 >= this.groupSizes.length) {
-      for (var n = this.groupSizes, o2 = n.length, r2 = o2; e2 >= r2; )
-        if ((r2 <<= 1) < 0)
-          throw he(16, "".concat(e2));
+      for (var n = this.groupSizes, o2 = n.length, r2 = o2; e2 >= r2; ) if ((r2 <<= 1) < 0) throw he(16, "".concat(e2));
       this.groupSizes = new Uint32Array(r2), this.groupSizes.set(n), this.length = r2;
-      for (var s2 = o2; s2 < r2; s2++)
-        this.groupSizes[s2] = 0;
+      for (var s2 = o2; s2 < r2; s2++) this.groupSizes[s2] = 0;
     }
-    for (var i2 = this.indexOfGroup(e2 + 1), a2 = (s2 = 0, t.length); s2 < a2; s2++)
-      this.tag.insertRule(i2, t[s2]) && (this.groupSizes[e2]++, i2++);
+    for (var i2 = this.indexOfGroup(e2 + 1), a2 = (s2 = 0, t.length); s2 < a2; s2++) this.tag.insertRule(i2, t[s2]) && (this.groupSizes[e2]++, i2++);
   }, e.prototype.clearGroup = function(e2) {
     if (e2 < this.length) {
       var t = this.groupSizes[e2], n = this.indexOfGroup(e2), o2 = n + t;
       this.groupSizes[e2] = 0;
-      for (var r2 = n; r2 < o2; r2++)
-        this.tag.deleteRule(n);
+      for (var r2 = n; r2 < o2; r2++) this.tag.deleteRule(n);
     }
   }, e.prototype.getGroup = function(e2) {
     var t = "";
-    if (e2 >= this.length || 0 === this.groupSizes[e2])
-      return t;
-    for (var n = this.groupSizes[e2], o2 = this.indexOfGroup(e2), r2 = o2 + n, s2 = o2; s2 < r2; s2++)
-      t += "".concat(this.tag.getRule(s2)).concat(g);
+    if (e2 >= this.length || 0 === this.groupSizes[e2]) return t;
+    for (var n = this.groupSizes[e2], o2 = this.indexOfGroup(e2), r2 = o2 + n, s2 = o2; s2 < r2; s2++) t += "".concat(this.tag.getRule(s2)).concat(g);
     return t;
   }, e;
 }();
@@ -5168,13 +5940,10 @@ var ye = /* @__PURE__ */ new Map();
 var ve = /* @__PURE__ */ new Map();
 var ge = 1;
 var Se = function(e) {
-  if (ye.has(e))
-    return ye.get(e);
-  for (; ve.has(ge); )
-    ge++;
+  if (ye.has(e)) return ye.get(e);
+  for (; ve.has(ge); ) ge++;
   var t = ge++;
-  if ((0 | t) < 0 || t > me)
-    throw he(16, "".concat(t));
+  if ((0 | t) < 0 || t > me) throw he(16, "".concat(t));
   return ye.set(e, t), ve.set(t, e), t;
 };
 var we = function(e, t) {
@@ -5183,8 +5952,7 @@ var we = function(e, t) {
 var be = "style[".concat(f, "][").concat(y, '="').concat(v, '"]');
 var Ee = new RegExp("^".concat(f, '\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'));
 var Ne = function(e, t, n) {
-  for (var o2, r2 = n.split(","), s2 = 0, i2 = r2.length; s2 < i2; s2++)
-    (o2 = r2[s2]) && e.registerName(t, o2);
+  for (var o2, r2 = n.split(","), s2 = 0, i2 = r2.length; s2 < i2; s2++) (o2 = r2[s2]) && e.registerName(t, o2);
 };
 var Pe = function(e, t) {
   for (var n, o2 = (null !== (n = t.textContent) && void 0 !== n ? n : "").split(g), r2 = [], s2 = 0, i2 = o2.length; s2 < i2; s2++) {
@@ -5194,8 +5962,7 @@ var Pe = function(e, t) {
       if (c2) {
         var l2 = 0 | parseInt(c2[1], 10), u2 = c2[2];
         0 !== l2 && (we(u2, l2), Ne(e, u2, c2[3]), e.getTag().insertRules(l2, r2)), r2.length = 0;
-      } else
-        r2.push(a2);
+      } else r2.push(a2);
     }
   }
 };
@@ -5220,12 +5987,10 @@ var Ie = function(e) {
 var Ae = function() {
   function e(e2) {
     this.element = Ie(e2), this.element.appendChild(document.createTextNode("")), this.sheet = function(e3) {
-      if (e3.sheet)
-        return e3.sheet;
+      if (e3.sheet) return e3.sheet;
       for (var t = document.styleSheets, n = 0, o2 = t.length; n < o2; n++) {
         var r2 = t[n];
-        if (r2.ownerNode === e3)
-          return r2;
+        if (r2.ownerNode === e3) return r2;
       }
       throw he(17);
     }(this.element), this.length = 0;
@@ -5283,17 +6048,14 @@ var ke = function() {
           var r4 = function(e4) {
             return ve.get(e4);
           }(n3);
-          if (void 0 === r4)
-            return "continue";
+          if (void 0 === r4) return "continue";
           var s3 = e3.names.get(r4), i2 = t.getGroup(n3);
-          if (void 0 === s3 || !s3.size || 0 === i2.length)
-            return "continue";
+          if (void 0 === s3 || !s3.size || 0 === i2.length) return "continue";
           var a2 = "".concat(f, ".g").concat(n3, '[id="').concat(r4, '"]'), c2 = "";
           void 0 !== s3 && s3.forEach(function(e4) {
             e4.length > 0 && (c2 += "".concat(e4, ","));
           }), o3 += "".concat(i2).concat(a2, '{content:"').concat(c2, '"}').concat(g);
-        }, s2 = 0; s2 < n2; s2++)
-          r3(s2);
+        }, s2 = 0; s2 < n2; s2++) r3(s2);
         return o3;
       }(r2);
     });
@@ -5315,8 +6077,7 @@ var ke = function() {
   }, e.prototype.hasNameForId = function(e2, t) {
     return this.names.has(e2) && this.names.get(e2).has(t);
   }, e.prototype.registerName = function(e2, t) {
-    if (Se(e2), this.names.has(e2))
-      this.names.get(e2).add(t);
+    if (Se(e2), this.names.has(e2)) this.names.get(e2).add(t);
     else {
       var n = /* @__PURE__ */ new Set();
       n.add(t), this.names.set(e2, n);
@@ -5404,8 +6165,7 @@ var qe = function(e) {
 function He(e) {
   for (var t = "", n = 0; n < e.length; n++) {
     var o2 = e[n];
-    if (1 === n && "-" === o2 && "-" === e[0])
-      return e;
+    if (1 === n && "-" === o2 && "-" === e[0]) return e;
     qe(o2) ? t += "-" + o2.toLowerCase() : t += o2;
   }
   return t.startsWith("ms-") ? "-" + t : t;
@@ -5422,13 +6182,10 @@ var Je = function(t) {
   return r2;
 };
 function Xe(e, t, n, o2) {
-  if (Ue(e))
-    return [];
-  if (se(e))
-    return [".".concat(e.styledComponentId)];
+  if (Ue(e)) return [];
+  if (se(e)) return [".".concat(e.styledComponentId)];
   if (re(e)) {
-    if (!re(s2 = e) || s2.prototype && s2.prototype.isReactComponent || !t)
-      return [e];
+    if (!re(s2 = e) || s2.prototype && s2.prototype.isReactComponent || !t) return [e];
     var r2 = e(t);
     return "object" != typeof r2 || Array.isArray(r2) || r2 instanceof We || ce(r2) || null === r2 || console.error("".concat(B(e), " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")), Xe(r2, t, n, o2);
   }
@@ -5440,8 +6197,7 @@ function Xe(e, t, n, o2) {
 function Ze(e) {
   for (var t = 0; t < e.length; t += 1) {
     var n = e[t];
-    if (re(n) && !se(n))
-      return false;
+    if (re(n) && !se(n)) return false;
   }
   return true;
 }
@@ -5452,22 +6208,19 @@ var Qe = function() {
   }
   return e.prototype.generateAndInjectStyles = function(e2, t, n) {
     var o2 = this.baseStyle ? this.baseStyle.generateAndInjectStyles(e2, t, n) : "";
-    if (this.isStatic && !n.hash)
-      if (this.staticRulesId && t.hasNameForId(this.componentId, this.staticRulesId))
-        o2 = ie(o2, this.staticRulesId);
-      else {
-        var r2 = ae(Xe(this.rules, e2, t, n)), s2 = x(M(this.baseHash, r2) >>> 0);
-        if (!t.hasNameForId(this.componentId, s2)) {
-          var i2 = n(r2, ".".concat(s2), void 0, this.componentId);
-          t.insertRules(this.componentId, s2, i2);
-        }
-        o2 = ie(o2, s2), this.staticRulesId = s2;
+    if (this.isStatic && !n.hash) if (this.staticRulesId && t.hasNameForId(this.componentId, this.staticRulesId)) o2 = ie(o2, this.staticRulesId);
+    else {
+      var r2 = ae(Xe(this.rules, e2, t, n)), s2 = x(M(this.baseHash, r2) >>> 0);
+      if (!t.hasNameForId(this.componentId, s2)) {
+        var i2 = n(r2, ".".concat(s2), void 0, this.componentId);
+        t.insertRules(this.componentId, s2, i2);
       }
+      o2 = ie(o2, s2), this.staticRulesId = s2;
+    }
     else {
       for (var a2 = M(this.baseHash, n.hash), c2 = "", l2 = 0; l2 < this.rules.length; l2++) {
         var u2 = this.rules[l2];
-        if ("string" == typeof u2)
-          c2 += u2, a2 = M(a2, u2);
+        if ("string" == typeof u2) c2 += u2, a2 = M(a2, u2);
         else if (u2) {
           var p2 = ae(Xe(u2, e2, t, n));
           a2 = M(a2, p2 + l2), c2 += p2;
@@ -5486,16 +6239,13 @@ var tt = et.Consumer;
 function ot(e) {
   var n = import_react.default.useContext(et), r2 = (0, import_react.useMemo)(function() {
     return function(e2, n2) {
-      if (!e2)
-        throw he(14);
+      if (!e2) throw he(14);
       if (re(e2)) {
         var o2 = e2(n2);
-        if (null === o2 || Array.isArray(o2) || "object" != typeof o2)
-          throw he(7);
+        if (null === o2 || Array.isArray(o2) || "object" != typeof o2) throw he(7);
         return o2;
       }
-      if (Array.isArray(e2) || "object" != typeof e2)
-        throw he(8);
+      if (Array.isArray(e2) || "object" != typeof e2) throw he(8);
       return n2 ? __assign(__assign({}, n2), e2) : e2;
     }(e.theme, n);
   }, [e.theme, n]);
@@ -5513,14 +6263,13 @@ function it(e, r2, s2) {
     return L(e2) ? "styled.".concat(e2) : "Styled(".concat(B(e2), ")");
   }(e) : m2, g2 = r2.displayName && r2.componentId ? "".concat(R(r2.displayName), "-").concat(r2.componentId) : r2.componentId || f2, S2 = i2 && a2.attrs ? a2.attrs.concat(d).filter(Boolean) : d, w2 = r2.shouldForwardProp;
   if (i2 && a2.shouldForwardProp) {
-    var b = a2.shouldForwardProp;
+    var b2 = a2.shouldForwardProp;
     if (r2.shouldForwardProp) {
       var E2 = r2.shouldForwardProp;
       w2 = function(e2, t) {
-        return b(e2, t) && E2(e2, t);
+        return b2(e2, t) && E2(e2, t);
       };
-    } else
-      w2 = b;
+    } else w2 = b2;
   }
   var N2 = new Qe(s2, g2, i2 ? a2.componentStyle : void 0);
   function O2(e2, r3) {
@@ -5530,13 +6279,11 @@ function it(e, r2, s2) {
       var v2 = I(r4, f3, c3) || C, g3 = function(e4, n, o2) {
         for (var r5, s4 = __assign(__assign({}, n), { className: void 0, theme: o2 }), i4 = 0; i4 < e4.length; i4 += 1) {
           var a4 = re(r5 = e4[i4]) ? r5(s4) : r5;
-          for (var c4 in a4)
-            s4[c4] = "className" === c4 ? ie(s4[c4], a4[c4]) : "style" === c4 ? __assign(__assign({}, s4[c4]), a4[c4]) : a4[c4];
+          for (var c4 in a4) s4[c4] = "className" === c4 ? ie(s4[c4], a4[c4]) : "style" === c4 ? __assign(__assign({}, s4[c4]), a4[c4]) : a4[c4];
         }
         return n.className && (s4.className = ie(s4.className, n.className)), s4;
       }(i3, r4, v2), S3 = g3.as || h2, w3 = {};
-      for (var b2 in g3)
-        void 0 === g3[b2] || "$" === b2[0] || "as" === b2 || "theme" === b2 && g3.theme === v2 || ("forwardedAs" === b2 ? w3.as = g3.forwardedAs : y3 && !y3(b2, S3) || (w3[b2] = g3[b2], y3 || false || isPropValid(b2) || st.has(b2) || !A.has(S3) || (st.add(b2), console.warn('styled-components: it looks like an unknown prop "'.concat(b2, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
+      for (var b3 in g3) void 0 === g3[b3] || "$" === b3[0] || "as" === b3 || "theme" === b3 && g3.theme === v2 || ("forwardedAs" === b3 ? w3.as = g3.forwardedAs : y3 && !y3(b3, S3) || (w3[b3] = g3[b3], y3 || false || isPropValid(b3) || st.has(b3) || !A.has(S3) || (st.add(b3), console.warn('styled-components: it looks like an unknown prop "'.concat(b3, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
       var E3 = function(e4, t) {
         var n = Ge(), o2 = e4.generateAndInjectStyles(t, n.styleSheet, n.stylis);
         return (0, import_react.useDebugValue)(o2), o2;
@@ -5552,10 +6299,8 @@ function it(e, r2, s2) {
     return this._foldedDefaultProps;
   }, set: function(e2) {
     this._foldedDefaultProps = i2 ? function(e3) {
-      for (var t = [], n = 1; n < arguments.length; n++)
-        t[n - 1] = arguments[n];
-      for (var o2 = 0, r3 = t; o2 < r3.length; o2++)
-        le(e3, r3[o2], true);
+      for (var t = [], n = 1; n < arguments.length; n++) t[n - 1] = arguments[n];
+      for (var o2 = 0, r3 = t; o2 < r3.length; o2++) le(e3, r3[o2], true);
       return e3;
     }({}, a2.defaultProps, e2) : e2;
   } }), P(y2, g2), D2.warnTooManyClasses = /* @__PURE__ */ function(e2, t) {
@@ -5571,27 +6316,22 @@ function it(e, r2, s2) {
   }), c2 && oe(D2, e, { attrs: true, componentStyle: true, displayName: true, foldedComponentIds: true, shouldForwardProp: true, styledComponentId: true, target: true }), D2;
 }
 function at(e, t) {
-  for (var n = [e[0]], o2 = 0, r2 = t.length; o2 < r2; o2 += 1)
-    n.push(t[o2], e[o2 + 1]);
+  for (var n = [e[0]], o2 = 0, r2 = t.length; o2 < r2; o2 += 1) n.push(t[o2], e[o2 + 1]);
   return n;
 }
 var ct = function(e) {
   return Object.assign(e, { isCss: true });
 };
 function lt(t) {
-  for (var n = [], o2 = 1; o2 < arguments.length; o2++)
-    n[o2 - 1] = arguments[o2];
-  if (re(t) || ce(t))
-    return ct(Xe(at(_, __spreadArray([t], n, true))));
+  for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
+  if (re(t) || ce(t)) return ct(Xe(at(_, __spreadArray([t], n, true))));
   var r2 = t;
   return 0 === n.length && 1 === r2.length && "string" == typeof r2[0] ? Xe(r2) : ct(Xe(at(r2, n)));
 }
 function ut(n, o2, r2) {
-  if (void 0 === r2 && (r2 = C), !o2)
-    throw he(1, o2);
+  if (void 0 === r2 && (r2 = C), !o2) throw he(1, o2);
   var s2 = function(t) {
-    for (var s3 = [], i2 = 1; i2 < arguments.length; i2++)
-      s3[i2 - 1] = arguments[i2];
+    for (var s3 = [], i2 = 1; i2 < arguments.length; i2++) s3[i2 - 1] = arguments[i2];
     return n(o2, r2, lt.apply(void 0, __spreadArray([t], s3, false)));
   };
   return s2.attrs = function(e) {
@@ -5620,26 +6360,45 @@ var ht = function() {
     e2 > 2 && ke.registerId(this.componentId + e2), this.removeStyles(e2, n), this.createStyles(e2, t, n, o2);
   }, e;
 }();
+function ft(n) {
+  for (var r2 = [], s2 = 1; s2 < arguments.length; s2++) r2[s2 - 1] = arguments[s2];
+  var i2 = lt.apply(void 0, __spreadArray([n], r2, false)), a2 = "sc-global-".concat($(JSON.stringify(i2))), c2 = new ht(i2, a2);
+  P(a2);
+  var l2 = function(e) {
+    var t = Ge(), n2 = import_react.default.useContext(et), r3 = import_react.default.useRef(t.styleSheet.allocateGSInstance(a2)).current;
+    return import_react.default.Children.count(e.children) && console.warn("The global style component ".concat(a2, " was given child JSX. createGlobalStyle does not render children.")), i2.some(function(e2) {
+      return "string" == typeof e2 && -1 !== e2.indexOf("@import");
+    }) && console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."), t.styleSheet.server && u2(r3, e, t.styleSheet, n2, t.stylis), import_react.default.useLayoutEffect(function() {
+      if (!t.styleSheet.server) return u2(r3, e, t.styleSheet, n2, t.stylis), function() {
+        return c2.removeStyles(r3, t.styleSheet);
+      };
+    }, [r3, e, t.styleSheet, n2, t.stylis]), null;
+  };
+  function u2(e, n2, o2, r3, s3) {
+    if (c2.isStatic) c2.renderStyles(e, b, o2, s3);
+    else {
+      var i3 = __assign(__assign({}, n2), { theme: I(n2, r3, l2.defaultProps) });
+      c2.renderStyles(e, i3, o2, s3);
+    }
+  }
+  return import_react.default.memo(l2);
+}
 var vt = function() {
   function e() {
     var e2 = this;
     this._emitSheetCSS = function() {
       var t = e2.instance.toString();
-      if (!t)
-        return "";
+      if (!t) return "";
       var n = Ce(), o2 = ae([n && 'nonce="'.concat(n, '"'), "".concat(f, '="true"'), "".concat(y, '="').concat(v, '"')].filter(Boolean), " ");
       return "<style ".concat(o2, ">").concat(t, "</style>");
     }, this.getStyleTags = function() {
-      if (e2.sealed)
-        throw he(2);
+      if (e2.sealed) throw he(2);
       return e2._emitSheetCSS();
     }, this.getStyleElement = function() {
       var n;
-      if (e2.sealed)
-        throw he(2);
+      if (e2.sealed) throw he(2);
       var r2 = e2.instance.toString();
-      if (!r2)
-        return [];
+      if (!r2) return [];
       var s2 = ((n = {})[f] = "", n[y] = v, n.dangerouslySetInnerHTML = { __html: r2 }, n), i2 = Ce();
       return i2 && (s2.nonce = i2), [import_react.default.createElement("style", __assign({}, s2, { key: "sc-0-0" }))];
     }, this.seal = function() {
@@ -5647,8 +6406,7 @@ var vt = function() {
     }, this.instance = new ke({ isServer: true }), this.sealed = false;
   }
   return e.prototype.collectStyles = function(e2) {
-    if (this.sealed)
-      throw he(2);
+    if (this.sealed) throw he(2);
     return import_react.default.createElement(Ye, { sheet: this.instance }, e2);
   }, e.prototype.interleaveWithNodeStream = function(e2) {
     throw he(3);
@@ -5658,6 +6416,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\/?(\?.*)?$/;
@@ -6158,7 +6919,8 @@ function ChangeSubscriptionRequestBodyToJSON(value) {
   }
   return {
     new_plan_id: value["newPlanId"],
-    new_price_id: value["newPriceId"]
+    new_price_id: value["newPriceId"],
+    payment_method_id: value["paymentMethodId"]
   };
 }
 
@@ -6708,7 +7470,8 @@ function StripeEmbedInfoFromJSONTyped(json, ignoreDiscriminator) {
   }
   return {
     customerEkey: json["customer_ekey"] == null ? void 0 : json["customer_ekey"],
-    publishableKey: json["publishable_key"]
+    publishableKey: json["publishable_key"],
+    setupIntentClientSecret: json["setup_intent_client_secret"] == null ? void 0 : json["setup_intent_client_secret"]
   };
 }
 
@@ -6728,7 +7491,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"])
   };
 }
 
@@ -6838,70 +7602,378 @@ var CheckoutApi = class extends BaseAPI {
 
 // src/context/embed.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var defaultTheme = {
-  numberOfColumns: 2,
-  sectionLayout: "merged",
-  colorMode: "light",
-  primary: "#000000",
-  secondary: "#000000",
-  card: {
-    background: "#FFFFFF",
-    borderRadius: 10,
-    hasShadow: true,
-    padding: 45
-  },
-  typography: {
-    heading1: {
-      fontFamily: "Manrope",
-      fontSize: 37,
-      fontWeight: 800,
-      color: "#000000"
-    },
-    heading2: {
-      fontFamily: "Manrope",
-      fontSize: 29,
-      fontWeight: 800,
-      color: "#000000"
-    },
-    heading3: {
-      fontFamily: "Manrope",
-      fontSize: 20,
-      fontWeight: 600,
-      color: "#000000"
-    },
-    heading4: {
-      fontFamily: "Manrope",
-      fontSize: 18,
-      fontWeight: 800,
-      color: "#000000"
-    },
-    heading5: {
-      fontFamily: "Public Sans",
-      fontSize: 17,
-      fontWeight: 500,
-      color: "#000000"
-    },
-    heading6: {
-      fontFamily: "Public Sans",
-      fontSize: 14,
-      fontWeight: 400,
-      color: "#8A8A8A"
-    },
-    text: {
-      fontFamily: "Public Sans",
-      fontSize: 16,
-      fontWeight: 400,
-      color: "#000000"
-    },
-    link: {
-      fontFamily: "Inter",
-      fontSize: 16,
-      fontWeight: 400,
-      color: "#194BFB"
-    }
+var GlobalStyle = ft`
+  @font-face {
+    font-family: "icons";
+    src: url(data:font/ttf;base64,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AREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAElASYBJwEoASkBKgErASwBLQEuAS8BMAExATIBMwE0ATUBNgE3ATgBOQE6ATsBPAE9AT4BPwFAAUEBQgFDAUQBRQFGAUcBSAFJAUoBSwFMAU0BTgFPAVABUQFSAVMBVAFVAVYBVwFYAVkBWgFbAVwBXQFeAV8BYAFhAWIBYwAFYWxhcm0MYXJyb3ctY3VydmVkCmFycm93LWRvd24KYXJyb3ctbGVmdAthcnJvdy1yaWdodAhhcnJvdy11cAxhcnJvdy11cHdhcmQJYmFja3NwYWNlBGJlbGwFYm9hcmQIYm9va21hcmsKYm9vbGVhbi1vbgdib29sZWFuBGJ1bGIGYnVyZ2VyDWNoZWNrLXJvdW5kZWQFY2hlY2sMY2hldnJvbi1kb3duDGNoZXZyb24tbGVmdA1jaGV2cm9uLXJpZ2h0CmNoZXZyb24tdXAEY2hpcAVjaGlwcxRjbG9zZS1yb3VuZGVkLWZpbGxlZAVjbG9zZQhjbG91ZC11cARjbHViA2NtZARjb2RlBmNvZmZlZQNjb2cOY29sbGFwc2UtZW1wdHkIY29sbGFwc2UHY29tcGFzcwpjb25uZWN0aW9uBGNvcHkHY3lsbmRlcgdkaWFtb25kDmRvbGxhci1yb3VuZGVkD2RvdHMtaG9yaXpvbnRhbA1kb3RzLXZlcnRpY2FsDGVudGl0bGVtZW50cwllcXVhbGl6ZXIaZXhjbGFtYXRpb24tcm91bmRlZC1maWxsZWQDZXllBmZpbHRlcgxmb2xkZXItbWludXMLZm9sZGVyLXBsdXMGZm9sZGVyB2dsYXNzZXMFZ2xvYmUGaGFtbWVyBGhhc2gFaGVhcnQHaHVic3BvdAVpbWFnZQxpbmZvLXJvdW5kZWQFanVpY2UDa2V5BW11c2ljCm5vZGUtbWludXMJbm9kZS1wbHVzB3BhY2thZ2ULcGFwZXItcGxhbmUGcGVuY2lsBnBpY2tlcgRwbGFuBHBsdWcKcGx1cy1taW51cxRwbHVzLXJvdW5kZWQtb3V0bGluZQdwcmVzZW50CXNjaGVtYXRpYwZzZWFyY2gHc2VnbWVudA1zZXJ2ZXItc2VhcmNoB3NpZGViYXIGc2lnbmFsB3NpbGVuY2UFc3BhZGUHc3BlYWtlcgZzdGFja3MGc3RyaXBlBHRleHQHdGh1bmRlcgd0b3JuYWRvBXRydWNrBHR1YmULdW5wcm90ZWN0ZWQIdmVyaWZpZWQMdmlkZW8tY2FtZXJhBndhbGxldAp3YXRjaC1oYW5kDHdhdGNoLXBvY2tldAp3YXRlci1kcm9wBXdhdmVzB3dlYmhvb2sEd2luZAAAAA==)
+      format("truetype");
   }
-};
-var defaultSettings = {
+
+  i[class^="i-"]:before,
+  i[class*=" i-"]:before {
+    font-family: icons !important;
+    font-style: normal;
+    font-weight: normal !important;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .i-alarm:before {
+    content: "\\f101";
+  }
+  .i-arrow-curved:before {
+    content: "\\f102";
+  }
+  .i-arrow-down:before {
+    content: "\\f103";
+  }
+  .i-arrow-left:before {
+    content: "\\f104";
+  }
+  .i-arrow-right:before {
+    content: "\\f105";
+  }
+  .i-arrow-up:before {
+    content: "\\f106";
+  }
+  .i-arrow-upward:before {
+    content: "\\f107";
+  }
+  .i-backspace:before {
+    content: "\\f108";
+  }
+  .i-bell:before {
+    content: "\\f109";
+  }
+  .i-board:before {
+    content: "\\f10a";
+  }
+  .i-bookmark:before {
+    content: "\\f10b";
+  }
+  .i-boolean-on:before {
+    content: "\\f10c";
+  }
+  .i-boolean:before {
+    content: "\\f10d";
+  }
+  .i-bulb:before {
+    content: "\\f10e";
+  }
+  .i-burger:before {
+    content: "\\f10f";
+  }
+  .i-check-rounded:before {
+    content: "\\f110";
+  }
+  .i-check:before {
+    content: "\\f111";
+  }
+  .i-chevron-down:before {
+    content: "\\f112";
+  }
+  .i-chevron-left:before {
+    content: "\\f113";
+  }
+  .i-chevron-right:before {
+    content: "\\f114";
+  }
+  .i-chevron-up:before {
+    content: "\\f115";
+  }
+  .i-chip:before {
+    content: "\\f116";
+  }
+  .i-chips:before {
+    content: "\\f117";
+  }
+  .i-close-rounded-filled:before {
+    content: "\\f118";
+  }
+  .i-close:before {
+    content: "\\f119";
+  }
+  .i-cloud-up:before {
+    content: "\\f11a";
+  }
+  .i-club:before {
+    content: "\\f11b";
+  }
+  .i-cmd:before {
+    content: "\\f11c";
+  }
+  .i-code:before {
+    content: "\\f11d";
+  }
+  .i-coffee:before {
+    content: "\\f11e";
+  }
+  .i-cog:before {
+    content: "\\f11f";
+  }
+  .i-collapse-empty:before {
+    content: "\\f120";
+  }
+  .i-collapse:before {
+    content: "\\f121";
+  }
+  .i-compass:before {
+    content: "\\f122";
+  }
+  .i-connection:before {
+    content: "\\f123";
+  }
+  .i-copy:before {
+    content: "\\f124";
+  }
+  .i-cylnder:before {
+    content: "\\f125";
+  }
+  .i-diamond:before {
+    content: "\\f126";
+  }
+  .i-dollar-rounded:before {
+    content: "\\f127";
+  }
+  .i-dots-horizontal:before {
+    content: "\\f128";
+  }
+  .i-dots-vertical:before {
+    content: "\\f129";
+  }
+  .i-entitlements:before {
+    content: "\\f12a";
+  }
+  .i-equalizer:before {
+    content: "\\f12b";
+  }
+  .i-exclamation-rounded-filled:before {
+    content: "\\f12c";
+  }
+  .i-eye:before {
+    content: "\\f12d";
+  }
+  .i-filter:before {
+    content: "\\f12e";
+  }
+  .i-folder-minus:before {
+    content: "\\f12f";
+  }
+  .i-folder-plus:before {
+    content: "\\f130";
+  }
+  .i-folder:before {
+    content: "\\f131";
+  }
+  .i-glasses:before {
+    content: "\\f132";
+  }
+  .i-globe:before {
+    content: "\\f133";
+  }
+  .i-hammer:before {
+    content: "\\f134";
+  }
+  .i-hash:before {
+    content: "\\f135";
+  }
+  .i-heart:before {
+    content: "\\f136";
+  }
+  .i-hubspot:before {
+    content: "\\f137";
+  }
+  .i-image:before {
+    content: "\\f138";
+  }
+  .i-info-rounded:before {
+    content: "\\f139";
+  }
+  .i-juice:before {
+    content: "\\f13a";
+  }
+  .i-key:before {
+    content: "\\f13b";
+  }
+  .i-music:before {
+    content: "\\f13c";
+  }
+  .i-node-minus:before {
+    content: "\\f13d";
+  }
+  .i-node-plus:before {
+    content: "\\f13e";
+  }
+  .i-package:before {
+    content: "\\f13f";
+  }
+  .i-paper-plane:before {
+    content: "\\f140";
+  }
+  .i-pencil:before {
+    content: "\\f141";
+  }
+  .i-picker:before {
+    content: "\\f142";
+  }
+  .i-plan:before {
+    content: "\\f143";
+  }
+  .i-plug:before {
+    content: "\\f144";
+  }
+  .i-plus-minus:before {
+    content: "\\f145";
+  }
+  .i-plus-rounded-outline:before {
+    content: "\\f146";
+  }
+  .i-present:before {
+    content: "\\f147";
+  }
+  .i-schematic:before {
+    content: "\\f148";
+  }
+  .i-search:before {
+    content: "\\f149";
+  }
+  .i-segment:before {
+    content: "\\f14a";
+  }
+  .i-server-search:before {
+    content: "\\f14b";
+  }
+  .i-sidebar:before {
+    content: "\\f14c";
+  }
+  .i-signal:before {
+    content: "\\f14d";
+  }
+  .i-silence:before {
+    content: "\\f14e";
+  }
+  .i-spade:before {
+    content: "\\f14f";
+  }
+  .i-speaker:before {
+    content: "\\f150";
+  }
+  .i-stacks:before {
+    content: "\\f151";
+  }
+  .i-stripe:before {
+    content: "\\f152";
+  }
+  .i-text:before {
+    content: "\\f153";
+  }
+  .i-thunder:before {
+    content: "\\f154";
+  }
+  .i-tornado:before {
+    content: "\\f155";
+  }
+  .i-truck:before {
+    content: "\\f156";
+  }
+  .i-tube:before {
+    content: "\\f157";
+  }
+  .i-unprotected:before {
+    content: "\\f158";
+  }
+  .i-verified:before {
+    content: "\\f159";
+  }
+  .i-video-camera:before {
+    content: "\\f15a";
+  }
+  .i-wallet:before {
+    content: "\\f15b";
+  }
+  .i-watch-hand:before {
+    content: "\\f15c";
+  }
+  .i-watch-pocket:before {
+    content: "\\f15d";
+  }
+  .i-water-drop:before {
+    content: "\\f15e";
+  }
+  .i-waves:before {
+    content: "\\f15f";
+  }
+  .i-webhook:before {
+    content: "\\f160";
+  }
+  .i-wind:before {
+    content: "\\f161";
+  }
+`;
+var defaultTheme = {
+  numberOfColumns: 2,
+  sectionLayout: "merged",
+  colorMode: "light",
+  primary: "#000000",
+  secondary: "#000000",
+  card: {
+    background: "#FFFFFF",
+    borderRadius: 10,
+    hasShadow: true,
+    padding: 45
+  },
+  typography: {
+    heading1: {
+      fontFamily: "Manrope",
+      fontSize: 37,
+      fontWeight: 800,
+      color: "#000000"
+    },
+    heading2: {
+      fontFamily: "Manrope",
+      fontSize: 29,
+      fontWeight: 800,
+      color: "#000000"
+    },
+    heading3: {
+      fontFamily: "Manrope",
+      fontSize: 20,
+      fontWeight: 600,
+      color: "#000000"
+    },
+    heading4: {
+      fontFamily: "Manrope",
+      fontSize: 18,
+      fontWeight: 800,
+      color: "#000000"
+    },
+    heading5: {
+      fontFamily: "Public Sans",
+      fontSize: 17,
+      fontWeight: 500,
+      color: "#000000"
+    },
+    heading6: {
+      fontFamily: "Public Sans",
+      fontSize: 14,
+      fontWeight: 400,
+      color: "#8A8A8A"
+    },
+    text: {
+      fontFamily: "Public Sans",
+      fontSize: 16,
+      fontWeight: 400,
+      color: "#000000"
+    },
+    link: {
+      fontFamily: "Inter",
+      fontSize: 16,
+      fontWeight: 400,
+      color: "#194BFB"
+    }
+  }
+};
+var defaultSettings = {
   theme: defaultTheme
 };
 function isEditorState(obj) {
@@ -6929,11 +8001,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) {
@@ -6943,7 +8013,7 @@ async function fetchComponent(id, accessToken, options) {
     });
     const ast = getEditorState(json);
     if (ast) {
-      Object.assign(settings, ast.ROOT.props);
+      (0, import_lodash.default)(settings, ast.ROOT.props.settings);
       nodes.push(...parseEditorState(ast));
     }
   }
@@ -6959,7 +8029,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 +8056,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 +8087,21 @@ var EmbedProvider = ({
     styleRef.current = style;
   }, []);
   (0, import_react2.useEffect)(() => {
-    if (!id || !accessToken) {
+    if (!accessToken) {
+      return;
+    }
+    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, accessToken, apiConfig).then(async (resolvedData) => {
+    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 +8116,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 +8183,9 @@ var EmbedProvider = ({
                 }
               }
             },
-            ...state.data.stripeEmbed?.customerEkey && {
-              clientSecret: state.data.stripeEmbed.customerEkey
-            }
+            ...state.data.stripeEmbed?.setupIntentClientSecret ? {
+              clientSecret: state.data.stripeEmbed?.setupIntentClientSecret
+            } : { mode: "payment", currency: "usd", amount: 999999 }
           },
           children
         }
@@ -7111,6 +8197,7 @@ var EmbedProvider = ({
     EmbedContext.Provider,
     {
       value: {
+        api: state.api,
         data: state.data,
         nodes: state.nodes,
         settings: state.settings,
@@ -7122,7 +8209,10 @@ var EmbedProvider = ({
         setStripe,
         setLayout
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ot, { theme: state.settings.theme, children: renderChildren() })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ot, { theme: state.settings.theme, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStyle, {}),
+        renderChildren()
+      ] })
     }
   );
 };
@@ -7157,11 +8247,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 +8259,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 +8637,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 +8689,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 +8728,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;
@@ -8061,43 +9151,38 @@ var useSchematicFlag = (key, opts) => {
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/utils/color.ts
 function hexToHSL(color) {
   let r2 = 0;
   let g2 = 0;
-  let b = 0;
+  let b2 = 0;
   if (color.length == 4) {
     r2 = parseInt("0x" + color[1] + color[1]);
     g2 = parseInt("0x" + color[2] + color[2]);
-    b = parseInt("0x" + color[3] + color[3]);
+    b2 = parseInt("0x" + color[3] + color[3]);
   } else if (color.length == 7) {
     r2 = parseInt("0x" + color[1] + color[2]);
     g2 = parseInt("0x" + color[3] + color[4]);
-    b = parseInt("0x" + color[5] + color[6]);
+    b2 = parseInt("0x" + color[5] + color[6]);
   }
   r2 /= 255;
   g2 /= 255;
-  b /= 255;
-  const cmin = Math.min(r2, g2, b);
-  const cmax = Math.max(r2, g2, b);
+  b2 /= 255;
+  const cmin = Math.min(r2, g2, b2);
+  const cmax = Math.max(r2, g2, b2);
   const delta = cmax - cmin;
   let h = 0;
   let s2 = 0;
   let l2 = 0;
-  if (delta == 0)
-    h = 0;
-  else if (cmax == r2)
-    h = (g2 - b) / delta % 6;
-  else if (cmax == g2)
-    h = (b - r2) / delta + 2;
-  else
-    h = (r2 - g2) / delta + 4;
+  if (delta == 0) h = 0;
+  else if (cmax == r2) h = (g2 - b2) / delta % 6;
+  else if (cmax == g2) h = (b2 - r2) / delta + 2;
+  else h = (r2 - g2) / delta + 4;
   h = Math.round(h * 60);
-  if (h < 0)
-    h += 360;
+  if (h < 0) h += 360;
   l2 = (cmax + cmin) / 2;
   s2 = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l2 - 1));
   s2 = +(s2 * 100).toFixed(1);
@@ -8112,41 +9197,38 @@ function hslToHex({ h, s: s2, l: l2 }) {
   const m2 = l2 - c2 / 2;
   let r2 = 0;
   let g2 = 0;
-  let b = 0;
+  let b2 = 0;
   if (0 <= h && h < 60) {
     r2 = c2;
     g2 = x2;
-    b = 0;
+    b2 = 0;
   } else if (60 <= h && h < 120) {
     r2 = x2;
     g2 = c2;
-    b = 0;
+    b2 = 0;
   } else if (120 <= h && h < 180) {
     r2 = 0;
     g2 = c2;
-    b = x2;
+    b2 = x2;
   } else if (180 <= h && h < 240) {
     r2 = 0;
     g2 = x2;
-    b = c2;
+    b2 = c2;
   } else if (240 <= h && h < 300) {
     r2 = x2;
     g2 = 0;
-    b = c2;
+    b2 = c2;
   } else if (300 <= h && h < 360) {
     r2 = c2;
     g2 = 0;
-    b = x2;
+    b2 = x2;
   }
   let rs = Math.round((r2 + m2) * 255).toString(16);
   let gs = Math.round((g2 + m2) * 255).toString(16);
-  let bs = Math.round((b + m2) * 255).toString(16);
-  if (rs.length == 1)
-    rs = "0" + rs;
-  if (gs.length == 1)
-    gs = "0" + gs;
-  if (bs.length == 1)
-    bs = "0" + bs;
+  let bs = Math.round((b2 + m2) * 255).toString(16);
+  if (rs.length == 1) rs = "0" + rs;
+  if (gs.length == 1) gs = "0" + gs;
+  if (bs.length == 1) bs = "0" + bs;
   return "#" + rs + gs + bs;
 }
 function adjustLightness(color, amount) {
@@ -8173,6 +9255,34 @@ function toPrettyDate(date) {
 function camelToHyphen(str) {
   return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
 }
+function formatCurrency(amount) {
+  try {
+    const dollars = amount / 100;
+    const formatValue = (value, symbol) => {
+      let formatted = value.toFixed(1);
+      if (formatted.endsWith(".0")) {
+        formatted = formatted.slice(0, -2);
+      }
+      return `$${formatted}${symbol}`;
+    };
+    if (dollars >= 1e6) {
+      return formatValue(dollars / 1e6, "M");
+    } else if (dollars >= 1e3) {
+      return formatValue(dollars / 1e3, "k");
+    } else {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD"
+      }).format(dollars);
+    }
+  } catch (error) {
+    console.error("Error formatting currency", error);
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD"
+    }).format(amount / 100);
+  }
+}
 
 // src/const/index.ts
 var TEXT_BASE_SIZE = 16;
@@ -8473,141 +9583,53 @@ var ProgressBar = ({
   );
 };
 
-// src/components/elements/plan-manager/CheckoutForm.tsx
+// src/components/elements/plan-manager/CheckoutDialog.tsx
+var import_react7 = require("react");
+
+// src/components/elements/plan-manager/PaymentForm.tsx
 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");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var CheckoutForm = () => {
-  const stripe = (0, import_react_stripe_js3.useStripe)();
-  const elements = (0, import_react_stripe_js3.useElements)();
-  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) {
-      return;
-    }
-    setIsLoading(true);
-    const { error } = await stripe.confirmPayment({
-      elements,
-      confirmParams: {
-        return_url: window.location.href
+
+// 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};
       }
-    });
-    if (error.type === "card_error" || error.type === "validation_error") {
-      setMessage(error.message);
-    } else {
-      setMessage("An unexpected error occured.");
-    }
-    setIsLoading(false);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    "form",
-    {
-      id: "payment-form",
-      onSubmit: handleSubmit,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          Box,
-          {
-            $fontSize: "18px",
-            $marginBottom: "1.5rem",
-            $display: "inline-block",
-            $width: "100%",
-            children: [
-              "Add payment method",
-              " "
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          Flex,
-          {
-            $flexDirection: "column",
-            $gap: "1.5rem",
-            $marginBottom: "1.5rem",
-            $width: "100%",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              import_react_stripe_js2.LinkAuthenticationElement,
-              {
-                id: "link-authentication-element"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }),
-          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",
-          {
-            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" })
-          }
-        ) })
-      ]
-    }
-  );
-};
-
-// 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;
+    `;
+}};
+
+  ${({ 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 {
-    ${({ $color = "primary", theme, $variant = "filled" }) => {
+    ${({ disabled }) => disabled && "cursor: not-allowed;"}
+    ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
   const specified = theme[$color];
   const lightened = lighten(specified, 15);
-  const color = specified === lightened ? darken(specified, 15) : lightened;
+  const color = disabled ? "#EEEEEE" : specified === lightened ? darken(specified, 15) : lightened;
   return $variant === "filled" ? lt`
             background-color: ${color};
             border-color: ${color};
@@ -8646,10 +9668,122 @@ var StyledButton = dt(Button2)`
 }}
 `;
 
-// src/components/elements/plan-manager/PlanManager.tsx
+// src/components/elements/plan-manager/PaymentForm.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PaymentForm = ({ plan, period, onConfirm }) => {
+  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 [isConfirmed, setIsConfirmed] = (0, import_react6.useState)(false);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const priceId = period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
+    if (!api || !stripe || !elements || !priceId) {
+      return;
+    }
+    setIsLoading(true);
+    setIsConfirmed(false);
+    try {
+      const { setupIntent, error } = await stripe.confirmSetup({
+        elements,
+        confirmParams: {
+          return_url: window.location.href
+        },
+        redirect: "if_required"
+      });
+      if (onConfirm && typeof setupIntent?.payment_method === "string") {
+        onConfirm(setupIntent.payment_method);
+        setIsConfirmed(true);
+      } else {
+      }
+      if (error?.type === "card_error" || error?.type === "validation_error") {
+        setMessage(error.message);
+      } else {
+        setMessage("An unexpected error occured.");
+      }
+      setIsLoading(false);
+    } catch (error) {
+      if (error instanceof Error) {
+        setMessage(error.message);
+      } else {
+        setMessage("An unexpected error occured.");
+      }
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "form",
+    {
+      id: "payment-form",
+      onSubmit: handleSubmit,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        overflowX: "hidden",
+        overflowY: "auto"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          Box,
+          {
+            $fontSize: "18px",
+            $marginBottom: "1.5rem",
+            $display: "inline-block",
+            $width: "100%",
+            children: [
+              "Add payment method",
+              " "
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Flex,
+          {
+            $flexDirection: "column",
+            $gap: "1.5rem",
+            $marginBottom: "1.5rem",
+            $width: "100%",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_react_stripe_js2.LinkAuthenticationElement,
+              {
+                id: "link-authentication-element"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }),
+          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)(
+          StyledButton,
+          {
+            id: "submit",
+            disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
+            $size: "md",
+            $color: "primary",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/components/elements/plan-manager/CheckoutDialog.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var OverlayHeader = ({ children }) => {
+var OverlayHeader = ({
+  children,
+  onClose
+}) => {
   const { setLayout } = useEmbed();
+  const handleClose = (0, import_react7.useCallback)(() => {
+    setLayout("portal");
+    onClose?.();
+  }, [setLayout, onClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Flex,
     {
@@ -8665,24 +9799,18 @@ var OverlayHeader = ({ children }) => {
       $borderRadius: ".5rem .5rem 0 0",
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          Box,
-          {
-            $cursor: "pointer",
-            onClick: () => {
-              setLayout("portal");
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
-          }
-        ) })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } }) }) })
       ]
     }
   );
 };
 var OverlayWrapper = ({
   children,
-  size = "lg"
+  size = "lg",
+  onClose
 }) => {
+  const { setLayout } = useEmbed();
+  const ref = (0, import_react7.useRef)(null);
   const sizeWidthMap = {
     md: "700px",
     lg: "75%"
@@ -8695,9 +9823,28 @@ var OverlayWrapper = ({
     md: "auto",
     lg: "1140px"
   };
+  const handleClose = (0, import_react7.useCallback)(() => {
+    setLayout("portal");
+    onClose?.();
+  }, [setLayout, onClose]);
+  (0, import_react7.useEffect)(() => {
+    ref.current?.focus();
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Box,
     {
+      ref,
+      tabIndex: 0,
+      onClick: (event) => {
+        if (event.target === event.currentTarget) {
+          handleClose();
+        }
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          handleClose();
+        }
+      },
       $position: "absolute",
       $top: "50%",
       $left: "50%",
@@ -8735,8 +9882,21 @@ var OverlayWrapper = ({
 var OverlaySideBar = ({
   pricePeriod,
   setPricePeriod,
-  setCheckoutStage
+  checkoutStage,
+  setCheckoutStage,
+  currentPlan,
+  selectedPlan,
+  paymentMethodId
 }) => {
+  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 Math.round((monthly - yearly) / monthly * 1e4) / 100;
+    }
+    return 0;
+  }, [selectedPlan, pricePeriod]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Flex,
     {
@@ -8758,32 +9918,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 +9956,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 +9985,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 +9994,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.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
-                            "$0/",
-                            pricePeriod
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: currentPlan.name }),
+                          typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
+                            formatCurrency(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: [
+                              formatCurrency(
+                                (pricePeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
+                              ),
+                              "/",
+                              pricePeriod
+                            ] })
+                          ]
+                        }
+                      )
+                    ] })
                   ]
                 }
               )
@@ -8915,25 +10060,60 @@ 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: [
+                      formatCurrency(
+                        (pricePeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
+                      ),
+                      "/",
+                      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 || !paymentMethodId,
+                  onClick: async () => {
+                    const priceId = (pricePeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
+                    if (!api || !selectedPlan || !priceId || !paymentMethodId) {
+                      return;
+                    }
+                    await api.checkout({
+                      changeSubscriptionRequestBody: {
+                        newPlanId: selectedPlan.id,
+                        newPriceId: priceId,
+                        paymentMethodId
+                      }
+                    });
+                  },
+                  $size: "md",
+                  children: "Pay now"
+                }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
             ]
@@ -8943,6 +10123,301 @@ var OverlaySideBar = ({
     }
   );
 };
+var CheckoutDialog = () => {
+  const [checkoutStage, setCheckoutStage] = (0, import_react7.useState)(
+    "plan"
+  );
+  const [planPeriod, setPlanPeriod] = (0, import_react7.useState)("month");
+  const [selectedPlan, setSelectedPlan] = (0, import_react7.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react7.useState)();
+  const { data } = useEmbed();
+  const { currentPlan, availablePlans } = (0, import_react7.useMemo)(() => {
+    return {
+      currentPlan: data.company?.plan,
+      availablePlans: data.activePlans
+    };
+  }, [data.company, data.activePlans]);
+  return /* @__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: [
+        checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            $width: "15px",
+            $height: "15px",
+            $backgroundColor: "white",
+            $border: "2px solid #DDDDDD",
+            $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",
+          {
+            tabIndex: 0,
+            ...checkoutStage === "plan" ? {
+              style: {
+                fontWeight: "700"
+              }
+            } : {
+              style: {
+                cursor: "pointer"
+              },
+              onClick: () => setCheckoutStage("plan")
+            },
+            children: "1. Select plan"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Icon2,
+          {
+            name: "chevron-right",
+            style: { fontSize: 16, color: "#D0D0D0" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            $width: "15px",
+            $height: "15px",
+            $border: "2px solid #DDDDDD",
+            $borderRadius: "999px",
+            $backgroundColor: "white"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            tabIndex: 0,
+            ...checkoutStage === "checkout" && {
+              style: {
+                fontWeight: "700"
+              }
+            },
+            children: "2. Checkout"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $height: "100%", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        Flex,
+        {
+          $flexDirection: "column",
+          $gap: "1rem",
+          $padding: "2rem 2.5rem 2rem 2.5rem",
+          $backgroundColor: "#FBFBFB",
+          $borderRadius: "0 0.5rem 0",
+          $flex: "1",
+          $height: "100%",
+          children: [
+            checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  Text,
+                  {
+                    as: "h1",
+                    id: "select-plan-dialog-label",
+                    $size: 18,
+                    $marginBottom: ".5rem",
+                    children: "Select plan"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  Text,
+                  {
+                    as: "p",
+                    id: "select-plan-dialog-description",
+                    $size: 14,
+                    $weight: 400,
+                    children: "Choose your base plan"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $flexDirection: "row", $gap: "1rem", $flex: "1", $height: "100%", children: availablePlans?.map((plan) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  Flex,
+                  {
+                    $height: "100%",
+                    $flexDirection: "column",
+                    $backgroundColor: "white",
+                    $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: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                        Flex,
+                        {
+                          $flexDirection: "column",
+                          $position: "relative",
+                          $gap: "1rem",
+                          $width: "100%",
+                          $height: "auto",
+                          $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.jsxs)(Text, { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
+                                (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
+                              ) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $display: "inline-block", $fontSize: ".75rem", children: [
+                                "/",
+                                planPeriod
+                              ] })
+                            ] }),
+                            (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                              Flex,
+                              {
+                                $position: "absolute",
+                                $right: "1rem",
+                                $top: "1rem",
+                                $fontSize: ".625rem",
+                                $color: "white",
+                                $backgroundColor: "#194BFB",
+                                $borderRadius: "999px",
+                                $padding: ".125rem .85rem",
+                                children: "Current plan"
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        Flex,
+                        {
+                          $flexDirection: "column",
+                          $position: "relative",
+                          $gap: "0.5rem",
+                          $flex: "1",
+                          $width: "100%",
+                          $height: "auto",
+                          $padding: "1.5rem",
+                          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.jsxs)(
+                        Flex,
+                        {
+                          $flexDirection: "column",
+                          $position: "relative",
+                          $gap: "1rem",
+                          $width: "100%",
+                          $height: "auto",
+                          $padding: "1.5rem",
+                          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: {
+                                        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: "primary",
+                                $variant: "outline",
+                                onClick: () => {
+                                  setSelectedPlan(plan);
+                                },
+                                children: "Select"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  plan.id
+                );
+              }) })
+            ] }),
+            selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              PaymentForm,
+              {
+                plan: selectedPlan,
+                period: planPeriod,
+                onConfirm: (value) => {
+                  setPaymentMethodId(value);
+                }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        OverlaySideBar,
+        {
+          pricePeriod: planPeriod,
+          setPricePeriod: setPlanPeriod,
+          checkoutStage,
+          setCheckoutStage,
+          currentPlan,
+          selectedPlan,
+          paymentMethodId
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/elements/plan-manager/PlanManager.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var resolveDesignProps = (props) => {
   return {
     header: {
@@ -8967,41 +10442,27 @@ var resolveDesignProps = (props) => {
     callToAction: {
       isVisible: props.callToAction?.isVisible ?? true,
       buttonSize: props.callToAction?.buttonSize ?? "md",
-      buttonStyle: props.callToAction?.buttonStyle ?? "secondary"
+      buttonStyle: props.callToAction?.buttonStyle ?? "primary"
     }
   };
 };
-var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
-  const [checkoutStage, setCheckoutStage] = (0, import_react7.useState)(
-    "plan"
-  );
-  const [planPeriod, setPlanPeriod] = (0, import_react7.useState)("month");
   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
-      })
-    );
+  const { currentPlan, canChangePlan } = (0, import_react8.useMemo)(() => {
     return {
       currentPlan: data.company?.plan,
-      canChangePlan: canChangePlan2,
-      availablePlans: availablePlans2
+      canChangePlan: stripe !== null
     };
-  }, [data.company, data.activePlans, stripe, planPeriod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  }, [data.company, stripe]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Flex,
       {
         $flexDirection: "column",
         $gap: "0.75rem",
         ...canChangePlan && { $margin: "0 0 0.5rem" },
-        children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           Flex,
           {
             $justifyContent: "space-between",
@@ -9009,8 +10470,8 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
             $width: "100%",
             ...canChangePlan && { $margin: "0 0 1.5rem" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   Text,
                   {
                     $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
@@ -9021,7 +10482,7 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
                     children: currentPlan.name
                   }
                 ) }),
-                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   Text,
                   {
                     $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
@@ -9032,7 +10493,7 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
                   }
                 )
               ] }),
-              props.header.price.isVisible && currentPlan.planPrice >= 0 && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 Text,
                 {
                   $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
@@ -9040,8 +10501,7 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
                   $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
                   $color: settings.theme.typography[props.header.price.fontStyle].color,
                   children: [
-                    "$",
-                    currentPlan.planPrice,
+                    formatCurrency(currentPlan.planPrice),
                     "/",
                     currentPlan.planPeriod
                   ]
@@ -9052,7 +10512,7 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
         )
       }
     ),
-    canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       StyledButton,
       {
         onClick: () => {
@@ -9060,7 +10520,7 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
         },
         $size: props.callToAction.buttonSize,
         $color: props.callToAction.buttonStyle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Text,
           {
             $font: settings.theme.typography.text.fontFamily,
@@ -9071,277 +10531,13 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
         )
       }
     ),
-    canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(
-      /* @__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)(
-              Box,
-              {
-                $width: "15px",
-                $height: "15px",
-                $border: "2px solid #DDDDDD",
-                $borderRadius: "999px",
-                $backgroundColor: "white"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "div",
-              {
-                ...checkoutStage === "plan" && {
-                  style: {
-                    fontWeight: "700"
-                  }
-                },
-                children: "1. Select plan"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              Icon2,
-              {
-                name: "chevron-right",
-                style: { fontSize: 16, color: "#D0D0D0" }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              Box,
-              {
-                $width: "15px",
-                $height: "15px",
-                $border: "2px solid #DDDDDD",
-                $borderRadius: "999px",
-                $backgroundColor: "white"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "div",
-              {
-                ...checkoutStage === "checkout" && {
-                  style: {
-                    fontWeight: "700"
-                  }
-                },
-                children: "2. Checkout"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              Icon2,
-              {
-                name: "chevron-right",
-                style: { fontSize: 16, color: "#D0D0D0" }
-              }
-            )
-          ] })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $height: "100%", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-            Flex,
-            {
-              $flexDirection: "column",
-              $gap: "1rem",
-              $padding: "2rem 2.5rem 2rem 2.5rem",
-              $backgroundColor: "#FBFBFB",
-              $borderRadius: "0 0.5rem 0",
-              $flex: "1",
-              $height: "100%",
-              children: [
-                checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                    Flex,
-                    {
-                      $flexDirection: "column",
-                      $gap: "1rem",
-                      $marginBottom: "1rem",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          Text,
-                          {
-                            as: "h1",
-                            id: "select-plan-dialog-label",
-                            $size: 18,
-                            $marginBottom: ".5rem",
-                            children: "Select plan"
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          Text,
-                          {
-                            as: "p",
-                            id: "select-plan-dialog-description",
-                            $size: 14,
-                            $weight: 400,
-                            children: "Choose your base plan"
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    Flex,
-                    {
-                      $flexDirection: "row",
-                      $gap: "1rem",
-                      $flex: "1",
-                      $height: "100%",
-                      children: availablePlans?.map((plan) => {
-                        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                          Flex,
-                          {
-                            $height: "100%",
-                            $flexDirection: "column",
-                            $backgroundColor: "white",
-                            $border: plan?.current ? `2px solid #194BFB` : "",
-                            $flex: "1",
-                            $borderRadius: ".5rem",
-                            $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)",
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                                Flex,
-                                {
-                                  $flexDirection: "column",
-                                  $position: "relative",
-                                  $gap: "1rem",
-                                  $width: "100%",
-                                  $height: "auto",
-                                  $padding: "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.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.jsxs)(Box, { $display: "inline-block", $fontSize: ".75rem", children: [
-                                        "/",
-                                        planPeriod
-                                      ] })
-                                    ] }),
-                                    plan?.current && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                      Flex,
-                                      {
-                                        $position: "absolute",
-                                        $right: "1rem",
-                                        $top: "1rem",
-                                        $fontSize: ".75rem",
-                                        $color: "white",
-                                        $backgroundColor: "#194BFB",
-                                        $borderRadius: "999px",
-                                        $padding: ".125rem .85rem",
-                                        children: "Current plan"
-                                      }
-                                    )
-                                  ]
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                Flex,
-                                {
-                                  $flexDirection: "column",
-                                  $position: "relative",
-                                  $gap: "0.5rem",
-                                  $flex: "1",
-                                  $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" }) })
-                                    ] });
-                                  })
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                Flex,
-                                {
-                                  $flexDirection: "column",
-                                  $position: "relative",
-                                  $gap: "1rem",
-                                  $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"
-                                            }
-                                          }
-                                        ),
-                                        /* @__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"
-                                    }
-                                  )
-                                }
-                              )
-                            ]
-                          }
-                        );
-                      })
-                    }
-                  )
-                ] }),
-                checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutForm, {})
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            OverlaySideBar,
-            {
-              pricePeriod: planPeriod,
-              setPricePeriod: setPlanPeriod,
-              setCheckoutStage
-            }
-          )
-        ] })
-      ] }),
-      portal || document.body
-    )
+    canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckoutDialog, {}), portal || document.body)
   ] });
 });
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_react8 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function resolveDesignProps2(props) {
   return {
     header: {
@@ -9364,10 +10560,10 @@ function resolveDesignProps2(props) {
     }
   };
 }
-var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, ref) => {
+var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { data, settings } = useEmbed();
-  const features = (0, import_react8.useMemo)(() => {
+  const features = (0, import_react9.useMemo)(() => {
     return (data.featureUsage?.features || []).map(
       ({
         access,
@@ -9394,8 +10590,8 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
       }
     );
   }, [data.featureUsage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Text,
       {
         $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -9412,7 +10608,7 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
         }
         return [
           ...acc,
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             Flex,
             {
               $flexWrap: "wrap",
@@ -9420,19 +10616,19 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "1rem", children: [
-                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "1rem", children: [
+                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     IconRound,
                     {
                       name: feature.icon,
                       size: "sm",
                       colors: [
-                        settings.theme.card.background,
-                        settings.theme.primary
+                        settings.theme.primary,
+                        `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`
                       ]
                     }
                   ),
-                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     Text,
                     {
                       $font: settings.theme.typography[props.icons.fontStyle].fontFamily,
@@ -9443,8 +10639,8 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
                     }
                   ) })
                 ] }),
-                allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { $textAlign: "right", children: [
-                  props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $textAlign: "right", children: [
+                  props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     Text,
                     {
                       as: Box,
@@ -9455,7 +10651,7 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
                       children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
                     }
                   ),
-                  props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     Text,
                     {
                       as: Box,
@@ -9479,8 +10675,8 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
 });
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react9 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function resolveDesignProps3(props) {
   return {
     isVisible: props.isVisible ?? true,
@@ -9505,14 +10701,14 @@ function resolveDesignProps3(props) {
     callToAction: {
       isVisible: props.callToAction?.isVisible ?? true,
       buttonSize: props.callToAction?.buttonSize ?? "md",
-      buttonStyle: props.callToAction?.buttonStyle ?? "secondary"
+      buttonStyle: props.callToAction?.buttonStyle ?? "primary"
     }
   };
 }
-var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const { data, settings } = useEmbed();
-  const features = (0, import_react9.useMemo)(() => {
+  const features = (0, import_react10.useMemo)(() => {
     return (data.featureUsage?.features || []).map(
       ({
         access,
@@ -9539,19 +10735,19 @@ var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref
       }
     );
   }, [data.featureUsage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
     (acc, { allocation, allocationType, feature, usage }, index) => {
       if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
         return acc;
       }
       return [
         ...acc,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "1.5rem", children: [
-          props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconRound, { name: feature.icon, size: "sm" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $flexGrow: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { children: [
-              feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $flexGrow: "1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $gap: "1.5rem", children: [
+          props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconRound, { name: feature.icon, size: "sm" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { $flexGrow: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { children: [
+              feature?.name && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { $flexGrow: "1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     as: Box,
@@ -9562,7 +10758,7 @@ var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref
                     children: feature.name
                   }
                 ),
-                props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     as: Box,
@@ -9574,8 +10770,8 @@ var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref
                   }
                 )
               ] }),
-              allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $textAlign: "right", children: [
-                props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { $textAlign: "right", children: [
+                props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     as: Box,
@@ -9586,7 +10782,7 @@ var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref
                     children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
                   }
                 ),
-                props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     as: Box,
@@ -9599,7 +10795,7 @@ var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref
                 )
               ] })
             ] }),
-            typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               ProgressBar,
               {
                 progress: usage / allocation * 100,
@@ -9617,8 +10813,8 @@ var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref
 });
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react10 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function resolveDesignProps4(props) {
   return {
     header: {
@@ -9637,37 +10833,35 @@ function resolveDesignProps4(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref) => {
+var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
   const { data, settings, stripe } = useEmbed();
-  const { latestInvoice } = (0, import_react10.useMemo)(() => {
+  const { upcomingInvoice } = (0, import_react11.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className, children: [
+    props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
         $alignItems: "center",
         $margin: "0 0 0.75rem",
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           Text,
           {
             $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -9677,14 +10871,14 @@ 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: [
-      props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    upcomingInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+      props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Text,
         {
           $font: settings.theme.typography[props.price.fontStyle].fontFamily,
@@ -9692,20 +10886,10 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
           $weight: settings.theme.typography[props.price.fontStyle].fontWeight,
           $color: settings.theme.typography[props.price.fontStyle].color,
           $lineHeight: 1,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              Text,
-              {
-                $size: "0.75em",
-                $color: settings.theme.typography[props.price.fontStyle].color,
-                children: "$"
-              }
-            ),
-            latestInvoice.amountDue
-          ]
+          children: formatCurrency(upcomingInvoice.amountDue)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Text,
         {
           $font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
@@ -9720,9 +10904,9 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
 });
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -9734,10 +10918,10 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
-  const { data, settings, stripe, layout, setLayout } = useEmbed();
-  const paymentMethod = (0, import_react11.useMemo)(() => {
+  const { data, settings, stripe, layout } = useEmbed();
+  const paymentMethod = (0, import_react12.useMemo)(() => {
     const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
     let monthsToExpiration;
     if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
@@ -9756,15 +10940,15 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
   if (!stripe || !data.subscription?.paymentMethod) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className, children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref, className, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
         $alignItems: "center",
         $margin: "0 0 1rem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Text,
             {
               $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -9774,7 +10958,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
               children: "Payment Method"
             }
           ),
-          typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Text,
             {
               $font: settings.theme.typography.text.fontFamily,
@@ -9786,7 +10970,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
         ]
       }
     ),
-    paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -9795,34 +10979,16 @@ 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_runtime13.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)(
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(OverlayWrapper, { size: "md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(OverlayWrapper, { size: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -9830,7 +10996,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
             $height: "100%",
             $gap: "1.5rem",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -9839,8 +11005,8 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                   $borderRadius: "0 0 0.5rem 0.5rem",
                   $flex: "1",
                   $height: "100%",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       Box,
                       {
                         $fontSize: "18px",
@@ -9850,8 +11016,8 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                         children: "Default"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         Flex,
                         {
                           $alignItems: "center",
@@ -9862,21 +11028,21 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                           $flexDirection: "row",
                           $gap: "1rem",
                           $width: "100%",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                             Flex,
                             {
                               $flexDirection: "row",
                               $justifyContent: "space-between",
                               $flex: "1",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                                   Flex,
                                   {
                                     $flexDirection: "row",
                                     $alignItems: "center",
                                     $gap: "1rem",
                                     children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                         "svg",
                                         {
                                           viewBox: "0 0 24 16",
@@ -9884,8 +11050,8 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                                           xmlns: "http://www.w3.org/2000/svg",
                                           width: "26px",
                                           height: "auto",
-                                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                               "rect",
                                               {
                                                 stroke: "#DDD",
@@ -9897,7 +11063,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                                                 rx: "2"
                                               }
                                             ),
-                                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                               "path",
                                               {
                                                 d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
@@ -9907,21 +11073,21 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                                           ] })
                                         }
                                       ) }),
-                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
+                                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
                                     ]
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
                               ]
                             }
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         StyledButton,
                         {
                           $size: "sm",
-                          $color: "secondary",
+                          $color: "primary",
                           $variant: "outline",
                           style: {
                             whiteSpace: "nowrap",
@@ -9935,7 +11101,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -9944,8 +11110,8 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                   $borderRadius: "0 0 0.5rem 0.5rem",
                   $flex: "1",
                   $height: "100%",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       Box,
                       {
                         $fontSize: "18px",
@@ -9955,8 +11121,8 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                         children: "Others"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         Flex,
                         {
                           $alignItems: "center",
@@ -9967,21 +11133,21 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                           $flexDirection: "row",
                           $gap: "1rem",
                           $width: "100%",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                             Flex,
                             {
                               $flexDirection: "row",
                               $justifyContent: "space-between",
                               $flex: "1",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                                   Flex,
                                   {
                                     $flexDirection: "row",
                                     $alignItems: "center",
                                     $gap: "1rem",
                                     children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                         "svg",
                                         {
                                           viewBox: "0 0 24 16",
@@ -9989,8 +11155,8 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                                           xmlns: "http://www.w3.org/2000/svg",
                                           width: "26px",
                                           height: "auto",
-                                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                               "rect",
                                               {
                                                 stroke: "#DDD",
@@ -10002,7 +11168,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                                                 rx: "2"
                                               }
                                             ),
-                                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                               "path",
                                               {
                                                 d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
@@ -10012,22 +11178,22 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                                           ] })
                                         }
                                       ) }),
-                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
+                                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
                                     ]
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
                               ]
                             }
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1rem", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                           StyledButton,
                           {
                             $size: "sm",
-                            $color: "secondary",
+                            $color: "primary",
                             $variant: "outline",
                             style: {
                               whiteSpace: "nowrap",
@@ -10037,11 +11203,11 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                             children: "Make Default"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                           StyledButton,
                           {
                             $size: "sm",
-                            $color: "secondary",
+                            $color: "primary",
                             $variant: "outline",
                             style: {
                               whiteSpace: "nowrap",
@@ -10066,8 +11232,8 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
 });
 
 // src/components/elements/invoices/Invoices.tsx
-var import_react12 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function resolveDesignProps6(props) {
   return {
     header: {
@@ -10092,10 +11258,10 @@ function resolveDesignProps6(props) {
     }
   };
 }
-var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
+var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps6(rest);
   const { settings } = useEmbed();
-  const { invoices } = (0, import_react12.useMemo)(() => {
+  const { invoices } = (0, import_react13.useMemo)(() => {
     return {
       invoices: [
         {
@@ -10109,8 +11275,8 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
       ]
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       Text,
       {
         $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10120,12 +11286,12 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
         children: "Invoices"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
       0,
       props.limit.isVisible && props.limit.number || invoices.length
     ).map(({ date, amount }, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $justifyContent: "space-between", children: [
+        props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Text,
           {
             $font: settings.theme.typography[props.date.fontStyle].fontFamily,
@@ -10135,7 +11301,7 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
             children: toPrettyDate(date)
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           Text,
           {
             $font: settings.theme.typography[props.amount.fontStyle].fontFamily,
@@ -10150,9 +11316,9 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
         )
       ] }, index);
     }) }),
-    props.collapse.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    props.collapse.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Text,
         {
           $font: settings.theme.typography[props.collapse.fontStyle].fontFamily,
@@ -10167,22 +11333,22 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
 });
 
 // src/components/embed/ComponentTree.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/layout/root/Root.tsx
-var import_react13 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Root = (0, import_react13.forwardRef)(
+var import_react14 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Root = (0, import_react14.forwardRef)(
   (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, ...props });
   }
 );
 
 // src/components/layout/viewport/Viewport.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/layout/viewport/styles.ts
 var StyledViewport = dt.div`
@@ -10193,27 +11359,27 @@ var StyledViewport = dt.div`
 `;
 
 // src/components/layout/viewport/Viewport.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Viewport = (0, import_react14.forwardRef)(
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Viewport = (0, import_react15.forwardRef)(
   ({ children, ...props }, ref) => {
     const { settings, layout } = useEmbed();
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       StyledViewport,
       {
         ref,
         $numberOfColumns: settings.theme.numberOfColumns,
         ...props,
-        children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "", children: "DISABLED" }) : children
+        children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "", children: "DISABLED" }) : children
       }
     );
   }
 );
 
 // src/components/layout/column/Column.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/components/layout/card/Card.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/layout/card/styles.ts
 var StyledCard = dt.div(
@@ -10274,11 +11440,11 @@ var StyledCard = dt.div(
 );
 
 // src/components/layout/card/Card.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Card = (0, import_react15.forwardRef)(
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Card = (0, import_react16.forwardRef)(
   ({ children, className }, ref) => {
     const { settings } = useEmbed();
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       StyledCard,
       {
         ref,
@@ -10300,10 +11466,10 @@ var StyledColumn = dt.div`
 `;
 
 // src/components/layout/column/Column.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Column = (0, import_react16.forwardRef)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Column = (0, import_react17.forwardRef)(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Card, { children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Card, { children }) });
   }
 );
 
@@ -10336,11 +11502,11 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react17.createElement)(
+    return (0, import_react18.createElement)(
       component,
       {
         className,
-        ...component !== "div" && { resolvedProps },
+        ...component !== "div" && { ...resolvedProps },
         ...component !== "div" && Object.keys(custom).length > 0 && { custom },
         key: index
       },
@@ -10350,30 +11516,30 @@ function createRenderer(options) {
 }
 
 // src/components/embed/ComponentTree.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var ComponentTree = () => {
-  const [children, setChildren] = (0, import_react18.useState)("Loading");
+  const [children, setChildren] = (0, import_react19.useState)("Loading");
   const { error, nodes } = useEmbed();
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: error.message });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children });
 };
 
 // src/components/embed/Embed.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ComponentTree, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ComponentTree, {}) });
 };
 /*! Bundled license information: