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

package/dist/schematic-react.cjs.js

@@ -864,9 +864,8 @@ __export(src_exports, {
   IncludedFeatures: () => IncludedFeatures,
   Invoices: () => Invoices,
   MeteredFeatures: () => MeteredFeatures,
-  OverlayHeader: () => OverlayHeader,
-  OverlaySideBar: () => OverlaySideBar,
-  OverlayWrapper: () => OverlayWrapper,
+  Modal: () => Modal,
+  ModalHeader: () => ModalHeader,
   PaymentMethod: () => PaymentMethod,
   PlanManager: () => PlanManager,
   ProgressBar: () => ProgressBar,
@@ -1730,12 +1729,12 @@ var flush_block_only = (s2, last) => {
   s2.block_start = s2.strstart;
   flush_pending(s2.strm);
 };
-var put_byte = (s2, b) => {
-  s2.pending_buf[s2.pending++] = b;
+var put_byte = (s2, b2) => {
+  s2.pending_buf[s2.pending++] = b2;
 };
-var putShortMSB = (s2, b) => {
-  s2.pending_buf[s2.pending++] = b >>> 8 & 255;
-  s2.pending_buf[s2.pending++] = b & 255;
+var putShortMSB = (s2, b2) => {
+  s2.pending_buf[s2.pending++] = b2 >>> 8 & 255;
+  s2.pending_buf[s2.pending++] = b2 & 255;
 };
 var read_buf = (strm, buf, start, size) => {
   let len = strm.avail_in;
@@ -3017,10 +3016,8 @@ Deflate$1.prototype.push = function(data, flush_mode) {
   if (this.ended) {
     return false;
   }
-  if (flush_mode === ~~flush_mode)
-    _flush_mode = flush_mode;
-  else
-    _flush_mode = flush_mode === true ? Z_FINISH$2 : Z_NO_FLUSH$1;
+  if (flush_mode === ~~flush_mode) _flush_mode = flush_mode;
+  else _flush_mode = flush_mode === true ? Z_FINISH$2 : Z_NO_FLUSH$1;
   if (typeof data === "string") {
     strm.input = strings.string2buf(data);
   } else if (toString$1.call(data) === "[object ArrayBuffer]") {
@@ -3060,8 +3057,7 @@ Deflate$1.prototype.push = function(data, flush_mode) {
       strm.avail_out = 0;
       continue;
     }
-    if (strm.avail_in === 0)
-      break;
+    if (strm.avail_in === 0) break;
   }
   return true;
 };
@@ -4015,6 +4011,7 @@ var inflate$2 = (strm, flush) => {
           hold = 0;
           bits = 0;
           state.mode = TIME;
+        /* falls through */
         case TIME:
           while (bits < 32) {
             if (have === 0) {
@@ -4037,6 +4034,7 @@ var inflate$2 = (strm, flush) => {
           hold = 0;
           bits = 0;
           state.mode = OS;
+        /* falls through */
         case OS:
           while (bits < 16) {
             if (have === 0) {
@@ -4058,6 +4056,7 @@ var inflate$2 = (strm, flush) => {
           hold = 0;
           bits = 0;
           state.mode = EXLEN;
+        /* falls through */
         case EXLEN:
           if (state.flags & 1024) {
             while (bits < 16) {
@@ -4083,6 +4082,7 @@ var inflate$2 = (strm, flush) => {
             state.head.extra = null;
           }
           state.mode = EXTRA;
+        /* falls through */
         case EXTRA:
           if (state.flags & 1024) {
             copy2 = state.length;
@@ -4119,6 +4119,7 @@ var inflate$2 = (strm, flush) => {
           }
           state.length = 0;
           state.mode = NAME;
+        /* falls through */
         case NAME:
           if (state.flags & 2048) {
             if (have === 0) {
@@ -4144,6 +4145,7 @@ var inflate$2 = (strm, flush) => {
           }
           state.length = 0;
           state.mode = COMMENT;
+        /* falls through */
         case COMMENT:
           if (state.flags & 4096) {
             if (have === 0) {
@@ -4168,6 +4170,7 @@ var inflate$2 = (strm, flush) => {
             state.head.comment = null;
           }
           state.mode = HCRC;
+        /* falls through */
         case HCRC:
           if (state.flags & 512) {
             while (bits < 16) {
@@ -4206,6 +4209,7 @@ var inflate$2 = (strm, flush) => {
           hold = 0;
           bits = 0;
           state.mode = DICT;
+        /* falls through */
         case DICT:
           if (state.havedict === 0) {
             strm.next_out = put;
@@ -4218,10 +4222,12 @@ var inflate$2 = (strm, flush) => {
           }
           strm.adler = state.check = 1;
           state.mode = TYPE;
+        /* falls through */
         case TYPE:
           if (flush === Z_BLOCK || flush === Z_TREES) {
             break inf_leave;
           }
+        /* falls through */
         case TYPEDO:
           if (state.last) {
             hold >>>= bits & 7;
@@ -4286,8 +4292,10 @@ var inflate$2 = (strm, flush) => {
           if (flush === Z_TREES) {
             break inf_leave;
           }
+        /* falls through */
         case COPY_:
           state.mode = COPY;
+        /* falls through */
         case COPY:
           copy2 = state.length;
           if (copy2) {
@@ -4335,6 +4343,7 @@ var inflate$2 = (strm, flush) => {
           }
           state.have = 0;
           state.mode = LENLENS;
+        /* falls through */
         case LENLENS:
           while (state.have < state.ncode) {
             while (bits < 3) {
@@ -4364,6 +4373,7 @@ var inflate$2 = (strm, flush) => {
           }
           state.have = 0;
           state.mode = CODELENS;
+        /* falls through */
         case CODELENS:
           while (state.have < state.nlen + state.ndist) {
             for (; ; ) {
@@ -4481,8 +4491,10 @@ var inflate$2 = (strm, flush) => {
           if (flush === Z_TREES) {
             break inf_leave;
           }
+        /* falls through */
         case LEN_:
           state.mode = LEN;
+        /* falls through */
         case LEN:
           if (have >= 6 && left >= 258) {
             strm.next_out = put;
@@ -4564,6 +4576,7 @@ var inflate$2 = (strm, flush) => {
           }
           state.extra = here_op & 15;
           state.mode = LENEXT;
+        /* falls through */
         case LENEXT:
           if (state.extra) {
             n = state.extra;
@@ -4582,6 +4595,7 @@ var inflate$2 = (strm, flush) => {
           }
           state.was = state.length;
           state.mode = DIST;
+        /* falls through */
         case DIST:
           for (; ; ) {
             here = state.distcode[hold & (1 << state.distbits) - 1];
@@ -4632,6 +4646,7 @@ var inflate$2 = (strm, flush) => {
           state.offset = here_val;
           state.extra = here_op & 15;
           state.mode = DISTEXT;
+        /* falls through */
         case DISTEXT:
           if (state.extra) {
             n = state.extra;
@@ -4654,6 +4669,7 @@ var inflate$2 = (strm, flush) => {
             break;
           }
           state.mode = MATCH;
+        /* falls through */
         case MATCH:
           if (left === 0) {
             break inf_leave;
@@ -4730,6 +4746,7 @@ var inflate$2 = (strm, flush) => {
             bits = 0;
           }
           state.mode = LENGTH;
+        /* falls through */
         case LENGTH:
           if (state.wrap && state.flags) {
             while (bits < 32) {
@@ -4749,6 +4766,7 @@ var inflate$2 = (strm, flush) => {
             bits = 0;
           }
           state.mode = DONE;
+        /* falls through */
         case DONE:
           ret = Z_STREAM_END$1;
           break inf_leave;
@@ -4758,6 +4776,7 @@ var inflate$2 = (strm, flush) => {
         case MEM:
           return Z_MEM_ERROR$1;
         case SYNC:
+        /* falls through */
         default:
           return Z_STREAM_ERROR$1;
       }
@@ -4769,8 +4788,7 @@ var inflate$2 = (strm, flush) => {
   state.hold = hold;
   state.bits = bits;
   if (state.wsize || _out !== strm.avail_out && state.mode < BAD && (state.mode < CHECK || flush !== Z_FINISH$1)) {
-    if (updatewindow(strm, strm.output, strm.next_out, _out - strm.avail_out))
-      ;
+    if (updatewindow(strm, strm.output, strm.next_out, _out - strm.avail_out)) ;
   }
   _in -= strm.avail_in;
   _out -= strm.avail_out;
@@ -4938,12 +4956,9 @@ Inflate$1.prototype.push = function(data, flush_mode) {
   const chunkSize = this.options.chunkSize;
   const dictionary = this.options.dictionary;
   let status, _flush_mode, last_avail_out;
-  if (this.ended)
-    return false;
-  if (flush_mode === ~~flush_mode)
-    _flush_mode = flush_mode;
-  else
-    _flush_mode = flush_mode === true ? Z_FINISH : Z_NO_FLUSH;
+  if (this.ended) return false;
+  if (flush_mode === ~~flush_mode) _flush_mode = flush_mode;
+  else _flush_mode = flush_mode === true ? Z_FINISH : Z_NO_FLUSH;
   if (toString.call(data) === "[object ArrayBuffer]") {
     strm.input = new Uint8Array(data);
   } else {
@@ -4988,24 +5003,21 @@ Inflate$1.prototype.push = function(data, flush_mode) {
           let utf8str = strings.buf2string(strm.output, next_out_utf8);
           strm.next_out = tail;
           strm.avail_out = chunkSize - tail;
-          if (tail)
-            strm.output.set(strm.output.subarray(next_out_utf8, next_out_utf8 + tail), 0);
+          if (tail) strm.output.set(strm.output.subarray(next_out_utf8, next_out_utf8 + tail), 0);
           this.onData(utf8str);
         } else {
           this.onData(strm.output.length === strm.next_out ? strm.output : strm.output.subarray(0, strm.next_out));
         }
       }
     }
-    if (status === Z_OK && last_avail_out === 0)
-      continue;
+    if (status === Z_OK && last_avail_out === 0) continue;
     if (status === Z_STREAM_END) {
       status = inflate_1$2.inflateEnd(this.strm);
       this.onEnd(status);
       this.ended = true;
       return true;
     }
-    if (strm.avail_in === 0)
-      break;
+    if (strm.avail_in === 0) break;
   }
   return true;
 };
@@ -5027,8 +5039,7 @@ Inflate$1.prototype.onEnd = function(status) {
 function inflate$1(input, options) {
   const inflator = new Inflate$1(options);
   inflator.push(input);
-  if (inflator.err)
-    throw inflator.msg || messages[inflator.err];
+  if (inflator.err) throw inflator.msg || messages[inflator.err];
   return inflator.result;
 }
 function inflateRaw$1(input, options) {
@@ -5057,23 +5068,19 @@ var __assign = function() {
   __assign = Object.assign || function __assign2(t) {
     for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
       s2 = arguments[i2];
-      for (var p2 in s2)
-        if (Object.prototype.hasOwnProperty.call(s2, p2))
-          t[p2] = s2[p2];
+      for (var p2 in s2) if (Object.prototype.hasOwnProperty.call(s2, p2)) t[p2] = s2[p2];
     }
     return t;
   };
   return __assign.apply(this, arguments);
 };
 function __spreadArray(to, from2, pack) {
-  if (pack || arguments.length === 2)
-    for (var i2 = 0, l2 = from2.length, ar; i2 < l2; i2++) {
-      if (ar || !(i2 in from2)) {
-        if (!ar)
-          ar = Array.prototype.slice.call(from2, 0, i2);
-        ar[i2] = from2[i2];
-      }
+  if (pack || arguments.length === 2) for (var i2 = 0, l2 = from2.length, ar; i2 < l2; i2++) {
+    if (ar || !(i2 in from2)) {
+      if (!ar) ar = Array.prototype.slice.call(from2, 0, i2);
+      ar[i2] = from2[i2];
     }
+  }
   return to.concat(ar || Array.prototype.slice.call(from2));
 }
 
@@ -5081,8 +5088,7 @@ function __spreadArray(to, from2, pack) {
 function memoize(fn) {
   var cache = /* @__PURE__ */ Object.create(null);
   return function(arg) {
-    if (cache[arg] === void 0)
-      cache[arg] = fn(arg);
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
     return cache[arg];
   };
 }
@@ -5198,12 +5204,14 @@ function slice(begin, end) {
 }
 function token(type) {
   switch (type) {
+    // \0 \t \n \r \s whitespace token
     case 0:
     case 9:
     case 10:
     case 13:
     case 32:
       return 5;
+    // ! + , / > @ ~ isolate token
     case 33:
     case 43:
     case 44:
@@ -5211,17 +5219,21 @@ function token(type) {
     case 62:
     case 64:
     case 126:
+    // ; { } breakpoint token
     case 59:
     case 123:
     case 125:
       return 4;
+    // : accompanied token
     case 58:
       return 3;
+    // " ' ( [ opening delimit token
     case 34:
     case 39:
     case 40:
     case 91:
       return 2;
+    // ) ] closing delimit token
     case 41:
     case 93:
       return 1;
@@ -5254,17 +5266,21 @@ function escaping(index, count) {
 function delimiter(type) {
   while (next())
     switch (character) {
+      // ] ) " '
       case type:
         return position;
+      // " '
       case 34:
       case 39:
         if (type !== 34 && type !== 39)
           delimiter(character);
         break;
+      // (
       case 40:
         if (type === 41)
           delimiter(type);
         break;
+      // \
       case 92:
         next();
         break;
@@ -5307,26 +5323,31 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
   var characters2 = type;
   while (scanning)
     switch (previous = character2, character2 = next()) {
+      // (
       case 40:
         if (previous != 108 && charat(characters2, length2 - 1) == 58) {
           if (indexof(characters2 += replace(delimit(character2), "&", "&\f"), "&\f", abs(index ? points[index - 1] : 0)) != -1)
             ampersand = -1;
           break;
         }
+      // " ' [
       case 34:
       case 39:
       case 91:
         characters2 += delimit(character2);
         break;
+      // \t \n \r \s
       case 9:
       case 10:
       case 13:
       case 32:
         characters2 += whitespace(previous);
         break;
+      // \
       case 92:
         characters2 += escaping(caret() - 1, 7);
         continue;
+      // /
       case 47:
         switch (peek()) {
           case 42:
@@ -5337,23 +5358,28 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
             characters2 += "/";
         }
         break;
+      // {
       case 123 * variable:
         points[index++] = strlen(characters2) * ampersand;
+      // } ; \0
       case 125 * variable:
       case 59:
       case 0:
         switch (character2) {
+          // \0 }
           case 0:
           case 125:
             scanning = 0;
+          // ;
           case 59 + offset:
-            if (ampersand == -1)
-              characters2 = replace(characters2, /\f/g, "");
+            if (ampersand == -1) characters2 = replace(characters2, /\f/g, "");
             if (property > 0 && strlen(characters2) - length2)
               append(property > 32 ? declaration(characters2 + ";", rule, parent, length2 - 1, declarations) : declaration(replace(characters2, " ", "") + ";", rule, parent, length2 - 2, declarations), declarations);
             break;
+          // @ ;
           case 59:
             characters2 += ";";
+          // { rule/at-rule
           default:
             append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props = [], children = [], length2, rulesets), rulesets);
             if (character2 === 123)
@@ -5361,6 +5387,7 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
                 parse(characters2, root, reference, reference, props, rulesets, length2, points, children);
               else
                 switch (atrule === 99 && charat(characters2, 3) === 110 ? 100 : atrule) {
+                  // d l m s
                   case 100:
                   case 108:
                   case 109:
@@ -5373,6 +5400,7 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
         }
         index = offset = property = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo;
         break;
+      // :
       case 58:
         length2 = 1 + strlen(characters2), property = previous;
       default:
@@ -5383,17 +5411,21 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
             continue;
         }
         switch (characters2 += from(character2), character2 * variable) {
+          // &
           case 38:
             ampersand = offset > 0 ? 1 : (characters2 += "\f", -1);
             break;
+          // ,
           case 44:
             points[index++] = (strlen(characters2) - 1) * ampersand, ampersand = 1;
             break;
+          // @
           case 64:
             if (peek() === 45)
               characters2 += delimit(next());
             atrule = peek(), offset = length2 = strlen(type = characters2 += identifier(caret())), character2++;
             break;
+          // -
           case 45:
             if (previous === 45 && strlen(characters2) == 2)
               variable = 0;
@@ -5421,8 +5453,10 @@ function declaration(value, root, parent, length2, siblings) {
 // node_modules/stylis/src/Prefixer.js
 function prefix(value, length2, children) {
   switch (hash(value, length2)) {
+    // color-adjust
     case 5103:
       return WEBKIT + "print-" + value + value;
+    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
     case 5737:
     case 4201:
     case 3177:
@@ -5430,18 +5464,21 @@ function prefix(value, length2, children) {
     case 1641:
     case 4457:
     case 2921:
+    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
     case 5572:
     case 6356:
     case 5844:
     case 3191:
     case 6645:
     case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
     case 6391:
     case 5879:
     case 5623:
     case 6135:
     case 4599:
     case 4855:
+    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
     case 4215:
     case 6389:
     case 5109:
@@ -5449,57 +5486,77 @@ function prefix(value, length2, children) {
     case 5621:
     case 3829:
       return WEBKIT + value + value;
+    // tab-size
     case 4789:
       return MOZ + value + value;
+    // appearance, user-select, transform, hyphens, text-size-adjust
     case 5349:
     case 4246:
     case 4810:
     case 6968:
     case 2756:
       return WEBKIT + value + MOZ + value + MS + value + value;
+    // writing-mode
     case 5936:
       switch (charat(value, length2 + 11)) {
+        // vertical-l(r)
         case 114:
           return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb") + value;
+        // vertical-r(l)
         case 108:
           return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb-rl") + value;
+        // horizontal(-)tb
         case 45:
           return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "lr") + value;
       }
+    // flex, flex-direction, scroll-snap-type, writing-mode
     case 6828:
     case 4268:
     case 2903:
       return WEBKIT + value + MS + value + value;
+    // order
     case 6165:
       return WEBKIT + value + MS + "flex-" + value + value;
+    // align-items
     case 5187:
       return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + "box-$1$2" + MS + "flex-$1$2") + value;
+    // align-self
     case 5443:
       return WEBKIT + value + MS + "flex-item-" + replace(value, /flex-|-self/g, "") + (!match(value, /flex-|baseline/) ? MS + "grid-row-" + replace(value, /flex-|-self/g, "") : "") + value;
+    // align-content
     case 4675:
       return WEBKIT + value + MS + "flex-line-pack" + replace(value, /align-content|flex-|-self/g, "") + value;
+    // flex-shrink
     case 5548:
       return WEBKIT + value + MS + replace(value, "shrink", "negative") + value;
+    // flex-basis
     case 5292:
       return WEBKIT + value + MS + replace(value, "basis", "preferred-size") + value;
+    // flex-grow
     case 6060:
       return WEBKIT + "box-" + replace(value, "-grow", "") + WEBKIT + value + MS + replace(value, "grow", "positive") + value;
+    // transition
     case 4554:
       return WEBKIT + replace(value, /([^-])(transform)/g, "$1" + WEBKIT + "$2") + value;
+    // cursor
     case 6187:
       return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + "$1"), /(image-set)/, WEBKIT + "$1"), value, "") + value;
+    // background, background-image
     case 5495:
     case 3959:
       return replace(value, /(image-set\([^]*)/, WEBKIT + "$1$`$1");
+    // justify-content
     case 4968:
       return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + "box-pack:$3" + MS + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + WEBKIT + value + value;
+    // justify-self
     case 4200:
-      if (!match(value, /flex-|baseline/))
-        return MS + "grid-column-align" + substr(value, length2) + value;
+      if (!match(value, /flex-|baseline/)) return MS + "grid-column-align" + substr(value, length2) + value;
       break;
+    // grid-template-(columns|rows)
     case 2592:
     case 3360:
       return MS + replace(value, "template-", "") + value;
+    // grid-(row|column)-start
     case 4384:
     case 3616:
       if (children && children.some(function(element, index) {
@@ -5508,16 +5565,19 @@ function prefix(value, length2, children) {
         return ~indexof(value + (children = children[length2].value), "span", 0) ? value : MS + replace(value, "-start", "") + value + MS + "grid-row-span:" + (~indexof(children, "span", 0) ? match(children, /\d+/) : +match(children, /\d+/) - +match(value, /\d+/)) + ";";
       }
       return MS + replace(value, "-start", "") + value;
+    // grid-(row|column)-end
     case 4896:
     case 4128:
       return children && children.some(function(element) {
         return match(element.props, /grid-\w+-start/);
       }) ? value : MS + replace(replace(value, "-end", "-span"), "span ", "") + value;
+    // (margin|padding)-inline-(start|end)
     case 4095:
     case 3583:
     case 4068:
     case 2532:
       return replace(value, /(.+)-inline(.+)/, WEBKIT + "$1$2") + value;
+    // (min|max)?(width|height|inline-size|block-size)
     case 8116:
     case 7059:
     case 5753:
@@ -5532,32 +5592,41 @@ function prefix(value, length2, children) {
     case 4765:
       if (strlen(value) - 1 - length2 > 6)
         switch (charat(value, length2 + 1)) {
+          // (m)ax-content, (m)in-content
           case 109:
             if (charat(value, length2 + 4) !== 45)
               break;
+          // (f)ill-available, (f)it-content
           case 102:
             return replace(value, /(.+:)(.+)-([^]+)/, "$1" + WEBKIT + "$2-$3$1" + MOZ + (charat(value, length2 + 3) == 108 ? "$3" : "$2-$3")) + value;
+          // (s)tretch
           case 115:
             return ~indexof(value, "stretch", 0) ? prefix(replace(value, "stretch", "fill-available"), length2, children) + value : value;
         }
       break;
+    // grid-(column|row)
     case 5152:
     case 5920:
-      return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function(_2, a2, b, c2, d, e, f2) {
-        return MS + a2 + ":" + b + f2 + (c2 ? MS + a2 + "-span:" + (d ? e : +e - +b) + f2 : "") + value;
+      return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function(_2, a2, b2, c2, d, e, f2) {
+        return MS + a2 + ":" + b2 + f2 + (c2 ? MS + a2 + "-span:" + (d ? e : +e - +b2) + f2 : "") + value;
       });
+    // position: sticky
     case 4949:
       if (charat(value, length2 + 6) === 121)
         return replace(value, ":", ":" + WEBKIT) + value;
       break;
+    // display: (flex|inline-flex|grid|inline-grid)
     case 6444:
       switch (charat(value, charat(value, 14) === 45 ? 18 : 11)) {
+        // (inline-)?fle(x)
         case 120:
           return replace(value, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, "$1" + WEBKIT + (charat(value, 14) === 45 ? "inline-" : "") + "box$3$1" + WEBKIT + "$2$3$1" + MS + "$2box$3") + value;
+        // (inline-)?gri(d)
         case 100:
           return replace(value, ":", ":" + MS) + value;
       }
       break;
+    // scroll-margin, scroll-margin-(top|right|bottom|left)
     case 5719:
     case 2647:
     case 2135:
@@ -5578,8 +5647,7 @@ function serialize(children, callback) {
 function stringify(element, index, children, callback) {
   switch (element.type) {
     case LAYER:
-      if (element.children.length)
-        break;
+      if (element.children.length) break;
     case IMPORT:
     case DECLARATION:
       return element.return = element.return || element.value;
@@ -5588,8 +5656,7 @@ function stringify(element, index, children, callback) {
     case KEYFRAMES:
       return element.return = element.value + "{" + serialize(element.children, callback) + "}";
     case RULESET:
-      if (!strlen(element.value = element.props.join(",")))
-        return "";
+      if (!strlen(element.value = element.props.join(","))) return "";
   }
   return strlen(children = serialize(element.children, callback)) ? element.return = element.value + "{" + children + "}" : "";
 }
@@ -5625,12 +5692,14 @@ function prefixer(element, index, children, callback) {
           if (element.length)
             return combine(children = element.props, function(value) {
               switch (match(value, callback = /(::plac\w+|:read-\w+)/)) {
+                // :read-(only|write)
                 case ":read-only":
                 case ":read-write":
                   lift(copy(element, { props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")] }));
                   lift(copy(element, { props: [value] }));
                   assign2(element, { props: filter(children, callback) });
                   break;
+                // :placeholder
                 case "::placeholder":
                   lift(copy(element, { props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")] }));
                   lift(copy(element, { props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")] }));
@@ -5704,6 +5773,7 @@ var v = "6.1.13";
 var g = "/*!sc*/\n";
 var S = "undefined" != typeof window && "HTMLElement" in window;
 var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
+var b = {};
 var E = /invalid hook call/i;
 var N = /* @__PURE__ */ new Set();
 var P = function(t, n) {
@@ -5712,8 +5782,7 @@ var P = function(t, n) {
     try {
       var a2 = true;
       console.error = function(t2) {
-        for (var n2 = [], o3 = 1; o3 < arguments.length; o3++)
-          n2[o3 - 1] = arguments[o3];
+        for (var n2 = [], o3 = 1; o3 < arguments.length; o3++) n2[o3 - 1] = arguments[o3];
         E.test(t2) ? (a2 = false, N.delete(s2)) : i2.apply(void 0, __spreadArray([t2], n2, false));
       }, (0, import_react.useRef)(), a2 && !N.has(s2) && (console.warn(s2), N.add(s2));
     } catch (e) {
@@ -5741,15 +5810,13 @@ var j = function(e) {
 };
 function x(e) {
   var t, n = "";
-  for (t = Math.abs(e); t > k; t = t / k | 0)
-    n = j(t % k) + n;
+  for (t = Math.abs(e); t > k; t = t / k | 0) n = j(t % k) + n;
   return (j(t % k) + n).replace(T, "$1-$2");
 }
 var V;
 var F = 5381;
 var M = function(e, t) {
-  for (var n = t.length; n; )
-    e = 33 * e ^ t.charCodeAt(--n);
+  for (var n = t.length; n; ) e = 33 * e ^ t.charCodeAt(--n);
   return e;
 };
 var z = function(e) {
@@ -5812,24 +5879,17 @@ function ie(e, t) {
   return e && t ? "".concat(e, " ").concat(t) : e || t || "";
 }
 function ae(e, t) {
-  if (0 === e.length)
-    return "";
-  for (var n = e[0], o2 = 1; o2 < e.length; o2++)
-    n += t ? t + e[o2] : e[o2];
+  if (0 === e.length) return "";
+  for (var n = e[0], o2 = 1; o2 < e.length; o2++) n += t ? t + e[o2] : e[o2];
   return n;
 }
 function ce(e) {
   return null !== e && "object" == typeof e && e.constructor.name === Object.name && !("props" in e && e.$$typeof);
 }
 function le(e, t, n) {
-  if (void 0 === n && (n = false), !n && !ce(e) && !Array.isArray(e))
-    return t;
-  if (Array.isArray(t))
-    for (var o2 = 0; o2 < t.length; o2++)
-      e[o2] = le(e[o2], t[o2]);
-  else if (ce(t))
-    for (var o2 in t)
-      e[o2] = le(e[o2], t[o2]);
+  if (void 0 === n && (n = false), !n && !ce(e) && !Array.isArray(e)) return t;
+  if (Array.isArray(t)) for (var o2 = 0; o2 < t.length; o2++) e[o2] = le(e[o2], t[o2]);
+  else if (ce(t)) for (var o2 in t) e[o2] = le(e[o2], t[o2]);
   return e;
 }
 function ue(e, t) {
@@ -5837,17 +5897,14 @@ function ue(e, t) {
 }
 var pe = true ? { 1: "Cannot create styled-component for component: %s.\n\n", 2: "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n", 3: "Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n", 4: "The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n", 5: "The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n", 6: "Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n", 7: 'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n', 8: 'ThemeProvider: Please make your "theme" prop an object.\n\n', 9: "Missing document `<head>`\n\n", 10: "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n", 11: "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n", 12: "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n", 13: "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n", 14: 'ThemeProvider: "theme" prop is required.\n\n', 15: "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n", 16: "Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n", 17: "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n", 18: "ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`" } : {};
 function de() {
-  for (var e = [], t = 0; t < arguments.length; t++)
-    e[t] = arguments[t];
-  for (var n = e[0], o2 = [], r2 = 1, s2 = e.length; r2 < s2; r2 += 1)
-    o2.push(e[r2]);
+  for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t];
+  for (var n = e[0], o2 = [], r2 = 1, s2 = e.length; r2 < s2; r2 += 1) o2.push(e[r2]);
   return o2.forEach(function(e2) {
     n = n.replace(/%[a-z]/, e2);
   }), n;
 }
 function he(t) {
-  for (var n = [], o2 = 1; o2 < arguments.length; o2++)
-    n[o2 - 1] = arguments[o2];
+  for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
   return false ? new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t, " for more information.").concat(n.length > 0 ? " Args: ".concat(n.join(", ")) : "")) : new Error(de.apply(void 0, __spreadArray([pe[t]], n, false)).trim());
 }
 var fe = function() {
@@ -5855,33 +5912,25 @@ var fe = function() {
     this.groupSizes = new Uint32Array(512), this.length = 512, this.tag = e2;
   }
   return e.prototype.indexOfGroup = function(e2) {
-    for (var t = 0, n = 0; n < e2; n++)
-      t += this.groupSizes[n];
+    for (var t = 0, n = 0; n < e2; n++) t += this.groupSizes[n];
     return t;
   }, e.prototype.insertRules = function(e2, t) {
     if (e2 >= this.groupSizes.length) {
-      for (var n = this.groupSizes, o2 = n.length, r2 = o2; e2 >= r2; )
-        if ((r2 <<= 1) < 0)
-          throw he(16, "".concat(e2));
+      for (var n = this.groupSizes, o2 = n.length, r2 = o2; e2 >= r2; ) if ((r2 <<= 1) < 0) throw he(16, "".concat(e2));
       this.groupSizes = new Uint32Array(r2), this.groupSizes.set(n), this.length = r2;
-      for (var s2 = o2; s2 < r2; s2++)
-        this.groupSizes[s2] = 0;
+      for (var s2 = o2; s2 < r2; s2++) this.groupSizes[s2] = 0;
     }
-    for (var i2 = this.indexOfGroup(e2 + 1), a2 = (s2 = 0, t.length); s2 < a2; s2++)
-      this.tag.insertRule(i2, t[s2]) && (this.groupSizes[e2]++, i2++);
+    for (var i2 = this.indexOfGroup(e2 + 1), a2 = (s2 = 0, t.length); s2 < a2; s2++) this.tag.insertRule(i2, t[s2]) && (this.groupSizes[e2]++, i2++);
   }, e.prototype.clearGroup = function(e2) {
     if (e2 < this.length) {
       var t = this.groupSizes[e2], n = this.indexOfGroup(e2), o2 = n + t;
       this.groupSizes[e2] = 0;
-      for (var r2 = n; r2 < o2; r2++)
-        this.tag.deleteRule(n);
+      for (var r2 = n; r2 < o2; r2++) this.tag.deleteRule(n);
     }
   }, e.prototype.getGroup = function(e2) {
     var t = "";
-    if (e2 >= this.length || 0 === this.groupSizes[e2])
-      return t;
-    for (var n = this.groupSizes[e2], o2 = this.indexOfGroup(e2), r2 = o2 + n, s2 = o2; s2 < r2; s2++)
-      t += "".concat(this.tag.getRule(s2)).concat(g);
+    if (e2 >= this.length || 0 === this.groupSizes[e2]) return t;
+    for (var n = this.groupSizes[e2], o2 = this.indexOfGroup(e2), r2 = o2 + n, s2 = o2; s2 < r2; s2++) t += "".concat(this.tag.getRule(s2)).concat(g);
     return t;
   }, e;
 }();
@@ -5890,13 +5939,10 @@ var ye = /* @__PURE__ */ new Map();
 var ve = /* @__PURE__ */ new Map();
 var ge = 1;
 var Se = function(e) {
-  if (ye.has(e))
-    return ye.get(e);
-  for (; ve.has(ge); )
-    ge++;
+  if (ye.has(e)) return ye.get(e);
+  for (; ve.has(ge); ) ge++;
   var t = ge++;
-  if ((0 | t) < 0 || t > me)
-    throw he(16, "".concat(t));
+  if ((0 | t) < 0 || t > me) throw he(16, "".concat(t));
   return ye.set(e, t), ve.set(t, e), t;
 };
 var we = function(e, t) {
@@ -5905,8 +5951,7 @@ var we = function(e, t) {
 var be = "style[".concat(f, "][").concat(y, '="').concat(v, '"]');
 var Ee = new RegExp("^".concat(f, '\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'));
 var Ne = function(e, t, n) {
-  for (var o2, r2 = n.split(","), s2 = 0, i2 = r2.length; s2 < i2; s2++)
-    (o2 = r2[s2]) && e.registerName(t, o2);
+  for (var o2, r2 = n.split(","), s2 = 0, i2 = r2.length; s2 < i2; s2++) (o2 = r2[s2]) && e.registerName(t, o2);
 };
 var Pe = function(e, t) {
   for (var n, o2 = (null !== (n = t.textContent) && void 0 !== n ? n : "").split(g), r2 = [], s2 = 0, i2 = o2.length; s2 < i2; s2++) {
@@ -5916,8 +5961,7 @@ var Pe = function(e, t) {
       if (c2) {
         var l2 = 0 | parseInt(c2[1], 10), u2 = c2[2];
         0 !== l2 && (we(u2, l2), Ne(e, u2, c2[3]), e.getTag().insertRules(l2, r2)), r2.length = 0;
-      } else
-        r2.push(a2);
+      } else r2.push(a2);
     }
   }
 };
@@ -5942,12 +5986,10 @@ var Ie = function(e) {
 var Ae = function() {
   function e(e2) {
     this.element = Ie(e2), this.element.appendChild(document.createTextNode("")), this.sheet = function(e3) {
-      if (e3.sheet)
-        return e3.sheet;
+      if (e3.sheet) return e3.sheet;
       for (var t = document.styleSheets, n = 0, o2 = t.length; n < o2; n++) {
         var r2 = t[n];
-        if (r2.ownerNode === e3)
-          return r2;
+        if (r2.ownerNode === e3) return r2;
       }
       throw he(17);
     }(this.element), this.length = 0;
@@ -6005,17 +6047,14 @@ var ke = function() {
           var r4 = function(e4) {
             return ve.get(e4);
           }(n3);
-          if (void 0 === r4)
-            return "continue";
+          if (void 0 === r4) return "continue";
           var s3 = e3.names.get(r4), i2 = t.getGroup(n3);
-          if (void 0 === s3 || !s3.size || 0 === i2.length)
-            return "continue";
+          if (void 0 === s3 || !s3.size || 0 === i2.length) return "continue";
           var a2 = "".concat(f, ".g").concat(n3, '[id="').concat(r4, '"]'), c2 = "";
           void 0 !== s3 && s3.forEach(function(e4) {
             e4.length > 0 && (c2 += "".concat(e4, ","));
           }), o3 += "".concat(i2).concat(a2, '{content:"').concat(c2, '"}').concat(g);
-        }, s2 = 0; s2 < n2; s2++)
-          r3(s2);
+        }, s2 = 0; s2 < n2; s2++) r3(s2);
         return o3;
       }(r2);
     });
@@ -6037,8 +6076,7 @@ var ke = function() {
   }, e.prototype.hasNameForId = function(e2, t) {
     return this.names.has(e2) && this.names.get(e2).has(t);
   }, e.prototype.registerName = function(e2, t) {
-    if (Se(e2), this.names.has(e2))
-      this.names.get(e2).add(t);
+    if (Se(e2), this.names.has(e2)) this.names.get(e2).add(t);
     else {
       var n = /* @__PURE__ */ new Set();
       n.add(t), this.names.set(e2, n);
@@ -6126,8 +6164,7 @@ var qe = function(e) {
 function He(e) {
   for (var t = "", n = 0; n < e.length; n++) {
     var o2 = e[n];
-    if (1 === n && "-" === o2 && "-" === e[0])
-      return e;
+    if (1 === n && "-" === o2 && "-" === e[0]) return e;
     qe(o2) ? t += "-" + o2.toLowerCase() : t += o2;
   }
   return t.startsWith("ms-") ? "-" + t : t;
@@ -6144,13 +6181,10 @@ var Je = function(t) {
   return r2;
 };
 function Xe(e, t, n, o2) {
-  if (Ue(e))
-    return [];
-  if (se(e))
-    return [".".concat(e.styledComponentId)];
+  if (Ue(e)) return [];
+  if (se(e)) return [".".concat(e.styledComponentId)];
   if (re(e)) {
-    if (!re(s2 = e) || s2.prototype && s2.prototype.isReactComponent || !t)
-      return [e];
+    if (!re(s2 = e) || s2.prototype && s2.prototype.isReactComponent || !t) return [e];
     var r2 = e(t);
     return "object" != typeof r2 || Array.isArray(r2) || r2 instanceof We || ce(r2) || null === r2 || console.error("".concat(B(e), " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")), Xe(r2, t, n, o2);
   }
@@ -6162,8 +6196,7 @@ function Xe(e, t, n, o2) {
 function Ze(e) {
   for (var t = 0; t < e.length; t += 1) {
     var n = e[t];
-    if (re(n) && !se(n))
-      return false;
+    if (re(n) && !se(n)) return false;
   }
   return true;
 }
@@ -6174,22 +6207,19 @@ var Qe = function() {
   }
   return e.prototype.generateAndInjectStyles = function(e2, t, n) {
     var o2 = this.baseStyle ? this.baseStyle.generateAndInjectStyles(e2, t, n) : "";
-    if (this.isStatic && !n.hash)
-      if (this.staticRulesId && t.hasNameForId(this.componentId, this.staticRulesId))
-        o2 = ie(o2, this.staticRulesId);
-      else {
-        var r2 = ae(Xe(this.rules, e2, t, n)), s2 = x(M(this.baseHash, r2) >>> 0);
-        if (!t.hasNameForId(this.componentId, s2)) {
-          var i2 = n(r2, ".".concat(s2), void 0, this.componentId);
-          t.insertRules(this.componentId, s2, i2);
-        }
-        o2 = ie(o2, s2), this.staticRulesId = s2;
+    if (this.isStatic && !n.hash) if (this.staticRulesId && t.hasNameForId(this.componentId, this.staticRulesId)) o2 = ie(o2, this.staticRulesId);
+    else {
+      var r2 = ae(Xe(this.rules, e2, t, n)), s2 = x(M(this.baseHash, r2) >>> 0);
+      if (!t.hasNameForId(this.componentId, s2)) {
+        var i2 = n(r2, ".".concat(s2), void 0, this.componentId);
+        t.insertRules(this.componentId, s2, i2);
       }
+      o2 = ie(o2, s2), this.staticRulesId = s2;
+    }
     else {
       for (var a2 = M(this.baseHash, n.hash), c2 = "", l2 = 0; l2 < this.rules.length; l2++) {
         var u2 = this.rules[l2];
-        if ("string" == typeof u2)
-          c2 += u2, a2 = M(a2, u2);
+        if ("string" == typeof u2) c2 += u2, a2 = M(a2, u2);
         else if (u2) {
           var p2 = ae(Xe(u2, e2, t, n));
           a2 = M(a2, p2 + l2), c2 += p2;
@@ -6205,19 +6235,21 @@ var Qe = function() {
 }();
 var et = import_react.default.createContext(void 0);
 var tt = et.Consumer;
+function nt() {
+  var e = (0, import_react.useContext)(et);
+  if (!e) throw he(18);
+  return e;
+}
 function ot(e) {
   var n = import_react.default.useContext(et), r2 = (0, import_react.useMemo)(function() {
     return function(e2, n2) {
-      if (!e2)
-        throw he(14);
+      if (!e2) throw he(14);
       if (re(e2)) {
         var o2 = e2(n2);
-        if (null === o2 || Array.isArray(o2) || "object" != typeof o2)
-          throw he(7);
+        if (null === o2 || Array.isArray(o2) || "object" != typeof o2) throw he(7);
         return o2;
       }
-      if (Array.isArray(e2) || "object" != typeof e2)
-        throw he(8);
+      if (Array.isArray(e2) || "object" != typeof e2) throw he(8);
       return n2 ? __assign(__assign({}, n2), e2) : e2;
     }(e.theme, n);
   }, [e.theme, n]);
@@ -6235,14 +6267,13 @@ function it(e, r2, s2) {
     return L(e2) ? "styled.".concat(e2) : "Styled(".concat(B(e2), ")");
   }(e) : m2, g2 = r2.displayName && r2.componentId ? "".concat(R(r2.displayName), "-").concat(r2.componentId) : r2.componentId || f2, S2 = i2 && a2.attrs ? a2.attrs.concat(d).filter(Boolean) : d, w2 = r2.shouldForwardProp;
   if (i2 && a2.shouldForwardProp) {
-    var b = a2.shouldForwardProp;
+    var b2 = a2.shouldForwardProp;
     if (r2.shouldForwardProp) {
       var E2 = r2.shouldForwardProp;
       w2 = function(e2, t) {
-        return b(e2, t) && E2(e2, t);
+        return b2(e2, t) && E2(e2, t);
       };
-    } else
-      w2 = b;
+    } else w2 = b2;
   }
   var N2 = new Qe(s2, g2, i2 ? a2.componentStyle : void 0);
   function O2(e2, r3) {
@@ -6252,13 +6283,11 @@ function it(e, r2, s2) {
       var v2 = I(r4, f3, c3) || C, g3 = function(e4, n, o2) {
         for (var r5, s4 = __assign(__assign({}, n), { className: void 0, theme: o2 }), i4 = 0; i4 < e4.length; i4 += 1) {
           var a4 = re(r5 = e4[i4]) ? r5(s4) : r5;
-          for (var c4 in a4)
-            s4[c4] = "className" === c4 ? ie(s4[c4], a4[c4]) : "style" === c4 ? __assign(__assign({}, s4[c4]), a4[c4]) : a4[c4];
+          for (var c4 in a4) s4[c4] = "className" === c4 ? ie(s4[c4], a4[c4]) : "style" === c4 ? __assign(__assign({}, s4[c4]), a4[c4]) : a4[c4];
         }
         return n.className && (s4.className = ie(s4.className, n.className)), s4;
       }(i3, r4, v2), S3 = g3.as || h2, w3 = {};
-      for (var b2 in g3)
-        void 0 === g3[b2] || "$" === b2[0] || "as" === b2 || "theme" === b2 && g3.theme === v2 || ("forwardedAs" === b2 ? w3.as = g3.forwardedAs : y3 && !y3(b2, S3) || (w3[b2] = g3[b2], y3 || false || isPropValid(b2) || st.has(b2) || !A.has(S3) || (st.add(b2), console.warn('styled-components: it looks like an unknown prop "'.concat(b2, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
+      for (var b3 in g3) void 0 === g3[b3] || "$" === b3[0] || "as" === b3 || "theme" === b3 && g3.theme === v2 || ("forwardedAs" === b3 ? w3.as = g3.forwardedAs : y3 && !y3(b3, S3) || (w3[b3] = g3[b3], y3 || false || isPropValid(b3) || st.has(b3) || !A.has(S3) || (st.add(b3), console.warn('styled-components: it looks like an unknown prop "'.concat(b3, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
       var E3 = function(e4, t) {
         var n = Ge(), o2 = e4.generateAndInjectStyles(t, n.styleSheet, n.stylis);
         return (0, import_react.useDebugValue)(o2), o2;
@@ -6274,10 +6303,8 @@ function it(e, r2, s2) {
     return this._foldedDefaultProps;
   }, set: function(e2) {
     this._foldedDefaultProps = i2 ? function(e3) {
-      for (var t = [], n = 1; n < arguments.length; n++)
-        t[n - 1] = arguments[n];
-      for (var o2 = 0, r3 = t; o2 < r3.length; o2++)
-        le(e3, r3[o2], true);
+      for (var t = [], n = 1; n < arguments.length; n++) t[n - 1] = arguments[n];
+      for (var o2 = 0, r3 = t; o2 < r3.length; o2++) le(e3, r3[o2], true);
       return e3;
     }({}, a2.defaultProps, e2) : e2;
   } }), P(y2, g2), D2.warnTooManyClasses = /* @__PURE__ */ function(e2, t) {
@@ -6293,27 +6320,22 @@ function it(e, r2, s2) {
   }), c2 && oe(D2, e, { attrs: true, componentStyle: true, displayName: true, foldedComponentIds: true, shouldForwardProp: true, styledComponentId: true, target: true }), D2;
 }
 function at(e, t) {
-  for (var n = [e[0]], o2 = 0, r2 = t.length; o2 < r2; o2 += 1)
-    n.push(t[o2], e[o2 + 1]);
+  for (var n = [e[0]], o2 = 0, r2 = t.length; o2 < r2; o2 += 1) n.push(t[o2], e[o2 + 1]);
   return n;
 }
 var ct = function(e) {
   return Object.assign(e, { isCss: true });
 };
 function lt(t) {
-  for (var n = [], o2 = 1; o2 < arguments.length; o2++)
-    n[o2 - 1] = arguments[o2];
-  if (re(t) || ce(t))
-    return ct(Xe(at(_, __spreadArray([t], n, true))));
+  for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
+  if (re(t) || ce(t)) return ct(Xe(at(_, __spreadArray([t], n, true))));
   var r2 = t;
   return 0 === n.length && 1 === r2.length && "string" == typeof r2[0] ? Xe(r2) : ct(Xe(at(r2, n)));
 }
 function ut(n, o2, r2) {
-  if (void 0 === r2 && (r2 = C), !o2)
-    throw he(1, o2);
+  if (void 0 === r2 && (r2 = C), !o2) throw he(1, o2);
   var s2 = function(t) {
-    for (var s3 = [], i2 = 1; i2 < arguments.length; i2++)
-      s3[i2 - 1] = arguments[i2];
+    for (var s3 = [], i2 = 1; i2 < arguments.length; i2++) s3[i2 - 1] = arguments[i2];
     return n(o2, r2, lt.apply(void 0, __spreadArray([t], s3, false)));
   };
   return s2.attrs = function(e) {
@@ -6342,26 +6364,51 @@ var ht = function() {
     e2 > 2 && ke.registerId(this.componentId + e2), this.removeStyles(e2, n), this.createStyles(e2, t, n, o2);
   }, e;
 }();
+function ft(n) {
+  for (var r2 = [], s2 = 1; s2 < arguments.length; s2++) r2[s2 - 1] = arguments[s2];
+  var i2 = lt.apply(void 0, __spreadArray([n], r2, false)), a2 = "sc-global-".concat($(JSON.stringify(i2))), c2 = new ht(i2, a2);
+  P(a2);
+  var l2 = function(e) {
+    var t = Ge(), n2 = import_react.default.useContext(et), r3 = import_react.default.useRef(t.styleSheet.allocateGSInstance(a2)).current;
+    return import_react.default.Children.count(e.children) && console.warn("The global style component ".concat(a2, " was given child JSX. createGlobalStyle does not render children.")), i2.some(function(e2) {
+      return "string" == typeof e2 && -1 !== e2.indexOf("@import");
+    }) && console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."), t.styleSheet.server && u2(r3, e, t.styleSheet, n2, t.stylis), import_react.default.useLayoutEffect(function() {
+      if (!t.styleSheet.server) return u2(r3, e, t.styleSheet, n2, t.stylis), function() {
+        return c2.removeStyles(r3, t.styleSheet);
+      };
+    }, [r3, e, t.styleSheet, n2, t.stylis]), null;
+  };
+  function u2(e, n2, o2, r3, s3) {
+    if (c2.isStatic) c2.renderStyles(e, b, o2, s3);
+    else {
+      var i3 = __assign(__assign({}, n2), { theme: I(n2, r3, l2.defaultProps) });
+      c2.renderStyles(e, i3, o2, s3);
+    }
+  }
+  return import_react.default.memo(l2);
+}
+function mt(t) {
+  for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
+  "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");
+  var r2 = ae(lt.apply(void 0, __spreadArray([t], n, false))), s2 = $(r2);
+  return new We(s2, r2);
+}
 var vt = function() {
   function e() {
     var e2 = this;
     this._emitSheetCSS = function() {
       var t = e2.instance.toString();
-      if (!t)
-        return "";
+      if (!t) return "";
       var n = Ce(), o2 = ae([n && 'nonce="'.concat(n, '"'), "".concat(f, '="true"'), "".concat(y, '="').concat(v, '"')].filter(Boolean), " ");
       return "<style ".concat(o2, ">").concat(t, "</style>");
     }, this.getStyleTags = function() {
-      if (e2.sealed)
-        throw he(2);
+      if (e2.sealed) throw he(2);
       return e2._emitSheetCSS();
     }, this.getStyleElement = function() {
       var n;
-      if (e2.sealed)
-        throw he(2);
+      if (e2.sealed) throw he(2);
       var r2 = e2.instance.toString();
-      if (!r2)
-        return [];
+      if (!r2) return [];
       var s2 = ((n = {})[f] = "", n[y] = v, n.dangerouslySetInnerHTML = { __html: r2 }, n), i2 = Ce();
       return i2 && (s2.nonce = i2), [import_react.default.createElement("style", __assign({}, s2, { key: "sc-0-0" }))];
     }, this.seal = function() {
@@ -6369,8 +6416,7 @@ var vt = function() {
     }, this.instance = new ke({ isServer: true }), this.sealed = false;
   }
   return e.prototype.collectStyles = function(e2) {
-    if (this.sealed)
-      throw he(2);
+    if (this.sealed) throw he(2);
     return import_react.default.createElement(Ye, { sheet: this.instance }, e2);
   }, e.prototype.interleaveWithNodeStream = function(e2) {
     throw he(3);
@@ -6883,7 +6929,8 @@ function ChangeSubscriptionRequestBodyToJSON(value) {
   }
   return {
     new_plan_id: value["newPlanId"],
-    new_price_id: value["newPriceId"]
+    new_price_id: value["newPriceId"],
+    payment_method_id: value["paymentMethodId"]
   };
 }
 
@@ -7314,6 +7361,7 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     environmentId: json["environment_id"],
     externalId: json["external_id"],
     id: json["id"],
+    paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
     subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
     subtotal: json["subtotal"],
     updatedAt: new Date(json["updated_at"])
@@ -7433,7 +7481,8 @@ function StripeEmbedInfoFromJSONTyped(json, ignoreDiscriminator) {
   }
   return {
     customerEkey: json["customer_ekey"] == null ? void 0 : json["customer_ekey"],
-    publishableKey: json["publishable_key"]
+    publishableKey: json["publishable_key"],
+    setupIntentClientSecret: json["setup_intent_client_secret"] == null ? void 0 : json["setup_intent_client_secret"]
   };
 }
 
@@ -7564,6 +7613,314 @@ var CheckoutApi = class extends BaseAPI {
 
 // src/context/embed.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var GlobalStyle = ft`
+  @font-face {
+    font-family: "icons";
+    src: url(data:font/ttf;base64,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AREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAElASYBJwEoASkBKgErASwBLQEuAS8BMAExATIBMwE0ATUBNgE3ATgBOQE6ATsBPAE9AT4BPwFAAUEBQgFDAUQBRQFGAUcBSAFJAUoBSwFMAU0BTgFPAVABUQFSAVMBVAFVAVYBVwFYAVkBWgFbAVwBXQFeAV8BYAFhAWIBYwAFYWxhcm0MYXJyb3ctY3VydmVkCmFycm93LWRvd24KYXJyb3ctbGVmdAthcnJvdy1yaWdodAhhcnJvdy11cAxhcnJvdy11cHdhcmQJYmFja3NwYWNlBGJlbGwFYm9hcmQIYm9va21hcmsKYm9vbGVhbi1vbgdib29sZWFuBGJ1bGIGYnVyZ2VyDWNoZWNrLXJvdW5kZWQFY2hlY2sMY2hldnJvbi1kb3duDGNoZXZyb24tbGVmdA1jaGV2cm9uLXJpZ2h0CmNoZXZyb24tdXAEY2hpcAVjaGlwcxRjbG9zZS1yb3VuZGVkLWZpbGxlZAVjbG9zZQhjbG91ZC11cARjbHViA2NtZARjb2RlBmNvZmZlZQNjb2cOY29sbGFwc2UtZW1wdHkIY29sbGFwc2UHY29tcGFzcwpjb25uZWN0aW9uBGNvcHkHY3lsbmRlcgdkaWFtb25kDmRvbGxhci1yb3VuZGVkD2RvdHMtaG9yaXpvbnRhbA1kb3RzLXZlcnRpY2FsDGVudGl0bGVtZW50cwllcXVhbGl6ZXIaZXhjbGFtYXRpb24tcm91bmRlZC1maWxsZWQDZXllBmZpbHRlcgxmb2xkZXItbWludXMLZm9sZGVyLXBsdXMGZm9sZGVyB2dsYXNzZXMFZ2xvYmUGaGFtbWVyBGhhc2gFaGVhcnQHaHVic3BvdAVpbWFnZQxpbmZvLXJvdW5kZWQFanVpY2UDa2V5BW11c2ljCm5vZGUtbWludXMJbm9kZS1wbHVzB3BhY2thZ2ULcGFwZXItcGxhbmUGcGVuY2lsBnBpY2tlcgRwbGFuBHBsdWcKcGx1cy1taW51cxRwbHVzLXJvdW5kZWQtb3V0bGluZQdwcmVzZW50CXNjaGVtYXRpYwZzZWFyY2gHc2VnbWVudA1zZXJ2ZXItc2VhcmNoB3NpZGViYXIGc2lnbmFsB3NpbGVuY2UFc3BhZGUHc3BlYWtlcgZzdGFja3MGc3RyaXBlBHRleHQHdGh1bmRlcgd0b3JuYWRvBXRydWNrBHR1YmULdW5wcm90ZWN0ZWQIdmVyaWZpZWQMdmlkZW8tY2FtZXJhBndhbGxldAp3YXRjaC1oYW5kDHdhdGNoLXBvY2tldAp3YXRlci1kcm9wBXdhdmVzB3dlYmhvb2sEd2luZAAAAA==)
+      format("truetype");
+  }
+
+  i[class^="i-"]:before,
+  i[class*=" i-"]:before {
+    font-family: icons !important;
+    font-style: normal;
+    font-weight: normal !important;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .i-alarm:before {
+    content: "\\f101";
+  }
+  .i-arrow-curved:before {
+    content: "\\f102";
+  }
+  .i-arrow-down:before {
+    content: "\\f103";
+  }
+  .i-arrow-left:before {
+    content: "\\f104";
+  }
+  .i-arrow-right:before {
+    content: "\\f105";
+  }
+  .i-arrow-up:before {
+    content: "\\f106";
+  }
+  .i-arrow-upward:before {
+    content: "\\f107";
+  }
+  .i-backspace:before {
+    content: "\\f108";
+  }
+  .i-bell:before {
+    content: "\\f109";
+  }
+  .i-board:before {
+    content: "\\f10a";
+  }
+  .i-bookmark:before {
+    content: "\\f10b";
+  }
+  .i-boolean-on:before {
+    content: "\\f10c";
+  }
+  .i-boolean:before {
+    content: "\\f10d";
+  }
+  .i-bulb:before {
+    content: "\\f10e";
+  }
+  .i-burger:before {
+    content: "\\f10f";
+  }
+  .i-check-rounded:before {
+    content: "\\f110";
+  }
+  .i-check:before {
+    content: "\\f111";
+  }
+  .i-chevron-down:before {
+    content: "\\f112";
+  }
+  .i-chevron-left:before {
+    content: "\\f113";
+  }
+  .i-chevron-right:before {
+    content: "\\f114";
+  }
+  .i-chevron-up:before {
+    content: "\\f115";
+  }
+  .i-chip:before {
+    content: "\\f116";
+  }
+  .i-chips:before {
+    content: "\\f117";
+  }
+  .i-close-rounded-filled:before {
+    content: "\\f118";
+  }
+  .i-close:before {
+    content: "\\f119";
+  }
+  .i-cloud-up:before {
+    content: "\\f11a";
+  }
+  .i-club:before {
+    content: "\\f11b";
+  }
+  .i-cmd:before {
+    content: "\\f11c";
+  }
+  .i-code:before {
+    content: "\\f11d";
+  }
+  .i-coffee:before {
+    content: "\\f11e";
+  }
+  .i-cog:before {
+    content: "\\f11f";
+  }
+  .i-collapse-empty:before {
+    content: "\\f120";
+  }
+  .i-collapse:before {
+    content: "\\f121";
+  }
+  .i-compass:before {
+    content: "\\f122";
+  }
+  .i-connection:before {
+    content: "\\f123";
+  }
+  .i-copy:before {
+    content: "\\f124";
+  }
+  .i-cylnder:before {
+    content: "\\f125";
+  }
+  .i-diamond:before {
+    content: "\\f126";
+  }
+  .i-dollar-rounded:before {
+    content: "\\f127";
+  }
+  .i-dots-horizontal:before {
+    content: "\\f128";
+  }
+  .i-dots-vertical:before {
+    content: "\\f129";
+  }
+  .i-entitlements:before {
+    content: "\\f12a";
+  }
+  .i-equalizer:before {
+    content: "\\f12b";
+  }
+  .i-exclamation-rounded-filled:before {
+    content: "\\f12c";
+  }
+  .i-eye:before {
+    content: "\\f12d";
+  }
+  .i-filter:before {
+    content: "\\f12e";
+  }
+  .i-folder-minus:before {
+    content: "\\f12f";
+  }
+  .i-folder-plus:before {
+    content: "\\f130";
+  }
+  .i-folder:before {
+    content: "\\f131";
+  }
+  .i-glasses:before {
+    content: "\\f132";
+  }
+  .i-globe:before {
+    content: "\\f133";
+  }
+  .i-hammer:before {
+    content: "\\f134";
+  }
+  .i-hash:before {
+    content: "\\f135";
+  }
+  .i-heart:before {
+    content: "\\f136";
+  }
+  .i-hubspot:before {
+    content: "\\f137";
+  }
+  .i-image:before {
+    content: "\\f138";
+  }
+  .i-info-rounded:before {
+    content: "\\f139";
+  }
+  .i-juice:before {
+    content: "\\f13a";
+  }
+  .i-key:before {
+    content: "\\f13b";
+  }
+  .i-music:before {
+    content: "\\f13c";
+  }
+  .i-node-minus:before {
+    content: "\\f13d";
+  }
+  .i-node-plus:before {
+    content: "\\f13e";
+  }
+  .i-package:before {
+    content: "\\f13f";
+  }
+  .i-paper-plane:before {
+    content: "\\f140";
+  }
+  .i-pencil:before {
+    content: "\\f141";
+  }
+  .i-picker:before {
+    content: "\\f142";
+  }
+  .i-plan:before {
+    content: "\\f143";
+  }
+  .i-plug:before {
+    content: "\\f144";
+  }
+  .i-plus-minus:before {
+    content: "\\f145";
+  }
+  .i-plus-rounded-outline:before {
+    content: "\\f146";
+  }
+  .i-present:before {
+    content: "\\f147";
+  }
+  .i-schematic:before {
+    content: "\\f148";
+  }
+  .i-search:before {
+    content: "\\f149";
+  }
+  .i-segment:before {
+    content: "\\f14a";
+  }
+  .i-server-search:before {
+    content: "\\f14b";
+  }
+  .i-sidebar:before {
+    content: "\\f14c";
+  }
+  .i-signal:before {
+    content: "\\f14d";
+  }
+  .i-silence:before {
+    content: "\\f14e";
+  }
+  .i-spade:before {
+    content: "\\f14f";
+  }
+  .i-speaker:before {
+    content: "\\f150";
+  }
+  .i-stacks:before {
+    content: "\\f151";
+  }
+  .i-stripe:before {
+    content: "\\f152";
+  }
+  .i-text:before {
+    content: "\\f153";
+  }
+  .i-thunder:before {
+    content: "\\f154";
+  }
+  .i-tornado:before {
+    content: "\\f155";
+  }
+  .i-truck:before {
+    content: "\\f156";
+  }
+  .i-tube:before {
+    content: "\\f157";
+  }
+  .i-unprotected:before {
+    content: "\\f158";
+  }
+  .i-verified:before {
+    content: "\\f159";
+  }
+  .i-video-camera:before {
+    content: "\\f15a";
+  }
+  .i-wallet:before {
+    content: "\\f15b";
+  }
+  .i-watch-hand:before {
+    content: "\\f15c";
+  }
+  .i-watch-pocket:before {
+    content: "\\f15d";
+  }
+  .i-water-drop:before {
+    content: "\\f15e";
+  }
+  .i-waves:before {
+    content: "\\f15f";
+  }
+  .i-webhook:before {
+    content: "\\f160";
+  }
+  .i-wind:before {
+    content: "\\f161";
+  }
+`;
 var defaultTheme = {
   numberOfColumns: 2,
   sectionLayout: "merged",
@@ -7656,8 +8013,8 @@ function parseEditorState(data) {
   return arr;
 }
 async function fetchComponent(id, api) {
-  const settings = { ...defaultSettings };
   const nodes = [];
+  const settings = { ...defaultSettings };
   const response = await api.hydrateComponent({ componentId: id });
   const { data } = response;
   if (data.component?.ast) {
@@ -7667,7 +8024,7 @@ async function fetchComponent(id, api) {
     });
     const ast = getEditorState(json);
     if (ast) {
-      Object.assign(settings, ast.ROOT.props);
+      (0, import_lodash.default)(settings, ast.ROOT.props.settings);
       nodes.push(...parseEditorState(ast));
     }
   }
@@ -7771,9 +8128,11 @@ var EmbedProvider = ({
   const setData = (0, import_react2.useCallback)(
     (data) => {
       setState((prev2) => {
-        const updated = { ...prev2 };
-        (0, import_lodash.default)(updated.data, data);
-        return updated;
+        const updatedData = (0, import_lodash.default)({}, prev2.data, { ...data });
+        return {
+          ...prev2,
+          data: updatedData
+        };
       });
     },
     [setState]
@@ -7781,9 +8140,11 @@ var EmbedProvider = ({
   const updateSettings = (0, import_react2.useCallback)(
     (settings) => {
       setState((prev2) => {
-        const updated = { ...prev2 };
-        (0, import_lodash.default)(updated.settings, settings);
-        return updated;
+        const updatedSettings = (0, import_lodash.default)({}, prev2.settings, { ...settings });
+        return {
+          ...prev2,
+          settings: updatedSettings
+        };
       });
     },
     [setState]
@@ -7837,8 +8198,8 @@ var EmbedProvider = ({
                 }
               }
             },
-            ...state.data.stripeEmbed?.customerEkey ? {
-              clientSecret: state.data.stripeEmbed.customerEkey
+            ...state.data.stripeEmbed?.setupIntentClientSecret ? {
+              clientSecret: state.data.stripeEmbed?.setupIntentClientSecret
             } : { mode: "payment", currency: "usd", amount: 999999 }
           },
           children
@@ -7863,7 +8224,10 @@ var EmbedProvider = ({
         setStripe,
         setLayout
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ot, { theme: state.settings.theme, children: renderChildren() })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ot, { theme: state.settings.theme, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStyle, {}),
+        renderChildren()
+      ] })
     }
   );
 };
@@ -8802,43 +9166,38 @@ var useSchematicFlag = (key, opts) => {
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react7 = require("react");
+var import_react10 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/utils/color.ts
 function hexToHSL(color) {
   let r2 = 0;
   let g2 = 0;
-  let b = 0;
+  let b2 = 0;
   if (color.length == 4) {
     r2 = parseInt("0x" + color[1] + color[1]);
     g2 = parseInt("0x" + color[2] + color[2]);
-    b = parseInt("0x" + color[3] + color[3]);
+    b2 = parseInt("0x" + color[3] + color[3]);
   } else if (color.length == 7) {
     r2 = parseInt("0x" + color[1] + color[2]);
     g2 = parseInt("0x" + color[3] + color[4]);
-    b = parseInt("0x" + color[5] + color[6]);
+    b2 = parseInt("0x" + color[5] + color[6]);
   }
   r2 /= 255;
   g2 /= 255;
-  b /= 255;
-  const cmin = Math.min(r2, g2, b);
-  const cmax = Math.max(r2, g2, b);
+  b2 /= 255;
+  const cmin = Math.min(r2, g2, b2);
+  const cmax = Math.max(r2, g2, b2);
   const delta = cmax - cmin;
   let h = 0;
   let s2 = 0;
   let l2 = 0;
-  if (delta == 0)
-    h = 0;
-  else if (cmax == r2)
-    h = (g2 - b) / delta % 6;
-  else if (cmax == g2)
-    h = (b - r2) / delta + 2;
-  else
-    h = (r2 - g2) / delta + 4;
+  if (delta == 0) h = 0;
+  else if (cmax == r2) h = (g2 - b2) / delta % 6;
+  else if (cmax == g2) h = (b2 - r2) / delta + 2;
+  else h = (r2 - g2) / delta + 4;
   h = Math.round(h * 60);
-  if (h < 0)
-    h += 360;
+  if (h < 0) h += 360;
   l2 = (cmax + cmin) / 2;
   s2 = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l2 - 1));
   s2 = +(s2 * 100).toFixed(1);
@@ -8853,41 +9212,38 @@ function hslToHex({ h, s: s2, l: l2 }) {
   const m2 = l2 - c2 / 2;
   let r2 = 0;
   let g2 = 0;
-  let b = 0;
+  let b2 = 0;
   if (0 <= h && h < 60) {
     r2 = c2;
     g2 = x2;
-    b = 0;
+    b2 = 0;
   } else if (60 <= h && h < 120) {
     r2 = x2;
     g2 = c2;
-    b = 0;
+    b2 = 0;
   } else if (120 <= h && h < 180) {
     r2 = 0;
     g2 = c2;
-    b = x2;
+    b2 = x2;
   } else if (180 <= h && h < 240) {
     r2 = 0;
     g2 = x2;
-    b = c2;
+    b2 = c2;
   } else if (240 <= h && h < 300) {
     r2 = x2;
     g2 = 0;
-    b = c2;
+    b2 = c2;
   } else if (300 <= h && h < 360) {
     r2 = c2;
     g2 = 0;
-    b = x2;
+    b2 = x2;
   }
   let rs = Math.round((r2 + m2) * 255).toString(16);
   let gs = Math.round((g2 + m2) * 255).toString(16);
-  let bs = Math.round((b + m2) * 255).toString(16);
-  if (rs.length == 1)
-    rs = "0" + rs;
-  if (gs.length == 1)
-    gs = "0" + gs;
-  if (bs.length == 1)
-    bs = "0" + bs;
+  let bs = Math.round((b2 + m2) * 255).toString(16);
+  if (rs.length == 1) rs = "0" + rs;
+  if (gs.length == 1) gs = "0" + gs;
+  if (bs.length == 1) bs = "0" + bs;
   return "#" + rs + gs + bs;
 }
 function adjustLightness(color, amount) {
@@ -8914,6 +9270,34 @@ function toPrettyDate(date) {
 function camelToHyphen(str) {
   return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
 }
+function formatCurrency(amount) {
+  try {
+    const dollars = amount / 100;
+    const formatValue = (value, symbol) => {
+      let formatted = value.toFixed(1);
+      if (formatted.endsWith(".0")) {
+        formatted = formatted.slice(0, -2);
+      }
+      return `$${formatted}${symbol}`;
+    };
+    if (dollars >= 1e6) {
+      return formatValue(dollars / 1e6, "M");
+    } else if (dollars >= 1e3) {
+      return formatValue(dollars / 1e3, "k");
+    } else {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD"
+      }).format(dollars);
+    }
+  } catch (error) {
+    console.error("Error formatting currency", error);
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD"
+    }).format(amount / 100);
+  }
+}
 
 // src/const/index.ts
 var TEXT_BASE_SIZE = 16;
@@ -9146,13 +9530,115 @@ var IconRound = ({
   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/modal/Modal.tsx
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Modal = ({ children, onClose }) => {
+  const theme = nt();
+  const { setLayout } = useEmbed();
+  const ref = (0, import_react6.useRef)(null);
+  const handleClose = (0, import_react6.useCallback)(() => {
+    setLayout("portal");
+    onClose?.();
+  }, [setLayout, onClose]);
+  (0, import_react6.useEffect)(() => {
+    ref.current?.focus();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Box,
+    {
+      ref,
+      tabIndex: 0,
+      onClick: (event) => {
+        if (event.target === event.currentTarget) {
+          handleClose();
+        }
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          handleClose();
+        }
+      },
+      $position: "absolute",
+      $top: "50%",
+      $left: "50%",
+      $zIndex: "999999",
+      $transform: "translate(-50%, -50%)",
+      $width: "100%",
+      $height: "100%",
+      $backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 15) : lighten(theme.card.background, 15),
+      $overflow: "hidden",
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        Flex,
+        {
+          $position: "relative",
+          $top: "50%",
+          $left: "50%",
+          $transform: "translate(-50%, -50%)",
+          $flexDirection: "column",
+          $overflow: "hidden",
+          $width: "calc(100% - 5rem)",
+          $height: "calc(100% - 5rem)",
+          $backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 2.5) : lighten(theme.card.background, 2.5),
+          $borderRadius: "0.5rem",
+          $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
+        }
+      )
+    }
+  );
+};
+
+// src/components/ui/modal/ModalHeader.tsx
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ModalHeader = ({ children, onClose }) => {
+  const theme = nt();
+  const { setLayout } = useEmbed();
+  const handleClose = (0, import_react7.useCallback)(() => {
+    setLayout("portal");
+    onClose?.();
+  }, [setLayout, onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    Flex,
+    {
+      $justifyContent: "space-between",
+      $alignItems: "center",
+      $gap: "1rem",
+      $height: "3.75rem",
+      $padding: "0 0.625rem 0 2.5rem",
+      $backgroundColor: theme.card.background,
+      $borderBottomWidth: "1px",
+      $borderBottomStyle: "solid",
+      $borderBottomColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 15) : lighten(theme.card.background, 15),
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Icon2,
+          {
+            name: "close",
+            style: {
+              fontSize: 36,
+              color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 27.5) : lighten(theme.card.background, 27.5)
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+
 // src/components/ui/progress-bar/styles.ts
 var Container2 = dt(Flex)`
   position: relative;
 `;
 
 // src/components/ui/progress-bar/ProgressBar.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ProgressBar = ({
   progress,
   value,
@@ -9168,21 +9654,21 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Container2,
     {
       $alignItems: "center",
       $gap: `${16 / TEXT_BASE_SIZE}rem`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Flex,
           {
             $position: "relative",
             $alignItems: "center",
             $width: `${barWidth}`,
             $maxWidth: "100%",
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               Flex,
               {
                 $position: "relative",
@@ -9191,7 +9677,7 @@ var ProgressBar = ({
                 $height: `${8 / TEXT_BASE_SIZE}rem`,
                 $background: "#F2F4F7",
                 $borderRadius: "9999px",
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   Box,
                   {
                     $width: `${Math.min(progress, 100)}%`,
@@ -9204,7 +9690,7 @@ var ProgressBar = ({
             )
           }
         ),
-        total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { $size: 14, $weight: 500, children: [
+        total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { $size: 14, $weight: 500, children: [
           value,
           "/",
           total
@@ -9214,8 +9700,11 @@ var ProgressBar = ({
   );
 };
 
-// src/components/elements/plan-manager/CheckoutForm.tsx
-var import_react6 = require("react");
+// src/components/elements/plan-manager/CheckoutDialog.tsx
+var import_react9 = require("react");
+
+// src/components/elements/plan-manager/PaymentForm.tsx
+var import_react8 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 var import_react_stripe_js3 = require("@stripe/react-stripe-js");
 
@@ -9227,7 +9716,18 @@ var StyledButton = dt(Button2)`
   width: 100%;
   ${({ disabled, $color = "primary", theme }) => {
   const { l: l2 } = hexToHSL(theme[$color]);
-  const textColor = disabled ? "#989898" : l2 > 50 ? "#000000" : "#FFFFFF";
+  let textColor;
+  let colorFn;
+  if (l2 > 50) {
+    textColor = "#000000";
+    colorFn = lighten;
+  } else {
+    textColor = "#FFFFFF";
+    colorFn = darken;
+  }
+  if (disabled) {
+    textColor = colorFn(textColor, 42.5);
+  }
   return lt`
       color: ${textColor};
 
@@ -9238,35 +9738,47 @@ var StyledButton = dt(Button2)`
 }};
 
   ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
-  const color = disabled ? "#EEEEEE" : theme[$color];
+  let color = theme[$color];
+  if (disabled) {
+    const { l: l2 } = hexToHSL(theme.card.background);
+    color = hslToHex({ h: 0, s: 0, l: l2 });
+    color = l2 > 50 ? darken(color, 7.5) : lighten(color, 7.5);
+  }
   return $variant === "filled" ? lt`
           background-color: ${color};
           border-color: ${color};
         ` : lt`
           background-color: transparent;
-          border-color: #d2d2d2;
-          color: #194bfb;
+          border-color: ${color};
+          color: ${color};
+
           ${Text} {
-            color: #194bfb;
+            color: ${color};
           }
         `;
 }}
 
-  &:hover {
-    ${({ disabled }) => disabled && "cursor: not-allowed;"}
-    ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
+  &:disabled:hover {
+    cursor: not-allowed;
+  }
+
+  &:not(:disabled):hover {
+    ${({ $color = "primary", theme, $variant = "filled" }) => {
   const specified = theme[$color];
   const lightened = lighten(specified, 15);
-  const color = disabled ? "#EEEEEE" : specified === lightened ? darken(specified, 15) : lightened;
+  const color = specified === lightened ? darken(specified, 15) : lightened;
+  const { l: l2 } = hexToHSL(theme[$color]);
+  const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
   return $variant === "filled" ? lt`
             background-color: ${color};
             border-color: ${color};
           ` : lt`
             background-color: ${color};
             border-color: ${color};
-            color: #ffffff;
+            color: ${textColor};
+
             ${Text} {
-              color: #ffffff;
+              color: ${textColor};
             }
           `;
 }}
@@ -9296,14 +9808,15 @@ var StyledButton = dt(Button2)`
 }}
 `;
 
-// src/components/elements/plan-manager/CheckoutForm.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var CheckoutForm = ({ plan, period }) => {
+// src/components/elements/plan-manager/PaymentForm.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var PaymentForm = ({ plan, period, onConfirm }) => {
   const stripe = (0, import_react_stripe_js3.useStripe)();
   const elements = (0, import_react_stripe_js3.useElements)();
   const { api, data } = useEmbed();
-  const [message, setMessage] = (0, import_react6.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
+  const [message, setMessage] = (0, import_react8.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
+  const [isConfirmed, setIsConfirmed] = (0, import_react8.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     const priceId = period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
@@ -9311,20 +9824,34 @@ var CheckoutForm = ({ plan, period }) => {
       return;
     }
     setIsLoading(true);
-    const { error } = await stripe.confirmPayment({
-      elements,
-      confirmParams: {
-        return_url: window.location.href
+    setIsConfirmed(false);
+    try {
+      const { setupIntent, error } = await stripe.confirmSetup({
+        elements,
+        confirmParams: {
+          return_url: window.location.href
+        },
+        redirect: "if_required"
+      });
+      if (onConfirm && typeof setupIntent?.payment_method === "string") {
+        onConfirm(setupIntent.payment_method);
+        setIsConfirmed(true);
+      } else {
       }
-    });
-    if (error.type === "card_error" || error.type === "validation_error") {
-      setMessage(error.message);
-    } else {
-      setMessage("An unexpected error occured.");
+      if (error?.type === "card_error" || error?.type === "validation_error") {
+        setMessage(error.message);
+      }
+      setIsLoading(false);
+    } catch (error) {
+      if (error instanceof Error) {
+        setMessage(error.message);
+      } else {
+        setMessage("An unexpected error occured.");
+      }
+      setIsLoading(false);
     }
-    setIsLoading(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "form",
     {
       id: "payment-form",
@@ -9332,30 +9859,20 @@ var CheckoutForm = ({ plan, period }) => {
       style: {
         display: "flex",
         flexDirection: "column",
-        height: "100%"
+        height: "100%",
+        overflowX: "hidden",
+        overflowY: "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          Box,
-          {
-            $fontSize: "18px",
-            $marginBottom: "1.5rem",
-            $display: "inline-block",
-            $width: "100%",
-            children: [
-              "Add payment method",
-              " "
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $width: "100%", $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { $size: 18, children: "Add payment method" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Flex,
           {
             $flexDirection: "column",
             $gap: "1.5rem",
             $marginBottom: "1.5rem",
             $width: "100%",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               import_react_stripe_js2.LinkAuthenticationElement,
               {
                 id: "link-authentication-element"
@@ -9363,18 +9880,18 @@ var CheckoutForm = ({ plan, period }) => {
             )
           }
         ),
-        /* @__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_runtime9.jsxs)(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }),
+          message && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { id: "payment-message", children: message })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           StyledButton,
           {
             id: "submit",
-            disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.customerEkey,
+            disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
             $size: "md",
-            $color: "secondary",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
+            $color: "primary",
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { id: "button-text", children: !isLoading ? "Loading" : "Save payment method" })
           }
         ) })
       ]
@@ -9382,338 +9899,589 @@ var CheckoutForm = ({ plan, period }) => {
   );
 };
 
-// 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
-        }
-      )
-    }
+// src/components/elements/plan-manager/CheckoutDialog.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var CheckoutDialog = () => {
+  const [checkoutStage, setCheckoutStage] = (0, import_react9.useState)(
+    "plan"
   );
-};
-var OverlaySideBar = ({
-  pricePeriod,
-  setPricePeriod,
-  checkoutStage,
-  setCheckoutStage,
-  currentPlan,
-  selectedPlan
-}) => {
-  const { api } = useEmbed();
-  const savingsPercentage = (0, import_react7.useMemo)(() => {
-    if (selectedPlan && pricePeriod === "month") {
+  const [planPeriod, setPlanPeriod] = (0, import_react9.useState)("month");
+  const [selectedPlan, setSelectedPlan] = (0, import_react9.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react9.useState)();
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
+  const [isCheckoutComplete, setIsCheckoutComplete] = (0, import_react9.useState)(false);
+  const theme = nt();
+  const { api, data, settings } = useEmbed();
+  const { currentPlan, availablePlans } = (0, import_react9.useMemo)(() => {
+    return {
+      currentPlan: data.company?.plan,
+      availablePlans: data.activePlans
+    };
+  }, [data.company, data.activePlans]);
+  const savingsPercentage = (0, import_react9.useMemo)(() => {
+    if (selectedPlan) {
       const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
       const yearly = selectedPlan?.yearlyPrice?.price || 0;
-      return (monthly - yearly) / monthly * 100;
+      return Math.round((monthly - yearly) / monthly * 1e4) / 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,
+  }, [selectedPlan]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Modal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $gap: "1rem", children: !isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
+        checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Box,
           {
-            $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"
-              ] })
-            ]
+            $width: "0.9375rem",
+            $height: "0.9375rem",
+            $borderWidth: "2px",
+            $borderStyle: "solid",
+            $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
+            $borderRadius: "9999px"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          IconRound,
+          {
+            name: "check",
+            style: {
+              color: theme.card.background,
+              backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
+              fontSize: 16,
+              width: "1rem",
+              height: "1rem"
+            }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-          Flex,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Box,
           {
-            $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,
+            tabIndex: 0,
+            ...checkoutStage === "plan" ? {
+              style: {
+                fontWeight: "700"
+              }
+            } : {
+              style: {
+                cursor: "pointer"
+              },
+              onClick: () => setCheckoutStage("plan")
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { children: "1. Select plan" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Icon2,
+          {
+            name: "chevron-right",
+            style: {
+              fontSize: 16,
+              color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5)
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Box,
+          {
+            $width: "0.9375rem",
+            $height: "0.9375rem",
+            $borderWidth: "2px",
+            $borderStyle: "solid",
+            $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
+            $borderRadius: "9999px"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Box,
+          {
+            tabIndex: 0,
+            ...checkoutStage === "checkout" && {
+              style: {
+                fontWeight: "700"
+              }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { children: "2. Checkout" })
+          }
+        )
+      ] })
+    ] }) }) }),
+    isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $justifyContent: "center", $alignItems: "center", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Text,
+      {
+        as: "h1",
+        $font: theme.typography.heading1.fontFamily,
+        $size: theme.typography.heading1.fontSize,
+        $weight: theme.typography.heading1.fontWeight,
+        $color: theme.typography.heading1.color,
+        children: "Subscription updated!"
+      }
+    ) }),
+    !isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $position: "relative", $flexGrow: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        Flex,
+        {
+          $position: "absolute",
+          $top: "0",
+          $left: "0",
+          $flexDirection: "column",
+          $gap: "1rem",
+          $padding: "2rem 2.5rem 2rem 2.5rem",
+          $backgroundColor: darken(settings.theme.card.background, 2.5),
+          $flex: "1",
+          $width: "72.5%",
+          $height: "100%",
+          $overflow: "auto",
+          children: [
+            checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  Text,
+                  {
+                    as: "h1",
+                    id: "select-plan-dialog-label",
+                    $size: 18,
+                    $marginBottom: "0.5rem",
+                    children: "Select plan"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  Text,
+                  {
+                    as: "p",
+                    id: "select-plan-dialog-description",
+                    $size: 14,
+                    $weight: 400,
+                    children: "Choose your base plan"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                  Flex,
+                  {
+                    $height: "100%",
+                    $flexDirection: "column",
+                    $backgroundColor: settings.theme.card.background,
+                    $flex: "1",
+                    $outlineWidth: "2px",
+                    $outlineStyle: "solid",
+                    $outlineColor: plan.id === selectedPlan?.id ? theme.primary : "transparent",
+                    $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
+                    ...settings.theme.card.hasShadow && {
+                      $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                        Flex,
                         {
+                          $flexDirection: "column",
+                          $position: "relative",
+                          $gap: "1rem",
                           $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"
+                          $height: "auto",
+                          $padding: `${settings.theme.card.padding / 16}rem`,
+                          $borderBottomWidth: "1px",
+                          $borderStyle: "solid",
+                          $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 20, $weight: 600, children: plan.name }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 14, children: plan.description }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
+                                (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
+                              ) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
+                                "/",
+                                planPeriod
+                              ] })
+                            ] }),
+                            (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                              Flex,
+                              {
+                                $position: "absolute",
+                                $right: "1rem",
+                                $top: "1rem",
+                                $fontSize: "0.625rem",
+                                $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                                $backgroundColor: theme.primary,
+                                $borderRadius: "9999px",
+                                $padding: "0.125rem 0.85rem",
+                                children: "Current plan"
                               }
-                            }
-                          )
+                            )
+                          ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         Flex,
                         {
-                          $flexDirection: "row",
-                          $alignItems: "center",
-                          $justifyContent: "space-between",
-                          $fontSize: "14px",
-                          $color: "#5D5D5D",
+                          $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_runtime10.jsxs)(
+                              Flex,
+                              {
+                                $flexShrink: "0",
+                                $gap: "1rem",
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                    IconRound,
+                                    {
+                                      name: feature.icon,
+                                      size: "tn",
+                                      colors: [
+                                        settings.theme.primary,
+                                        `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 12, children: feature.name }) })
+                                ]
+                              },
+                              feature.id
+                            );
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                        Flex,
+                        {
+                          $flexDirection: "column",
+                          $position: "relative",
+                          $gap: "1rem",
+                          $width: "100%",
+                          $height: "auto",
+                          $padding: "1.5rem",
                           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
-                            ] })
+                            plan.id === selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                              Flex,
+                              {
+                                $justifyContent: "center",
+                                $alignItems: "center",
+                                $gap: "0.25rem",
+                                $fontSize: "0.9375rem",
+                                $padding: "0.625rem 0",
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                    Icon2,
+                                    {
+                                      name: "check-rounded",
+                                      style: {
+                                        fontSize: 20,
+                                        lineHeight: "1",
+                                        color: theme.primary
+                                      }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                    Text,
+                                    {
+                                      style: {
+                                        color: hexToHSL(theme.card.background).l > 50 ? "#000000" : "#FFFFFF",
+                                        lineHeight: "1.4"
+                                      },
+                                      children: "Selected"
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
+                            !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                              StyledButton,
+                              {
+                                disabled: plan.valid === false,
+                                $size: "sm",
+                                $color: "primary",
+                                $variant: "outline",
+                                onClick: () => {
+                                  setSelectedPlan(plan);
+                                },
+                                children: "Select"
+                              }
+                            )
                           ]
                         }
                       )
-                    ] })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__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"
+                  plan.id
+                );
+              }) })
+            ] }),
+            selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              PaymentForm,
+              {
+                plan: selectedPlan,
+                period: planPeriod,
+                onConfirm: (value) => {
+                  setPaymentMethodId(value);
                 }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
-            ]
-          }
-        )
-      ]
-    }
-  );
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        Flex,
+        {
+          $position: "absolute",
+          $top: "0",
+          $right: "0",
+          $flexDirection: "column",
+          $background: settings.theme.card.background,
+          $borderRadius: "0 0 0.5rem",
+          $width: "27.5%",
+          $height: "100%",
+          $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              Flex,
+              {
+                $flexDirection: "column",
+                $position: "relative",
+                $gap: "1rem",
+                $width: "100%",
+                $height: "auto",
+                $padding: "1.5rem",
+                $borderBottom: "1px solid #DEDEDE",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                    Flex,
+                    {
+                      $border: "1px solid #D9D9D9",
+                      $borderRadius: "2.5rem",
+                      $cursor: "pointer",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          Flex,
+                          {
+                            onClick: () => setPlanPeriod("month"),
+                            $justifyContent: "center",
+                            $alignItems: "center",
+                            $padding: "0.25rem 0.5rem",
+                            $flex: "1",
+                            $backgroundColor: planPeriod === "month" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
+                            $borderRadius: "2.5rem",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 12, $weight: planPeriod === "month" ? 600 : 400, children: "Billed monthly" })
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          Flex,
+                          {
+                            onClick: () => setPlanPeriod("year"),
+                            $justifyContent: "center",
+                            $alignItems: "center",
+                            $padding: "0.25rem 0.5rem",
+                            $flex: "1",
+                            $backgroundColor: planPeriod === "year" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
+                            $borderRadius: "2.5rem",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 12, $weight: planPeriod === "year" ? 600 : 400, children: "Billed yearly" })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  savingsPercentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 11, $color: "#194BFB", children: planPeriod === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing` }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 14, $color: "#5D5D5D", children: "Plan" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                    Flex,
+                    {
+                      $flexDirection: "column",
+                      $fontSize: "0.875rem",
+                      $color: "#5D5D5D",
+                      $gap: "0.5rem",
+                      children: [
+                        currentPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                          Flex,
+                          {
+                            $alignItems: "center",
+                            $justifyContent: "space-between",
+                            $fontSize: "0.875rem",
+                            $color: "#5D5D5D",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $fontSize: "0.875rem", $color: "#5D5D5D", children: currentPlan.name }),
+                              typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
+                                formatCurrency(currentPlan.planPrice),
+                                "/",
+                                currentPlan.planPeriod
+                              ] })
+                            ]
+                          }
+                        ),
+                        selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            Box,
+                            {
+                              $width: "100%",
+                              $textAlign: "left",
+                              $opacity: "50%",
+                              $marginBottom: "-0.25rem",
+                              $marginTop: "-0.25rem",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                Icon2,
+                                {
+                                  name: "arrow-down",
+                                  style: {
+                                    display: "inline-block"
+                                  }
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                            Flex,
+                            {
+                              $alignItems: "center",
+                              $justifyContent: "space-between",
+                              $fontSize: "0.875rem",
+                              $color: "#5D5D5D",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                  Flex,
+                                  {
+                                    $fontSize: "0.875rem",
+                                    $color: "#000000",
+                                    $fontWeight: "600",
+                                    children: selectedPlan.name
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
+                                  formatCurrency(
+                                    (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
+                                  ),
+                                  "/",
+                                  planPeriod
+                                ] })
+                              ]
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              Flex,
+              {
+                $flexDirection: "column",
+                $position: "relative",
+                $gap: "0.75rem",
+                $width: "100%",
+                $height: "auto",
+                $padding: "1.5rem",
+                children: [
+                  selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                    Flex,
+                    {
+                      $fontSize: "0.75rem",
+                      $color: "#5D5D5D",
+                      $justifyContent: "space-between",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: [
+                          planPeriod === "month" ? "Monthly" : "Yearly",
+                          " total:",
+                          " "
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $fontSize: "0.75rem", $color: "#000000", children: [
+                          formatCurrency(
+                            (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
+                          ),
+                          "/",
+                          planPeriod
+                        ] })
+                      ]
+                    }
+                  ),
+                  checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    StyledButton,
+                    {
+                      disabled: !selectedPlan,
+                      onClick: () => {
+                        setCheckoutStage("checkout");
+                      },
+                      $size: "sm",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                        Flex,
+                        {
+                          $gap: "0.5rem",
+                          $alignItems: "center",
+                          $justifyContent: "center",
+                          $padding: "0 1rem",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $align: "left", children: "Next: Checkout" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
+                          ]
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    StyledButton,
+                    {
+                      disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId || isLoading,
+                      onClick: async () => {
+                        const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
+                        if (!api || !selectedPlan || !priceId || !paymentMethodId) {
+                          return;
+                        }
+                        try {
+                          setIsLoading(true);
+                          setIsCheckoutComplete(false);
+                          await api.checkout({
+                            changeSubscriptionRequestBody: {
+                              newPlanId: selectedPlan.id,
+                              newPriceId: priceId,
+                              paymentMethodId
+                            }
+                          });
+                          setIsCheckoutComplete(true);
+                        } catch (error) {
+                          console.error(error);
+                        } finally {
+                          setIsCheckoutComplete(true);
+                          setIsLoading(false);
+                        }
+                      },
+                      $size: "md",
+                      children: "Pay now"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
 };
+
+// src/components/elements/plan-manager/PlanManager.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var resolveDesignProps = (props) => {
   return {
     header: {
@@ -9738,33 +10506,27 @@ var resolveDesignProps = (props) => {
     callToAction: {
       isVisible: props.callToAction?.isVisible ?? true,
       buttonSize: props.callToAction?.buttonSize ?? "md",
-      buttonStyle: props.callToAction?.buttonStyle ?? "secondary"
+      buttonStyle: props.callToAction?.buttonStyle ?? "primary"
     }
   };
 };
-var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = (0, import_react10.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)(() => {
+  const { currentPlan, canChangePlan } = (0, import_react10.useMemo)(() => {
     return {
       currentPlan: data.company?.plan,
-      canChangePlan: stripe !== null,
-      availablePlans: data.activePlans
+      canChangePlan: stripe !== null
     };
-  }, [data.company, data.activePlans, stripe]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  }, [data.company, stripe]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Flex,
       {
         $flexDirection: "column",
         $gap: "0.75rem",
         ...canChangePlan && { $margin: "0 0 0.5rem" },
-        children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           Flex,
           {
             $justifyContent: "space-between",
@@ -9772,8 +10534,8 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
             $width: "100%",
             ...canChangePlan && { $margin: "0 0 1.5rem" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
@@ -9784,7 +10546,7 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
                     children: currentPlan.name
                   }
                 ) }),
-                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
@@ -9795,7 +10557,7 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
                   }
                 )
               ] }),
-              props.header.price.isVisible && currentPlan.planPrice >= 0 && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 Text,
                 {
                   $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
@@ -9803,8 +10565,7 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
                   $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
                   $color: settings.theme.typography[props.header.price.fontStyle].color,
                   children: [
-                    "$",
-                    currentPlan.planPrice,
+                    formatCurrency(currentPlan.planPrice),
                     "/",
                     currentPlan.planPeriod
                   ]
@@ -9815,7 +10576,7 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
         )
       }
     ),
-    canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       StyledButton,
       {
         onClick: () => {
@@ -9823,7 +10584,7 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
         },
         $size: props.callToAction.buttonSize,
         $color: props.callToAction.buttonStyle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Text,
           {
             $font: settings.theme.typography.text.fontFamily,
@@ -9834,306 +10595,13 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
         )
       }
     ),
-    canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(OverlayWrapper, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: "1rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
-            checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              Box,
-              {
-                $width: "15px",
-                $height: "15px",
-                $backgroundColor: "white",
-                $border: "2px solid #DDDDDD",
-                $borderRadius: "999px"
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              IconRound,
-              {
-                name: "check",
-                style: {
-                  color: "#FFFFFF",
-                  backgroundColor: "#DDDDDD",
-                  fontSize: 16,
-                  width: "1rem",
-                  height: "1rem"
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "div",
-              {
-                tabIndex: 0,
-                ...checkoutStage === "plan" ? {
-                  style: {
-                    fontWeight: "700"
-                  }
-                } : {
-                  style: {
-                    cursor: "pointer"
-                  },
-                  onClick: () => setCheckoutStage("plan")
-                },
-                children: "1. Select plan"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              Icon2,
-              {
-                name: "chevron-right",
-                style: { fontSize: 16, color: "#D0D0D0" }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              Box,
-              {
-                $width: "15px",
-                $height: "15px",
-                $border: "2px solid #DDDDDD",
-                $borderRadius: "999px",
-                $backgroundColor: "white"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "div",
-              {
-                tabIndex: 0,
-                ...checkoutStage === "checkout" && {
-                  style: {
-                    fontWeight: "700"
-                  }
-                },
-                children: "2. Checkout"
-              }
-            )
-          ] })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $height: "100%", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-            Flex,
-            {
-              $flexDirection: "column",
-              $gap: "1rem",
-              $padding: "2rem 2.5rem 2rem 2.5rem",
-              $backgroundColor: "#FBFBFB",
-              $borderRadius: "0 0.5rem 0",
-              $flex: "1",
-              $height: "100%",
-              children: [
-                checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                    Flex,
-                    {
-                      $flexDirection: "column",
-                      $gap: "1rem",
-                      $marginBottom: "1rem",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          Text,
-                          {
-                            as: "h1",
-                            id: "select-plan-dialog-label",
-                            $size: 18,
-                            $marginBottom: ".5rem",
-                            children: "Select plan"
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          Text,
-                          {
-                            as: "p",
-                            id: "select-plan-dialog-description",
-                            $size: 14,
-                            $weight: 400,
-                            children: "Choose your base plan"
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    Flex,
-                    {
-                      $flexDirection: "row",
-                      $gap: "1rem",
-                      $flex: "1",
-                      $height: "100%",
-                      children: availablePlans?.map((plan) => {
-                        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                          Flex,
-                          {
-                            $height: "100%",
-                            $flexDirection: "column",
-                            $backgroundColor: "white",
-                            $flex: "1",
-                            $border: `2px solid ${plan.id === selectedPlan?.id ? "#194BFB" : "transparent"}`,
-                            $borderRadius: ".5rem",
-                            $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)",
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                                Flex,
-                                {
-                                  $flexDirection: "column",
-                                  $position: "relative",
-                                  $gap: "1rem",
-                                  $width: "100%",
-                                  $height: "auto",
-                                  $padding: "2rem 1.5rem 1.5rem",
-                                  $borderBottom: "1px solid #DEDEDE",
-                                  children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: plan.name }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 14, children: plan.description }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $fontSize: ".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
-    )
+    canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckoutDialog, {}), portal || document.body)
   ] });
 });
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_react8 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function resolveDesignProps2(props) {
   return {
     header: {
@@ -10156,10 +10624,10 @@ function resolveDesignProps2(props) {
     }
   };
 }
-var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, ref) => {
+var IncludedFeatures = (0, import_react11.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { data, settings } = useEmbed();
-  const features = (0, import_react8.useMemo)(() => {
+  const features = (0, import_react11.useMemo)(() => {
     return (data.featureUsage?.features || []).map(
       ({
         access,
@@ -10186,8 +10654,8 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
       }
     );
   }, [data.featureUsage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Text,
       {
         $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10204,7 +10672,7 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
         }
         return [
           ...acc,
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             Flex,
             {
               $flexWrap: "wrap",
@@ -10212,19 +10680,19 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "1rem", children: [
-                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
+                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     IconRound,
                     {
                       name: feature.icon,
                       size: "sm",
                       colors: [
-                        settings.theme.card.background,
-                        settings.theme.primary
+                        settings.theme.primary,
+                        `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`
                       ]
                     }
                   ),
-                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     Text,
                     {
                       $font: settings.theme.typography[props.icons.fontStyle].fontFamily,
@@ -10235,8 +10703,8 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
                     }
                   ) })
                 ] }),
-                allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { $textAlign: "right", children: [
-                  props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { $textAlign: "right", children: [
+                  props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     Text,
                     {
                       as: Box,
@@ -10247,7 +10715,7 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
                       children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
                     }
                   ),
-                  props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     Text,
                     {
                       as: Box,
@@ -10271,8 +10739,8 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
 });
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react9 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function resolveDesignProps3(props) {
   return {
     isVisible: props.isVisible ?? true,
@@ -10297,14 +10765,14 @@ function resolveDesignProps3(props) {
     callToAction: {
       isVisible: props.callToAction?.isVisible ?? true,
       buttonSize: props.callToAction?.buttonSize ?? "md",
-      buttonStyle: props.callToAction?.buttonStyle ?? "secondary"
+      buttonStyle: props.callToAction?.buttonStyle ?? "primary"
     }
   };
 }
-var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const { data, settings } = useEmbed();
-  const features = (0, import_react9.useMemo)(() => {
+  const features = (0, import_react12.useMemo)(() => {
     return (data.featureUsage?.features || []).map(
       ({
         access,
@@ -10331,19 +10799,19 @@ var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref
       }
     );
   }, [data.featureUsage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
     (acc, { allocation, allocationType, feature, usage }, index) => {
       if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
         return acc;
       }
       return [
         ...acc,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "1.5rem", children: [
-          props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconRound, { name: feature.icon, size: "sm" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $flexGrow: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { children: [
-              feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $flexGrow: "1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1.5rem", children: [
+          props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconRound, { name: feature.icon, size: "sm" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $flexGrow: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { children: [
+              feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $flexGrow: "1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   Text,
                   {
                     as: Box,
@@ -10354,7 +10822,7 @@ var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref
                     children: feature.name
                   }
                 ),
-                props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   Text,
                   {
                     as: Box,
@@ -10366,8 +10834,8 @@ var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref
                   }
                 )
               ] }),
-              allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $textAlign: "right", children: [
-                props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $textAlign: "right", children: [
+                props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   Text,
                   {
                     as: Box,
@@ -10378,7 +10846,7 @@ var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref
                     children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
                   }
                 ),
-                props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   Text,
                   {
                     as: Box,
@@ -10391,7 +10859,7 @@ var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref
                 )
               ] })
             ] }),
-            typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               ProgressBar,
               {
                 progress: usage / allocation * 100,
@@ -10409,8 +10877,8 @@ var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref
 });
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react10 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function resolveDesignProps4(props) {
   return {
     header: {
@@ -10429,10 +10897,10 @@ function resolveDesignProps4(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref) => {
+var UpcomingBill = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
   const { data, settings, stripe } = useEmbed();
-  const { upcomingInvoice } = (0, import_react10.useMemo)(() => {
+  const { upcomingInvoice } = (0, import_react13.useMemo)(() => {
     return {
       upcomingInvoice: {
         ...data.upcomingInvoice?.amountDue && {
@@ -10450,14 +10918,14 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
   if (!stripe || !data.upcomingInvoice) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
-    props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref, className, children: [
+    props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
         $alignItems: "center",
         $margin: "0 0 0.75rem",
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           Text,
           {
             $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10473,8 +10941,8 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
         )
       }
     ),
-    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)(
+    upcomingInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+      props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Text,
         {
           $font: settings.theme.typography[props.price.fontStyle].fontFamily,
@@ -10482,20 +10950,10 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
           $weight: settings.theme.typography[props.price.fontStyle].fontWeight,
           $color: settings.theme.typography[props.price.fontStyle].color,
           $lineHeight: 1,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              Text,
-              {
-                $size: "0.75em",
-                $color: settings.theme.typography[props.price.fontStyle].color,
-                children: "$"
-              }
-            ),
-            upcomingInvoice.amountDue
-          ]
+          children: formatCurrency(upcomingInvoice.amountDue)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Text,
         {
           $font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
@@ -10510,9 +10968,9 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
 });
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react11 = require("react");
+var import_react14 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -10524,10 +10982,10 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PaymentMethod = (0, import_react14.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const { data, settings, stripe, layout } = useEmbed();
-  const paymentMethod = (0, import_react11.useMemo)(() => {
+  const paymentMethod = (0, import_react14.useMemo)(() => {
     const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
     let monthsToExpiration;
     if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
@@ -10546,15 +11004,15 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
   if (!stripe || !data.subscription?.paymentMethod) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className, children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref, className, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
         $alignItems: "center",
         $margin: "0 0 1rem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Text,
             {
               $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10564,7 +11022,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
               children: "Payment Method"
             }
           ),
-          typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Text,
             {
               $font: settings.theme.typography.text.fontFamily,
@@ -10576,7 +11034,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
         ]
       }
     ),
-    paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -10585,16 +11043,16 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
         $background: `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`,
         $padding: "0.375rem 1rem",
         $borderRadius: "9999px",
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
           "\u{1F4B3} Card ending in ",
           paymentMethod.cardLast4
         ] })
       }
     ),
     layout === "payment" && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(OverlayWrapper, { size: "md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Modal, { size: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -10602,7 +11060,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
             $height: "100%",
             $gap: "1.5rem",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -10611,8 +11069,8 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                   $borderRadius: "0 0 0.5rem 0.5rem",
                   $flex: "1",
                   $height: "100%",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       Box,
                       {
                         $fontSize: "18px",
@@ -10622,8 +11080,8 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                         children: "Default"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         Flex,
                         {
                           $alignItems: "center",
@@ -10631,69 +11089,52 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                           $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" }) })
-                              ]
-                            }
-                          )
+                          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $justifyContent: "space-between", $flex: "1", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)("g", { children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                      "rect",
+                                      {
+                                        stroke: "#DDD",
+                                        fill: "#FFF",
+                                        x: ".25",
+                                        y: ".25",
+                                        width: "23",
+                                        height: "15.5",
+                                        rx: "2"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                          ] })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         StyledButton,
                         {
                           $size: "sm",
-                          $color: "secondary",
+                          $color: "primary",
                           $variant: "outline",
                           style: {
                             whiteSpace: "nowrap",
@@ -10707,7 +11148,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -10716,8 +11157,8 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                   $borderRadius: "0 0 0.5rem 0.5rem",
                   $flex: "1",
                   $height: "100%",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       Box,
                       {
                         $fontSize: "18px",
@@ -10727,8 +11168,8 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                         children: "Others"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         Flex,
                         {
                           $alignItems: "center",
@@ -10736,70 +11177,53 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                           $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" }) })
-                              ]
-                            }
-                          )
+                          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $justifyContent: "space-between", $flex: "1", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)("g", { children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                      "rect",
+                                      {
+                                        stroke: "#DDD",
+                                        fill: "#FFF",
+                                        x: ".25",
+                                        y: ".25",
+                                        width: "23",
+                                        height: "15.5",
+                                        rx: "2"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                          ] })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                           StyledButton,
                           {
                             $size: "sm",
-                            $color: "secondary",
+                            $color: "primary",
                             $variant: "outline",
                             style: {
                               whiteSpace: "nowrap",
@@ -10809,11 +11233,11 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
                             children: "Make Default"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                           StyledButton,
                           {
                             $size: "sm",
-                            $color: "secondary",
+                            $color: "primary",
                             $variant: "outline",
                             style: {
                               whiteSpace: "nowrap",
@@ -10838,8 +11262,8 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
 });
 
 // src/components/elements/invoices/Invoices.tsx
-var import_react12 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function resolveDesignProps6(props) {
   return {
     header: {
@@ -10864,10 +11288,10 @@ function resolveDesignProps6(props) {
     }
   };
 }
-var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
+var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps6(rest);
   const { settings } = useEmbed();
-  const { invoices } = (0, import_react12.useMemo)(() => {
+  const { invoices } = (0, import_react15.useMemo)(() => {
     return {
       invoices: [
         {
@@ -10881,8 +11305,8 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
       ]
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       Text,
       {
         $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10892,12 +11316,12 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
         children: "Invoices"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
       0,
       props.limit.isVisible && props.limit.number || invoices.length
     ).map(({ date, amount }, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $justifyContent: "space-between", children: [
+        props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           Text,
           {
             $font: settings.theme.typography[props.date.fontStyle].fontFamily,
@@ -10907,7 +11331,7 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
             children: toPrettyDate(date)
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           Text,
           {
             $font: settings.theme.typography[props.amount.fontStyle].fontFamily,
@@ -10922,9 +11346,9 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
         )
       ] }, index);
     }) }),
-    props.collapse.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    props.collapse.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Text,
         {
           $font: settings.theme.typography[props.collapse.fontStyle].fontFamily,
@@ -10939,22 +11363,22 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
 });
 
 // src/components/embed/ComponentTree.tsx
-var import_react18 = require("react");
+var import_react21 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react17 = require("react");
+var import_react20 = require("react");
 
 // src/components/layout/root/Root.tsx
-var import_react13 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Root = (0, import_react13.forwardRef)(
+var import_react16 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Root = (0, import_react16.forwardRef)(
   (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref, ...props });
   }
 );
 
 // src/components/layout/viewport/Viewport.tsx
-var import_react14 = require("react");
+var import_react17 = require("react");
 
 // src/components/layout/viewport/styles.ts
 var StyledViewport = dt.div`
@@ -10965,27 +11389,63 @@ var StyledViewport = dt.div`
 `;
 
 // src/components/layout/viewport/Viewport.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Viewport = (0, import_react14.forwardRef)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Viewport = (0, import_react17.forwardRef)(
   ({ children, ...props }, ref) => {
     const { settings, layout } = useEmbed();
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       StyledViewport,
       {
         ref,
         $numberOfColumns: settings.theme.numberOfColumns,
         ...props,
-        children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "", children: "DISABLED" }) : children
+        children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Box, { $width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          Flex,
+          {
+            $flexDirection: "column",
+            $padding: `${settings.theme.card.padding / 16}rem`,
+            $width: "100%",
+            $height: "auto",
+            $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
+            $backgroundColor: settings.theme.card.background,
+            $alignItems: "center",
+            $justifyContent: "center",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                Box,
+                {
+                  $marginBottom: "8px",
+                  $fontSize: `${settings.theme.typography.heading1.fontSize / 16}rem`,
+                  $fontFamily: settings.theme.typography.heading1.fontFamily,
+                  $fontWeight: settings.theme.typography.heading1.fontWeight,
+                  $color: settings.theme.typography.heading1.color,
+                  children: "Coming soon"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                Box,
+                {
+                  $marginBottom: "8px",
+                  $fontSize: `${settings.theme.typography.text.fontSize / 16}rem`,
+                  $fontFamily: settings.theme.typography.text.fontFamily,
+                  $fontWeight: settings.theme.typography.text.fontWeight,
+                  $color: settings.theme.typography.text.color,
+                  children: "The plan manager will be back very soon."
+                }
+              )
+            ]
+          }
+        ) }) : children
       }
     );
   }
 );
 
 // src/components/layout/column/Column.tsx
-var import_react16 = require("react");
+var import_react19 = require("react");
 
 // src/components/layout/card/Card.tsx
-var import_react15 = require("react");
+var import_react18 = require("react");
 
 // src/components/layout/card/styles.ts
 var StyledCard = dt.div(
@@ -11014,7 +11474,7 @@ var StyledCard = dt.div(
 
       ${() => {
       const { l: l2 } = hexToHSL(theme.card.background);
-      const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
+      const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 20);
       const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
       const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
       if ($sectionLayout === "merged") {
@@ -11046,11 +11506,11 @@ var StyledCard = dt.div(
 );
 
 // src/components/layout/card/Card.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Card = (0, import_react15.forwardRef)(
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Card = (0, import_react18.forwardRef)(
   ({ children, className }, ref) => {
     const { settings } = useEmbed();
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       StyledCard,
       {
         ref,
@@ -11072,10 +11532,10 @@ var StyledColumn = dt.div`
 `;
 
 // src/components/layout/column/Column.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Column = (0, import_react16.forwardRef)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Column = (0, import_react19.forwardRef)(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Card, { children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Card, { children }) });
   }
 );
 
@@ -11108,7 +11568,7 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react17.createElement)(
+    return (0, import_react20.createElement)(
       component,
       {
         className,
@@ -11121,31 +11581,101 @@ function createRenderer(options) {
   };
 }
 
+// src/components/ui/loader/styles.ts
+var spin = mt`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+var Loader = dt.div(() => {
+  const { settings } = useEmbed();
+  return lt`
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-top: 4px solid ${settings.theme.primary};
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: ${spin} 1.5s linear infinite;
+    display: inline-block;
+  `;
+});
+
 // src/components/embed/ComponentTree.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ComponentTree = () => {
-  const [children, setChildren] = (0, import_react18.useState)("Loading");
-  const { error, nodes } = useEmbed();
-  (0, import_react18.useEffect)(() => {
+  const { error, nodes, settings } = useEmbed();
+  const [children, setChildren] = (0, import_react21.useState)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      Flex,
+      {
+        $width: "100%",
+        $height: "100%",
+        $alignItems: "center",
+        $justifyContent: "center",
+        $padding: `${settings.theme.card.padding / 16}rem`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader, {})
+      }
+    )
+  );
+  (0, import_react21.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      Flex,
+      {
+        $flexDirection: "column",
+        $padding: `${settings.theme.card.padding / 16}rem`,
+        $width: "100%",
+        $height: "auto",
+        $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
+        $backgroundColor: settings.theme.card.background,
+        $alignItems: "center",
+        $justifyContent: "center",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            Box,
+            {
+              $marginBottom: "8px",
+              $fontSize: `${settings.theme.typography.heading1.fontSize / 16}rem`,
+              $fontFamily: settings.theme.typography.heading1.fontFamily,
+              $fontWeight: settings.theme.typography.heading1.fontWeight,
+              $color: settings.theme.typography.heading1.color,
+              children: "404 Error"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            Box,
+            {
+              $marginBottom: "8px",
+              $fontSize: `${settings.theme.typography.text.fontSize / 16}rem`,
+              $fontFamily: settings.theme.typography.text.fontFamily,
+              $fontWeight: settings.theme.typography.text.fontWeight,
+              $color: settings.theme.typography.text.color,
+              children: error.message
+            }
+          )
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children });
 };
 
 // src/components/embed/Embed.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ComponentTree, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentTree, {}) });
 };
 /*! Bundled license information: