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

package/dist/schematic-react.cjs.js

@@ -67,6 +67,728 @@ var require_shallowequal = __commonJS({
   }
 });
 
+// node_modules/lodash.merge/index.js
+var require_lodash = __commonJS({
+  "node_modules/lodash.merge/index.js"(exports, module2) {
+    var LARGE_ARRAY_SIZE = 200;
+    var HASH_UNDEFINED = "__lodash_hash_undefined__";
+    var HOT_COUNT = 800;
+    var HOT_SPAN = 16;
+    var MAX_SAFE_INTEGER = 9007199254740991;
+    var argsTag = "[object Arguments]";
+    var arrayTag = "[object Array]";
+    var asyncTag = "[object AsyncFunction]";
+    var boolTag = "[object Boolean]";
+    var dateTag = "[object Date]";
+    var errorTag = "[object Error]";
+    var funcTag = "[object Function]";
+    var genTag = "[object GeneratorFunction]";
+    var mapTag = "[object Map]";
+    var numberTag = "[object Number]";
+    var nullTag = "[object Null]";
+    var objectTag = "[object Object]";
+    var proxyTag = "[object Proxy]";
+    var regexpTag = "[object RegExp]";
+    var setTag = "[object Set]";
+    var stringTag = "[object String]";
+    var undefinedTag = "[object Undefined]";
+    var weakMapTag = "[object WeakMap]";
+    var arrayBufferTag = "[object ArrayBuffer]";
+    var dataViewTag = "[object DataView]";
+    var float32Tag = "[object Float32Array]";
+    var float64Tag = "[object Float64Array]";
+    var int8Tag = "[object Int8Array]";
+    var int16Tag = "[object Int16Array]";
+    var int32Tag = "[object Int32Array]";
+    var uint8Tag = "[object Uint8Array]";
+    var uint8ClampedTag = "[object Uint8ClampedArray]";
+    var uint16Tag = "[object Uint16Array]";
+    var uint32Tag = "[object Uint32Array]";
+    var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+    var reIsHostCtor = /^\[object .+?Constructor\]$/;
+    var reIsUint = /^(?:0|[1-9]\d*)$/;
+    var typedArrayTags = {};
+    typedArrayTags[float32Tag] = typedArrayTags[float64Tag] = typedArrayTags[int8Tag] = typedArrayTags[int16Tag] = typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] = typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] = typedArrayTags[uint32Tag] = true;
+    typedArrayTags[argsTag] = typedArrayTags[arrayTag] = typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] = typedArrayTags[dataViewTag] = typedArrayTags[dateTag] = typedArrayTags[errorTag] = typedArrayTags[funcTag] = typedArrayTags[mapTag] = typedArrayTags[numberTag] = typedArrayTags[objectTag] = typedArrayTags[regexpTag] = typedArrayTags[setTag] = typedArrayTags[stringTag] = typedArrayTags[weakMapTag] = false;
+    var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
+    var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+    var root = freeGlobal || freeSelf || Function("return this")();
+    var freeExports = typeof exports == "object" && exports && !exports.nodeType && exports;
+    var freeModule = freeExports && typeof module2 == "object" && module2 && !module2.nodeType && module2;
+    var moduleExports = freeModule && freeModule.exports === freeExports;
+    var freeProcess = moduleExports && freeGlobal.process;
+    var nodeUtil = function() {
+      try {
+        var types = freeModule && freeModule.require && freeModule.require("util").types;
+        if (types) {
+          return types;
+        }
+        return freeProcess && freeProcess.binding && freeProcess.binding("util");
+      } catch (e) {
+      }
+    }();
+    var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
+    function apply(func, thisArg, args) {
+      switch (args.length) {
+        case 0:
+          return func.call(thisArg);
+        case 1:
+          return func.call(thisArg, args[0]);
+        case 2:
+          return func.call(thisArg, args[0], args[1]);
+        case 3:
+          return func.call(thisArg, args[0], args[1], args[2]);
+      }
+      return func.apply(thisArg, args);
+    }
+    function baseTimes(n, iteratee) {
+      var index = -1, result = Array(n);
+      while (++index < n) {
+        result[index] = iteratee(index);
+      }
+      return result;
+    }
+    function baseUnary(func) {
+      return function(value) {
+        return func(value);
+      };
+    }
+    function getValue(object, key) {
+      return object == null ? void 0 : object[key];
+    }
+    function overArg(func, transform) {
+      return function(arg) {
+        return func(transform(arg));
+      };
+    }
+    var arrayProto = Array.prototype;
+    var funcProto = Function.prototype;
+    var objectProto = Object.prototype;
+    var coreJsData = root["__core-js_shared__"];
+    var funcToString = funcProto.toString;
+    var hasOwnProperty = objectProto.hasOwnProperty;
+    var maskSrcKey = function() {
+      var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || "");
+      return uid ? "Symbol(src)_1." + uid : "";
+    }();
+    var nativeObjectToString = objectProto.toString;
+    var objectCtorString = funcToString.call(Object);
+    var reIsNative = RegExp(
+      "^" + funcToString.call(hasOwnProperty).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
+    );
+    var Buffer2 = moduleExports ? root.Buffer : void 0;
+    var Symbol2 = root.Symbol;
+    var Uint8Array2 = root.Uint8Array;
+    var allocUnsafe = Buffer2 ? Buffer2.allocUnsafe : void 0;
+    var getPrototype = overArg(Object.getPrototypeOf, Object);
+    var objectCreate = Object.create;
+    var propertyIsEnumerable = objectProto.propertyIsEnumerable;
+    var splice = arrayProto.splice;
+    var symToStringTag = Symbol2 ? Symbol2.toStringTag : void 0;
+    var defineProperty = function() {
+      try {
+        var func = getNative(Object, "defineProperty");
+        func({}, "", {});
+        return func;
+      } catch (e) {
+      }
+    }();
+    var nativeIsBuffer = Buffer2 ? Buffer2.isBuffer : void 0;
+    var nativeMax = Math.max;
+    var nativeNow = Date.now;
+    var Map2 = getNative(root, "Map");
+    var nativeCreate = getNative(Object, "create");
+    var baseCreate = /* @__PURE__ */ function() {
+      function object() {
+      }
+      return function(proto) {
+        if (!isObject(proto)) {
+          return {};
+        }
+        if (objectCreate) {
+          return objectCreate(proto);
+        }
+        object.prototype = proto;
+        var result = new object();
+        object.prototype = void 0;
+        return result;
+      };
+    }();
+    function Hash(entries) {
+      var index = -1, length2 = entries == null ? 0 : entries.length;
+      this.clear();
+      while (++index < length2) {
+        var entry = entries[index];
+        this.set(entry[0], entry[1]);
+      }
+    }
+    function hashClear() {
+      this.__data__ = nativeCreate ? nativeCreate(null) : {};
+      this.size = 0;
+    }
+    function hashDelete(key) {
+      var result = this.has(key) && delete this.__data__[key];
+      this.size -= result ? 1 : 0;
+      return result;
+    }
+    function hashGet(key) {
+      var data = this.__data__;
+      if (nativeCreate) {
+        var result = data[key];
+        return result === HASH_UNDEFINED ? void 0 : result;
+      }
+      return hasOwnProperty.call(data, key) ? data[key] : void 0;
+    }
+    function hashHas(key) {
+      var data = this.__data__;
+      return nativeCreate ? data[key] !== void 0 : hasOwnProperty.call(data, key);
+    }
+    function hashSet(key, value) {
+      var data = this.__data__;
+      this.size += this.has(key) ? 0 : 1;
+      data[key] = nativeCreate && value === void 0 ? HASH_UNDEFINED : value;
+      return this;
+    }
+    Hash.prototype.clear = hashClear;
+    Hash.prototype["delete"] = hashDelete;
+    Hash.prototype.get = hashGet;
+    Hash.prototype.has = hashHas;
+    Hash.prototype.set = hashSet;
+    function ListCache(entries) {
+      var index = -1, length2 = entries == null ? 0 : entries.length;
+      this.clear();
+      while (++index < length2) {
+        var entry = entries[index];
+        this.set(entry[0], entry[1]);
+      }
+    }
+    function listCacheClear() {
+      this.__data__ = [];
+      this.size = 0;
+    }
+    function listCacheDelete(key) {
+      var data = this.__data__, index = assocIndexOf(data, key);
+      if (index < 0) {
+        return false;
+      }
+      var lastIndex = data.length - 1;
+      if (index == lastIndex) {
+        data.pop();
+      } else {
+        splice.call(data, index, 1);
+      }
+      --this.size;
+      return true;
+    }
+    function listCacheGet(key) {
+      var data = this.__data__, index = assocIndexOf(data, key);
+      return index < 0 ? void 0 : data[index][1];
+    }
+    function listCacheHas(key) {
+      return assocIndexOf(this.__data__, key) > -1;
+    }
+    function listCacheSet(key, value) {
+      var data = this.__data__, index = assocIndexOf(data, key);
+      if (index < 0) {
+        ++this.size;
+        data.push([key, value]);
+      } else {
+        data[index][1] = value;
+      }
+      return this;
+    }
+    ListCache.prototype.clear = listCacheClear;
+    ListCache.prototype["delete"] = listCacheDelete;
+    ListCache.prototype.get = listCacheGet;
+    ListCache.prototype.has = listCacheHas;
+    ListCache.prototype.set = listCacheSet;
+    function MapCache(entries) {
+      var index = -1, length2 = entries == null ? 0 : entries.length;
+      this.clear();
+      while (++index < length2) {
+        var entry = entries[index];
+        this.set(entry[0], entry[1]);
+      }
+    }
+    function mapCacheClear() {
+      this.size = 0;
+      this.__data__ = {
+        "hash": new Hash(),
+        "map": new (Map2 || ListCache)(),
+        "string": new Hash()
+      };
+    }
+    function mapCacheDelete(key) {
+      var result = getMapData(this, key)["delete"](key);
+      this.size -= result ? 1 : 0;
+      return result;
+    }
+    function mapCacheGet(key) {
+      return getMapData(this, key).get(key);
+    }
+    function mapCacheHas(key) {
+      return getMapData(this, key).has(key);
+    }
+    function mapCacheSet(key, value) {
+      var data = getMapData(this, key), size = data.size;
+      data.set(key, value);
+      this.size += data.size == size ? 0 : 1;
+      return this;
+    }
+    MapCache.prototype.clear = mapCacheClear;
+    MapCache.prototype["delete"] = mapCacheDelete;
+    MapCache.prototype.get = mapCacheGet;
+    MapCache.prototype.has = mapCacheHas;
+    MapCache.prototype.set = mapCacheSet;
+    function Stack(entries) {
+      var data = this.__data__ = new ListCache(entries);
+      this.size = data.size;
+    }
+    function stackClear() {
+      this.__data__ = new ListCache();
+      this.size = 0;
+    }
+    function stackDelete(key) {
+      var data = this.__data__, result = data["delete"](key);
+      this.size = data.size;
+      return result;
+    }
+    function stackGet(key) {
+      return this.__data__.get(key);
+    }
+    function stackHas(key) {
+      return this.__data__.has(key);
+    }
+    function stackSet(key, value) {
+      var data = this.__data__;
+      if (data instanceof ListCache) {
+        var pairs = data.__data__;
+        if (!Map2 || pairs.length < LARGE_ARRAY_SIZE - 1) {
+          pairs.push([key, value]);
+          this.size = ++data.size;
+          return this;
+        }
+        data = this.__data__ = new MapCache(pairs);
+      }
+      data.set(key, value);
+      this.size = data.size;
+      return this;
+    }
+    Stack.prototype.clear = stackClear;
+    Stack.prototype["delete"] = stackDelete;
+    Stack.prototype.get = stackGet;
+    Stack.prototype.has = stackHas;
+    Stack.prototype.set = stackSet;
+    function arrayLikeKeys(value, inherited) {
+      var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length2 = result.length;
+      for (var key in value) {
+        if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes && // Safari 9 has enumerable `arguments.length` in strict mode.
+        (key == "length" || // Node.js 0.10 has enumerable non-index properties on buffers.
+        isBuff && (key == "offset" || key == "parent") || // PhantomJS 2 has enumerable non-index properties on typed arrays.
+        isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || // Skip index properties.
+        isIndex(key, length2)))) {
+          result.push(key);
+        }
+      }
+      return result;
+    }
+    function assignMergeValue(object, key, value) {
+      if (value !== void 0 && !eq(object[key], value) || value === void 0 && !(key in object)) {
+        baseAssignValue(object, key, value);
+      }
+    }
+    function assignValue(object, key, value) {
+      var objValue = object[key];
+      if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) || value === void 0 && !(key in object)) {
+        baseAssignValue(object, key, value);
+      }
+    }
+    function assocIndexOf(array, key) {
+      var length2 = array.length;
+      while (length2--) {
+        if (eq(array[length2][0], key)) {
+          return length2;
+        }
+      }
+      return -1;
+    }
+    function baseAssignValue(object, key, value) {
+      if (key == "__proto__" && defineProperty) {
+        defineProperty(object, key, {
+          "configurable": true,
+          "enumerable": true,
+          "value": value,
+          "writable": true
+        });
+      } else {
+        object[key] = value;
+      }
+    }
+    var baseFor = createBaseFor();
+    function baseGetTag(value) {
+      if (value == null) {
+        return value === void 0 ? undefinedTag : nullTag;
+      }
+      return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+    }
+    function baseIsArguments(value) {
+      return isObjectLike(value) && baseGetTag(value) == argsTag;
+    }
+    function baseIsNative(value) {
+      if (!isObject(value) || isMasked(value)) {
+        return false;
+      }
+      var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
+      return pattern.test(toSource(value));
+    }
+    function baseIsTypedArray(value) {
+      return isObjectLike(value) && isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
+    }
+    function baseKeysIn(object) {
+      if (!isObject(object)) {
+        return nativeKeysIn(object);
+      }
+      var isProto = isPrototype(object), result = [];
+      for (var key in object) {
+        if (!(key == "constructor" && (isProto || !hasOwnProperty.call(object, key)))) {
+          result.push(key);
+        }
+      }
+      return result;
+    }
+    function baseMerge(object, source, srcIndex, customizer, stack) {
+      if (object === source) {
+        return;
+      }
+      baseFor(source, function(srcValue, key) {
+        stack || (stack = new Stack());
+        if (isObject(srcValue)) {
+          baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
+        } else {
+          var newValue = customizer ? customizer(safeGet(object, key), srcValue, key + "", object, source, stack) : void 0;
+          if (newValue === void 0) {
+            newValue = srcValue;
+          }
+          assignMergeValue(object, key, newValue);
+        }
+      }, keysIn);
+    }
+    function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) {
+      var objValue = safeGet(object, key), srcValue = safeGet(source, key), stacked = stack.get(srcValue);
+      if (stacked) {
+        assignMergeValue(object, key, stacked);
+        return;
+      }
+      var newValue = customizer ? customizer(objValue, srcValue, key + "", object, source, stack) : void 0;
+      var isCommon = newValue === void 0;
+      if (isCommon) {
+        var isArr = isArray(srcValue), isBuff = !isArr && isBuffer(srcValue), isTyped = !isArr && !isBuff && isTypedArray(srcValue);
+        newValue = srcValue;
+        if (isArr || isBuff || isTyped) {
+          if (isArray(objValue)) {
+            newValue = objValue;
+          } else if (isArrayLikeObject(objValue)) {
+            newValue = copyArray(objValue);
+          } else if (isBuff) {
+            isCommon = false;
+            newValue = cloneBuffer(srcValue, true);
+          } else if (isTyped) {
+            isCommon = false;
+            newValue = cloneTypedArray(srcValue, true);
+          } else {
+            newValue = [];
+          }
+        } else if (isPlainObject(srcValue) || isArguments(srcValue)) {
+          newValue = objValue;
+          if (isArguments(objValue)) {
+            newValue = toPlainObject(objValue);
+          } else if (!isObject(objValue) || isFunction(objValue)) {
+            newValue = initCloneObject(srcValue);
+          }
+        } else {
+          isCommon = false;
+        }
+      }
+      if (isCommon) {
+        stack.set(srcValue, newValue);
+        mergeFunc(newValue, srcValue, srcIndex, customizer, stack);
+        stack["delete"](srcValue);
+      }
+      assignMergeValue(object, key, newValue);
+    }
+    function baseRest(func, start) {
+      return setToString(overRest(func, start, identity), func + "");
+    }
+    var baseSetToString = !defineProperty ? identity : function(func, string) {
+      return defineProperty(func, "toString", {
+        "configurable": true,
+        "enumerable": false,
+        "value": constant(string),
+        "writable": true
+      });
+    };
+    function cloneBuffer(buffer, isDeep) {
+      if (isDeep) {
+        return buffer.slice();
+      }
+      var length2 = buffer.length, result = allocUnsafe ? allocUnsafe(length2) : new buffer.constructor(length2);
+      buffer.copy(result);
+      return result;
+    }
+    function cloneArrayBuffer(arrayBuffer) {
+      var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
+      new Uint8Array2(result).set(new Uint8Array2(arrayBuffer));
+      return result;
+    }
+    function cloneTypedArray(typedArray, isDeep) {
+      var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;
+      return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
+    }
+    function copyArray(source, array) {
+      var index = -1, length2 = source.length;
+      array || (array = Array(length2));
+      while (++index < length2) {
+        array[index] = source[index];
+      }
+      return array;
+    }
+    function copyObject(source, props, object, customizer) {
+      var isNew = !object;
+      object || (object = {});
+      var index = -1, length2 = props.length;
+      while (++index < length2) {
+        var key = props[index];
+        var newValue = customizer ? customizer(object[key], source[key], key, object, source) : void 0;
+        if (newValue === void 0) {
+          newValue = source[key];
+        }
+        if (isNew) {
+          baseAssignValue(object, key, newValue);
+        } else {
+          assignValue(object, key, newValue);
+        }
+      }
+      return object;
+    }
+    function createAssigner(assigner) {
+      return baseRest(function(object, sources) {
+        var index = -1, length2 = sources.length, customizer = length2 > 1 ? sources[length2 - 1] : void 0, guard = length2 > 2 ? sources[2] : void 0;
+        customizer = assigner.length > 3 && typeof customizer == "function" ? (length2--, customizer) : void 0;
+        if (guard && isIterateeCall(sources[0], sources[1], guard)) {
+          customizer = length2 < 3 ? void 0 : customizer;
+          length2 = 1;
+        }
+        object = Object(object);
+        while (++index < length2) {
+          var source = sources[index];
+          if (source) {
+            assigner(object, source, index, customizer);
+          }
+        }
+        return object;
+      });
+    }
+    function createBaseFor(fromRight) {
+      return function(object, iteratee, keysFunc) {
+        var index = -1, iterable = Object(object), props = keysFunc(object), length2 = props.length;
+        while (length2--) {
+          var key = props[fromRight ? length2 : ++index];
+          if (iteratee(iterable[key], key, iterable) === false) {
+            break;
+          }
+        }
+        return object;
+      };
+    }
+    function getMapData(map, key) {
+      var data = map.__data__;
+      return isKeyable(key) ? data[typeof key == "string" ? "string" : "hash"] : data.map;
+    }
+    function getNative(object, key) {
+      var value = getValue(object, key);
+      return baseIsNative(value) ? value : void 0;
+    }
+    function getRawTag(value) {
+      var isOwn = hasOwnProperty.call(value, symToStringTag), tag = value[symToStringTag];
+      try {
+        value[symToStringTag] = void 0;
+        var unmasked = true;
+      } catch (e) {
+      }
+      var result = nativeObjectToString.call(value);
+      if (unmasked) {
+        if (isOwn) {
+          value[symToStringTag] = tag;
+        } else {
+          delete value[symToStringTag];
+        }
+      }
+      return result;
+    }
+    function initCloneObject(object) {
+      return typeof object.constructor == "function" && !isPrototype(object) ? baseCreate(getPrototype(object)) : {};
+    }
+    function isIndex(value, length2) {
+      var type = typeof value;
+      length2 = length2 == null ? MAX_SAFE_INTEGER : length2;
+      return !!length2 && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length2);
+    }
+    function isIterateeCall(value, index, object) {
+      if (!isObject(object)) {
+        return false;
+      }
+      var type = typeof index;
+      if (type == "number" ? isArrayLike(object) && isIndex(index, object.length) : type == "string" && index in object) {
+        return eq(object[index], value);
+      }
+      return false;
+    }
+    function isKeyable(value) {
+      var type = typeof value;
+      return type == "string" || type == "number" || type == "symbol" || type == "boolean" ? value !== "__proto__" : value === null;
+    }
+    function isMasked(func) {
+      return !!maskSrcKey && maskSrcKey in func;
+    }
+    function isPrototype(value) {
+      var Ctor = value && value.constructor, proto = typeof Ctor == "function" && Ctor.prototype || objectProto;
+      return value === proto;
+    }
+    function nativeKeysIn(object) {
+      var result = [];
+      if (object != null) {
+        for (var key in Object(object)) {
+          result.push(key);
+        }
+      }
+      return result;
+    }
+    function objectToString(value) {
+      return nativeObjectToString.call(value);
+    }
+    function overRest(func, start, transform) {
+      start = nativeMax(start === void 0 ? func.length - 1 : start, 0);
+      return function() {
+        var args = arguments, index = -1, length2 = nativeMax(args.length - start, 0), array = Array(length2);
+        while (++index < length2) {
+          array[index] = args[start + index];
+        }
+        index = -1;
+        var otherArgs = Array(start + 1);
+        while (++index < start) {
+          otherArgs[index] = args[index];
+        }
+        otherArgs[start] = transform(array);
+        return apply(func, this, otherArgs);
+      };
+    }
+    function safeGet(object, key) {
+      if (key === "constructor" && typeof object[key] === "function") {
+        return;
+      }
+      if (key == "__proto__") {
+        return;
+      }
+      return object[key];
+    }
+    var setToString = shortOut(baseSetToString);
+    function shortOut(func) {
+      var count = 0, lastCalled = 0;
+      return function() {
+        var stamp = nativeNow(), remaining = HOT_SPAN - (stamp - lastCalled);
+        lastCalled = stamp;
+        if (remaining > 0) {
+          if (++count >= HOT_COUNT) {
+            return arguments[0];
+          }
+        } else {
+          count = 0;
+        }
+        return func.apply(void 0, arguments);
+      };
+    }
+    function toSource(func) {
+      if (func != null) {
+        try {
+          return funcToString.call(func);
+        } catch (e) {
+        }
+        try {
+          return func + "";
+        } catch (e) {
+        }
+      }
+      return "";
+    }
+    function eq(value, other) {
+      return value === other || value !== value && other !== other;
+    }
+    var isArguments = baseIsArguments(/* @__PURE__ */ function() {
+      return arguments;
+    }()) ? baseIsArguments : function(value) {
+      return isObjectLike(value) && hasOwnProperty.call(value, "callee") && !propertyIsEnumerable.call(value, "callee");
+    };
+    var isArray = Array.isArray;
+    function isArrayLike(value) {
+      return value != null && isLength(value.length) && !isFunction(value);
+    }
+    function isArrayLikeObject(value) {
+      return isObjectLike(value) && isArrayLike(value);
+    }
+    var isBuffer = nativeIsBuffer || stubFalse;
+    function isFunction(value) {
+      if (!isObject(value)) {
+        return false;
+      }
+      var tag = baseGetTag(value);
+      return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+    }
+    function isLength(value) {
+      return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+    }
+    function isObject(value) {
+      var type = typeof value;
+      return value != null && (type == "object" || type == "function");
+    }
+    function isObjectLike(value) {
+      return value != null && typeof value == "object";
+    }
+    function isPlainObject(value) {
+      if (!isObjectLike(value) || baseGetTag(value) != objectTag) {
+        return false;
+      }
+      var proto = getPrototype(value);
+      if (proto === null) {
+        return true;
+      }
+      var Ctor = hasOwnProperty.call(proto, "constructor") && proto.constructor;
+      return typeof Ctor == "function" && Ctor instanceof Ctor && funcToString.call(Ctor) == objectCtorString;
+    }
+    var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
+    function toPlainObject(value) {
+      return copyObject(value, keysIn(value));
+    }
+    function keysIn(object) {
+      return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);
+    }
+    var merge2 = createAssigner(function(object, source, srcIndex) {
+      baseMerge(object, source, srcIndex);
+    });
+    function constant(value) {
+      return function() {
+        return value;
+      };
+    }
+    function identity(value) {
+      return value;
+    }
+    function stubFalse() {
+      return false;
+    }
+    module2.exports = merge2;
+  }
+});
+
 // node_modules/classnames/index.js
 var require_classnames = __commonJS({
   "node_modules/classnames/index.js"(exports, module2) {
@@ -133,6 +855,7 @@ __export(src_exports, {
   Box: () => Box,
   Button: () => Button2,
   Card: () => Card,
+  Column: () => Column,
   EmbedContext: () => EmbedContext,
   EmbedProvider: () => EmbedProvider,
   Flex: () => Flex,
@@ -141,14 +864,19 @@ __export(src_exports, {
   IncludedFeatures: () => IncludedFeatures,
   Invoices: () => Invoices,
   MeteredFeatures: () => MeteredFeatures,
+  OverlayHeader: () => OverlayHeader,
+  OverlaySideBar: () => OverlaySideBar,
+  OverlayWrapper: () => OverlayWrapper,
   PaymentMethod: () => PaymentMethod,
   PlanManager: () => PlanManager,
   ProgressBar: () => ProgressBar,
+  Root: () => Root,
   Schematic: () => Schematic,
   SchematicEmbed: () => SchematicEmbed,
   SchematicProvider: () => SchematicProvider,
   Text: () => Text,
   UpcomingBill: () => UpcomingBill,
+  Viewport: () => Viewport,
   defaultSettings: () => defaultSettings,
   defaultTheme: () => defaultTheme,
   useEmbed: () => useEmbed,
@@ -4972,7 +5700,7 @@ var unitlessKeys = {
 var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var m = "active";
 var y = "data-styled-version";
-var v = "6.1.12";
+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);
@@ -5652,6 +6380,146 @@ 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\/?(\?.*)?$/;
+var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
+var findScript = function findScript2() {
+  var scripts = document.querySelectorAll('script[src^="'.concat(V3_URL, '"]'));
+  for (var i2 = 0; i2 < scripts.length; i2++) {
+    var script = scripts[i2];
+    if (!V3_URL_REGEX.test(script.src)) {
+      continue;
+    }
+    return script;
+  }
+  return null;
+};
+var injectScript = function injectScript2(params) {
+  var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
+  var script = document.createElement("script");
+  script.src = "".concat(V3_URL).concat(queryString);
+  var headOrBody = document.head || document.body;
+  if (!headOrBody) {
+    throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");
+  }
+  headOrBody.appendChild(script);
+  return script;
+};
+var registerWrapper = function registerWrapper2(stripe, startTime) {
+  if (!stripe || !stripe._registerWrapper) {
+    return;
+  }
+  stripe._registerWrapper({
+    name: "stripe-js",
+    version: "4.3.0",
+    startTime
+  });
+};
+var stripePromise = null;
+var onErrorListener = null;
+var onLoadListener = null;
+var onError = function onError2(reject) {
+  return function() {
+    reject(new Error("Failed to load Stripe.js"));
+  };
+};
+var onLoad = function onLoad2(resolve, reject) {
+  return function() {
+    if (window.Stripe) {
+      resolve(window.Stripe);
+    } else {
+      reject(new Error("Stripe.js not available"));
+    }
+  };
+};
+var loadScript = function loadScript2(params) {
+  if (stripePromise !== null) {
+    return stripePromise;
+  }
+  stripePromise = new Promise(function(resolve, reject) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      resolve(null);
+      return;
+    }
+    if (window.Stripe && params) {
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+    }
+    if (window.Stripe) {
+      resolve(window.Stripe);
+      return;
+    }
+    try {
+      var script = findScript();
+      if (script && params) {
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+      } else if (!script) {
+        script = injectScript(params);
+      } else if (script && onLoadListener !== null && onErrorListener !== null) {
+        var _script$parentNode;
+        script.removeEventListener("load", onLoadListener);
+        script.removeEventListener("error", onErrorListener);
+        (_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
+        script = injectScript(params);
+      }
+      onLoadListener = onLoad(resolve, reject);
+      onErrorListener = onError(reject);
+      script.addEventListener("load", onLoadListener);
+      script.addEventListener("error", onErrorListener);
+    } catch (error) {
+      reject(error);
+      return;
+    }
+  });
+  return stripePromise["catch"](function(error) {
+    stripePromise = null;
+    return Promise.reject(error);
+  });
+};
+var initStripe = function initStripe2(maybeStripe, args, startTime) {
+  if (maybeStripe === null) {
+    return null;
+  }
+  var stripe = maybeStripe.apply(void 0, args);
+  registerWrapper(stripe, startTime);
+  return stripe;
+};
+var stripePromise$1;
+var loadCalled = false;
+var getStripePromise = function getStripePromise2() {
+  if (stripePromise$1) {
+    return stripePromise$1;
+  }
+  stripePromise$1 = loadScript(null)["catch"](function(error) {
+    stripePromise$1 = null;
+    return Promise.reject(error);
+  });
+  return stripePromise$1;
+};
+Promise.resolve().then(function() {
+  return getStripePromise();
+})["catch"](function(error) {
+  if (!loadCalled) {
+    console.warn(error);
+  }
+});
+var loadStripe = function loadStripe2() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  loadCalled = true;
+  var startTime = Date.now();
+  return getStripePromise().then(function(maybeStripe) {
+    return initStripe(maybeStripe, args, startTime);
+  });
+};
+
+// src/context/embed.tsx
+var import_react_stripe_js = require("@stripe/react-stripe-js");
+
 // src/api/runtime.ts
 var BASE_PATH = "https://api.schematichq.com".replace(/\/+$/, "");
 var Configuration = class {
@@ -5968,6 +6836,30 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
   };
 }
 
+// src/api/models/BillingProductForSubscriptionResponseData.ts
+function BillingProductForSubscriptionResponseDataFromJSON(json) {
+  return BillingProductForSubscriptionResponseDataFromJSONTyped(json, false);
+}
+function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    accountId: json["account_id"],
+    createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    environmentId: json["environment_id"],
+    externalId: json["external_id"],
+    id: json["id"],
+    interval: json["interval"] == null ? void 0 : json["interval"],
+    name: json["name"],
+    price: json["price"],
+    quantity: json["quantity"],
+    subscriptionId: json["subscription_id"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
 // src/api/models/BillingSubscriptionResponseData.ts
 function BillingSubscriptionResponseDataFromJSON(json) {
   return BillingSubscriptionResponseDataFromJSONTyped(json, false);
@@ -5990,7 +6882,6 @@ function ChangeSubscriptionRequestBodyToJSON(value) {
     return value;
   }
   return {
-    action: value["action"],
     new_plan_id: value["newPlanId"],
     new_price_id: value["newPriceId"]
   };
@@ -6402,40 +7293,115 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
-// src/api/models/ComponentResponseData.ts
-function ComponentResponseDataFromJSON(json) {
-  return ComponentResponseDataFromJSONTyped(json, false);
+// src/api/models/InvoiceResponseData.ts
+function InvoiceResponseDataFromJSON(json) {
+  return InvoiceResponseDataFromJSONTyped(json, false);
 }
-function ComponentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   if (json == null) {
     return json;
   }
   return {
-    ast: json["ast"] == null ? void 0 : json["ast"],
+    amountDue: json["amount_due"],
+    amountPaid: json["amount_paid"],
+    amountRemaining: json["amount_remaining"],
+    collectionMethod: json["collection_method"],
+    companyId: json["company_id"] == null ? void 0 : json["company_id"],
     createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    customerExternalId: json["customer_external_id"],
+    dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
+    environmentId: json["environment_id"],
+    externalId: json["external_id"],
     id: json["id"],
-    name: json["name"],
-    state: json["state"],
-    type: json["type"],
+    subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
+    subtotal: json["subtotal"],
     updatedAt: new Date(json["updated_at"])
   };
 }
 
-// src/api/models/FeatureUsageResponseData.ts
-function FeatureUsageResponseDataFromJSON(json) {
-  return FeatureUsageResponseDataFromJSONTyped(json, false);
+// src/api/models/PaymentMethodResponseData.ts
+function PaymentMethodResponseDataFromJSON(json) {
+  return PaymentMethodResponseDataFromJSONTyped(json, false);
 }
-function FeatureUsageResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   if (json == null) {
     return json;
   }
   return {
-    access: json["access"],
-    allocation: json["allocation"] == null ? void 0 : json["allocation"],
-    allocationType: json["allocation_type"],
-    entitlementId: json["entitlement_id"],
-    entitlementType: json["entitlement_type"],
-    feature: json["feature"] == null ? void 0 : FeatureDetailResponseDataFromJSON(json["feature"]),
+    cardBrand: json["card_brand"] == null ? void 0 : json["card_brand"],
+    cardExpMonth: json["card_exp_month"] == null ? void 0 : json["card_exp_month"],
+    cardExpYear: json["card_exp_year"] == null ? void 0 : json["card_exp_year"],
+    cardLast4: json["card_last4"] == null ? void 0 : json["card_last4"],
+    companyId: json["company_id"] == null ? void 0 : json["company_id"],
+    createdAt: new Date(json["created_at"]),
+    customerExternalId: json["customer_external_id"],
+    environmentId: json["environment_id"],
+    externalId: json["external_id"],
+    id: json["id"],
+    invoiceExternalId: json["invoice_external_id"] == null ? void 0 : json["invoice_external_id"],
+    paymentMethodType: json["payment_method_type"],
+    subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
+// src/api/models/CompanySubscriptionResponseData.ts
+function CompanySubscriptionResponseDataFromJSON(json) {
+  return CompanySubscriptionResponseDataFromJSONTyped(json, false);
+}
+function CompanySubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    customerExternalId: json["customer_external_id"],
+    expiredAt: json["expired_at"] == null ? void 0 : new Date(json["expired_at"]),
+    interval: json["interval"],
+    latestInvoice: json["latest_invoice"] == null ? void 0 : InvoiceResponseDataFromJSON(json["latest_invoice"]),
+    paymentMethod: json["payment_method"] == null ? void 0 : PaymentMethodResponseDataFromJSON(json["payment_method"]),
+    products: json["products"].map(
+      BillingProductForSubscriptionResponseDataFromJSON
+    ),
+    subscriptionExternalId: json["subscription_external_id"],
+    totalPrice: json["total_price"]
+  };
+}
+
+// src/api/models/ComponentResponseData.ts
+function ComponentResponseDataFromJSON(json) {
+  return ComponentResponseDataFromJSONTyped(json, false);
+}
+function ComponentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    ast: json["ast"] == null ? void 0 : json["ast"],
+    createdAt: new Date(json["created_at"]),
+    id: json["id"],
+    name: json["name"],
+    state: json["state"],
+    type: json["type"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
+// src/api/models/FeatureUsageResponseData.ts
+function FeatureUsageResponseDataFromJSON(json) {
+  return FeatureUsageResponseDataFromJSONTyped(json, false);
+}
+function FeatureUsageResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    access: json["access"],
+    allocation: json["allocation"] == null ? void 0 : json["allocation"],
+    allocationType: json["allocation_type"],
+    entitlementId: json["entitlement_id"],
+    entitlementType: json["entitlement_type"],
+    feature: json["feature"] == null ? void 0 : FeatureDetailResponseDataFromJSON(json["feature"]),
     period: json["period"] == null ? void 0 : json["period"],
     plan: json["plan"] == null ? void 0 : PlanResponseDataFromJSON(json["plan"]),
     usage: json["usage"] == null ? void 0 : json["usage"]
@@ -6466,7 +7432,7 @@ function StripeEmbedInfoFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
-    customerEkey: json["customer_ekey"],
+    customerEkey: json["customer_ekey"] == null ? void 0 : json["customer_ekey"],
     publishableKey: json["publishable_key"]
   };
 }
@@ -6486,7 +7452,9 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     company: json["company"] == null ? void 0 : CompanyDetailResponseDataFromJSON(json["company"]),
     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"])
+    stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
+    subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"]),
+    upcomingInvoice: json["upcoming_invoice"] == null ? void 0 : InvoiceResponseDataFromJSON(json["upcoming_invoice"])
   };
 }
 
@@ -6687,11 +7655,9 @@ function parseEditorState(data) {
   });
   return arr;
 }
-async function fetchComponent(id, accessToken, options) {
+async function fetchComponent(id, api) {
   const settings = { ...defaultSettings };
   const nodes = [];
-  const config = new Configuration({ ...options, apiKey: accessToken });
-  const api = new CheckoutApi(config);
   const response = await api.hydrateComponent({ componentId: id });
   const { data } = response;
   if (data.component?.ast) {
@@ -6699,28 +7665,39 @@ async function fetchComponent(id, accessToken, options) {
     const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
       to: "string"
     });
-    const ast = getEditorState(JSON.stringify(json));
+    const ast = getEditorState(json);
     if (ast) {
       Object.assign(settings, ast.ROOT.props);
       nodes.push(...parseEditorState(ast));
     }
   }
+  let stripe = null;
+  if (data.stripeEmbed?.publishableKey) {
+    stripe = loadStripe(data.stripeEmbed.publishableKey);
+  }
   return {
     data,
     nodes,
-    settings
+    settings,
+    stripe
   };
 }
 var EmbedContext = (0, import_react2.createContext)({
-  data: {},
+  api: null,
+  data: {
+    activePlans: []
+  },
   nodes: [],
   settings: { ...defaultSettings },
+  stripe: null,
   layout: "portal",
   error: void 0,
   setData: () => {
   },
   updateSettings: () => {
   },
+  setStripe: () => {
+  },
   setLayout: () => {
   }
 });
@@ -6733,15 +7710,21 @@ 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,
       layout: "portal",
       error: void 0,
       setData: () => {
       },
       updateSettings: () => {
       },
+      setStripe: () => {
+      },
       setLayout: () => {
       }
     };
@@ -6758,13 +7741,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((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 }) => {
@@ -6779,18 +7770,29 @@ 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) => {
+        const updated = { ...prev2 };
+        (0, import_lodash.default)(updated.settings, settings);
+        return updated;
+      });
+    },
+    [setState]
+  );
+  const setStripe = (0, import_react2.useCallback)(
+    (stripe) => {
       setState((prev2) => ({
         ...prev2,
-        settings: Object.assign({}, prev2.settings, settings)
+        stripe
       }));
     },
     [setState]
@@ -6804,20 +7806,64 @@ var EmbedProvider = ({
     },
     [setState]
   );
+  const renderChildren = () => {
+    if (state.stripe) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_stripe_js.Elements,
+        {
+          stripe: state.stripe,
+          options: {
+            appearance: {
+              theme: "stripe",
+              variables: {
+                // Base
+                spacingUnit: ".25rem",
+                colorPrimary: "#0570de",
+                colorBackground: "#FFFFFF",
+                colorText: "#30313d",
+                colorDanger: "#df1b41",
+                fontFamily: "Public Sans, system-ui, sans-serif",
+                borderRadius: ".5rem",
+                // Layout
+                gridRowSpacing: "1.5rem",
+                gridColumnSpacing: "1.5rem"
+              },
+              rules: {
+                ".Label": {
+                  color: "#020202",
+                  fontWeight: "400",
+                  fontSize: "16px",
+                  marginBottom: "12px"
+                }
+              }
+            },
+            ...state.data.stripeEmbed?.customerEkey ? {
+              clientSecret: state.data.stripeEmbed.customerEkey
+            } : { mode: "payment", currency: "usd", amount: 999999 }
+          },
+          children
+        }
+      );
+    }
+    return children;
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     EmbedContext.Provider,
     {
       value: {
+        api: state.api,
         data: state.data,
         nodes: state.nodes,
         settings: state.settings,
+        stripe: state.stripe,
         layout: state.layout,
         error: state.error,
         setData,
         updateSettings,
+        setStripe,
         setLayout
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ot, { theme: state.settings.theme, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ot, { theme: state.settings.theme, children: renderChildren() })
     }
   );
 };
@@ -6852,11 +7898,11 @@ var require_browser_polyfill = __commonJS2({
   "node_modules/cross-fetch/dist/browser-polyfill.js"(exports) {
     (function(self2) {
       var irrelevant = function(exports2) {
-        var global = typeof globalThis !== "undefined" && globalThis || typeof self2 !== "undefined" && self2 || typeof global !== "undefined" && global;
+        var global2 = typeof globalThis !== "undefined" && globalThis || typeof self2 !== "undefined" && self2 || typeof global2 !== "undefined" && global2;
         var support = {
-          searchParams: "URLSearchParams" in global,
-          iterable: "Symbol" in global && "iterator" in Symbol,
-          blob: "FileReader" in global && "Blob" in global && function() {
+          searchParams: "URLSearchParams" in global2,
+          iterable: "Symbol" in global2 && "iterator" in Symbol,
+          blob: "FileReader" in global2 && "Blob" in global2 && function() {
             try {
               new Blob();
               return true;
@@ -6864,8 +7910,8 @@ var require_browser_polyfill = __commonJS2({
               return false;
             }
           }(),
-          formData: "FormData" in global,
-          arrayBuffer: "ArrayBuffer" in global
+          formData: "FormData" in global2,
+          arrayBuffer: "ArrayBuffer" in global2
         };
         function isDataView(obj) {
           return obj && DataView.prototype.isPrototypeOf(obj);
@@ -7242,7 +8288,7 @@ var require_browser_polyfill = __commonJS2({
           }
           return new Response(null, { status, headers: { location: url } });
         };
-        exports2.DOMException = global.DOMException;
+        exports2.DOMException = global2.DOMException;
         try {
           new exports2.DOMException();
         } catch (err2) {
@@ -7294,7 +8340,7 @@ var require_browser_polyfill = __commonJS2({
             };
             function fixUrl(url) {
               try {
-                return url === "" && global.location.href ? global.location.href : url;
+                return url === "" && global2.location.href ? global2.location.href : url;
               } catch (e) {
                 return url;
               }
@@ -7333,11 +8379,11 @@ var require_browser_polyfill = __commonJS2({
           });
         }
         fetch2.polyfill = true;
-        if (!global.fetch) {
-          global.fetch = fetch2;
-          global.Headers = Headers;
-          global.Request = Request;
-          global.Response = Response;
+        if (!global2.fetch) {
+          global2.fetch = fetch2;
+          global2.Headers = Headers;
+          global2.Request = Request;
+          global2.Response = Response;
         }
         exports2.Headers = Headers;
         exports2.Request = Request;
@@ -7755,11 +8801,9 @@ var useSchematicFlag = (key, opts) => {
   return value;
 };
 
-// src/components/elements/card/Card.tsx
-var import_react6 = require("react");
-
-// src/const/index.ts
-var TEXT_BASE_SIZE = 16;
+// src/components/elements/plan-manager/PlanManager.tsx
+var import_react7 = require("react");
+var import_react_dom = require("react-dom");
 
 // src/utils/color.ts
 function hexToHSL(color) {
@@ -7871,6 +8915,9 @@ function camelToHyphen(str) {
   return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
 }
 
+// src/const/index.ts
+var TEXT_BASE_SIZE = 16;
+
 // src/utils/style.ts
 function attr(key, value) {
   return typeof value !== "undefined" && lt`
@@ -7888,88 +8935,6 @@ attr.rem = function propAsRem(key, value) {
     `;
 };
 
-// src/components/elements/card/styles.ts
-var StyledCard = dt.div(
-  ({
-    theme,
-    $sectionLayout = "merged",
-    $borderRadius = 8,
-    $padding = 48,
-    $shadow = true
-  }) => {
-    return lt`
-      box-sizing: border-box;
-      font-size: ${TEXT_BASE_SIZE}px;
-
-      *,
-      *::before,
-      *::after {
-        box-sizing: inherit;
-      }
-
-      > * {
-        padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
-          ${$padding / TEXT_BASE_SIZE}rem;
-        color: ${theme.typography.text.color};
-      }
-
-      ${() => {
-      const { l: l2 } = hexToHSL(theme.card.background);
-      const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
-      const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
-      const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
-      if ($sectionLayout === "merged") {
-        return lt`
-            background: ${({ theme: theme2 }) => theme2.card.background};
-            border-radius: ${borderRadius};
-
-            ${$shadow && `box-shadow: ${boxShadow};`}
-
-            > :not(:last-child) {
-              border-bottom: 1px solid ${borderColor};
-            }
-          `;
-      }
-      return lt`
-          > :not(:last-child) {
-            margin-bottom: 1rem;
-          }
-
-          > * {
-            background: ${theme.card.background};
-            border-radius: ${borderRadius};
-            ${$shadow && `box-shadow: ${boxShadow};`}
-          }
-        `;
-    }}
-    `;
-  }
-);
-
-// src/components/elements/card/Card.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Card = (0, import_react6.forwardRef)(
-  ({ children, className }, ref) => {
-    const { settings } = useEmbed();
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      StyledCard,
-      {
-        ref,
-        className,
-        $sectionLayout: settings.theme?.sectionLayout,
-        $borderRadius: settings.theme?.card?.borderRadius,
-        $padding: settings.theme?.card?.padding,
-        $shadow: settings.theme?.card?.hasShadow,
-        children
-      }
-    );
-  }
-);
-
-// src/components/elements/plan-manager/PlanManager.tsx
-var import_react7 = require("react");
-var import_react_dom = require("react-dom");
-
 // src/components/ui/box/styles.ts
 var Box = dt.div((props) => {
   const initialStyles = [];
@@ -8087,7 +9052,7 @@ var Button = dt.button`
 `;
 
 // src/components/ui/button/Button.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Button2 = ({
   color = "white",
   size = "md",
@@ -8096,7 +9061,7 @@ var Button2 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Button,
     {
       $color: color,
@@ -8127,6 +9092,7 @@ var Container = dt.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-shrink: 0;
   border-radius: 9999px;
   ${({ $size }) => {
   const base = 24;
@@ -8163,13 +9129,13 @@ var Container = dt.div`
 `;
 
 // src/components/ui/icon/Icon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Icon2 = ({ name, className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: (0, import_classnames.default)("i", `i-${name}`, className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: (0, import_classnames.default)("i", `i-${name}`, className), ...props });
 };
 
 // src/components/ui/icon/IconRound.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var IconRound = ({
   name,
   variant = "filled",
@@ -8177,7 +9143,7 @@ var IconRound = ({
   colors = ["white", "#e5e7eb"],
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon2, { name }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon2, { name }) });
 };
 
 // src/components/ui/progress-bar/styles.ts
@@ -8186,7 +9152,7 @@ var Container2 = dt(Flex)`
 `;
 
 // src/components/ui/progress-bar/ProgressBar.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ProgressBar = ({
   progress,
   value,
@@ -8202,21 +9168,21 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     Container2,
     {
       $alignItems: "center",
       $gap: `${16 / TEXT_BASE_SIZE}rem`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Flex,
           {
             $position: "relative",
             $alignItems: "center",
             $width: `${barWidth}`,
             $maxWidth: "100%",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Flex,
               {
                 $position: "relative",
@@ -8225,7 +9191,7 @@ var ProgressBar = ({
                 $height: `${8 / TEXT_BASE_SIZE}rem`,
                 $background: "#F2F4F7",
                 $borderRadius: "9999px",
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   Box,
                   {
                     $width: `${Math.min(progress, 100)}%`,
@@ -8238,7 +9204,7 @@ var ProgressBar = ({
             )
           }
         ),
-        total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { $size: 14, $weight: 500, children: [
+        total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { $size: 14, $weight: 500, children: [
           value,
           "/",
           total
@@ -8248,41 +9214,61 @@ var ProgressBar = ({
   );
 };
 
+// src/components/elements/plan-manager/CheckoutForm.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");
+
 // 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 }) => {
+  ${({ disabled, $color = "primary", theme }) => {
   const { l: l2 } = hexToHSL(theme[$color]);
-  const color = l2 > 50 ? "#000000" : "#FFFFFF";
+  const textColor = disabled ? "#989898" : l2 > 50 ? "#000000" : "#FFFFFF";
   return lt`
-      color: ${color};
+      color: ${textColor};
 
       ${Text} {
-        color: ${color};
+        color: ${textColor};
       }
     `;
 }};
 
-  ${({ $color = "primary", theme }) => {
-  const color = theme[$color];
-  return lt`
-      background-color: ${color};
-      border-color: ${color};
-    `;
+  ${({ 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 }) => {
+    ${({ 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;
-  return lt`
-        background-color: ${color};
-        border-color: ${color};
-      `;
+  const color = disabled ? "#EEEEEE" : specified === lightened ? darken(specified, 15) : lightened;
+  return $variant === "filled" ? lt`
+            background-color: ${color};
+            border-color: ${color};
+          ` : lt`
+            background-color: ${color};
+            border-color: ${color};
+            color: #ffffff;
+            ${Text} {
+              color: #ffffff;
+            }
+          `;
 }}
   }
 
@@ -8292,168 +9278,547 @@ var StyledButton = dt(Button2)`
       return lt`
           font-size: ${15 / 16}rem;
           padding: ${12 / 16}rem 0;
-          border-radius: ${8 / 16}rem;
+          border-radius: ${6 / 16}rem;
         `;
     case "md":
       return lt`
           font-size: ${17 / 16}rem;
           padding: ${16 / 16}rem 0;
-          border-radius: ${10 / 16}rem;
+          border-radius: ${8 / 16}rem;
         `;
     case "lg":
       return lt`
           font-size: ${19 / 16}rem;
           padding: ${20 / 16}rem 0;
-          border-radius: ${12 / 16}rem;
+          border-radius: ${10 / 16}rem;
         `;
   }
 }}
 `;
 
-// src/components/elements/plan-manager/PlanManager.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var resolveDesignProps = (props) => {
-  return {
-    header: {
-      isVisible: props.header?.isVisible ?? true,
-      title: {
-        fontStyle: props.header?.title?.fontStyle ?? "heading1"
-      },
-      description: {
-        isVisible: props.header?.description?.isVisible ?? true,
-        fontStyle: props.header?.description?.fontStyle ?? "text"
-      },
-      price: {
-        isVisible: props.header?.price?.isVisible ?? true,
-        fontStyle: props.header?.price?.fontStyle ?? "text"
+// src/components/elements/plan-manager/CheckoutForm.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CheckoutForm = ({ plan, period }) => {
+  const stripe = (0, import_react_stripe_js3.useStripe)();
+  const elements = (0, import_react_stripe_js3.useElements)();
+  const { api, data } = useEmbed();
+  const [message, setMessage] = (0, import_react6.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const priceId = period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
+    if (!api || !stripe || !elements || !priceId) {
+      return;
+    }
+    setIsLoading(true);
+    const { error } = await stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        return_url: window.location.href
       }
-    },
-    addOns: {
-      isVisible: props.addOns?.isVisible ?? true,
-      fontStyle: props.addOns?.fontStyle ?? "heading4",
-      showLabel: props.addOns?.showLabel ?? true
-    },
-    callToAction: {
-      isVisible: props.callToAction?.isVisible ?? true,
-      buttonSize: props.callToAction?.buttonSize ?? "md",
-      buttonStyle: props.callToAction?.buttonStyle ?? "secondary"
+    });
+    if (error.type === "card_error" || error.type === "validation_error") {
+      setMessage(error.message);
+    } else {
+      setMessage("An unexpected error occured.");
     }
+    setIsLoading(false);
   };
-};
-var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal, ...rest }, ref) => {
-  const props = resolveDesignProps(rest);
-  const { data, settings, layout, setLayout } = useEmbed();
-  const { plan, plans, addOns } = (0, import_react7.useMemo)(() => {
-    return {
-      plan: data.company?.plan || {},
-      plans: data.company?.plans?.map(({ name, description }) => ({
-        name,
-        description,
-        price: void 0
-      })) || [],
-      addOns: data.company?.addOns?.map(({ name, description }) => ({
-        name,
-        description,
-        price: void 0
-      })) || []
-    };
-  }, [data.company]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", $margin: "0 0 3rem", children: [
-      props.header.isVisible && plan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-        Flex,
-        {
-          $justifyContent: "space-between",
-          $alignItems: "center",
-          $width: "100%",
-          $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)(
-                Text,
-                {
-                  $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
-                  $size: settings.theme.typography[props.header.title.fontStyle].fontSize,
-                  $weight: settings.theme.typography[props.header.title.fontStyle].fontWeight,
-                  $color: settings.theme.typography[props.header.title.fontStyle].color,
-                  $lineHeight: 1,
-                  children: plan.name
-                }
-              ) }),
-              props.header.description.isVisible && plan.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                Text,
-                {
-                  $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
-                  $size: settings.theme.typography[props.header.description.fontStyle].fontSize,
-                  $weight: settings.theme.typography[props.header.description.fontStyle].fontWeight,
-                  $color: settings.theme.typography[props.header.description.fontStyle].color,
-                  children: plan.description
-                }
-              )
-            ] }),
-            props.header.price.isVisible && plan.planPrice >= 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              Text,
-              {
-                $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
-                $size: settings.theme.typography[props.header.price.fontStyle].fontSize,
-                $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
-                $color: settings.theme.typography[props.header.price.fontStyle].color,
-                children: [
-                  "$",
-                  plan.planPrice,
-                  "/",
-                  plan.planPeriod
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      props.addOns.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          Text,
+  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,
           {
-            $font: settings.theme.typography.text.fontFamily,
-            $size: settings.theme.typography.text.fontSize,
-            $weight: 500,
-            $color: darken(settings.theme.typography.text.color, 20),
-            children: "Add-Ons"
+            $fontSize: "18px",
+            $marginBottom: "1.5rem",
+            $display: "inline-block",
+            $width: "100%",
+            children: [
+              "Add payment method",
+              " "
+            ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $width: "100%", $margin: "0 0 1rem", children: addOns.map((addOn, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__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?.customerEkey,
+            $size: "md",
+            $color: "secondary",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/components/elements/plan-manager/PlanManager.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var OverlayHeader = ({
+  children,
+  onClose
+}) => {
+  const { setLayout } = useEmbed();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    Flex,
+    {
+      $paddingLeft: "2.5rem",
+      $paddingRight: "2.5rem",
+      $padding: ".75rem 2.5rem",
+      $flexDirection: "row",
+      $justifyContent: "space-between",
+      $alignItems: "center",
+      $borderBottom: "1px solid #DEDEDE",
+      $gap: "1rem",
+      $backgroundColor: "#FFFFFF",
+      $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");
+              if (onClose) {
+                onClose();
+              }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
+          }
+        ) })
+      ]
+    }
+  );
+};
+var OverlayWrapper = ({
+  children,
+  size = "lg"
+}) => {
+  const sizeWidthMap = {
+    md: "700px",
+    lg: "75%"
+  };
+  const sizeHeighthMap = {
+    md: "auto",
+    lg: "75%"
+  };
+  const sizeMaxWidthMap = {
+    md: "auto",
+    lg: "1140px"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Box,
+    {
+      $position: "absolute",
+      $top: "50%",
+      $left: "50%",
+      $zIndex: "999999",
+      $transform: "translate(-50%, -50%)",
+      $width: "100%",
+      $height: "100%",
+      $backgroundColor: "#D9D9D9",
+      $overflow: "hidden",
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Flex,
+        {
+          $position: "relative",
+          $top: "50%",
+          $left: "50%",
+          $transform: "translate(-50%, -50%)",
+          $flexDirection: "column",
+          $maxWidth: sizeMaxWidthMap[size],
+          $width: sizeWidthMap[size],
+          $height: sizeHeighthMap[size],
+          $backgroundColor: "#FBFBFB",
+          $borderBottom: "1px solid #DEDEDE",
+          $borderRadius: "8px",
+          $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+          id: "select-plan-dialog",
+          role: "dialog",
+          "aria-labelledby": "select-plan-dialog-label",
+          "aria-modal": "true",
+          children
+        }
+      )
+    }
+  );
+};
+var OverlaySideBar = ({
+  pricePeriod,
+  setPricePeriod,
+  checkoutStage,
+  setCheckoutStage,
+  currentPlan,
+  selectedPlan
+}) => {
+  const { api } = useEmbed();
+  const savingsPercentage = (0, import_react7.useMemo)(() => {
+    if (selectedPlan && pricePeriod === "month") {
+      const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
+      const yearly = selectedPlan?.yearlyPrice?.price || 0;
+      return (monthly - yearly) / monthly * 100;
+    }
+    return 0;
+  }, [selectedPlan, pricePeriod]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    Flex,
+    {
+      $flexDirection: "column",
+      $background: "white",
+      $borderRadius: "0 0 0.5rem",
+      $maxWidth: "275px",
+      $height: "100%",
+      $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+      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)(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,
+                {
+                  $flexDirection: "row",
+                  $border: "1px solid #D9D9D9",
+                  $borderRadius: "40px",
+                  $fontSize: "12px",
+                  $textAlign: "center",
+                  $cursor: "pointer",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      Box,
+                      {
+                        onClick: () => setPricePeriod("month"),
+                        $padding: ".25rem .5rem",
+                        $flex: "1",
+                        $fontWeight: pricePeriod === "month" ? "600" : "400",
+                        $backgroundColor: pricePeriod === "month" ? "#DDDDDD" : "white",
+                        $borderRadius: "40px",
+                        children: "Billed monthly"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      Box,
+                      {
+                        onClick: () => setPricePeriod("year"),
+                        $padding: ".25rem .5rem",
+                        $flex: "1",
+                        $fontWeight: pricePeriod === "year" ? "600" : "400",
+                        $backgroundColor: pricePeriod === "year" ? "#DDDDDD" : "white",
+                        $borderRadius: "40px",
+                        children: "Billed yearly"
+                      }
+                    )
+                  ]
+                }
+              ),
+              savingsPercentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "11px", $color: "#194BFB", children: [
+                "Save up to ",
+                savingsPercentage,
+                "% with yearly billing"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          Flex,
+          {
+            $flexDirection: "column",
+            $position: "relative",
+            $gap: "1rem",
+            $width: "100%",
+            $height: "auto",
+            $padding: "1.5rem",
+            $flex: "1",
+            $borderBottom: "1px solid #DEDEDE",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "14px", $color: "#5D5D5D", children: "Plan" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $fontSize: "14px",
+                  $color: "#5D5D5D",
+                  $gap: ".5rem",
+                  children: [
+                    currentPlan && /* @__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: "#5D5D5D", children: currentPlan.name }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
+                            "$",
+                            currentPlan.planPrice,
+                            "/",
+                            currentPlan.planPeriod
+                          ] })
+                        ]
+                      }
+                    ),
+                    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: selectedPlan.name }),
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
+                              "$",
+                              pricePeriod === "month" ? selectedPlan.monthlyPrice?.price : selectedPlan.yearlyPrice?.price,
+                              "/",
+                              pricePeriod
+                            ] })
+                          ]
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          Flex,
+          {
+            $flexDirection: "column",
+            $position: "relative",
+            $gap: ".75rem",
+            $width: "100%",
+            $height: "auto",
+            $padding: "1.5rem",
+            children: [
+              selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                Flex,
+                {
+                  $fontSize: "12px",
+                  $color: "#5D5D5D",
+                  $justifyContent: "space-between",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
+                      "Monthly total:",
+                      " "
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#000000", children: [
+                      "$",
+                      pricePeriod === "month" ? selectedPlan.monthlyPrice?.price : selectedPlan.yearlyPrice?.price,
+                      "/",
+                      pricePeriod
+                    ] })
+                  ]
+                }
+              ),
+              checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                StyledButton,
+                {
+                  $size: "sm",
+                  onClick: () => {
+                    setCheckoutStage("checkout");
+                  },
+                  ...!selectedPlan && { disabled: true },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", $justifyContent: "center", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Next: Checkout" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "arrow-right" })
+                  ] })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                StyledButton,
+                {
+                  disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id,
+                  onClick: async () => {
+                    const priceId = pricePeriod === "month" ? selectedPlan?.monthlyPrice?.id : selectedPlan?.yearlyPrice?.id;
+                    if (!api || !selectedPlan || !priceId)
+                      return;
+                    await api.checkout({
+                      changeSubscriptionRequestBody: {
+                        newPlanId: selectedPlan.id,
+                        newPriceId: priceId
+                      }
+                    });
+                  },
+                  $size: "md",
+                  children: "Pay now"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var resolveDesignProps = (props) => {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      title: {
+        fontStyle: props.header?.title?.fontStyle ?? "heading1"
+      },
+      description: {
+        isVisible: props.header?.description?.isVisible ?? true,
+        fontStyle: props.header?.description?.fontStyle ?? "text"
+      },
+      price: {
+        isVisible: props.header?.price?.isVisible ?? true,
+        fontStyle: props.header?.price?.fontStyle ?? "text"
+      }
+    },
+    addOns: {
+      isVisible: props.addOns?.isVisible ?? true,
+      fontStyle: props.addOns?.fontStyle ?? "heading4",
+      showLabel: props.addOns?.showLabel ?? true
+    },
+    callToAction: {
+      isVisible: props.callToAction?.isVisible ?? true,
+      buttonSize: props.callToAction?.buttonSize ?? "md",
+      buttonStyle: props.callToAction?.buttonStyle ?? "secondary"
+    }
+  };
+};
+var PlanManager = (0, import_react7.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 [selectedPlan, setSelectedPlan] = (0, import_react7.useState)();
+  const { data, settings, layout, stripe, setLayout } = useEmbed();
+  const { currentPlan, canChangePlan, availablePlans } = (0, import_react7.useMemo)(() => {
+    return {
+      currentPlan: data.company?.plan,
+      canChangePlan: stripe !== null,
+      availablePlans: data.activePlans
+    };
+  }, [data.company, data.activePlans, stripe]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Flex,
+      {
+        $flexDirection: "column",
+        $gap: "0.75rem",
+        ...canChangePlan && { $margin: "0 0 0.5rem" },
+        children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           Flex,
           {
             $justifyContent: "space-between",
             $alignItems: "center",
             $width: "100%",
+            ...canChangePlan && { $margin: "0 0 1.5rem" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__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)(
+                  Text,
+                  {
+                    $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.header.title.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.header.title.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.header.title.fontStyle].color,
+                    $lineHeight: 1,
+                    children: currentPlan.name
+                  }
+                ) }),
+                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  Text,
+                  {
+                    $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.header.description.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.header.description.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.header.description.fontStyle].color,
+                    children: currentPlan.description
+                  }
+                )
+              ] }),
+              props.header.price.isVisible && currentPlan.planPrice >= 0 && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 Text,
                 {
-                  $font: settings.theme.typography[props.addOns.fontStyle].fontFamily,
-                  $size: settings.theme.typography[props.addOns.fontStyle].fontSize,
-                  $weight: settings.theme.typography[props.addOns.fontStyle].fontWeight,
-                  $color: settings.theme.typography[props.addOns.fontStyle].color,
-                  children: addOn.name
+                  $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
+                  $size: settings.theme.typography[props.header.price.fontStyle].fontSize,
+                  $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
+                  $color: settings.theme.typography[props.header.price.fontStyle].color,
+                  children: [
+                    "$",
+                    currentPlan.planPrice,
+                    "/",
+                    currentPlan.planPeriod
+                  ]
                 }
-              ),
-              addOn.price >= 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { $weight: 500, children: [
-                "$",
-                addOn.price,
-                "/mo"
-              ] })
+              )
             ]
-          },
-          index
-        )) })
-      ] })
-    ] }),
-    props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          }
+        )
+      }
+    ),
+    canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       StyledButton,
       {
         onClick: () => {
-          if (layout !== "checkout")
-            return;
           setLayout("checkout");
         },
         $size: props.callToAction.buttonSize,
@@ -8469,83 +9834,298 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
         )
       }
     ),
-    children,
-    layout === "checkout" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        Box,
-        {
-          $position: "absolute",
-          $top: "50%",
-          $left: "50%",
-          $zIndex: "999999",
-          $transform: "translate(-50%, -50%)",
-          $width: "100%",
-          $height: "100%",
-          $backgroundColor: "#B5B5B580",
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    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: [
+            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,
             {
-              $position: "relative",
-              $top: "50%",
-              $left: "50%",
-              $transform: "translate(-50%, -50%)",
-              $width: "956px",
-              $height: "700px",
+              $flexDirection: "column",
+              $gap: "1rem",
+              $padding: "2rem 2.5rem 2rem 2.5rem",
               $backgroundColor: "#FBFBFB",
-              $borderRadius: "8px",
-              $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
-              id: "select-plan-dialog",
-              role: "dialog",
-              "aria-labelledby": "select-plan-dialog-label",
-              "aria-modal": "true",
+              $borderRadius: "0 0.5rem 0",
+              $flex: "1",
+              $height: "100%",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  Box,
-                  {
-                    $position: "absolute",
-                    $top: "0.25rem",
-                    $right: "0.75rem",
-                    $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.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    Text,
+                checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    Flex,
                     {
-                      as: "h1",
-                      id: "select-plan-dialog-label",
-                      $size: 24,
-                      $weight: 800,
-                      children: "Select plan"
+                      $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: "column", $gap: "1rem", children: plans.map((plan2, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     Flex,
                     {
-                      $justifyContent: "space-between",
-                      $alignItems: "center",
-                      $width: "100%",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 800, children: plan2.name }),
-                        plan2.price >= 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { children: [
-                          "$",
-                          plan2.price,
-                          "/mo"
-                        ] })
-                      ]
-                    },
-                    index
-                  )) })
-                ] })
+                      $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: ".90rem", children: "$" }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $display: "inline-block", $fontSize: ".75rem", children: [
+                                        "/",
+                                        planPeriod
+                                      ] })
+                                    ] }),
+                                    (plan.current || 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: "secondary",
+                                        $variant: "outline",
+                                        onClick: () => {
+                                          setSelectedPlan(plan);
+                                        },
+                                        children: "Select"
+                                      }
+                                    )
+                                  ]
+                                }
+                              )
+                            ]
+                          },
+                          plan.id
+                        );
+                      })
+                    }
+                  )
+                ] }),
+                selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutForm, { plan: selectedPlan, period: planPeriod })
               ]
             }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            OverlaySideBar,
+            {
+              pricePeriod: planPeriod,
+              setPricePeriod: setPlanPeriod,
+              checkoutStage,
+              setCheckoutStage,
+              currentPlan,
+              selectedPlan
+            }
           )
-        }
-      ),
+        ] })
+      ] }),
       portal || document.body
     )
   ] });
@@ -8587,7 +10167,7 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
         allocationType,
         feature,
         period,
-        usage,
+        usage = 0,
         ...props2
       }) => {
         return {
@@ -8632,7 +10212,7 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $flexShrink: "0", $gap: "1rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "1rem", children: [
                   props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     IconRound,
                     {
@@ -8651,7 +10231,6 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
                       $size: settings.theme.typography[props.icons.fontStyle].fontSize,
                       $weight: settings.theme.typography[props.icons.fontStyle].fontWeight,
                       $color: settings.theme.typography[props.icons.fontStyle].color,
-                      $align: "center",
                       children: feature.name
                     }
                   ) })
@@ -8852,19 +10431,27 @@ function resolveDesignProps4(props) {
 }
 var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
-  const { settings } = useEmbed();
-  const { bill } = (0, import_react10.useMemo)(() => {
+  const { data, settings, stripe } = useEmbed();
+  const { upcomingInvoice } = (0, import_react10.useMemo)(() => {
     return {
-      bill: {
-        amount: 200,
-        period: "monthly",
-        dueDate: toPrettyDate(/* @__PURE__ */ new Date("2024-06-12")),
-        endDate: (/* @__PURE__ */ new Date("2025-05-12")).toLocaleDateString()
+      upcomingInvoice: {
+        ...data.upcomingInvoice?.amountDue && {
+          amountDue: data.upcomingInvoice.amountDue
+        },
+        ...data.subscription?.interval && {
+          interval: data.subscription.interval
+        },
+        ...data.upcomingInvoice?.dueDate && {
+          dueDate: toPrettyDate(new Date(data.upcomingInvoice.dueDate))
+        }
       }
     };
-  }, []);
+  }, [data.subscription, data.upcomingInvoice]);
+  if (!stripe || !data.upcomingInvoice) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -8880,13 +10467,13 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
             children: [
               props.header.prefix,
               " ",
-              bill.dueDate
+              upcomingInvoice.dueDate
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+    upcomingInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
       props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         Text,
         {
@@ -8904,27 +10491,18 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
                 children: "$"
               }
             ),
-            bill.amount
+            upcomingInvoice.amountDue
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $maxWidth: "140px", $lineHeight: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         Text,
         {
           $font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
           $size: settings.theme.typography[props.contractEndDate.fontStyle].fontSize,
           $weight: settings.theme.typography[props.contractEndDate.fontStyle].fontWeight,
           $color: settings.theme.typography[props.contractEndDate.fontStyle].color,
-          children: [
-            "Estimated monthly bill.",
-            props.contractEndDate.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-              "\xA0",
-              props.contractEndDate.prefix,
-              " ",
-              bill.endDate,
-              "."
-            ] })
-          ]
+          children: "Estimated monthly bill."
         }
       ) })
     ] })
@@ -8948,21 +10526,26 @@ var resolveDesignProps5 = (props) => {
 };
 var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
-  const { settings, layout, setLayout } = useEmbed();
+  const { data, settings, stripe, layout } = useEmbed();
   const paymentMethod = (0, import_react11.useMemo)(() => {
-    const cardNumber = "4512";
-    const expirationDate = "2024-12-22";
-    const timeToExpiration = Math.round(
-      +new Date(expirationDate) - +/* @__PURE__ */ new Date()
-    );
-    const monthsToExpiration = Math.round(
-      timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
-    );
+    const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
+    let monthsToExpiration;
+    if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
+      const timeToExpiration = Math.round(
+        +new Date(cardExpYear, cardExpMonth - 1) - +/* @__PURE__ */ new Date()
+      );
+      monthsToExpiration = Math.round(
+        timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
+      );
+    }
     return {
-      cardNumber,
+      cardLast4,
       monthsToExpiration
     };
-  }, []);
+  }, [data.subscription?.paymentMethod]);
+  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)(
       Flex,
@@ -8981,7 +10564,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
               children: "Payment Method"
             }
           ),
-          Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Text,
             {
               $font: settings.theme.typography.text.fontFamily,
@@ -8993,7 +10576,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -9002,87 +10585,253 @@ 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.cardNumber
-          ] }),
-          props.functions.allowEdit && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            Text,
-            {
-              tabIndex: 0,
-              onClick: () => {
-                if (layout !== "payment")
-                  return;
-                setLayout("payment");
-              },
-              $font: settings.theme.typography.link.fontFamily,
-              $size: settings.theme.typography.link.fontSize,
-              $weight: settings.theme.typography.link.fontWeight,
-              $color: settings.theme.typography.link.color,
-              children: "Edit"
-            }
-          )
-        ]
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
+          "\u{1F4B3} Card ending in ",
+          paymentMethod.cardLast4
+        ] })
       }
     ),
     layout === "payment" && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        Box,
-        {
-          $position: "absolute",
-          $top: "50%",
-          $left: "50%",
-          $zIndex: "999999",
-          $transform: "translate(-50%, -50%)",
-          $width: "100%",
-          $height: "100%",
-          $backgroundColor: "#B5B5B580",
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-            Flex,
-            {
-              $position: "relative",
-              $top: "50%",
-              $left: "50%",
-              $transform: "translate(-50%, -50%)",
-              $width: "956px",
-              $height: "700px",
-              $backgroundColor: "#FBFBFB",
-              $borderRadius: "8px",
-              $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
-              id: "select-plan-dialog",
-              role: "dialog",
-              "aria-labelledby": "select-plan-dialog-label",
-              "aria-modal": "true",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  Box,
-                  {
-                    $position: "absolute",
-                    $top: "0.25rem",
-                    $right: "0.75rem",
-                    $cursor: "pointer",
-                    onClick: () => {
-                      setLayout("portal");
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  Text,
-                  {
-                    as: "h1",
-                    id: "select-plan-dialog-label",
-                    $size: 24,
-                    $weight: 800,
-                    children: "Add payment method"
-                  }
-                ) })
-              ]
-            }
-          )
-        }
-      ),
+      /* @__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)(
+          Flex,
+          {
+            $flexDirection: "column",
+            $padding: "2.5rem",
+            $height: "100%",
+            $gap: "1.5rem",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "1rem",
+                  $backgroundColor: "#FBFBFB",
+                  $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)(
+                      Box,
+                      {
+                        $fontSize: "18px",
+                        $marginBottom: "1.5rem",
+                        $display: "inline-block",
+                        $width: "100%",
+                        children: "Default"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        Flex,
+                        {
+                          $alignItems: "center",
+                          $padding: ".5rem 1rem",
+                          $border: "1px solid #E2E5E9",
+                          $borderRadius: ".5rem",
+                          $backgroundColor: "#ffffff",
+                          $flexDirection: "row",
+                          $gap: "1rem",
+                          $width: "100%",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                            Flex,
+                            {
+                              $flexDirection: "row",
+                              $justifyContent: "space-between",
+                              $flex: "1",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime12.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)(
+                                        "svg",
+                                        {
+                                          viewBox: "0 0 24 16",
+                                          fill: "none",
+                                          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)(
+                                              "rect",
+                                              {
+                                                stroke: "#DDD",
+                                                fill: "#FFF",
+                                                x: ".25",
+                                                y: ".25",
+                                                width: "23",
+                                                height: "15.5",
+                                                rx: "2"
+                                              }
+                                            ),
+                                            /* @__PURE__ */ (0, import_jsx_runtime12.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",
+                                                fill: "#1434CB"
+                                              }
+                                            )
+                                          ] })
+                                        }
+                                      ) }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        StyledButton,
+                        {
+                          $size: "sm",
+                          $color: "secondary",
+                          $variant: "outline",
+                          style: {
+                            whiteSpace: "nowrap",
+                            paddingLeft: "1rem",
+                            paddingRight: "1rem"
+                          },
+                          children: "Edit"
+                        }
+                      ) })
+                    ] })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "1rem",
+                  $backgroundColor: "#FBFBFB",
+                  $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)(
+                      Box,
+                      {
+                        $fontSize: "18px",
+                        $marginBottom: "1.5rem",
+                        $display: "inline-block",
+                        $width: "100%",
+                        children: "Others"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        Flex,
+                        {
+                          $alignItems: "center",
+                          $padding: ".5rem 1rem",
+                          $border: "1px solid #E2E5E9",
+                          $borderRadius: ".5rem",
+                          $backgroundColor: "#ffffff",
+                          $flexDirection: "row",
+                          $gap: "1rem",
+                          $width: "100%",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                            Flex,
+                            {
+                              $flexDirection: "row",
+                              $justifyContent: "space-between",
+                              $flex: "1",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime12.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)(
+                                        "svg",
+                                        {
+                                          viewBox: "0 0 24 16",
+                                          fill: "none",
+                                          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)(
+                                              "rect",
+                                              {
+                                                stroke: "#DDD",
+                                                fill: "#FFF",
+                                                x: ".25",
+                                                y: ".25",
+                                                width: "23",
+                                                height: "15.5",
+                                                rx: "2"
+                                              }
+                                            ),
+                                            /* @__PURE__ */ (0, import_jsx_runtime12.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",
+                                                fill: "#1434CB"
+                                              }
+                                            )
+                                          ] })
+                                        }
+                                      ) }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          StyledButton,
+                          {
+                            $size: "sm",
+                            $color: "secondary",
+                            $variant: "outline",
+                            style: {
+                              whiteSpace: "nowrap",
+                              paddingLeft: "1rem",
+                              paddingRight: "1rem"
+                            },
+                            children: "Make Default"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          StyledButton,
+                          {
+                            $size: "sm",
+                            $color: "secondary",
+                            $variant: "outline",
+                            style: {
+                              whiteSpace: "nowrap",
+                              paddingLeft: "1rem",
+                              paddingRight: "1rem"
+                            },
+                            children: "Edit"
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] })
+                }
+              )
+            ]
+          }
+        )
+      ] }),
       portal || document.body
     )
   ] });
@@ -9190,20 +10939,159 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
 });
 
 // src/components/embed/ComponentTree.tsx
-var import_react14 = require("react");
+var import_react18 = require("react");
 
 // src/components/embed/renderer.ts
+var import_react17 = 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)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, ...props });
+  }
+);
+
+// src/components/layout/viewport/Viewport.tsx
+var import_react14 = require("react");
+
+// src/components/layout/viewport/styles.ts
+var StyledViewport = dt.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: auto;
+  margin-right: auto;
+`;
+
+// src/components/layout/viewport/Viewport.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Viewport = (0, import_react14.forwardRef)(
+  ({ children, ...props }, ref) => {
+    const { settings, layout } = useEmbed();
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      StyledViewport,
+      {
+        ref,
+        $numberOfColumns: settings.theme.numberOfColumns,
+        ...props,
+        children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "", children: "DISABLED" }) : children
+      }
+    );
+  }
+);
+
+// src/components/layout/column/Column.tsx
+var import_react16 = require("react");
+
+// src/components/layout/card/Card.tsx
+var import_react15 = require("react");
+
+// src/components/layout/card/styles.ts
+var StyledCard = dt.div(
+  ({
+    theme,
+    $sectionLayout = "merged",
+    $borderRadius = 8,
+    $padding = 48,
+    $shadow = true
+  }) => {
+    return lt`
+      box-sizing: border-box;
+      font-size: ${TEXT_BASE_SIZE}px;
+
+      *,
+      *::before,
+      *::after {
+        box-sizing: inherit;
+      }
+
+      > * {
+        padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
+          ${$padding / TEXT_BASE_SIZE}rem;
+        color: ${theme.typography.text.color};
+      }
+
+      ${() => {
+      const { l: l2 } = hexToHSL(theme.card.background);
+      const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
+      const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
+      const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
+      if ($sectionLayout === "merged") {
+        return lt`
+            background: ${({ theme: theme2 }) => theme2.card.background};
+            border-radius: ${borderRadius};
+
+            ${$shadow && `box-shadow: ${boxShadow};`}
+
+            > :not(:last-child) {
+              border-bottom: 1px solid ${borderColor};
+            }
+          `;
+      }
+      return lt`
+          > :not(:last-child) {
+            margin-bottom: 1rem;
+          }
+
+          > * {
+            background: ${theme.card.background};
+            border-radius: ${borderRadius};
+            ${$shadow && `box-shadow: ${boxShadow};`}
+          }
+        `;
+    }}
+    `;
+  }
+);
+
+// src/components/layout/card/Card.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Card = (0, import_react15.forwardRef)(
+  ({ children, className }, ref) => {
+    const { settings } = useEmbed();
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      StyledCard,
+      {
+        ref,
+        className,
+        $sectionLayout: settings.theme?.sectionLayout,
+        $borderRadius: settings.theme?.card?.borderRadius,
+        $padding: settings.theme?.card?.padding,
+        $shadow: settings.theme?.card?.hasShadow,
+        children
+      }
+    );
+  }
+);
+
+// src/components/layout/column/styles.ts
+var StyledColumn = dt.div`
+  flex-grow: 1;
+  padding: 0.75rem;
+`;
+
+// src/components/layout/column/Column.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Column = (0, import_react16.forwardRef)(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Card, { children }) });
+  }
+);
+
+// src/components/embed/renderer.ts
 var components = {
+  Root,
+  Viewport,
+  Column,
   Card,
   PlanManager,
   IncludedFeatures,
   UpcomingBill,
-  PaymentMethod,
-  MeteredFeatures
+  PaymentMethod
 };
 function createRenderer(options) {
-  const { useFallback = true } = options || {};
+  const { useFallback = false } = options || {};
   return function renderNode(node2, index) {
     const { type, props = {}, custom = {}, children } = node2;
     const name = typeof type !== "string" ? type.resolvedName : type;
@@ -9220,12 +11108,12 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react13.createElement)(
+    return (0, import_react17.createElement)(
       component,
       {
         className,
-        ...component !== "div" && { resolvedProps },
-        ...Object.keys(custom).length > 0 && { custom },
+        ...component !== "div" && { ...resolvedProps },
+        ...component !== "div" && Object.keys(custom).length > 0 && { custom },
         key: index
       },
       resolvedChildren
@@ -9234,30 +11122,30 @@ function createRenderer(options) {
 }
 
 // src/components/embed/ComponentTree.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ComponentTree = () => {
-  const [children, setChildren] = (0, import_react14.useState)("Loading");
+  const [children, setChildren] = (0, import_react18.useState)("Loading");
   const { error, nodes } = useEmbed();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: error.message });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
 };
 
 // src/components/embed/Embed.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "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_runtime15.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ComponentTree, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ComponentTree, {}) });
 };
 /*! Bundled license information: