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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1686,12 +1686,12 @@ var flush_block_only = (s2, last) => {
1686
1686
  s2.block_start = s2.strstart;
1687
1687
  flush_pending(s2.strm);
1688
1688
  };
1689
- var put_byte = (s2, b) => {
1690
- s2.pending_buf[s2.pending++] = b;
1689
+ var put_byte = (s2, b2) => {
1690
+ s2.pending_buf[s2.pending++] = b2;
1691
1691
  };
1692
- var putShortMSB = (s2, b) => {
1693
- s2.pending_buf[s2.pending++] = b >>> 8 & 255;
1694
- s2.pending_buf[s2.pending++] = b & 255;
1692
+ var putShortMSB = (s2, b2) => {
1693
+ s2.pending_buf[s2.pending++] = b2 >>> 8 & 255;
1694
+ s2.pending_buf[s2.pending++] = b2 & 255;
1695
1695
  };
1696
1696
  var read_buf = (strm, buf, start, size) => {
1697
1697
  let len = strm.avail_in;
@@ -2973,10 +2973,8 @@ Deflate$1.prototype.push = function(data, flush_mode) {
2973
2973
  if (this.ended) {
2974
2974
  return false;
2975
2975
  }
2976
- if (flush_mode === ~~flush_mode)
2977
- _flush_mode = flush_mode;
2978
- else
2979
- _flush_mode = flush_mode === true ? Z_FINISH$2 : Z_NO_FLUSH$1;
2976
+ if (flush_mode === ~~flush_mode) _flush_mode = flush_mode;
2977
+ else _flush_mode = flush_mode === true ? Z_FINISH$2 : Z_NO_FLUSH$1;
2980
2978
  if (typeof data === "string") {
2981
2979
  strm.input = strings.string2buf(data);
2982
2980
  } else if (toString$1.call(data) === "[object ArrayBuffer]") {
@@ -3016,8 +3014,7 @@ Deflate$1.prototype.push = function(data, flush_mode) {
3016
3014
  strm.avail_out = 0;
3017
3015
  continue;
3018
3016
  }
3019
- if (strm.avail_in === 0)
3020
- break;
3017
+ if (strm.avail_in === 0) break;
3021
3018
  }
3022
3019
  return true;
3023
3020
  };
@@ -3971,6 +3968,7 @@ var inflate$2 = (strm, flush) => {
3971
3968
  hold = 0;
3972
3969
  bits = 0;
3973
3970
  state.mode = TIME;
3971
+ /* falls through */
3974
3972
  case TIME:
3975
3973
  while (bits < 32) {
3976
3974
  if (have === 0) {
@@ -3993,6 +3991,7 @@ var inflate$2 = (strm, flush) => {
3993
3991
  hold = 0;
3994
3992
  bits = 0;
3995
3993
  state.mode = OS;
3994
+ /* falls through */
3996
3995
  case OS:
3997
3996
  while (bits < 16) {
3998
3997
  if (have === 0) {
@@ -4014,6 +4013,7 @@ var inflate$2 = (strm, flush) => {
4014
4013
  hold = 0;
4015
4014
  bits = 0;
4016
4015
  state.mode = EXLEN;
4016
+ /* falls through */
4017
4017
  case EXLEN:
4018
4018
  if (state.flags & 1024) {
4019
4019
  while (bits < 16) {
@@ -4039,6 +4039,7 @@ var inflate$2 = (strm, flush) => {
4039
4039
  state.head.extra = null;
4040
4040
  }
4041
4041
  state.mode = EXTRA;
4042
+ /* falls through */
4042
4043
  case EXTRA:
4043
4044
  if (state.flags & 1024) {
4044
4045
  copy2 = state.length;
@@ -4075,6 +4076,7 @@ var inflate$2 = (strm, flush) => {
4075
4076
  }
4076
4077
  state.length = 0;
4077
4078
  state.mode = NAME;
4079
+ /* falls through */
4078
4080
  case NAME:
4079
4081
  if (state.flags & 2048) {
4080
4082
  if (have === 0) {
@@ -4100,6 +4102,7 @@ var inflate$2 = (strm, flush) => {
4100
4102
  }
4101
4103
  state.length = 0;
4102
4104
  state.mode = COMMENT;
4105
+ /* falls through */
4103
4106
  case COMMENT:
4104
4107
  if (state.flags & 4096) {
4105
4108
  if (have === 0) {
@@ -4124,6 +4127,7 @@ var inflate$2 = (strm, flush) => {
4124
4127
  state.head.comment = null;
4125
4128
  }
4126
4129
  state.mode = HCRC;
4130
+ /* falls through */
4127
4131
  case HCRC:
4128
4132
  if (state.flags & 512) {
4129
4133
  while (bits < 16) {
@@ -4162,6 +4166,7 @@ var inflate$2 = (strm, flush) => {
4162
4166
  hold = 0;
4163
4167
  bits = 0;
4164
4168
  state.mode = DICT;
4169
+ /* falls through */
4165
4170
  case DICT:
4166
4171
  if (state.havedict === 0) {
4167
4172
  strm.next_out = put;
@@ -4174,10 +4179,12 @@ var inflate$2 = (strm, flush) => {
4174
4179
  }
4175
4180
  strm.adler = state.check = 1;
4176
4181
  state.mode = TYPE;
4182
+ /* falls through */
4177
4183
  case TYPE:
4178
4184
  if (flush === Z_BLOCK || flush === Z_TREES) {
4179
4185
  break inf_leave;
4180
4186
  }
4187
+ /* falls through */
4181
4188
  case TYPEDO:
4182
4189
  if (state.last) {
4183
4190
  hold >>>= bits & 7;
@@ -4242,8 +4249,10 @@ var inflate$2 = (strm, flush) => {
4242
4249
  if (flush === Z_TREES) {
4243
4250
  break inf_leave;
4244
4251
  }
4252
+ /* falls through */
4245
4253
  case COPY_:
4246
4254
  state.mode = COPY;
4255
+ /* falls through */
4247
4256
  case COPY:
4248
4257
  copy2 = state.length;
4249
4258
  if (copy2) {
@@ -4291,6 +4300,7 @@ var inflate$2 = (strm, flush) => {
4291
4300
  }
4292
4301
  state.have = 0;
4293
4302
  state.mode = LENLENS;
4303
+ /* falls through */
4294
4304
  case LENLENS:
4295
4305
  while (state.have < state.ncode) {
4296
4306
  while (bits < 3) {
@@ -4320,6 +4330,7 @@ var inflate$2 = (strm, flush) => {
4320
4330
  }
4321
4331
  state.have = 0;
4322
4332
  state.mode = CODELENS;
4333
+ /* falls through */
4323
4334
  case CODELENS:
4324
4335
  while (state.have < state.nlen + state.ndist) {
4325
4336
  for (; ; ) {
@@ -4437,8 +4448,10 @@ var inflate$2 = (strm, flush) => {
4437
4448
  if (flush === Z_TREES) {
4438
4449
  break inf_leave;
4439
4450
  }
4451
+ /* falls through */
4440
4452
  case LEN_:
4441
4453
  state.mode = LEN;
4454
+ /* falls through */
4442
4455
  case LEN:
4443
4456
  if (have >= 6 && left >= 258) {
4444
4457
  strm.next_out = put;
@@ -4520,6 +4533,7 @@ var inflate$2 = (strm, flush) => {
4520
4533
  }
4521
4534
  state.extra = here_op & 15;
4522
4535
  state.mode = LENEXT;
4536
+ /* falls through */
4523
4537
  case LENEXT:
4524
4538
  if (state.extra) {
4525
4539
  n = state.extra;
@@ -4538,6 +4552,7 @@ var inflate$2 = (strm, flush) => {
4538
4552
  }
4539
4553
  state.was = state.length;
4540
4554
  state.mode = DIST;
4555
+ /* falls through */
4541
4556
  case DIST:
4542
4557
  for (; ; ) {
4543
4558
  here = state.distcode[hold & (1 << state.distbits) - 1];
@@ -4588,6 +4603,7 @@ var inflate$2 = (strm, flush) => {
4588
4603
  state.offset = here_val;
4589
4604
  state.extra = here_op & 15;
4590
4605
  state.mode = DISTEXT;
4606
+ /* falls through */
4591
4607
  case DISTEXT:
4592
4608
  if (state.extra) {
4593
4609
  n = state.extra;
@@ -4610,6 +4626,7 @@ var inflate$2 = (strm, flush) => {
4610
4626
  break;
4611
4627
  }
4612
4628
  state.mode = MATCH;
4629
+ /* falls through */
4613
4630
  case MATCH:
4614
4631
  if (left === 0) {
4615
4632
  break inf_leave;
@@ -4686,6 +4703,7 @@ var inflate$2 = (strm, flush) => {
4686
4703
  bits = 0;
4687
4704
  }
4688
4705
  state.mode = LENGTH;
4706
+ /* falls through */
4689
4707
  case LENGTH:
4690
4708
  if (state.wrap && state.flags) {
4691
4709
  while (bits < 32) {
@@ -4705,6 +4723,7 @@ var inflate$2 = (strm, flush) => {
4705
4723
  bits = 0;
4706
4724
  }
4707
4725
  state.mode = DONE;
4726
+ /* falls through */
4708
4727
  case DONE:
4709
4728
  ret = Z_STREAM_END$1;
4710
4729
  break inf_leave;
@@ -4714,6 +4733,7 @@ var inflate$2 = (strm, flush) => {
4714
4733
  case MEM:
4715
4734
  return Z_MEM_ERROR$1;
4716
4735
  case SYNC:
4736
+ /* falls through */
4717
4737
  default:
4718
4738
  return Z_STREAM_ERROR$1;
4719
4739
  }
@@ -4725,8 +4745,7 @@ var inflate$2 = (strm, flush) => {
4725
4745
  state.hold = hold;
4726
4746
  state.bits = bits;
4727
4747
  if (state.wsize || _out !== strm.avail_out && state.mode < BAD && (state.mode < CHECK || flush !== Z_FINISH$1)) {
4728
- if (updatewindow(strm, strm.output, strm.next_out, _out - strm.avail_out))
4729
- ;
4748
+ if (updatewindow(strm, strm.output, strm.next_out, _out - strm.avail_out)) ;
4730
4749
  }
4731
4750
  _in -= strm.avail_in;
4732
4751
  _out -= strm.avail_out;
@@ -4894,12 +4913,9 @@ Inflate$1.prototype.push = function(data, flush_mode) {
4894
4913
  const chunkSize = this.options.chunkSize;
4895
4914
  const dictionary = this.options.dictionary;
4896
4915
  let status, _flush_mode, last_avail_out;
4897
- if (this.ended)
4898
- return false;
4899
- if (flush_mode === ~~flush_mode)
4900
- _flush_mode = flush_mode;
4901
- else
4902
- _flush_mode = flush_mode === true ? Z_FINISH : Z_NO_FLUSH;
4916
+ if (this.ended) return false;
4917
+ if (flush_mode === ~~flush_mode) _flush_mode = flush_mode;
4918
+ else _flush_mode = flush_mode === true ? Z_FINISH : Z_NO_FLUSH;
4903
4919
  if (toString.call(data) === "[object ArrayBuffer]") {
4904
4920
  strm.input = new Uint8Array(data);
4905
4921
  } else {
@@ -4944,24 +4960,21 @@ Inflate$1.prototype.push = function(data, flush_mode) {
4944
4960
  let utf8str = strings.buf2string(strm.output, next_out_utf8);
4945
4961
  strm.next_out = tail;
4946
4962
  strm.avail_out = chunkSize - tail;
4947
- if (tail)
4948
- strm.output.set(strm.output.subarray(next_out_utf8, next_out_utf8 + tail), 0);
4963
+ if (tail) strm.output.set(strm.output.subarray(next_out_utf8, next_out_utf8 + tail), 0);
4949
4964
  this.onData(utf8str);
4950
4965
  } else {
4951
4966
  this.onData(strm.output.length === strm.next_out ? strm.output : strm.output.subarray(0, strm.next_out));
4952
4967
  }
4953
4968
  }
4954
4969
  }
4955
- if (status === Z_OK && last_avail_out === 0)
4956
- continue;
4970
+ if (status === Z_OK && last_avail_out === 0) continue;
4957
4971
  if (status === Z_STREAM_END) {
4958
4972
  status = inflate_1$2.inflateEnd(this.strm);
4959
4973
  this.onEnd(status);
4960
4974
  this.ended = true;
4961
4975
  return true;
4962
4976
  }
4963
- if (strm.avail_in === 0)
4964
- break;
4977
+ if (strm.avail_in === 0) break;
4965
4978
  }
4966
4979
  return true;
4967
4980
  };
@@ -4983,8 +4996,7 @@ Inflate$1.prototype.onEnd = function(status) {
4983
4996
  function inflate$1(input, options) {
4984
4997
  const inflator = new Inflate$1(options);
4985
4998
  inflator.push(input);
4986
- if (inflator.err)
4987
- throw inflator.msg || messages[inflator.err];
4999
+ if (inflator.err) throw inflator.msg || messages[inflator.err];
4988
5000
  return inflator.result;
4989
5001
  }
4990
5002
  function inflateRaw$1(input, options) {
@@ -5013,23 +5025,19 @@ var __assign = function() {
5013
5025
  __assign = Object.assign || function __assign2(t) {
5014
5026
  for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
5015
5027
  s2 = arguments[i2];
5016
- for (var p2 in s2)
5017
- if (Object.prototype.hasOwnProperty.call(s2, p2))
5018
- t[p2] = s2[p2];
5028
+ for (var p2 in s2) if (Object.prototype.hasOwnProperty.call(s2, p2)) t[p2] = s2[p2];
5019
5029
  }
5020
5030
  return t;
5021
5031
  };
5022
5032
  return __assign.apply(this, arguments);
5023
5033
  };
5024
5034
  function __spreadArray(to, from2, pack) {
5025
- if (pack || arguments.length === 2)
5026
- for (var i2 = 0, l2 = from2.length, ar; i2 < l2; i2++) {
5027
- if (ar || !(i2 in from2)) {
5028
- if (!ar)
5029
- ar = Array.prototype.slice.call(from2, 0, i2);
5030
- ar[i2] = from2[i2];
5031
- }
5035
+ if (pack || arguments.length === 2) for (var i2 = 0, l2 = from2.length, ar; i2 < l2; i2++) {
5036
+ if (ar || !(i2 in from2)) {
5037
+ if (!ar) ar = Array.prototype.slice.call(from2, 0, i2);
5038
+ ar[i2] = from2[i2];
5032
5039
  }
5040
+ }
5033
5041
  return to.concat(ar || Array.prototype.slice.call(from2));
5034
5042
  }
5035
5043
 
@@ -5037,8 +5045,7 @@ function __spreadArray(to, from2, pack) {
5037
5045
  function memoize(fn) {
5038
5046
  var cache = /* @__PURE__ */ Object.create(null);
5039
5047
  return function(arg) {
5040
- if (cache[arg] === void 0)
5041
- cache[arg] = fn(arg);
5048
+ if (cache[arg] === void 0) cache[arg] = fn(arg);
5042
5049
  return cache[arg];
5043
5050
  };
5044
5051
  }
@@ -5154,12 +5161,14 @@ function slice(begin, end) {
5154
5161
  }
5155
5162
  function token(type) {
5156
5163
  switch (type) {
5164
+ // \0 \t \n \r \s whitespace token
5157
5165
  case 0:
5158
5166
  case 9:
5159
5167
  case 10:
5160
5168
  case 13:
5161
5169
  case 32:
5162
5170
  return 5;
5171
+ // ! + , / > @ ~ isolate token
5163
5172
  case 33:
5164
5173
  case 43:
5165
5174
  case 44:
@@ -5167,17 +5176,21 @@ function token(type) {
5167
5176
  case 62:
5168
5177
  case 64:
5169
5178
  case 126:
5179
+ // ; { } breakpoint token
5170
5180
  case 59:
5171
5181
  case 123:
5172
5182
  case 125:
5173
5183
  return 4;
5184
+ // : accompanied token
5174
5185
  case 58:
5175
5186
  return 3;
5187
+ // " ' ( [ opening delimit token
5176
5188
  case 34:
5177
5189
  case 39:
5178
5190
  case 40:
5179
5191
  case 91:
5180
5192
  return 2;
5193
+ // ) ] closing delimit token
5181
5194
  case 41:
5182
5195
  case 93:
5183
5196
  return 1;
@@ -5210,17 +5223,21 @@ function escaping(index, count) {
5210
5223
  function delimiter(type) {
5211
5224
  while (next())
5212
5225
  switch (character) {
5226
+ // ] ) " '
5213
5227
  case type:
5214
5228
  return position;
5229
+ // " '
5215
5230
  case 34:
5216
5231
  case 39:
5217
5232
  if (type !== 34 && type !== 39)
5218
5233
  delimiter(character);
5219
5234
  break;
5235
+ // (
5220
5236
  case 40:
5221
5237
  if (type === 41)
5222
5238
  delimiter(type);
5223
5239
  break;
5240
+ // \
5224
5241
  case 92:
5225
5242
  next();
5226
5243
  break;
@@ -5263,26 +5280,31 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
5263
5280
  var characters2 = type;
5264
5281
  while (scanning)
5265
5282
  switch (previous = character2, character2 = next()) {
5283
+ // (
5266
5284
  case 40:
5267
5285
  if (previous != 108 && charat(characters2, length2 - 1) == 58) {
5268
5286
  if (indexof(characters2 += replace(delimit(character2), "&", "&\f"), "&\f", abs(index ? points[index - 1] : 0)) != -1)
5269
5287
  ampersand = -1;
5270
5288
  break;
5271
5289
  }
5290
+ // " ' [
5272
5291
  case 34:
5273
5292
  case 39:
5274
5293
  case 91:
5275
5294
  characters2 += delimit(character2);
5276
5295
  break;
5296
+ // \t \n \r \s
5277
5297
  case 9:
5278
5298
  case 10:
5279
5299
  case 13:
5280
5300
  case 32:
5281
5301
  characters2 += whitespace(previous);
5282
5302
  break;
5303
+ // \
5283
5304
  case 92:
5284
5305
  characters2 += escaping(caret() - 1, 7);
5285
5306
  continue;
5307
+ // /
5286
5308
  case 47:
5287
5309
  switch (peek()) {
5288
5310
  case 42:
@@ -5293,23 +5315,28 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
5293
5315
  characters2 += "/";
5294
5316
  }
5295
5317
  break;
5318
+ // {
5296
5319
  case 123 * variable:
5297
5320
  points[index++] = strlen(characters2) * ampersand;
5321
+ // } ; \0
5298
5322
  case 125 * variable:
5299
5323
  case 59:
5300
5324
  case 0:
5301
5325
  switch (character2) {
5326
+ // \0 }
5302
5327
  case 0:
5303
5328
  case 125:
5304
5329
  scanning = 0;
5330
+ // ;
5305
5331
  case 59 + offset:
5306
- if (ampersand == -1)
5307
- characters2 = replace(characters2, /\f/g, "");
5332
+ if (ampersand == -1) characters2 = replace(characters2, /\f/g, "");
5308
5333
  if (property > 0 && strlen(characters2) - length2)
5309
5334
  append(property > 32 ? declaration(characters2 + ";", rule, parent, length2 - 1, declarations) : declaration(replace(characters2, " ", "") + ";", rule, parent, length2 - 2, declarations), declarations);
5310
5335
  break;
5336
+ // @ ;
5311
5337
  case 59:
5312
5338
  characters2 += ";";
5339
+ // { rule/at-rule
5313
5340
  default:
5314
5341
  append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props = [], children = [], length2, rulesets), rulesets);
5315
5342
  if (character2 === 123)
@@ -5317,6 +5344,7 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
5317
5344
  parse(characters2, root, reference, reference, props, rulesets, length2, points, children);
5318
5345
  else
5319
5346
  switch (atrule === 99 && charat(characters2, 3) === 110 ? 100 : atrule) {
5347
+ // d l m s
5320
5348
  case 100:
5321
5349
  case 108:
5322
5350
  case 109:
@@ -5329,6 +5357,7 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
5329
5357
  }
5330
5358
  index = offset = property = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo;
5331
5359
  break;
5360
+ // :
5332
5361
  case 58:
5333
5362
  length2 = 1 + strlen(characters2), property = previous;
5334
5363
  default:
@@ -5339,17 +5368,21 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
5339
5368
  continue;
5340
5369
  }
5341
5370
  switch (characters2 += from(character2), character2 * variable) {
5371
+ // &
5342
5372
  case 38:
5343
5373
  ampersand = offset > 0 ? 1 : (characters2 += "\f", -1);
5344
5374
  break;
5375
+ // ,
5345
5376
  case 44:
5346
5377
  points[index++] = (strlen(characters2) - 1) * ampersand, ampersand = 1;
5347
5378
  break;
5379
+ // @
5348
5380
  case 64:
5349
5381
  if (peek() === 45)
5350
5382
  characters2 += delimit(next());
5351
5383
  atrule = peek(), offset = length2 = strlen(type = characters2 += identifier(caret())), character2++;
5352
5384
  break;
5385
+ // -
5353
5386
  case 45:
5354
5387
  if (previous === 45 && strlen(characters2) == 2)
5355
5388
  variable = 0;
@@ -5377,8 +5410,10 @@ function declaration(value, root, parent, length2, siblings) {
5377
5410
  // node_modules/stylis/src/Prefixer.js
5378
5411
  function prefix(value, length2, children) {
5379
5412
  switch (hash(value, length2)) {
5413
+ // color-adjust
5380
5414
  case 5103:
5381
5415
  return WEBKIT + "print-" + value + value;
5416
+ // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
5382
5417
  case 5737:
5383
5418
  case 4201:
5384
5419
  case 3177:
@@ -5386,18 +5421,21 @@ function prefix(value, length2, children) {
5386
5421
  case 1641:
5387
5422
  case 4457:
5388
5423
  case 2921:
5424
+ // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
5389
5425
  case 5572:
5390
5426
  case 6356:
5391
5427
  case 5844:
5392
5428
  case 3191:
5393
5429
  case 6645:
5394
5430
  case 3005:
5431
+ // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
5395
5432
  case 6391:
5396
5433
  case 5879:
5397
5434
  case 5623:
5398
5435
  case 6135:
5399
5436
  case 4599:
5400
5437
  case 4855:
5438
+ // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
5401
5439
  case 4215:
5402
5440
  case 6389:
5403
5441
  case 5109:
@@ -5405,57 +5443,77 @@ function prefix(value, length2, children) {
5405
5443
  case 5621:
5406
5444
  case 3829:
5407
5445
  return WEBKIT + value + value;
5446
+ // tab-size
5408
5447
  case 4789:
5409
5448
  return MOZ + value + value;
5449
+ // appearance, user-select, transform, hyphens, text-size-adjust
5410
5450
  case 5349:
5411
5451
  case 4246:
5412
5452
  case 4810:
5413
5453
  case 6968:
5414
5454
  case 2756:
5415
5455
  return WEBKIT + value + MOZ + value + MS + value + value;
5456
+ // writing-mode
5416
5457
  case 5936:
5417
5458
  switch (charat(value, length2 + 11)) {
5459
+ // vertical-l(r)
5418
5460
  case 114:
5419
5461
  return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb") + value;
5462
+ // vertical-r(l)
5420
5463
  case 108:
5421
5464
  return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb-rl") + value;
5465
+ // horizontal(-)tb
5422
5466
  case 45:
5423
5467
  return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "lr") + value;
5424
5468
  }
5469
+ // flex, flex-direction, scroll-snap-type, writing-mode
5425
5470
  case 6828:
5426
5471
  case 4268:
5427
5472
  case 2903:
5428
5473
  return WEBKIT + value + MS + value + value;
5474
+ // order
5429
5475
  case 6165:
5430
5476
  return WEBKIT + value + MS + "flex-" + value + value;
5477
+ // align-items
5431
5478
  case 5187:
5432
5479
  return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + "box-$1$2" + MS + "flex-$1$2") + value;
5480
+ // align-self
5433
5481
  case 5443:
5434
5482
  return WEBKIT + value + MS + "flex-item-" + replace(value, /flex-|-self/g, "") + (!match(value, /flex-|baseline/) ? MS + "grid-row-" + replace(value, /flex-|-self/g, "") : "") + value;
5483
+ // align-content
5435
5484
  case 4675:
5436
5485
  return WEBKIT + value + MS + "flex-line-pack" + replace(value, /align-content|flex-|-self/g, "") + value;
5486
+ // flex-shrink
5437
5487
  case 5548:
5438
5488
  return WEBKIT + value + MS + replace(value, "shrink", "negative") + value;
5489
+ // flex-basis
5439
5490
  case 5292:
5440
5491
  return WEBKIT + value + MS + replace(value, "basis", "preferred-size") + value;
5492
+ // flex-grow
5441
5493
  case 6060:
5442
5494
  return WEBKIT + "box-" + replace(value, "-grow", "") + WEBKIT + value + MS + replace(value, "grow", "positive") + value;
5495
+ // transition
5443
5496
  case 4554:
5444
5497
  return WEBKIT + replace(value, /([^-])(transform)/g, "$1" + WEBKIT + "$2") + value;
5498
+ // cursor
5445
5499
  case 6187:
5446
5500
  return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + "$1"), /(image-set)/, WEBKIT + "$1"), value, "") + value;
5501
+ // background, background-image
5447
5502
  case 5495:
5448
5503
  case 3959:
5449
5504
  return replace(value, /(image-set\([^]*)/, WEBKIT + "$1$`$1");
5505
+ // justify-content
5450
5506
  case 4968:
5451
5507
  return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + "box-pack:$3" + MS + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + WEBKIT + value + value;
5508
+ // justify-self
5452
5509
  case 4200:
5453
- if (!match(value, /flex-|baseline/))
5454
- return MS + "grid-column-align" + substr(value, length2) + value;
5510
+ if (!match(value, /flex-|baseline/)) return MS + "grid-column-align" + substr(value, length2) + value;
5455
5511
  break;
5512
+ // grid-template-(columns|rows)
5456
5513
  case 2592:
5457
5514
  case 3360:
5458
5515
  return MS + replace(value, "template-", "") + value;
5516
+ // grid-(row|column)-start
5459
5517
  case 4384:
5460
5518
  case 3616:
5461
5519
  if (children && children.some(function(element, index) {
@@ -5464,16 +5522,19 @@ function prefix(value, length2, children) {
5464
5522
  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+/)) + ";";
5465
5523
  }
5466
5524
  return MS + replace(value, "-start", "") + value;
5525
+ // grid-(row|column)-end
5467
5526
  case 4896:
5468
5527
  case 4128:
5469
5528
  return children && children.some(function(element) {
5470
5529
  return match(element.props, /grid-\w+-start/);
5471
5530
  }) ? value : MS + replace(replace(value, "-end", "-span"), "span ", "") + value;
5531
+ // (margin|padding)-inline-(start|end)
5472
5532
  case 4095:
5473
5533
  case 3583:
5474
5534
  case 4068:
5475
5535
  case 2532:
5476
5536
  return replace(value, /(.+)-inline(.+)/, WEBKIT + "$1$2") + value;
5537
+ // (min|max)?(width|height|inline-size|block-size)
5477
5538
  case 8116:
5478
5539
  case 7059:
5479
5540
  case 5753:
@@ -5488,32 +5549,41 @@ function prefix(value, length2, children) {
5488
5549
  case 4765:
5489
5550
  if (strlen(value) - 1 - length2 > 6)
5490
5551
  switch (charat(value, length2 + 1)) {
5552
+ // (m)ax-content, (m)in-content
5491
5553
  case 109:
5492
5554
  if (charat(value, length2 + 4) !== 45)
5493
5555
  break;
5556
+ // (f)ill-available, (f)it-content
5494
5557
  case 102:
5495
5558
  return replace(value, /(.+:)(.+)-([^]+)/, "$1" + WEBKIT + "$2-$3$1" + MOZ + (charat(value, length2 + 3) == 108 ? "$3" : "$2-$3")) + value;
5559
+ // (s)tretch
5496
5560
  case 115:
5497
5561
  return ~indexof(value, "stretch", 0) ? prefix(replace(value, "stretch", "fill-available"), length2, children) + value : value;
5498
5562
  }
5499
5563
  break;
5564
+ // grid-(column|row)
5500
5565
  case 5152:
5501
5566
  case 5920:
5502
- return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function(_2, a2, b, c2, d, e, f2) {
5503
- return MS + a2 + ":" + b + f2 + (c2 ? MS + a2 + "-span:" + (d ? e : +e - +b) + f2 : "") + value;
5567
+ return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function(_2, a2, b2, c2, d, e, f2) {
5568
+ return MS + a2 + ":" + b2 + f2 + (c2 ? MS + a2 + "-span:" + (d ? e : +e - +b2) + f2 : "") + value;
5504
5569
  });
5570
+ // position: sticky
5505
5571
  case 4949:
5506
5572
  if (charat(value, length2 + 6) === 121)
5507
5573
  return replace(value, ":", ":" + WEBKIT) + value;
5508
5574
  break;
5575
+ // display: (flex|inline-flex|grid|inline-grid)
5509
5576
  case 6444:
5510
5577
  switch (charat(value, charat(value, 14) === 45 ? 18 : 11)) {
5578
+ // (inline-)?fle(x)
5511
5579
  case 120:
5512
5580
  return replace(value, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, "$1" + WEBKIT + (charat(value, 14) === 45 ? "inline-" : "") + "box$3$1" + WEBKIT + "$2$3$1" + MS + "$2box$3") + value;
5581
+ // (inline-)?gri(d)
5513
5582
  case 100:
5514
5583
  return replace(value, ":", ":" + MS) + value;
5515
5584
  }
5516
5585
  break;
5586
+ // scroll-margin, scroll-margin-(top|right|bottom|left)
5517
5587
  case 5719:
5518
5588
  case 2647:
5519
5589
  case 2135:
@@ -5534,8 +5604,7 @@ function serialize(children, callback) {
5534
5604
  function stringify(element, index, children, callback) {
5535
5605
  switch (element.type) {
5536
5606
  case LAYER:
5537
- if (element.children.length)
5538
- break;
5607
+ if (element.children.length) break;
5539
5608
  case IMPORT:
5540
5609
  case DECLARATION:
5541
5610
  return element.return = element.return || element.value;
@@ -5544,8 +5613,7 @@ function stringify(element, index, children, callback) {
5544
5613
  case KEYFRAMES:
5545
5614
  return element.return = element.value + "{" + serialize(element.children, callback) + "}";
5546
5615
  case RULESET:
5547
- if (!strlen(element.value = element.props.join(",")))
5548
- return "";
5616
+ if (!strlen(element.value = element.props.join(","))) return "";
5549
5617
  }
5550
5618
  return strlen(children = serialize(element.children, callback)) ? element.return = element.value + "{" + children + "}" : "";
5551
5619
  }
@@ -5581,12 +5649,14 @@ function prefixer(element, index, children, callback) {
5581
5649
  if (element.length)
5582
5650
  return combine(children = element.props, function(value) {
5583
5651
  switch (match(value, callback = /(::plac\w+|:read-\w+)/)) {
5652
+ // :read-(only|write)
5584
5653
  case ":read-only":
5585
5654
  case ":read-write":
5586
5655
  lift(copy(element, { props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")] }));
5587
5656
  lift(copy(element, { props: [value] }));
5588
5657
  assign2(element, { props: filter(children, callback) });
5589
5658
  break;
5659
+ // :placeholder
5590
5660
  case "::placeholder":
5591
5661
  lift(copy(element, { props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")] }));
5592
5662
  lift(copy(element, { props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")] }));
@@ -5660,6 +5730,7 @@ var v = "6.1.13";
5660
5730
  var g = "/*!sc*/\n";
5661
5731
  var S = "undefined" != typeof window && "HTMLElement" in window;
5662
5732
  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);
5733
+ var b = {};
5663
5734
  var E = /invalid hook call/i;
5664
5735
  var N = /* @__PURE__ */ new Set();
5665
5736
  var P = function(t, n) {
@@ -5668,8 +5739,7 @@ var P = function(t, n) {
5668
5739
  try {
5669
5740
  var a2 = true;
5670
5741
  console.error = function(t2) {
5671
- for (var n2 = [], o3 = 1; o3 < arguments.length; o3++)
5672
- n2[o3 - 1] = arguments[o3];
5742
+ for (var n2 = [], o3 = 1; o3 < arguments.length; o3++) n2[o3 - 1] = arguments[o3];
5673
5743
  E.test(t2) ? (a2 = false, N.delete(s2)) : i2.apply(void 0, __spreadArray([t2], n2, false));
5674
5744
  }, r(), a2 && !N.has(s2) && (console.warn(s2), N.add(s2));
5675
5745
  } catch (e) {
@@ -5697,15 +5767,13 @@ var j = function(e) {
5697
5767
  };
5698
5768
  function x(e) {
5699
5769
  var t, n = "";
5700
- for (t = Math.abs(e); t > k; t = t / k | 0)
5701
- n = j(t % k) + n;
5770
+ for (t = Math.abs(e); t > k; t = t / k | 0) n = j(t % k) + n;
5702
5771
  return (j(t % k) + n).replace(T, "$1-$2");
5703
5772
  }
5704
5773
  var V;
5705
5774
  var F = 5381;
5706
5775
  var M = function(e, t) {
5707
- for (var n = t.length; n; )
5708
- e = 33 * e ^ t.charCodeAt(--n);
5776
+ for (var n = t.length; n; ) e = 33 * e ^ t.charCodeAt(--n);
5709
5777
  return e;
5710
5778
  };
5711
5779
  var z = function(e) {
@@ -5768,24 +5836,17 @@ function ie(e, t) {
5768
5836
  return e && t ? "".concat(e, " ").concat(t) : e || t || "";
5769
5837
  }
5770
5838
  function ae(e, t) {
5771
- if (0 === e.length)
5772
- return "";
5773
- for (var n = e[0], o2 = 1; o2 < e.length; o2++)
5774
- n += t ? t + e[o2] : e[o2];
5839
+ if (0 === e.length) return "";
5840
+ for (var n = e[0], o2 = 1; o2 < e.length; o2++) n += t ? t + e[o2] : e[o2];
5775
5841
  return n;
5776
5842
  }
5777
5843
  function ce(e) {
5778
5844
  return null !== e && "object" == typeof e && e.constructor.name === Object.name && !("props" in e && e.$$typeof);
5779
5845
  }
5780
5846
  function le(e, t, n) {
5781
- if (void 0 === n && (n = false), !n && !ce(e) && !Array.isArray(e))
5782
- return t;
5783
- if (Array.isArray(t))
5784
- for (var o2 = 0; o2 < t.length; o2++)
5785
- e[o2] = le(e[o2], t[o2]);
5786
- else if (ce(t))
5787
- for (var o2 in t)
5788
- e[o2] = le(e[o2], t[o2]);
5847
+ if (void 0 === n && (n = false), !n && !ce(e) && !Array.isArray(e)) return t;
5848
+ if (Array.isArray(t)) for (var o2 = 0; o2 < t.length; o2++) e[o2] = le(e[o2], t[o2]);
5849
+ else if (ce(t)) for (var o2 in t) e[o2] = le(e[o2], t[o2]);
5789
5850
  return e;
5790
5851
  }
5791
5852
  function ue(e, t) {
@@ -5793,17 +5854,14 @@ function ue(e, t) {
5793
5854
  }
5794
5855
  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>`" } : {};
5795
5856
  function de() {
5796
- for (var e = [], t = 0; t < arguments.length; t++)
5797
- e[t] = arguments[t];
5798
- for (var n = e[0], o2 = [], r2 = 1, s2 = e.length; r2 < s2; r2 += 1)
5799
- o2.push(e[r2]);
5857
+ for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t];
5858
+ for (var n = e[0], o2 = [], r2 = 1, s2 = e.length; r2 < s2; r2 += 1) o2.push(e[r2]);
5800
5859
  return o2.forEach(function(e2) {
5801
5860
  n = n.replace(/%[a-z]/, e2);
5802
5861
  }), n;
5803
5862
  }
5804
5863
  function he(t) {
5805
- for (var n = [], o2 = 1; o2 < arguments.length; o2++)
5806
- n[o2 - 1] = arguments[o2];
5864
+ for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
5807
5865
  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());
5808
5866
  }
5809
5867
  var fe = function() {
@@ -5811,33 +5869,25 @@ var fe = function() {
5811
5869
  this.groupSizes = new Uint32Array(512), this.length = 512, this.tag = e2;
5812
5870
  }
5813
5871
  return e.prototype.indexOfGroup = function(e2) {
5814
- for (var t = 0, n = 0; n < e2; n++)
5815
- t += this.groupSizes[n];
5872
+ for (var t = 0, n = 0; n < e2; n++) t += this.groupSizes[n];
5816
5873
  return t;
5817
5874
  }, e.prototype.insertRules = function(e2, t) {
5818
5875
  if (e2 >= this.groupSizes.length) {
5819
- for (var n = this.groupSizes, o2 = n.length, r2 = o2; e2 >= r2; )
5820
- if ((r2 <<= 1) < 0)
5821
- throw he(16, "".concat(e2));
5876
+ for (var n = this.groupSizes, o2 = n.length, r2 = o2; e2 >= r2; ) if ((r2 <<= 1) < 0) throw he(16, "".concat(e2));
5822
5877
  this.groupSizes = new Uint32Array(r2), this.groupSizes.set(n), this.length = r2;
5823
- for (var s2 = o2; s2 < r2; s2++)
5824
- this.groupSizes[s2] = 0;
5878
+ for (var s2 = o2; s2 < r2; s2++) this.groupSizes[s2] = 0;
5825
5879
  }
5826
- for (var i2 = this.indexOfGroup(e2 + 1), a2 = (s2 = 0, t.length); s2 < a2; s2++)
5827
- this.tag.insertRule(i2, t[s2]) && (this.groupSizes[e2]++, i2++);
5880
+ 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++);
5828
5881
  }, e.prototype.clearGroup = function(e2) {
5829
5882
  if (e2 < this.length) {
5830
5883
  var t = this.groupSizes[e2], n = this.indexOfGroup(e2), o2 = n + t;
5831
5884
  this.groupSizes[e2] = 0;
5832
- for (var r2 = n; r2 < o2; r2++)
5833
- this.tag.deleteRule(n);
5885
+ for (var r2 = n; r2 < o2; r2++) this.tag.deleteRule(n);
5834
5886
  }
5835
5887
  }, e.prototype.getGroup = function(e2) {
5836
5888
  var t = "";
5837
- if (e2 >= this.length || 0 === this.groupSizes[e2])
5838
- return t;
5839
- for (var n = this.groupSizes[e2], o2 = this.indexOfGroup(e2), r2 = o2 + n, s2 = o2; s2 < r2; s2++)
5840
- t += "".concat(this.tag.getRule(s2)).concat(g);
5889
+ if (e2 >= this.length || 0 === this.groupSizes[e2]) return t;
5890
+ 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);
5841
5891
  return t;
5842
5892
  }, e;
5843
5893
  }();
@@ -5846,13 +5896,10 @@ var ye = /* @__PURE__ */ new Map();
5846
5896
  var ve = /* @__PURE__ */ new Map();
5847
5897
  var ge = 1;
5848
5898
  var Se = function(e) {
5849
- if (ye.has(e))
5850
- return ye.get(e);
5851
- for (; ve.has(ge); )
5852
- ge++;
5899
+ if (ye.has(e)) return ye.get(e);
5900
+ for (; ve.has(ge); ) ge++;
5853
5901
  var t = ge++;
5854
- if ((0 | t) < 0 || t > me)
5855
- throw he(16, "".concat(t));
5902
+ if ((0 | t) < 0 || t > me) throw he(16, "".concat(t));
5856
5903
  return ye.set(e, t), ve.set(t, e), t;
5857
5904
  };
5858
5905
  var we = function(e, t) {
@@ -5861,8 +5908,7 @@ var we = function(e, t) {
5861
5908
  var be = "style[".concat(f, "][").concat(y, '="').concat(v, '"]');
5862
5909
  var Ee = new RegExp("^".concat(f, '\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'));
5863
5910
  var Ne = function(e, t, n) {
5864
- for (var o2, r2 = n.split(","), s2 = 0, i2 = r2.length; s2 < i2; s2++)
5865
- (o2 = r2[s2]) && e.registerName(t, o2);
5911
+ for (var o2, r2 = n.split(","), s2 = 0, i2 = r2.length; s2 < i2; s2++) (o2 = r2[s2]) && e.registerName(t, o2);
5866
5912
  };
5867
5913
  var Pe = function(e, t) {
5868
5914
  for (var n, o2 = (null !== (n = t.textContent) && void 0 !== n ? n : "").split(g), r2 = [], s2 = 0, i2 = o2.length; s2 < i2; s2++) {
@@ -5872,8 +5918,7 @@ var Pe = function(e, t) {
5872
5918
  if (c2) {
5873
5919
  var l2 = 0 | parseInt(c2[1], 10), u2 = c2[2];
5874
5920
  0 !== l2 && (we(u2, l2), Ne(e, u2, c2[3]), e.getTag().insertRules(l2, r2)), r2.length = 0;
5875
- } else
5876
- r2.push(a2);
5921
+ } else r2.push(a2);
5877
5922
  }
5878
5923
  }
5879
5924
  };
@@ -5898,12 +5943,10 @@ var Ie = function(e) {
5898
5943
  var Ae = function() {
5899
5944
  function e(e2) {
5900
5945
  this.element = Ie(e2), this.element.appendChild(document.createTextNode("")), this.sheet = function(e3) {
5901
- if (e3.sheet)
5902
- return e3.sheet;
5946
+ if (e3.sheet) return e3.sheet;
5903
5947
  for (var t = document.styleSheets, n = 0, o2 = t.length; n < o2; n++) {
5904
5948
  var r2 = t[n];
5905
- if (r2.ownerNode === e3)
5906
- return r2;
5949
+ if (r2.ownerNode === e3) return r2;
5907
5950
  }
5908
5951
  throw he(17);
5909
5952
  }(this.element), this.length = 0;
@@ -5961,17 +6004,14 @@ var ke = function() {
5961
6004
  var r4 = function(e4) {
5962
6005
  return ve.get(e4);
5963
6006
  }(n3);
5964
- if (void 0 === r4)
5965
- return "continue";
6007
+ if (void 0 === r4) return "continue";
5966
6008
  var s3 = e3.names.get(r4), i2 = t.getGroup(n3);
5967
- if (void 0 === s3 || !s3.size || 0 === i2.length)
5968
- return "continue";
6009
+ if (void 0 === s3 || !s3.size || 0 === i2.length) return "continue";
5969
6010
  var a2 = "".concat(f, ".g").concat(n3, '[id="').concat(r4, '"]'), c2 = "";
5970
6011
  void 0 !== s3 && s3.forEach(function(e4) {
5971
6012
  e4.length > 0 && (c2 += "".concat(e4, ","));
5972
6013
  }), o3 += "".concat(i2).concat(a2, '{content:"').concat(c2, '"}').concat(g);
5973
- }, s2 = 0; s2 < n2; s2++)
5974
- r3(s2);
6014
+ }, s2 = 0; s2 < n2; s2++) r3(s2);
5975
6015
  return o3;
5976
6016
  }(r2);
5977
6017
  });
@@ -5993,8 +6033,7 @@ var ke = function() {
5993
6033
  }, e.prototype.hasNameForId = function(e2, t) {
5994
6034
  return this.names.has(e2) && this.names.get(e2).has(t);
5995
6035
  }, e.prototype.registerName = function(e2, t) {
5996
- if (Se(e2), this.names.has(e2))
5997
- this.names.get(e2).add(t);
6036
+ if (Se(e2), this.names.has(e2)) this.names.get(e2).add(t);
5998
6037
  else {
5999
6038
  var n = /* @__PURE__ */ new Set();
6000
6039
  n.add(t), this.names.set(e2, n);
@@ -6082,8 +6121,7 @@ var qe = function(e) {
6082
6121
  function He(e) {
6083
6122
  for (var t = "", n = 0; n < e.length; n++) {
6084
6123
  var o2 = e[n];
6085
- if (1 === n && "-" === o2 && "-" === e[0])
6086
- return e;
6124
+ if (1 === n && "-" === o2 && "-" === e[0]) return e;
6087
6125
  qe(o2) ? t += "-" + o2.toLowerCase() : t += o2;
6088
6126
  }
6089
6127
  return t.startsWith("ms-") ? "-" + t : t;
@@ -6100,13 +6138,10 @@ var Je = function(t) {
6100
6138
  return r2;
6101
6139
  };
6102
6140
  function Xe(e, t, n, o2) {
6103
- if (Ue(e))
6104
- return [];
6105
- if (se(e))
6106
- return [".".concat(e.styledComponentId)];
6141
+ if (Ue(e)) return [];
6142
+ if (se(e)) return [".".concat(e.styledComponentId)];
6107
6143
  if (re(e)) {
6108
- if (!re(s2 = e) || s2.prototype && s2.prototype.isReactComponent || !t)
6109
- return [e];
6144
+ if (!re(s2 = e) || s2.prototype && s2.prototype.isReactComponent || !t) return [e];
6110
6145
  var r2 = e(t);
6111
6146
  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);
6112
6147
  }
@@ -6118,8 +6153,7 @@ function Xe(e, t, n, o2) {
6118
6153
  function Ze(e) {
6119
6154
  for (var t = 0; t < e.length; t += 1) {
6120
6155
  var n = e[t];
6121
- if (re(n) && !se(n))
6122
- return false;
6156
+ if (re(n) && !se(n)) return false;
6123
6157
  }
6124
6158
  return true;
6125
6159
  }
@@ -6130,22 +6164,19 @@ var Qe = function() {
6130
6164
  }
6131
6165
  return e.prototype.generateAndInjectStyles = function(e2, t, n) {
6132
6166
  var o2 = this.baseStyle ? this.baseStyle.generateAndInjectStyles(e2, t, n) : "";
6133
- if (this.isStatic && !n.hash)
6134
- if (this.staticRulesId && t.hasNameForId(this.componentId, this.staticRulesId))
6135
- o2 = ie(o2, this.staticRulesId);
6136
- else {
6137
- var r2 = ae(Xe(this.rules, e2, t, n)), s2 = x(M(this.baseHash, r2) >>> 0);
6138
- if (!t.hasNameForId(this.componentId, s2)) {
6139
- var i2 = n(r2, ".".concat(s2), void 0, this.componentId);
6140
- t.insertRules(this.componentId, s2, i2);
6141
- }
6142
- o2 = ie(o2, s2), this.staticRulesId = s2;
6167
+ if (this.isStatic && !n.hash) if (this.staticRulesId && t.hasNameForId(this.componentId, this.staticRulesId)) o2 = ie(o2, this.staticRulesId);
6168
+ else {
6169
+ var r2 = ae(Xe(this.rules, e2, t, n)), s2 = x(M(this.baseHash, r2) >>> 0);
6170
+ if (!t.hasNameForId(this.componentId, s2)) {
6171
+ var i2 = n(r2, ".".concat(s2), void 0, this.componentId);
6172
+ t.insertRules(this.componentId, s2, i2);
6143
6173
  }
6174
+ o2 = ie(o2, s2), this.staticRulesId = s2;
6175
+ }
6144
6176
  else {
6145
6177
  for (var a2 = M(this.baseHash, n.hash), c2 = "", l2 = 0; l2 < this.rules.length; l2++) {
6146
6178
  var u2 = this.rules[l2];
6147
- if ("string" == typeof u2)
6148
- c2 += u2, a2 = M(a2, u2);
6179
+ if ("string" == typeof u2) c2 += u2, a2 = M(a2, u2);
6149
6180
  else if (u2) {
6150
6181
  var p2 = ae(Xe(u2, e2, t, n));
6151
6182
  a2 = M(a2, p2 + l2), c2 += p2;
@@ -6161,19 +6192,21 @@ var Qe = function() {
6161
6192
  }();
6162
6193
  var et = o.createContext(void 0);
6163
6194
  var tt = et.Consumer;
6195
+ function nt() {
6196
+ var e = c(et);
6197
+ if (!e) throw he(18);
6198
+ return e;
6199
+ }
6164
6200
  function ot(e) {
6165
6201
  var n = o.useContext(et), r2 = i(function() {
6166
6202
  return function(e2, n2) {
6167
- if (!e2)
6168
- throw he(14);
6203
+ if (!e2) throw he(14);
6169
6204
  if (re(e2)) {
6170
6205
  var o2 = e2(n2);
6171
- if (null === o2 || Array.isArray(o2) || "object" != typeof o2)
6172
- throw he(7);
6206
+ if (null === o2 || Array.isArray(o2) || "object" != typeof o2) throw he(7);
6173
6207
  return o2;
6174
6208
  }
6175
- if (Array.isArray(e2) || "object" != typeof e2)
6176
- throw he(8);
6209
+ if (Array.isArray(e2) || "object" != typeof e2) throw he(8);
6177
6210
  return n2 ? __assign(__assign({}, n2), e2) : e2;
6178
6211
  }(e.theme, n);
6179
6212
  }, [e.theme, n]);
@@ -6191,14 +6224,13 @@ function it(e, r2, s2) {
6191
6224
  return L(e2) ? "styled.".concat(e2) : "Styled(".concat(B(e2), ")");
6192
6225
  }(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;
6193
6226
  if (i2 && a2.shouldForwardProp) {
6194
- var b = a2.shouldForwardProp;
6227
+ var b2 = a2.shouldForwardProp;
6195
6228
  if (r2.shouldForwardProp) {
6196
6229
  var E2 = r2.shouldForwardProp;
6197
6230
  w2 = function(e2, t) {
6198
- return b(e2, t) && E2(e2, t);
6231
+ return b2(e2, t) && E2(e2, t);
6199
6232
  };
6200
- } else
6201
- w2 = b;
6233
+ } else w2 = b2;
6202
6234
  }
6203
6235
  var N2 = new Qe(s2, g2, i2 ? a2.componentStyle : void 0);
6204
6236
  function O2(e2, r3) {
@@ -6208,13 +6240,11 @@ function it(e, r2, s2) {
6208
6240
  var v2 = I(r4, f3, c3) || C, g3 = function(e4, n, o2) {
6209
6241
  for (var r5, s4 = __assign(__assign({}, n), { className: void 0, theme: o2 }), i4 = 0; i4 < e4.length; i4 += 1) {
6210
6242
  var a4 = re(r5 = e4[i4]) ? r5(s4) : r5;
6211
- for (var c4 in a4)
6212
- s4[c4] = "className" === c4 ? ie(s4[c4], a4[c4]) : "style" === c4 ? __assign(__assign({}, s4[c4]), a4[c4]) : a4[c4];
6243
+ for (var c4 in a4) s4[c4] = "className" === c4 ? ie(s4[c4], a4[c4]) : "style" === c4 ? __assign(__assign({}, s4[c4]), a4[c4]) : a4[c4];
6213
6244
  }
6214
6245
  return n.className && (s4.className = ie(s4.className, n.className)), s4;
6215
6246
  }(i3, r4, v2), S3 = g3.as || h2, w3 = {};
6216
- for (var b2 in g3)
6217
- 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.)')))));
6247
+ 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.)')))));
6218
6248
  var E3 = function(e4, t) {
6219
6249
  var n = Ge(), o2 = e4.generateAndInjectStyles(t, n.styleSheet, n.stylis);
6220
6250
  return l(o2), o2;
@@ -6230,10 +6260,8 @@ function it(e, r2, s2) {
6230
6260
  return this._foldedDefaultProps;
6231
6261
  }, set: function(e2) {
6232
6262
  this._foldedDefaultProps = i2 ? function(e3) {
6233
- for (var t = [], n = 1; n < arguments.length; n++)
6234
- t[n - 1] = arguments[n];
6235
- for (var o2 = 0, r3 = t; o2 < r3.length; o2++)
6236
- le(e3, r3[o2], true);
6263
+ for (var t = [], n = 1; n < arguments.length; n++) t[n - 1] = arguments[n];
6264
+ for (var o2 = 0, r3 = t; o2 < r3.length; o2++) le(e3, r3[o2], true);
6237
6265
  return e3;
6238
6266
  }({}, a2.defaultProps, e2) : e2;
6239
6267
  } }), P(y2, g2), D2.warnTooManyClasses = /* @__PURE__ */ function(e2, t) {
@@ -6249,27 +6277,22 @@ function it(e, r2, s2) {
6249
6277
  }), c2 && oe(D2, e, { attrs: true, componentStyle: true, displayName: true, foldedComponentIds: true, shouldForwardProp: true, styledComponentId: true, target: true }), D2;
6250
6278
  }
6251
6279
  function at(e, t) {
6252
- for (var n = [e[0]], o2 = 0, r2 = t.length; o2 < r2; o2 += 1)
6253
- n.push(t[o2], e[o2 + 1]);
6280
+ for (var n = [e[0]], o2 = 0, r2 = t.length; o2 < r2; o2 += 1) n.push(t[o2], e[o2 + 1]);
6254
6281
  return n;
6255
6282
  }
6256
6283
  var ct = function(e) {
6257
6284
  return Object.assign(e, { isCss: true });
6258
6285
  };
6259
6286
  function lt(t) {
6260
- for (var n = [], o2 = 1; o2 < arguments.length; o2++)
6261
- n[o2 - 1] = arguments[o2];
6262
- if (re(t) || ce(t))
6263
- return ct(Xe(at(_, __spreadArray([t], n, true))));
6287
+ for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
6288
+ if (re(t) || ce(t)) return ct(Xe(at(_, __spreadArray([t], n, true))));
6264
6289
  var r2 = t;
6265
6290
  return 0 === n.length && 1 === r2.length && "string" == typeof r2[0] ? Xe(r2) : ct(Xe(at(r2, n)));
6266
6291
  }
6267
6292
  function ut(n, o2, r2) {
6268
- if (void 0 === r2 && (r2 = C), !o2)
6269
- throw he(1, o2);
6293
+ if (void 0 === r2 && (r2 = C), !o2) throw he(1, o2);
6270
6294
  var s2 = function(t) {
6271
- for (var s3 = [], i2 = 1; i2 < arguments.length; i2++)
6272
- s3[i2 - 1] = arguments[i2];
6295
+ for (var s3 = [], i2 = 1; i2 < arguments.length; i2++) s3[i2 - 1] = arguments[i2];
6273
6296
  return n(o2, r2, lt.apply(void 0, __spreadArray([t], s3, false)));
6274
6297
  };
6275
6298
  return s2.attrs = function(e) {
@@ -6298,26 +6321,51 @@ var ht = function() {
6298
6321
  e2 > 2 && ke.registerId(this.componentId + e2), this.removeStyles(e2, n), this.createStyles(e2, t, n, o2);
6299
6322
  }, e;
6300
6323
  }();
6324
+ function ft(n) {
6325
+ for (var r2 = [], s2 = 1; s2 < arguments.length; s2++) r2[s2 - 1] = arguments[s2];
6326
+ var i2 = lt.apply(void 0, __spreadArray([n], r2, false)), a2 = "sc-global-".concat($(JSON.stringify(i2))), c2 = new ht(i2, a2);
6327
+ P(a2);
6328
+ var l2 = function(e) {
6329
+ var t = Ge(), n2 = o.useContext(et), r3 = o.useRef(t.styleSheet.allocateGSInstance(a2)).current;
6330
+ return o.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) {
6331
+ return "string" == typeof e2 && -1 !== e2.indexOf("@import");
6332
+ }) && 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), o.useLayoutEffect(function() {
6333
+ if (!t.styleSheet.server) return u2(r3, e, t.styleSheet, n2, t.stylis), function() {
6334
+ return c2.removeStyles(r3, t.styleSheet);
6335
+ };
6336
+ }, [r3, e, t.styleSheet, n2, t.stylis]), null;
6337
+ };
6338
+ function u2(e, n2, o2, r3, s3) {
6339
+ if (c2.isStatic) c2.renderStyles(e, b, o2, s3);
6340
+ else {
6341
+ var i3 = __assign(__assign({}, n2), { theme: I(n2, r3, l2.defaultProps) });
6342
+ c2.renderStyles(e, i3, o2, s3);
6343
+ }
6344
+ }
6345
+ return o.memo(l2);
6346
+ }
6347
+ function mt(t) {
6348
+ for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
6349
+ "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.");
6350
+ var r2 = ae(lt.apply(void 0, __spreadArray([t], n, false))), s2 = $(r2);
6351
+ return new We(s2, r2);
6352
+ }
6301
6353
  var vt = function() {
6302
6354
  function e() {
6303
6355
  var e2 = this;
6304
6356
  this._emitSheetCSS = function() {
6305
6357
  var t = e2.instance.toString();
6306
- if (!t)
6307
- return "";
6358
+ if (!t) return "";
6308
6359
  var n = Ce(), o2 = ae([n && 'nonce="'.concat(n, '"'), "".concat(f, '="true"'), "".concat(y, '="').concat(v, '"')].filter(Boolean), " ");
6309
6360
  return "<style ".concat(o2, ">").concat(t, "</style>");
6310
6361
  }, this.getStyleTags = function() {
6311
- if (e2.sealed)
6312
- throw he(2);
6362
+ if (e2.sealed) throw he(2);
6313
6363
  return e2._emitSheetCSS();
6314
6364
  }, this.getStyleElement = function() {
6315
6365
  var n;
6316
- if (e2.sealed)
6317
- throw he(2);
6366
+ if (e2.sealed) throw he(2);
6318
6367
  var r2 = e2.instance.toString();
6319
- if (!r2)
6320
- return [];
6368
+ if (!r2) return [];
6321
6369
  var s2 = ((n = {})[f] = "", n[y] = v, n.dangerouslySetInnerHTML = { __html: r2 }, n), i2 = Ce();
6322
6370
  return i2 && (s2.nonce = i2), [o.createElement("style", __assign({}, s2, { key: "sc-0-0" }))];
6323
6371
  }, this.seal = function() {
@@ -6325,8 +6373,7 @@ var vt = function() {
6325
6373
  }, this.instance = new ke({ isServer: true }), this.sealed = false;
6326
6374
  }
6327
6375
  return e.prototype.collectStyles = function(e2) {
6328
- if (this.sealed)
6329
- throw he(2);
6376
+ if (this.sealed) throw he(2);
6330
6377
  return o.createElement(Ye, { sheet: this.instance }, e2);
6331
6378
  }, e.prototype.interleaveWithNodeStream = function(e2) {
6332
6379
  throw he(3);
@@ -6839,7 +6886,8 @@ function ChangeSubscriptionRequestBodyToJSON(value) {
6839
6886
  }
6840
6887
  return {
6841
6888
  new_plan_id: value["newPlanId"],
6842
- new_price_id: value["newPriceId"]
6889
+ new_price_id: value["newPriceId"],
6890
+ payment_method_id: value["paymentMethodId"]
6843
6891
  };
6844
6892
  }
6845
6893
 
@@ -7270,6 +7318,7 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
7270
7318
  environmentId: json["environment_id"],
7271
7319
  externalId: json["external_id"],
7272
7320
  id: json["id"],
7321
+ paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
7273
7322
  subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
7274
7323
  subtotal: json["subtotal"],
7275
7324
  updatedAt: new Date(json["updated_at"])
@@ -7389,7 +7438,8 @@ function StripeEmbedInfoFromJSONTyped(json, ignoreDiscriminator) {
7389
7438
  }
7390
7439
  return {
7391
7440
  customerEkey: json["customer_ekey"] == null ? void 0 : json["customer_ekey"],
7392
- publishableKey: json["publishable_key"]
7441
+ publishableKey: json["publishable_key"],
7442
+ setupIntentClientSecret: json["setup_intent_client_secret"] == null ? void 0 : json["setup_intent_client_secret"]
7393
7443
  };
7394
7444
  }
7395
7445
 
@@ -7519,7 +7569,315 @@ var CheckoutApi = class extends BaseAPI {
7519
7569
  };
7520
7570
 
7521
7571
  // src/context/embed.tsx
7522
- import { jsx } from "react/jsx-runtime";
7572
+ import { jsx, jsxs } from "react/jsx-runtime";
7573
+ var GlobalStyle = ft`
7574
+ @font-face {
7575
+ font-family: "icons";
7576
+ src: url(data:font/ttf;base64,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AREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAElASYBJwEoASkBKgErASwBLQEuAS8BMAExATIBMwE0ATUBNgE3ATgBOQE6ATsBPAE9AT4BPwFAAUEBQgFDAUQBRQFGAUcBSAFJAUoBSwFMAU0BTgFPAVABUQFSAVMBVAFVAVYBVwFYAVkBWgFbAVwBXQFeAV8BYAFhAWIBYwAFYWxhcm0MYXJyb3ctY3VydmVkCmFycm93LWRvd24KYXJyb3ctbGVmdAthcnJvdy1yaWdodAhhcnJvdy11cAxhcnJvdy11cHdhcmQJYmFja3NwYWNlBGJlbGwFYm9hcmQIYm9va21hcmsKYm9vbGVhbi1vbgdib29sZWFuBGJ1bGIGYnVyZ2VyDWNoZWNrLXJvdW5kZWQFY2hlY2sMY2hldnJvbi1kb3duDGNoZXZyb24tbGVmdA1jaGV2cm9uLXJpZ2h0CmNoZXZyb24tdXAEY2hpcAVjaGlwcxRjbG9zZS1yb3VuZGVkLWZpbGxlZAVjbG9zZQhjbG91ZC11cARjbHViA2NtZARjb2RlBmNvZmZlZQNjb2cOY29sbGFwc2UtZW1wdHkIY29sbGFwc2UHY29tcGFzcwpjb25uZWN0aW9uBGNvcHkHY3lsbmRlcgdkaWFtb25kDmRvbGxhci1yb3VuZGVkD2RvdHMtaG9yaXpvbnRhbA1kb3RzLXZlcnRpY2FsDGVudGl0bGVtZW50cwllcXVhbGl6ZXIaZXhjbGFtYXRpb24tcm91bmRlZC1maWxsZWQDZXllBmZpbHRlcgxmb2xkZXItbWludXMLZm9sZGVyLXBsdXMGZm9sZGVyB2dsYXNzZXMFZ2xvYmUGaGFtbWVyBGhhc2gFaGVhcnQHaHVic3BvdAVpbWFnZQxpbmZvLXJvdW5kZWQFanVpY2UDa2V5BW11c2ljCm5vZGUtbWludXMJbm9kZS1wbHVzB3BhY2thZ2ULcGFwZXItcGxhbmUGcGVuY2lsBnBpY2tlcgRwbGFuBHBsdWcKcGx1cy1taW51cxRwbHVzLXJvdW5kZWQtb3V0bGluZQdwcmVzZW50CXNjaGVtYXRpYwZzZWFyY2gHc2VnbWVudA1zZXJ2ZXItc2VhcmNoB3NpZGViYXIGc2lnbmFsB3NpbGVuY2UFc3BhZGUHc3BlYWtlcgZzdGFja3MGc3RyaXBlBHRleHQHdGh1bmRlcgd0b3JuYWRvBXRydWNrBHR1YmULdW5wcm90ZWN0ZWQIdmVyaWZpZWQMdmlkZW8tY2FtZXJhBndhbGxldAp3YXRjaC1oYW5kDHdhdGNoLXBvY2tldAp3YXRlci1kcm9wBXdhdmVzB3dlYmhvb2sEd2luZAAAAA==)
7577
+ format("truetype");
7578
+ }
7579
+
7580
+ i[class^="i-"]:before,
7581
+ i[class*=" i-"]:before {
7582
+ font-family: icons !important;
7583
+ font-style: normal;
7584
+ font-weight: normal !important;
7585
+ -webkit-font-smoothing: antialiased;
7586
+ -moz-osx-font-smoothing: grayscale;
7587
+ }
7588
+
7589
+ .i-alarm:before {
7590
+ content: "\\f101";
7591
+ }
7592
+ .i-arrow-curved:before {
7593
+ content: "\\f102";
7594
+ }
7595
+ .i-arrow-down:before {
7596
+ content: "\\f103";
7597
+ }
7598
+ .i-arrow-left:before {
7599
+ content: "\\f104";
7600
+ }
7601
+ .i-arrow-right:before {
7602
+ content: "\\f105";
7603
+ }
7604
+ .i-arrow-up:before {
7605
+ content: "\\f106";
7606
+ }
7607
+ .i-arrow-upward:before {
7608
+ content: "\\f107";
7609
+ }
7610
+ .i-backspace:before {
7611
+ content: "\\f108";
7612
+ }
7613
+ .i-bell:before {
7614
+ content: "\\f109";
7615
+ }
7616
+ .i-board:before {
7617
+ content: "\\f10a";
7618
+ }
7619
+ .i-bookmark:before {
7620
+ content: "\\f10b";
7621
+ }
7622
+ .i-boolean-on:before {
7623
+ content: "\\f10c";
7624
+ }
7625
+ .i-boolean:before {
7626
+ content: "\\f10d";
7627
+ }
7628
+ .i-bulb:before {
7629
+ content: "\\f10e";
7630
+ }
7631
+ .i-burger:before {
7632
+ content: "\\f10f";
7633
+ }
7634
+ .i-check-rounded:before {
7635
+ content: "\\f110";
7636
+ }
7637
+ .i-check:before {
7638
+ content: "\\f111";
7639
+ }
7640
+ .i-chevron-down:before {
7641
+ content: "\\f112";
7642
+ }
7643
+ .i-chevron-left:before {
7644
+ content: "\\f113";
7645
+ }
7646
+ .i-chevron-right:before {
7647
+ content: "\\f114";
7648
+ }
7649
+ .i-chevron-up:before {
7650
+ content: "\\f115";
7651
+ }
7652
+ .i-chip:before {
7653
+ content: "\\f116";
7654
+ }
7655
+ .i-chips:before {
7656
+ content: "\\f117";
7657
+ }
7658
+ .i-close-rounded-filled:before {
7659
+ content: "\\f118";
7660
+ }
7661
+ .i-close:before {
7662
+ content: "\\f119";
7663
+ }
7664
+ .i-cloud-up:before {
7665
+ content: "\\f11a";
7666
+ }
7667
+ .i-club:before {
7668
+ content: "\\f11b";
7669
+ }
7670
+ .i-cmd:before {
7671
+ content: "\\f11c";
7672
+ }
7673
+ .i-code:before {
7674
+ content: "\\f11d";
7675
+ }
7676
+ .i-coffee:before {
7677
+ content: "\\f11e";
7678
+ }
7679
+ .i-cog:before {
7680
+ content: "\\f11f";
7681
+ }
7682
+ .i-collapse-empty:before {
7683
+ content: "\\f120";
7684
+ }
7685
+ .i-collapse:before {
7686
+ content: "\\f121";
7687
+ }
7688
+ .i-compass:before {
7689
+ content: "\\f122";
7690
+ }
7691
+ .i-connection:before {
7692
+ content: "\\f123";
7693
+ }
7694
+ .i-copy:before {
7695
+ content: "\\f124";
7696
+ }
7697
+ .i-cylnder:before {
7698
+ content: "\\f125";
7699
+ }
7700
+ .i-diamond:before {
7701
+ content: "\\f126";
7702
+ }
7703
+ .i-dollar-rounded:before {
7704
+ content: "\\f127";
7705
+ }
7706
+ .i-dots-horizontal:before {
7707
+ content: "\\f128";
7708
+ }
7709
+ .i-dots-vertical:before {
7710
+ content: "\\f129";
7711
+ }
7712
+ .i-entitlements:before {
7713
+ content: "\\f12a";
7714
+ }
7715
+ .i-equalizer:before {
7716
+ content: "\\f12b";
7717
+ }
7718
+ .i-exclamation-rounded-filled:before {
7719
+ content: "\\f12c";
7720
+ }
7721
+ .i-eye:before {
7722
+ content: "\\f12d";
7723
+ }
7724
+ .i-filter:before {
7725
+ content: "\\f12e";
7726
+ }
7727
+ .i-folder-minus:before {
7728
+ content: "\\f12f";
7729
+ }
7730
+ .i-folder-plus:before {
7731
+ content: "\\f130";
7732
+ }
7733
+ .i-folder:before {
7734
+ content: "\\f131";
7735
+ }
7736
+ .i-glasses:before {
7737
+ content: "\\f132";
7738
+ }
7739
+ .i-globe:before {
7740
+ content: "\\f133";
7741
+ }
7742
+ .i-hammer:before {
7743
+ content: "\\f134";
7744
+ }
7745
+ .i-hash:before {
7746
+ content: "\\f135";
7747
+ }
7748
+ .i-heart:before {
7749
+ content: "\\f136";
7750
+ }
7751
+ .i-hubspot:before {
7752
+ content: "\\f137";
7753
+ }
7754
+ .i-image:before {
7755
+ content: "\\f138";
7756
+ }
7757
+ .i-info-rounded:before {
7758
+ content: "\\f139";
7759
+ }
7760
+ .i-juice:before {
7761
+ content: "\\f13a";
7762
+ }
7763
+ .i-key:before {
7764
+ content: "\\f13b";
7765
+ }
7766
+ .i-music:before {
7767
+ content: "\\f13c";
7768
+ }
7769
+ .i-node-minus:before {
7770
+ content: "\\f13d";
7771
+ }
7772
+ .i-node-plus:before {
7773
+ content: "\\f13e";
7774
+ }
7775
+ .i-package:before {
7776
+ content: "\\f13f";
7777
+ }
7778
+ .i-paper-plane:before {
7779
+ content: "\\f140";
7780
+ }
7781
+ .i-pencil:before {
7782
+ content: "\\f141";
7783
+ }
7784
+ .i-picker:before {
7785
+ content: "\\f142";
7786
+ }
7787
+ .i-plan:before {
7788
+ content: "\\f143";
7789
+ }
7790
+ .i-plug:before {
7791
+ content: "\\f144";
7792
+ }
7793
+ .i-plus-minus:before {
7794
+ content: "\\f145";
7795
+ }
7796
+ .i-plus-rounded-outline:before {
7797
+ content: "\\f146";
7798
+ }
7799
+ .i-present:before {
7800
+ content: "\\f147";
7801
+ }
7802
+ .i-schematic:before {
7803
+ content: "\\f148";
7804
+ }
7805
+ .i-search:before {
7806
+ content: "\\f149";
7807
+ }
7808
+ .i-segment:before {
7809
+ content: "\\f14a";
7810
+ }
7811
+ .i-server-search:before {
7812
+ content: "\\f14b";
7813
+ }
7814
+ .i-sidebar:before {
7815
+ content: "\\f14c";
7816
+ }
7817
+ .i-signal:before {
7818
+ content: "\\f14d";
7819
+ }
7820
+ .i-silence:before {
7821
+ content: "\\f14e";
7822
+ }
7823
+ .i-spade:before {
7824
+ content: "\\f14f";
7825
+ }
7826
+ .i-speaker:before {
7827
+ content: "\\f150";
7828
+ }
7829
+ .i-stacks:before {
7830
+ content: "\\f151";
7831
+ }
7832
+ .i-stripe:before {
7833
+ content: "\\f152";
7834
+ }
7835
+ .i-text:before {
7836
+ content: "\\f153";
7837
+ }
7838
+ .i-thunder:before {
7839
+ content: "\\f154";
7840
+ }
7841
+ .i-tornado:before {
7842
+ content: "\\f155";
7843
+ }
7844
+ .i-truck:before {
7845
+ content: "\\f156";
7846
+ }
7847
+ .i-tube:before {
7848
+ content: "\\f157";
7849
+ }
7850
+ .i-unprotected:before {
7851
+ content: "\\f158";
7852
+ }
7853
+ .i-verified:before {
7854
+ content: "\\f159";
7855
+ }
7856
+ .i-video-camera:before {
7857
+ content: "\\f15a";
7858
+ }
7859
+ .i-wallet:before {
7860
+ content: "\\f15b";
7861
+ }
7862
+ .i-watch-hand:before {
7863
+ content: "\\f15c";
7864
+ }
7865
+ .i-watch-pocket:before {
7866
+ content: "\\f15d";
7867
+ }
7868
+ .i-water-drop:before {
7869
+ content: "\\f15e";
7870
+ }
7871
+ .i-waves:before {
7872
+ content: "\\f15f";
7873
+ }
7874
+ .i-webhook:before {
7875
+ content: "\\f160";
7876
+ }
7877
+ .i-wind:before {
7878
+ content: "\\f161";
7879
+ }
7880
+ `;
7523
7881
  var defaultTheme = {
7524
7882
  numberOfColumns: 2,
7525
7883
  sectionLayout: "merged",
@@ -7612,8 +7970,8 @@ function parseEditorState(data) {
7612
7970
  return arr;
7613
7971
  }
7614
7972
  async function fetchComponent(id, api) {
7615
- const settings = { ...defaultSettings };
7616
7973
  const nodes = [];
7974
+ const settings = { ...defaultSettings };
7617
7975
  const response = await api.hydrateComponent({ componentId: id });
7618
7976
  const { data } = response;
7619
7977
  if (data.component?.ast) {
@@ -7623,7 +7981,7 @@ async function fetchComponent(id, api) {
7623
7981
  });
7624
7982
  const ast = getEditorState(json);
7625
7983
  if (ast) {
7626
- Object.assign(settings, ast.ROOT.props);
7984
+ (0, import_lodash.default)(settings, ast.ROOT.props.settings);
7627
7985
  nodes.push(...parseEditorState(ast));
7628
7986
  }
7629
7987
  }
@@ -7727,9 +8085,11 @@ var EmbedProvider = ({
7727
8085
  const setData = useCallback(
7728
8086
  (data) => {
7729
8087
  setState((prev2) => {
7730
- const updated = { ...prev2 };
7731
- (0, import_lodash.default)(updated.data, data);
7732
- return updated;
8088
+ const updatedData = (0, import_lodash.default)({}, prev2.data, { ...data });
8089
+ return {
8090
+ ...prev2,
8091
+ data: updatedData
8092
+ };
7733
8093
  });
7734
8094
  },
7735
8095
  [setState]
@@ -7737,9 +8097,11 @@ var EmbedProvider = ({
7737
8097
  const updateSettings = useCallback(
7738
8098
  (settings) => {
7739
8099
  setState((prev2) => {
7740
- const updated = { ...prev2 };
7741
- (0, import_lodash.default)(updated.settings, settings);
7742
- return updated;
8100
+ const updatedSettings = (0, import_lodash.default)({}, prev2.settings, { ...settings });
8101
+ return {
8102
+ ...prev2,
8103
+ settings: updatedSettings
8104
+ };
7743
8105
  });
7744
8106
  },
7745
8107
  [setState]
@@ -7793,8 +8155,8 @@ var EmbedProvider = ({
7793
8155
  }
7794
8156
  }
7795
8157
  },
7796
- ...state.data.stripeEmbed?.customerEkey ? {
7797
- clientSecret: state.data.stripeEmbed.customerEkey
8158
+ ...state.data.stripeEmbed?.setupIntentClientSecret ? {
8159
+ clientSecret: state.data.stripeEmbed?.setupIntentClientSecret
7798
8160
  } : { mode: "payment", currency: "usd", amount: 999999 }
7799
8161
  },
7800
8162
  children
@@ -7819,7 +8181,10 @@ var EmbedProvider = ({
7819
8181
  setStripe,
7820
8182
  setLayout
7821
8183
  },
7822
- children: /* @__PURE__ */ jsx(ot, { theme: state.settings.theme, children: renderChildren() })
8184
+ children: /* @__PURE__ */ jsxs(ot, { theme: state.settings.theme, children: [
8185
+ /* @__PURE__ */ jsx(GlobalStyle, {}),
8186
+ renderChildren()
8187
+ ] })
7823
8188
  }
7824
8189
  );
7825
8190
  };
@@ -8758,47 +9123,38 @@ var useSchematicFlag = (key, opts) => {
8758
9123
  };
8759
9124
 
8760
9125
  // src/components/elements/plan-manager/PlanManager.tsx
8761
- import {
8762
- forwardRef,
8763
- useMemo as useMemo2,
8764
- useState as useState5
8765
- } from "react";
9126
+ import { forwardRef, useMemo as useMemo3 } from "react";
8766
9127
  import { createPortal } from "react-dom";
8767
9128
 
8768
9129
  // src/utils/color.ts
8769
9130
  function hexToHSL(color) {
8770
9131
  let r2 = 0;
8771
9132
  let g2 = 0;
8772
- let b = 0;
9133
+ let b2 = 0;
8773
9134
  if (color.length == 4) {
8774
9135
  r2 = parseInt("0x" + color[1] + color[1]);
8775
9136
  g2 = parseInt("0x" + color[2] + color[2]);
8776
- b = parseInt("0x" + color[3] + color[3]);
9137
+ b2 = parseInt("0x" + color[3] + color[3]);
8777
9138
  } else if (color.length == 7) {
8778
9139
  r2 = parseInt("0x" + color[1] + color[2]);
8779
9140
  g2 = parseInt("0x" + color[3] + color[4]);
8780
- b = parseInt("0x" + color[5] + color[6]);
9141
+ b2 = parseInt("0x" + color[5] + color[6]);
8781
9142
  }
8782
9143
  r2 /= 255;
8783
9144
  g2 /= 255;
8784
- b /= 255;
8785
- const cmin = Math.min(r2, g2, b);
8786
- const cmax = Math.max(r2, g2, b);
9145
+ b2 /= 255;
9146
+ const cmin = Math.min(r2, g2, b2);
9147
+ const cmax = Math.max(r2, g2, b2);
8787
9148
  const delta = cmax - cmin;
8788
9149
  let h = 0;
8789
9150
  let s2 = 0;
8790
9151
  let l2 = 0;
8791
- if (delta == 0)
8792
- h = 0;
8793
- else if (cmax == r2)
8794
- h = (g2 - b) / delta % 6;
8795
- else if (cmax == g2)
8796
- h = (b - r2) / delta + 2;
8797
- else
8798
- h = (r2 - g2) / delta + 4;
9152
+ if (delta == 0) h = 0;
9153
+ else if (cmax == r2) h = (g2 - b2) / delta % 6;
9154
+ else if (cmax == g2) h = (b2 - r2) / delta + 2;
9155
+ else h = (r2 - g2) / delta + 4;
8799
9156
  h = Math.round(h * 60);
8800
- if (h < 0)
8801
- h += 360;
9157
+ if (h < 0) h += 360;
8802
9158
  l2 = (cmax + cmin) / 2;
8803
9159
  s2 = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l2 - 1));
8804
9160
  s2 = +(s2 * 100).toFixed(1);
@@ -8813,41 +9169,38 @@ function hslToHex({ h, s: s2, l: l2 }) {
8813
9169
  const m2 = l2 - c2 / 2;
8814
9170
  let r2 = 0;
8815
9171
  let g2 = 0;
8816
- let b = 0;
9172
+ let b2 = 0;
8817
9173
  if (0 <= h && h < 60) {
8818
9174
  r2 = c2;
8819
9175
  g2 = x2;
8820
- b = 0;
9176
+ b2 = 0;
8821
9177
  } else if (60 <= h && h < 120) {
8822
9178
  r2 = x2;
8823
9179
  g2 = c2;
8824
- b = 0;
9180
+ b2 = 0;
8825
9181
  } else if (120 <= h && h < 180) {
8826
9182
  r2 = 0;
8827
9183
  g2 = c2;
8828
- b = x2;
9184
+ b2 = x2;
8829
9185
  } else if (180 <= h && h < 240) {
8830
9186
  r2 = 0;
8831
9187
  g2 = x2;
8832
- b = c2;
9188
+ b2 = c2;
8833
9189
  } else if (240 <= h && h < 300) {
8834
9190
  r2 = x2;
8835
9191
  g2 = 0;
8836
- b = c2;
9192
+ b2 = c2;
8837
9193
  } else if (300 <= h && h < 360) {
8838
9194
  r2 = c2;
8839
9195
  g2 = 0;
8840
- b = x2;
9196
+ b2 = x2;
8841
9197
  }
8842
9198
  let rs = Math.round((r2 + m2) * 255).toString(16);
8843
9199
  let gs = Math.round((g2 + m2) * 255).toString(16);
8844
- let bs = Math.round((b + m2) * 255).toString(16);
8845
- if (rs.length == 1)
8846
- rs = "0" + rs;
8847
- if (gs.length == 1)
8848
- gs = "0" + gs;
8849
- if (bs.length == 1)
8850
- bs = "0" + bs;
9200
+ let bs = Math.round((b2 + m2) * 255).toString(16);
9201
+ if (rs.length == 1) rs = "0" + rs;
9202
+ if (gs.length == 1) gs = "0" + gs;
9203
+ if (bs.length == 1) bs = "0" + bs;
8851
9204
  return "#" + rs + gs + bs;
8852
9205
  }
8853
9206
  function adjustLightness(color, amount) {
@@ -8874,6 +9227,34 @@ function toPrettyDate(date) {
8874
9227
  function camelToHyphen(str) {
8875
9228
  return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
8876
9229
  }
9230
+ function formatCurrency(amount) {
9231
+ try {
9232
+ const dollars = amount / 100;
9233
+ const formatValue = (value, symbol) => {
9234
+ let formatted = value.toFixed(1);
9235
+ if (formatted.endsWith(".0")) {
9236
+ formatted = formatted.slice(0, -2);
9237
+ }
9238
+ return `$${formatted}${symbol}`;
9239
+ };
9240
+ if (dollars >= 1e6) {
9241
+ return formatValue(dollars / 1e6, "M");
9242
+ } else if (dollars >= 1e3) {
9243
+ return formatValue(dollars / 1e3, "k");
9244
+ } else {
9245
+ return new Intl.NumberFormat("en-US", {
9246
+ style: "currency",
9247
+ currency: "USD"
9248
+ }).format(dollars);
9249
+ }
9250
+ } catch (error) {
9251
+ console.error("Error formatting currency", error);
9252
+ return new Intl.NumberFormat("en-US", {
9253
+ style: "currency",
9254
+ currency: "USD"
9255
+ }).format(amount / 100);
9256
+ }
9257
+ }
8877
9258
 
8878
9259
  // src/const/index.ts
8879
9260
  var TEXT_BASE_SIZE = 16;
@@ -9106,13 +9487,115 @@ var IconRound = ({
9106
9487
  return /* @__PURE__ */ jsx5(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ jsx5(Icon2, { name }) });
9107
9488
  };
9108
9489
 
9490
+ // src/components/ui/modal/Modal.tsx
9491
+ import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2 } from "react";
9492
+ import { jsx as jsx6 } from "react/jsx-runtime";
9493
+ var Modal = ({ children, onClose }) => {
9494
+ const theme = nt();
9495
+ const { setLayout } = useEmbed();
9496
+ const ref = useRef2(null);
9497
+ const handleClose = useCallback2(() => {
9498
+ setLayout("portal");
9499
+ onClose?.();
9500
+ }, [setLayout, onClose]);
9501
+ useEffect4(() => {
9502
+ ref.current?.focus();
9503
+ }, []);
9504
+ return /* @__PURE__ */ jsx6(
9505
+ Box,
9506
+ {
9507
+ ref,
9508
+ tabIndex: 0,
9509
+ onClick: (event) => {
9510
+ if (event.target === event.currentTarget) {
9511
+ handleClose();
9512
+ }
9513
+ },
9514
+ onKeyDown: (event) => {
9515
+ if (event.key === "Escape") {
9516
+ handleClose();
9517
+ }
9518
+ },
9519
+ $position: "absolute",
9520
+ $top: "50%",
9521
+ $left: "50%",
9522
+ $zIndex: "999999",
9523
+ $transform: "translate(-50%, -50%)",
9524
+ $width: "100%",
9525
+ $height: "100%",
9526
+ $backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 15) : lighten(theme.card.background, 15),
9527
+ $overflow: "hidden",
9528
+ children: /* @__PURE__ */ jsx6(
9529
+ Flex,
9530
+ {
9531
+ $position: "relative",
9532
+ $top: "50%",
9533
+ $left: "50%",
9534
+ $transform: "translate(-50%, -50%)",
9535
+ $flexDirection: "column",
9536
+ $overflow: "hidden",
9537
+ $width: "calc(100% - 5rem)",
9538
+ $height: "calc(100% - 5rem)",
9539
+ $backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 2.5) : lighten(theme.card.background, 2.5),
9540
+ $borderRadius: "0.5rem",
9541
+ $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
9542
+ id: "select-plan-dialog",
9543
+ role: "dialog",
9544
+ "aria-labelledby": "select-plan-dialog-label",
9545
+ "aria-modal": "true",
9546
+ children
9547
+ }
9548
+ )
9549
+ }
9550
+ );
9551
+ };
9552
+
9553
+ // src/components/ui/modal/ModalHeader.tsx
9554
+ import { useCallback as useCallback3 } from "react";
9555
+ import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
9556
+ var ModalHeader = ({ children, onClose }) => {
9557
+ const theme = nt();
9558
+ const { setLayout } = useEmbed();
9559
+ const handleClose = useCallback3(() => {
9560
+ setLayout("portal");
9561
+ onClose?.();
9562
+ }, [setLayout, onClose]);
9563
+ return /* @__PURE__ */ jsxs2(
9564
+ Flex,
9565
+ {
9566
+ $justifyContent: "space-between",
9567
+ $alignItems: "center",
9568
+ $gap: "1rem",
9569
+ $height: "3.75rem",
9570
+ $padding: "0 0.625rem 0 2.5rem",
9571
+ $backgroundColor: theme.card.background,
9572
+ $borderBottomWidth: "1px",
9573
+ $borderBottomStyle: "solid",
9574
+ $borderBottomColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 15) : lighten(theme.card.background, 15),
9575
+ children: [
9576
+ children,
9577
+ /* @__PURE__ */ jsx7(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ jsx7(
9578
+ Icon2,
9579
+ {
9580
+ name: "close",
9581
+ style: {
9582
+ fontSize: 36,
9583
+ color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 27.5) : lighten(theme.card.background, 27.5)
9584
+ }
9585
+ }
9586
+ ) })
9587
+ ]
9588
+ }
9589
+ );
9590
+ };
9591
+
9109
9592
  // src/components/ui/progress-bar/styles.ts
9110
9593
  var Container2 = dt(Flex)`
9111
9594
  position: relative;
9112
9595
  `;
9113
9596
 
9114
9597
  // src/components/ui/progress-bar/ProgressBar.tsx
9115
- import { jsx as jsx6, jsxs } from "react/jsx-runtime";
9598
+ import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
9116
9599
  var ProgressBar = ({
9117
9600
  progress,
9118
9601
  value,
@@ -9128,21 +9611,21 @@ var ProgressBar = ({
9128
9611
  orange: "#DB6769",
9129
9612
  red: "#EF4444"
9130
9613
  };
9131
- return /* @__PURE__ */ jsxs(
9614
+ return /* @__PURE__ */ jsxs3(
9132
9615
  Container2,
9133
9616
  {
9134
9617
  $alignItems: "center",
9135
9618
  $gap: `${16 / TEXT_BASE_SIZE}rem`,
9136
9619
  ...props,
9137
9620
  children: [
9138
- /* @__PURE__ */ jsx6(
9621
+ /* @__PURE__ */ jsx8(
9139
9622
  Flex,
9140
9623
  {
9141
9624
  $position: "relative",
9142
9625
  $alignItems: "center",
9143
9626
  $width: `${barWidth}`,
9144
9627
  $maxWidth: "100%",
9145
- children: /* @__PURE__ */ jsx6(
9628
+ children: /* @__PURE__ */ jsx8(
9146
9629
  Flex,
9147
9630
  {
9148
9631
  $position: "relative",
@@ -9151,7 +9634,7 @@ var ProgressBar = ({
9151
9634
  $height: `${8 / TEXT_BASE_SIZE}rem`,
9152
9635
  $background: "#F2F4F7",
9153
9636
  $borderRadius: "9999px",
9154
- children: /* @__PURE__ */ jsx6(
9637
+ children: /* @__PURE__ */ jsx8(
9155
9638
  Box,
9156
9639
  {
9157
9640
  $width: `${Math.min(progress, 100)}%`,
@@ -9164,7 +9647,7 @@ var ProgressBar = ({
9164
9647
  )
9165
9648
  }
9166
9649
  ),
9167
- total !== 0 && /* @__PURE__ */ jsxs(Text, { $size: 14, $weight: 500, children: [
9650
+ total !== 0 && /* @__PURE__ */ jsxs3(Text, { $size: 14, $weight: 500, children: [
9168
9651
  value,
9169
9652
  "/",
9170
9653
  total
@@ -9174,7 +9657,10 @@ var ProgressBar = ({
9174
9657
  );
9175
9658
  };
9176
9659
 
9177
- // src/components/elements/plan-manager/CheckoutForm.tsx
9660
+ // src/components/elements/plan-manager/CheckoutDialog.tsx
9661
+ import { useMemo as useMemo2, useState as useState5 } from "react";
9662
+
9663
+ // src/components/elements/plan-manager/PaymentForm.tsx
9178
9664
  import { useState as useState4 } from "react";
9179
9665
  import {
9180
9666
  LinkAuthenticationElement,
@@ -9190,7 +9676,18 @@ var StyledButton = dt(Button2)`
9190
9676
  width: 100%;
9191
9677
  ${({ disabled, $color = "primary", theme }) => {
9192
9678
  const { l: l2 } = hexToHSL(theme[$color]);
9193
- const textColor = disabled ? "#989898" : l2 > 50 ? "#000000" : "#FFFFFF";
9679
+ let textColor;
9680
+ let colorFn;
9681
+ if (l2 > 50) {
9682
+ textColor = "#000000";
9683
+ colorFn = lighten;
9684
+ } else {
9685
+ textColor = "#FFFFFF";
9686
+ colorFn = darken;
9687
+ }
9688
+ if (disabled) {
9689
+ textColor = colorFn(textColor, 42.5);
9690
+ }
9194
9691
  return lt`
9195
9692
  color: ${textColor};
9196
9693
 
@@ -9201,35 +9698,47 @@ var StyledButton = dt(Button2)`
9201
9698
  }};
9202
9699
 
9203
9700
  ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
9204
- const color = disabled ? "#EEEEEE" : theme[$color];
9701
+ let color = theme[$color];
9702
+ if (disabled) {
9703
+ const { l: l2 } = hexToHSL(theme.card.background);
9704
+ color = hslToHex({ h: 0, s: 0, l: l2 });
9705
+ color = l2 > 50 ? darken(color, 7.5) : lighten(color, 7.5);
9706
+ }
9205
9707
  return $variant === "filled" ? lt`
9206
9708
  background-color: ${color};
9207
9709
  border-color: ${color};
9208
9710
  ` : lt`
9209
9711
  background-color: transparent;
9210
- border-color: #d2d2d2;
9211
- color: #194bfb;
9712
+ border-color: ${color};
9713
+ color: ${color};
9714
+
9212
9715
  ${Text} {
9213
- color: #194bfb;
9716
+ color: ${color};
9214
9717
  }
9215
9718
  `;
9216
9719
  }}
9217
9720
 
9218
- &:hover {
9219
- ${({ disabled }) => disabled && "cursor: not-allowed;"}
9220
- ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
9721
+ &:disabled:hover {
9722
+ cursor: not-allowed;
9723
+ }
9724
+
9725
+ &:not(:disabled):hover {
9726
+ ${({ $color = "primary", theme, $variant = "filled" }) => {
9221
9727
  const specified = theme[$color];
9222
9728
  const lightened = lighten(specified, 15);
9223
- const color = disabled ? "#EEEEEE" : specified === lightened ? darken(specified, 15) : lightened;
9729
+ const color = specified === lightened ? darken(specified, 15) : lightened;
9730
+ const { l: l2 } = hexToHSL(theme[$color]);
9731
+ const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
9224
9732
  return $variant === "filled" ? lt`
9225
9733
  background-color: ${color};
9226
9734
  border-color: ${color};
9227
9735
  ` : lt`
9228
9736
  background-color: ${color};
9229
9737
  border-color: ${color};
9230
- color: #ffffff;
9738
+ color: ${textColor};
9739
+
9231
9740
  ${Text} {
9232
- color: #ffffff;
9741
+ color: ${textColor};
9233
9742
  }
9234
9743
  `;
9235
9744
  }}
@@ -9259,14 +9768,15 @@ var StyledButton = dt(Button2)`
9259
9768
  }}
9260
9769
  `;
9261
9770
 
9262
- // src/components/elements/plan-manager/CheckoutForm.tsx
9263
- import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
9264
- var CheckoutForm = ({ plan, period }) => {
9771
+ // src/components/elements/plan-manager/PaymentForm.tsx
9772
+ import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
9773
+ var PaymentForm = ({ plan, period, onConfirm }) => {
9265
9774
  const stripe = useStripe();
9266
9775
  const elements = useElements();
9267
9776
  const { api, data } = useEmbed();
9268
9777
  const [message, setMessage] = useState4(null);
9269
9778
  const [isLoading, setIsLoading] = useState4(false);
9779
+ const [isConfirmed, setIsConfirmed] = useState4(false);
9270
9780
  const handleSubmit = async (event) => {
9271
9781
  event.preventDefault();
9272
9782
  const priceId = period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
@@ -9274,20 +9784,34 @@ var CheckoutForm = ({ plan, period }) => {
9274
9784
  return;
9275
9785
  }
9276
9786
  setIsLoading(true);
9277
- const { error } = await stripe.confirmPayment({
9278
- elements,
9279
- confirmParams: {
9280
- return_url: window.location.href
9787
+ setIsConfirmed(false);
9788
+ try {
9789
+ const { setupIntent, error } = await stripe.confirmSetup({
9790
+ elements,
9791
+ confirmParams: {
9792
+ return_url: window.location.href
9793
+ },
9794
+ redirect: "if_required"
9795
+ });
9796
+ if (onConfirm && typeof setupIntent?.payment_method === "string") {
9797
+ onConfirm(setupIntent.payment_method);
9798
+ setIsConfirmed(true);
9799
+ } else {
9281
9800
  }
9282
- });
9283
- if (error.type === "card_error" || error.type === "validation_error") {
9284
- setMessage(error.message);
9285
- } else {
9286
- setMessage("An unexpected error occured.");
9801
+ if (error?.type === "card_error" || error?.type === "validation_error") {
9802
+ setMessage(error.message);
9803
+ }
9804
+ setIsLoading(false);
9805
+ } catch (error) {
9806
+ if (error instanceof Error) {
9807
+ setMessage(error.message);
9808
+ } else {
9809
+ setMessage("An unexpected error occured.");
9810
+ }
9811
+ setIsLoading(false);
9287
9812
  }
9288
- setIsLoading(false);
9289
9813
  };
9290
- return /* @__PURE__ */ jsxs2(
9814
+ return /* @__PURE__ */ jsxs4(
9291
9815
  "form",
9292
9816
  {
9293
9817
  id: "payment-form",
@@ -9295,30 +9819,20 @@ var CheckoutForm = ({ plan, period }) => {
9295
9819
  style: {
9296
9820
  display: "flex",
9297
9821
  flexDirection: "column",
9298
- height: "100%"
9822
+ height: "100%",
9823
+ overflowX: "hidden",
9824
+ overflowY: "auto"
9299
9825
  },
9300
9826
  children: [
9301
- /* @__PURE__ */ jsxs2(
9302
- Box,
9303
- {
9304
- $fontSize: "18px",
9305
- $marginBottom: "1.5rem",
9306
- $display: "inline-block",
9307
- $width: "100%",
9308
- children: [
9309
- "Add payment method",
9310
- " "
9311
- ]
9312
- }
9313
- ),
9314
- /* @__PURE__ */ jsx7(
9827
+ /* @__PURE__ */ jsx9(Box, { $width: "100%", $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx9(Text, { $size: 18, children: "Add payment method" }) }),
9828
+ /* @__PURE__ */ jsx9(
9315
9829
  Flex,
9316
9830
  {
9317
9831
  $flexDirection: "column",
9318
9832
  $gap: "1.5rem",
9319
9833
  $marginBottom: "1.5rem",
9320
9834
  $width: "100%",
9321
- children: /* @__PURE__ */ jsx7(
9835
+ children: /* @__PURE__ */ jsx9(
9322
9836
  LinkAuthenticationElement,
9323
9837
  {
9324
9838
  id: "link-authentication-element"
@@ -9326,18 +9840,18 @@ var CheckoutForm = ({ plan, period }) => {
9326
9840
  )
9327
9841
  }
9328
9842
  ),
9329
- /* @__PURE__ */ jsxs2(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
9330
- /* @__PURE__ */ jsx7(PaymentElement, { id: "payment-element" }),
9331
- message && /* @__PURE__ */ jsx7("div", { id: "payment-message", children: message })
9843
+ /* @__PURE__ */ jsxs4(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
9844
+ /* @__PURE__ */ jsx9(PaymentElement, { id: "payment-element" }),
9845
+ message && /* @__PURE__ */ jsx9(Text, { id: "payment-message", children: message })
9332
9846
  ] }),
9333
- /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7(
9847
+ /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(
9334
9848
  StyledButton,
9335
9849
  {
9336
9850
  id: "submit",
9337
- disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.customerEkey,
9851
+ disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
9338
9852
  $size: "md",
9339
- $color: "secondary",
9340
- children: /* @__PURE__ */ jsx7("span", { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
9853
+ $color: "primary",
9854
+ children: /* @__PURE__ */ jsx9(Text, { id: "button-text", children: !isLoading ? "Loading" : "Save payment method" })
9341
9855
  }
9342
9856
  ) })
9343
9857
  ]
@@ -9345,338 +9859,589 @@ var CheckoutForm = ({ plan, period }) => {
9345
9859
  );
9346
9860
  };
9347
9861
 
9348
- // src/components/elements/plan-manager/PlanManager.tsx
9349
- import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
9350
- var OverlayHeader = ({
9351
- children,
9352
- onClose
9353
- }) => {
9354
- const { setLayout } = useEmbed();
9355
- return /* @__PURE__ */ jsxs3(
9356
- Flex,
9357
- {
9358
- $paddingLeft: "2.5rem",
9359
- $paddingRight: "2.5rem",
9360
- $padding: ".75rem 2.5rem",
9361
- $flexDirection: "row",
9362
- $justifyContent: "space-between",
9363
- $alignItems: "center",
9364
- $borderBottom: "1px solid #DEDEDE",
9365
- $gap: "1rem",
9366
- $backgroundColor: "#FFFFFF",
9367
- $borderRadius: ".5rem .5rem 0 0",
9368
- children: [
9369
- children,
9370
- /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(
9862
+ // src/components/elements/plan-manager/CheckoutDialog.tsx
9863
+ import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
9864
+ var CheckoutDialog = () => {
9865
+ const [checkoutStage, setCheckoutStage] = useState5(
9866
+ "plan"
9867
+ );
9868
+ const [planPeriod, setPlanPeriod] = useState5("month");
9869
+ const [selectedPlan, setSelectedPlan] = useState5();
9870
+ const [paymentMethodId, setPaymentMethodId] = useState5();
9871
+ const [isLoading, setIsLoading] = useState5(false);
9872
+ const [isCheckoutComplete, setIsCheckoutComplete] = useState5(false);
9873
+ const theme = nt();
9874
+ const { api, data, settings } = useEmbed();
9875
+ const { currentPlan, availablePlans } = useMemo2(() => {
9876
+ return {
9877
+ currentPlan: data.company?.plan,
9878
+ availablePlans: data.activePlans
9879
+ };
9880
+ }, [data.company, data.activePlans]);
9881
+ const savingsPercentage = useMemo2(() => {
9882
+ if (selectedPlan) {
9883
+ const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
9884
+ const yearly = selectedPlan?.yearlyPrice?.price || 0;
9885
+ return Math.round((monthly - yearly) / monthly * 1e4) / 100;
9886
+ }
9887
+ return 0;
9888
+ }, [selectedPlan]);
9889
+ return /* @__PURE__ */ jsxs5(Modal, { children: [
9890
+ /* @__PURE__ */ jsx10(ModalHeader, { children: /* @__PURE__ */ jsx10(Flex, { $gap: "1rem", children: !isCheckoutComplete && /* @__PURE__ */ jsxs5(Fragment, { children: [
9891
+ /* @__PURE__ */ jsxs5(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
9892
+ checkoutStage === "plan" ? /* @__PURE__ */ jsx10(
9371
9893
  Box,
9372
9894
  {
9373
- $cursor: "pointer",
9374
- onClick: () => {
9375
- setLayout("portal");
9376
- if (onClose) {
9377
- onClose();
9378
- }
9379
- },
9380
- children: /* @__PURE__ */ jsx8(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
9895
+ $width: "0.9375rem",
9896
+ $height: "0.9375rem",
9897
+ $borderWidth: "2px",
9898
+ $borderStyle: "solid",
9899
+ $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
9900
+ $borderRadius: "9999px"
9381
9901
  }
9382
- ) })
9383
- ]
9384
- }
9385
- );
9386
- };
9387
- var OverlayWrapper = ({
9388
- children,
9389
- size = "lg"
9390
- }) => {
9391
- const sizeWidthMap = {
9392
- md: "700px",
9393
- lg: "75%"
9394
- };
9395
- const sizeHeighthMap = {
9396
- md: "auto",
9397
- lg: "75%"
9398
- };
9399
- const sizeMaxWidthMap = {
9400
- md: "auto",
9401
- lg: "1140px"
9402
- };
9403
- return /* @__PURE__ */ jsx8(
9404
- Box,
9405
- {
9406
- $position: "absolute",
9407
- $top: "50%",
9408
- $left: "50%",
9409
- $zIndex: "999999",
9410
- $transform: "translate(-50%, -50%)",
9411
- $width: "100%",
9412
- $height: "100%",
9413
- $backgroundColor: "#D9D9D9",
9414
- $overflow: "hidden",
9415
- children: /* @__PURE__ */ jsx8(
9416
- Flex,
9417
- {
9418
- $position: "relative",
9419
- $top: "50%",
9420
- $left: "50%",
9421
- $transform: "translate(-50%, -50%)",
9422
- $flexDirection: "column",
9423
- $maxWidth: sizeMaxWidthMap[size],
9424
- $width: sizeWidthMap[size],
9425
- $height: sizeHeighthMap[size],
9426
- $backgroundColor: "#FBFBFB",
9427
- $borderBottom: "1px solid #DEDEDE",
9428
- $borderRadius: "8px",
9429
- $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
9430
- id: "select-plan-dialog",
9431
- role: "dialog",
9432
- "aria-labelledby": "select-plan-dialog-label",
9433
- "aria-modal": "true",
9434
- children
9435
- }
9436
- )
9437
- }
9438
- );
9439
- };
9440
- var OverlaySideBar = ({
9441
- pricePeriod,
9442
- setPricePeriod,
9443
- checkoutStage,
9444
- setCheckoutStage,
9445
- currentPlan,
9446
- selectedPlan
9447
- }) => {
9448
- const { api } = useEmbed();
9449
- const savingsPercentage = useMemo2(() => {
9450
- if (selectedPlan && pricePeriod === "month") {
9451
- const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
9452
- const yearly = selectedPlan?.yearlyPrice?.price || 0;
9453
- return (monthly - yearly) / monthly * 100;
9454
- }
9455
- return 0;
9456
- }, [selectedPlan, pricePeriod]);
9457
- return /* @__PURE__ */ jsxs3(
9458
- Flex,
9459
- {
9460
- $flexDirection: "column",
9461
- $background: "white",
9462
- $borderRadius: "0 0 0.5rem",
9463
- $maxWidth: "275px",
9464
- $height: "100%",
9465
- $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
9466
- children: [
9467
- /* @__PURE__ */ jsxs3(
9468
- Flex,
9902
+ ) : /* @__PURE__ */ jsx10(
9903
+ IconRound,
9469
9904
  {
9470
- $flexDirection: "column",
9471
- $position: "relative",
9472
- $gap: "1rem",
9473
- $width: "100%",
9474
- $height: "auto",
9475
- $padding: "1.5rem",
9476
- $borderBottom: "1px solid #DEDEDE",
9477
- children: [
9478
- /* @__PURE__ */ jsx8(Flex, { $flexDirection: "row", $justifyContent: "space-between", children: /* @__PURE__ */ jsx8(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
9479
- /* @__PURE__ */ jsxs3(
9480
- Flex,
9481
- {
9482
- $flexDirection: "row",
9483
- $border: "1px solid #D9D9D9",
9484
- $borderRadius: "40px",
9485
- $fontSize: "12px",
9486
- $textAlign: "center",
9487
- $cursor: "pointer",
9488
- children: [
9489
- /* @__PURE__ */ jsx8(
9490
- Box,
9491
- {
9492
- onClick: () => setPricePeriod("month"),
9493
- $padding: ".25rem .5rem",
9494
- $flex: "1",
9495
- $fontWeight: pricePeriod === "month" ? "600" : "400",
9496
- $backgroundColor: pricePeriod === "month" ? "#DDDDDD" : "white",
9497
- $borderRadius: "40px",
9498
- children: "Billed monthly"
9499
- }
9500
- ),
9501
- /* @__PURE__ */ jsx8(
9502
- Box,
9503
- {
9504
- onClick: () => setPricePeriod("year"),
9505
- $padding: ".25rem .5rem",
9506
- $flex: "1",
9507
- $fontWeight: pricePeriod === "year" ? "600" : "400",
9508
- $backgroundColor: pricePeriod === "year" ? "#DDDDDD" : "white",
9509
- $borderRadius: "40px",
9510
- children: "Billed yearly"
9511
- }
9512
- )
9513
- ]
9514
- }
9515
- ),
9516
- savingsPercentage > 0 && /* @__PURE__ */ jsxs3(Box, { $fontSize: "11px", $color: "#194BFB", children: [
9517
- "Save up to ",
9518
- savingsPercentage,
9519
- "% with yearly billing"
9520
- ] })
9521
- ]
9905
+ name: "check",
9906
+ style: {
9907
+ color: theme.card.background,
9908
+ backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
9909
+ fontSize: 16,
9910
+ width: "1rem",
9911
+ height: "1rem"
9912
+ }
9522
9913
  }
9523
9914
  ),
9524
- /* @__PURE__ */ jsxs3(
9525
- Flex,
9915
+ /* @__PURE__ */ jsx10(
9916
+ Box,
9526
9917
  {
9527
- $flexDirection: "column",
9528
- $position: "relative",
9529
- $gap: "1rem",
9530
- $width: "100%",
9531
- $height: "auto",
9532
- $padding: "1.5rem",
9533
- $flex: "1",
9534
- $borderBottom: "1px solid #DEDEDE",
9535
- children: [
9536
- /* @__PURE__ */ jsx8(Box, { $fontSize: "14px", $color: "#5D5D5D", children: "Plan" }),
9537
- /* @__PURE__ */ jsxs3(
9538
- Flex,
9539
- {
9540
- $flexDirection: "column",
9541
- $fontSize: "14px",
9542
- $color: "#5D5D5D",
9543
- $gap: ".5rem",
9544
- children: [
9545
- currentPlan && /* @__PURE__ */ jsxs3(
9546
- Flex,
9547
- {
9548
- $flexDirection: "row",
9549
- $alignItems: "center",
9550
- $justifyContent: "space-between",
9551
- $fontSize: "14px",
9552
- $color: "#5D5D5D",
9553
- children: [
9554
- /* @__PURE__ */ jsx8(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: currentPlan.name }),
9555
- /* @__PURE__ */ jsxs3(Flex, { $fontSize: "12px", $color: "#000000", children: [
9556
- "$",
9557
- currentPlan.planPrice,
9558
- "/",
9559
- currentPlan.planPeriod
9560
- ] })
9561
- ]
9562
- }
9563
- ),
9564
- selectedPlan && /* @__PURE__ */ jsxs3(Fragment, { children: [
9565
- /* @__PURE__ */ jsx8(
9566
- Box,
9918
+ tabIndex: 0,
9919
+ ...checkoutStage === "plan" ? {
9920
+ style: {
9921
+ fontWeight: "700"
9922
+ }
9923
+ } : {
9924
+ style: {
9925
+ cursor: "pointer"
9926
+ },
9927
+ onClick: () => setCheckoutStage("plan")
9928
+ },
9929
+ children: /* @__PURE__ */ jsx10(Text, { children: "1. Select plan" })
9930
+ }
9931
+ ),
9932
+ /* @__PURE__ */ jsx10(
9933
+ Icon2,
9934
+ {
9935
+ name: "chevron-right",
9936
+ style: {
9937
+ fontSize: 16,
9938
+ color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5)
9939
+ }
9940
+ }
9941
+ )
9942
+ ] }),
9943
+ /* @__PURE__ */ jsxs5(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
9944
+ /* @__PURE__ */ jsx10(
9945
+ Box,
9946
+ {
9947
+ $width: "0.9375rem",
9948
+ $height: "0.9375rem",
9949
+ $borderWidth: "2px",
9950
+ $borderStyle: "solid",
9951
+ $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
9952
+ $borderRadius: "9999px"
9953
+ }
9954
+ ),
9955
+ /* @__PURE__ */ jsx10(
9956
+ Box,
9957
+ {
9958
+ tabIndex: 0,
9959
+ ...checkoutStage === "checkout" && {
9960
+ style: {
9961
+ fontWeight: "700"
9962
+ }
9963
+ },
9964
+ children: /* @__PURE__ */ jsx10(Text, { children: "2. Checkout" })
9965
+ }
9966
+ )
9967
+ ] })
9968
+ ] }) }) }),
9969
+ isCheckoutComplete && /* @__PURE__ */ jsx10(Flex, { $justifyContent: "center", $alignItems: "center", $flexGrow: "1", children: /* @__PURE__ */ jsx10(
9970
+ Text,
9971
+ {
9972
+ as: "h1",
9973
+ $font: theme.typography.heading1.fontFamily,
9974
+ $size: theme.typography.heading1.fontSize,
9975
+ $weight: theme.typography.heading1.fontWeight,
9976
+ $color: theme.typography.heading1.color,
9977
+ children: "Subscription updated!"
9978
+ }
9979
+ ) }),
9980
+ !isCheckoutComplete && /* @__PURE__ */ jsxs5(Flex, { $position: "relative", $flexGrow: "1", children: [
9981
+ /* @__PURE__ */ jsxs5(
9982
+ Flex,
9983
+ {
9984
+ $position: "absolute",
9985
+ $top: "0",
9986
+ $left: "0",
9987
+ $flexDirection: "column",
9988
+ $gap: "1rem",
9989
+ $padding: "2rem 2.5rem 2rem 2.5rem",
9990
+ $backgroundColor: darken(settings.theme.card.background, 2.5),
9991
+ $flex: "1",
9992
+ $width: "72.5%",
9993
+ $height: "100%",
9994
+ $overflow: "auto",
9995
+ children: [
9996
+ checkoutStage === "plan" && /* @__PURE__ */ jsxs5(Fragment, { children: [
9997
+ /* @__PURE__ */ jsxs5(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
9998
+ /* @__PURE__ */ jsx10(
9999
+ Text,
10000
+ {
10001
+ as: "h1",
10002
+ id: "select-plan-dialog-label",
10003
+ $size: 18,
10004
+ $marginBottom: "0.5rem",
10005
+ children: "Select plan"
10006
+ }
10007
+ ),
10008
+ /* @__PURE__ */ jsx10(
10009
+ Text,
10010
+ {
10011
+ as: "p",
10012
+ id: "select-plan-dialog-description",
10013
+ $size: 14,
10014
+ $weight: 400,
10015
+ children: "Choose your base plan"
10016
+ }
10017
+ )
10018
+ ] }),
10019
+ /* @__PURE__ */ jsx10(Flex, { $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
10020
+ return /* @__PURE__ */ jsxs5(
10021
+ Flex,
10022
+ {
10023
+ $height: "100%",
10024
+ $flexDirection: "column",
10025
+ $backgroundColor: settings.theme.card.background,
10026
+ $flex: "1",
10027
+ $outlineWidth: "2px",
10028
+ $outlineStyle: "solid",
10029
+ $outlineColor: plan.id === selectedPlan?.id ? theme.primary : "transparent",
10030
+ $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
10031
+ ...settings.theme.card.hasShadow && {
10032
+ $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)"
10033
+ },
10034
+ children: [
10035
+ /* @__PURE__ */ jsxs5(
10036
+ Flex,
9567
10037
  {
10038
+ $flexDirection: "column",
10039
+ $position: "relative",
10040
+ $gap: "1rem",
9568
10041
  $width: "100%",
9569
- $textAlign: "left",
9570
- $opacity: "50%",
9571
- $marginBottom: "-.25rem",
9572
- $marginTop: "-.25rem",
9573
- children: /* @__PURE__ */ jsx8(
9574
- Icon2,
9575
- {
9576
- name: "arrow-down",
9577
- style: {
9578
- display: "inline-block"
10042
+ $height: "auto",
10043
+ $padding: `${settings.theme.card.padding / 16}rem`,
10044
+ $borderBottomWidth: "1px",
10045
+ $borderStyle: "solid",
10046
+ $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5),
10047
+ children: [
10048
+ /* @__PURE__ */ jsx10(Text, { $size: 20, $weight: 600, children: plan.name }),
10049
+ /* @__PURE__ */ jsx10(Text, { $size: 14, children: plan.description }),
10050
+ /* @__PURE__ */ jsxs5(Text, { children: [
10051
+ /* @__PURE__ */ jsx10(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
10052
+ (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
10053
+ ) }),
10054
+ /* @__PURE__ */ jsxs5(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
10055
+ "/",
10056
+ planPeriod
10057
+ ] })
10058
+ ] }),
10059
+ (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ jsx10(
10060
+ Flex,
10061
+ {
10062
+ $position: "absolute",
10063
+ $right: "1rem",
10064
+ $top: "1rem",
10065
+ $fontSize: "0.625rem",
10066
+ $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
10067
+ $backgroundColor: theme.primary,
10068
+ $borderRadius: "9999px",
10069
+ $padding: "0.125rem 0.85rem",
10070
+ children: "Current plan"
9579
10071
  }
9580
- }
9581
- )
10072
+ )
10073
+ ]
9582
10074
  }
9583
10075
  ),
9584
- /* @__PURE__ */ jsxs3(
10076
+ /* @__PURE__ */ jsx10(
9585
10077
  Flex,
9586
10078
  {
9587
- $flexDirection: "row",
9588
- $alignItems: "center",
9589
- $justifyContent: "space-between",
9590
- $fontSize: "14px",
9591
- $color: "#5D5D5D",
10079
+ $flexDirection: "column",
10080
+ $position: "relative",
10081
+ $gap: "0.5rem",
10082
+ $flex: "1",
10083
+ $width: "100%",
10084
+ $height: "auto",
10085
+ $padding: "1.5rem",
10086
+ children: plan.features.map((feature) => {
10087
+ return /* @__PURE__ */ jsxs5(
10088
+ Flex,
10089
+ {
10090
+ $flexShrink: "0",
10091
+ $gap: "1rem",
10092
+ children: [
10093
+ /* @__PURE__ */ jsx10(
10094
+ IconRound,
10095
+ {
10096
+ name: feature.icon,
10097
+ size: "tn",
10098
+ colors: [
10099
+ settings.theme.primary,
10100
+ `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`
10101
+ ]
10102
+ }
10103
+ ),
10104
+ /* @__PURE__ */ jsx10(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx10(Text, { $size: 12, children: feature.name }) })
10105
+ ]
10106
+ },
10107
+ feature.id
10108
+ );
10109
+ })
10110
+ }
10111
+ ),
10112
+ /* @__PURE__ */ jsxs5(
10113
+ Flex,
10114
+ {
10115
+ $flexDirection: "column",
10116
+ $position: "relative",
10117
+ $gap: "1rem",
10118
+ $width: "100%",
10119
+ $height: "auto",
10120
+ $padding: "1.5rem",
9592
10121
  children: [
9593
- /* @__PURE__ */ jsx8(Flex, { $fontSize: "14px", $color: "#000000", $fontWeight: "600", children: selectedPlan.name }),
9594
- /* @__PURE__ */ jsxs3(Flex, { $fontSize: "12px", $color: "#000000", children: [
9595
- "$",
9596
- pricePeriod === "month" ? selectedPlan.monthlyPrice?.price : selectedPlan.yearlyPrice?.price,
9597
- "/",
9598
- pricePeriod
9599
- ] })
10122
+ plan.id === selectedPlan?.id && /* @__PURE__ */ jsxs5(
10123
+ Flex,
10124
+ {
10125
+ $justifyContent: "center",
10126
+ $alignItems: "center",
10127
+ $gap: "0.25rem",
10128
+ $fontSize: "0.9375rem",
10129
+ $padding: "0.625rem 0",
10130
+ children: [
10131
+ /* @__PURE__ */ jsx10(
10132
+ Icon2,
10133
+ {
10134
+ name: "check-rounded",
10135
+ style: {
10136
+ fontSize: 20,
10137
+ lineHeight: "1",
10138
+ color: theme.primary
10139
+ }
10140
+ }
10141
+ ),
10142
+ /* @__PURE__ */ jsx10(
10143
+ Text,
10144
+ {
10145
+ style: {
10146
+ color: hexToHSL(theme.card.background).l > 50 ? "#000000" : "#FFFFFF",
10147
+ lineHeight: "1.4"
10148
+ },
10149
+ children: "Selected"
10150
+ }
10151
+ )
10152
+ ]
10153
+ }
10154
+ ),
10155
+ !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ jsx10(
10156
+ StyledButton,
10157
+ {
10158
+ disabled: plan.valid === false,
10159
+ $size: "sm",
10160
+ $color: "primary",
10161
+ $variant: "outline",
10162
+ onClick: () => {
10163
+ setSelectedPlan(plan);
10164
+ },
10165
+ children: "Select"
10166
+ }
10167
+ )
9600
10168
  ]
9601
10169
  }
9602
10170
  )
9603
- ] })
9604
- ]
9605
- }
9606
- )
9607
- ]
9608
- }
9609
- ),
9610
- /* @__PURE__ */ jsxs3(
9611
- Flex,
9612
- {
9613
- $flexDirection: "column",
9614
- $position: "relative",
9615
- $gap: ".75rem",
9616
- $width: "100%",
9617
- $height: "auto",
9618
- $padding: "1.5rem",
9619
- children: [
9620
- selectedPlan && /* @__PURE__ */ jsxs3(
9621
- Flex,
9622
- {
9623
- $fontSize: "12px",
9624
- $color: "#5D5D5D",
9625
- $justifyContent: "space-between",
9626
- children: [
9627
- /* @__PURE__ */ jsxs3(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
9628
- "Monthly total:",
9629
- " "
9630
- ] }),
9631
- /* @__PURE__ */ jsxs3(Box, { $fontSize: "12px", $color: "#000000", children: [
9632
- "$",
9633
- pricePeriod === "month" ? selectedPlan.monthlyPrice?.price : selectedPlan.yearlyPrice?.price,
9634
- "/",
9635
- pricePeriod
9636
- ] })
9637
- ]
9638
- }
9639
- ),
9640
- checkoutStage === "plan" ? /* @__PURE__ */ jsx8(
9641
- StyledButton,
9642
- {
9643
- $size: "sm",
9644
- onClick: () => {
9645
- setCheckoutStage("checkout");
9646
- },
9647
- ...!selectedPlan && { disabled: true },
9648
- children: /* @__PURE__ */ jsxs3(Flex, { $gap: "0.5rem", $alignItems: "center", $justifyContent: "center", children: [
9649
- /* @__PURE__ */ jsx8("span", { children: "Next: Checkout" }),
9650
- /* @__PURE__ */ jsx8(Icon2, { name: "arrow-right" })
9651
- ] })
9652
- }
9653
- ) : /* @__PURE__ */ jsx8(
9654
- StyledButton,
9655
- {
9656
- disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id,
9657
- onClick: async () => {
9658
- const priceId = pricePeriod === "month" ? selectedPlan?.monthlyPrice?.id : selectedPlan?.yearlyPrice?.id;
9659
- if (!api || !selectedPlan || !priceId)
9660
- return;
9661
- await api.checkout({
9662
- changeSubscriptionRequestBody: {
9663
- newPlanId: selectedPlan.id,
9664
- newPriceId: priceId
9665
- }
9666
- });
10171
+ ]
9667
10172
  },
9668
- $size: "md",
9669
- children: "Pay now"
10173
+ plan.id
10174
+ );
10175
+ }) })
10176
+ ] }),
10177
+ selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ jsx10(
10178
+ PaymentForm,
10179
+ {
10180
+ plan: selectedPlan,
10181
+ period: planPeriod,
10182
+ onConfirm: (value) => {
10183
+ setPaymentMethodId(value);
9670
10184
  }
9671
- ),
9672
- /* @__PURE__ */ jsx8(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
9673
- ]
9674
- }
9675
- )
9676
- ]
9677
- }
9678
- );
10185
+ }
10186
+ )
10187
+ ]
10188
+ }
10189
+ ),
10190
+ /* @__PURE__ */ jsxs5(
10191
+ Flex,
10192
+ {
10193
+ $position: "absolute",
10194
+ $top: "0",
10195
+ $right: "0",
10196
+ $flexDirection: "column",
10197
+ $background: settings.theme.card.background,
10198
+ $borderRadius: "0 0 0.5rem",
10199
+ $width: "27.5%",
10200
+ $height: "100%",
10201
+ $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
10202
+ children: [
10203
+ /* @__PURE__ */ jsxs5(
10204
+ Flex,
10205
+ {
10206
+ $flexDirection: "column",
10207
+ $position: "relative",
10208
+ $gap: "1rem",
10209
+ $width: "100%",
10210
+ $height: "auto",
10211
+ $padding: "1.5rem",
10212
+ $borderBottom: "1px solid #DEDEDE",
10213
+ children: [
10214
+ /* @__PURE__ */ jsx10(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx10(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
10215
+ /* @__PURE__ */ jsxs5(
10216
+ Flex,
10217
+ {
10218
+ $border: "1px solid #D9D9D9",
10219
+ $borderRadius: "2.5rem",
10220
+ $cursor: "pointer",
10221
+ children: [
10222
+ /* @__PURE__ */ jsx10(
10223
+ Flex,
10224
+ {
10225
+ onClick: () => setPlanPeriod("month"),
10226
+ $justifyContent: "center",
10227
+ $alignItems: "center",
10228
+ $padding: "0.25rem 0.5rem",
10229
+ $flex: "1",
10230
+ $backgroundColor: planPeriod === "month" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
10231
+ $borderRadius: "2.5rem",
10232
+ children: /* @__PURE__ */ jsx10(Text, { $size: 12, $weight: planPeriod === "month" ? 600 : 400, children: "Billed monthly" })
10233
+ }
10234
+ ),
10235
+ /* @__PURE__ */ jsx10(
10236
+ Flex,
10237
+ {
10238
+ onClick: () => setPlanPeriod("year"),
10239
+ $justifyContent: "center",
10240
+ $alignItems: "center",
10241
+ $padding: "0.25rem 0.5rem",
10242
+ $flex: "1",
10243
+ $backgroundColor: planPeriod === "year" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
10244
+ $borderRadius: "2.5rem",
10245
+ children: /* @__PURE__ */ jsx10(Text, { $size: 12, $weight: planPeriod === "year" ? 600 : 400, children: "Billed yearly" })
10246
+ }
10247
+ )
10248
+ ]
10249
+ }
10250
+ ),
10251
+ savingsPercentage > 0 && /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(Text, { $size: 11, $color: "#194BFB", children: planPeriod === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing` }) })
10252
+ ]
10253
+ }
10254
+ ),
10255
+ /* @__PURE__ */ jsxs5(
10256
+ Flex,
10257
+ {
10258
+ $flexDirection: "column",
10259
+ $position: "relative",
10260
+ $gap: "1rem",
10261
+ $width: "100%",
10262
+ $height: "auto",
10263
+ $padding: "1.5rem",
10264
+ $flex: "1",
10265
+ $borderBottom: "1px solid #DEDEDE",
10266
+ children: [
10267
+ /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(Text, { $size: 14, $color: "#5D5D5D", children: "Plan" }) }),
10268
+ /* @__PURE__ */ jsxs5(
10269
+ Flex,
10270
+ {
10271
+ $flexDirection: "column",
10272
+ $fontSize: "0.875rem",
10273
+ $color: "#5D5D5D",
10274
+ $gap: "0.5rem",
10275
+ children: [
10276
+ currentPlan && /* @__PURE__ */ jsxs5(
10277
+ Flex,
10278
+ {
10279
+ $alignItems: "center",
10280
+ $justifyContent: "space-between",
10281
+ $fontSize: "0.875rem",
10282
+ $color: "#5D5D5D",
10283
+ children: [
10284
+ /* @__PURE__ */ jsx10(Flex, { $fontSize: "0.875rem", $color: "#5D5D5D", children: currentPlan.name }),
10285
+ typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs5(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
10286
+ formatCurrency(currentPlan.planPrice),
10287
+ "/",
10288
+ currentPlan.planPeriod
10289
+ ] })
10290
+ ]
10291
+ }
10292
+ ),
10293
+ selectedPlan && /* @__PURE__ */ jsxs5(Fragment, { children: [
10294
+ /* @__PURE__ */ jsx10(
10295
+ Box,
10296
+ {
10297
+ $width: "100%",
10298
+ $textAlign: "left",
10299
+ $opacity: "50%",
10300
+ $marginBottom: "-0.25rem",
10301
+ $marginTop: "-0.25rem",
10302
+ children: /* @__PURE__ */ jsx10(
10303
+ Icon2,
10304
+ {
10305
+ name: "arrow-down",
10306
+ style: {
10307
+ display: "inline-block"
10308
+ }
10309
+ }
10310
+ )
10311
+ }
10312
+ ),
10313
+ /* @__PURE__ */ jsxs5(
10314
+ Flex,
10315
+ {
10316
+ $alignItems: "center",
10317
+ $justifyContent: "space-between",
10318
+ $fontSize: "0.875rem",
10319
+ $color: "#5D5D5D",
10320
+ children: [
10321
+ /* @__PURE__ */ jsx10(
10322
+ Flex,
10323
+ {
10324
+ $fontSize: "0.875rem",
10325
+ $color: "#000000",
10326
+ $fontWeight: "600",
10327
+ children: selectedPlan.name
10328
+ }
10329
+ ),
10330
+ /* @__PURE__ */ jsxs5(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
10331
+ formatCurrency(
10332
+ (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10333
+ ),
10334
+ "/",
10335
+ planPeriod
10336
+ ] })
10337
+ ]
10338
+ }
10339
+ )
10340
+ ] })
10341
+ ]
10342
+ }
10343
+ )
10344
+ ]
10345
+ }
10346
+ ),
10347
+ /* @__PURE__ */ jsxs5(
10348
+ Flex,
10349
+ {
10350
+ $flexDirection: "column",
10351
+ $position: "relative",
10352
+ $gap: "0.75rem",
10353
+ $width: "100%",
10354
+ $height: "auto",
10355
+ $padding: "1.5rem",
10356
+ children: [
10357
+ selectedPlan && /* @__PURE__ */ jsxs5(
10358
+ Flex,
10359
+ {
10360
+ $fontSize: "0.75rem",
10361
+ $color: "#5D5D5D",
10362
+ $justifyContent: "space-between",
10363
+ children: [
10364
+ /* @__PURE__ */ jsxs5(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: [
10365
+ planPeriod === "month" ? "Monthly" : "Yearly",
10366
+ " total:",
10367
+ " "
10368
+ ] }),
10369
+ /* @__PURE__ */ jsxs5(Box, { $fontSize: "0.75rem", $color: "#000000", children: [
10370
+ formatCurrency(
10371
+ (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10372
+ ),
10373
+ "/",
10374
+ planPeriod
10375
+ ] })
10376
+ ]
10377
+ }
10378
+ ),
10379
+ checkoutStage === "plan" ? /* @__PURE__ */ jsx10(
10380
+ StyledButton,
10381
+ {
10382
+ disabled: !selectedPlan,
10383
+ onClick: () => {
10384
+ setCheckoutStage("checkout");
10385
+ },
10386
+ $size: "sm",
10387
+ children: /* @__PURE__ */ jsxs5(
10388
+ Flex,
10389
+ {
10390
+ $gap: "0.5rem",
10391
+ $alignItems: "center",
10392
+ $justifyContent: "center",
10393
+ $padding: "0 1rem",
10394
+ children: [
10395
+ /* @__PURE__ */ jsx10(Text, { $align: "left", children: "Next: Checkout" }),
10396
+ /* @__PURE__ */ jsx10(Icon2, { name: "arrow-right" })
10397
+ ]
10398
+ }
10399
+ )
10400
+ }
10401
+ ) : /* @__PURE__ */ jsx10(
10402
+ StyledButton,
10403
+ {
10404
+ disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId || isLoading,
10405
+ onClick: async () => {
10406
+ const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
10407
+ if (!api || !selectedPlan || !priceId || !paymentMethodId) {
10408
+ return;
10409
+ }
10410
+ try {
10411
+ setIsLoading(true);
10412
+ setIsCheckoutComplete(false);
10413
+ await api.checkout({
10414
+ changeSubscriptionRequestBody: {
10415
+ newPlanId: selectedPlan.id,
10416
+ newPriceId: priceId,
10417
+ paymentMethodId
10418
+ }
10419
+ });
10420
+ setIsCheckoutComplete(true);
10421
+ } catch (error) {
10422
+ console.error(error);
10423
+ } finally {
10424
+ setIsCheckoutComplete(true);
10425
+ setIsLoading(false);
10426
+ }
10427
+ },
10428
+ $size: "md",
10429
+ children: "Pay now"
10430
+ }
10431
+ ),
10432
+ /* @__PURE__ */ jsx10(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
10433
+ ]
10434
+ }
10435
+ )
10436
+ ]
10437
+ }
10438
+ )
10439
+ ] })
10440
+ ] });
9679
10441
  };
10442
+
10443
+ // src/components/elements/plan-manager/PlanManager.tsx
10444
+ import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
9680
10445
  var resolveDesignProps = (props) => {
9681
10446
  return {
9682
10447
  header: {
@@ -9701,33 +10466,27 @@ var resolveDesignProps = (props) => {
9701
10466
  callToAction: {
9702
10467
  isVisible: props.callToAction?.isVisible ?? true,
9703
10468
  buttonSize: props.callToAction?.buttonSize ?? "md",
9704
- buttonStyle: props.callToAction?.buttonStyle ?? "secondary"
10469
+ buttonStyle: props.callToAction?.buttonStyle ?? "primary"
9705
10470
  }
9706
10471
  };
9707
10472
  };
9708
10473
  var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) => {
9709
10474
  const props = resolveDesignProps(rest);
9710
- const [checkoutStage, setCheckoutStage] = useState5(
9711
- "plan"
9712
- );
9713
- const [planPeriod, setPlanPeriod] = useState5("month");
9714
- const [selectedPlan, setSelectedPlan] = useState5();
9715
10475
  const { data, settings, layout, stripe, setLayout } = useEmbed();
9716
- const { currentPlan, canChangePlan, availablePlans } = useMemo2(() => {
10476
+ const { currentPlan, canChangePlan } = useMemo3(() => {
9717
10477
  return {
9718
10478
  currentPlan: data.company?.plan,
9719
- canChangePlan: stripe !== null,
9720
- availablePlans: data.activePlans
10479
+ canChangePlan: stripe !== null
9721
10480
  };
9722
- }, [data.company, data.activePlans, stripe]);
9723
- return /* @__PURE__ */ jsxs3("div", { ref, className, children: [
9724
- /* @__PURE__ */ jsx8(
10481
+ }, [data.company, stripe]);
10482
+ return /* @__PURE__ */ jsxs6("div", { ref, className, children: [
10483
+ /* @__PURE__ */ jsx11(
9725
10484
  Flex,
9726
10485
  {
9727
10486
  $flexDirection: "column",
9728
10487
  $gap: "0.75rem",
9729
10488
  ...canChangePlan && { $margin: "0 0 0.5rem" },
9730
- children: props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs3(
10489
+ children: props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs6(
9731
10490
  Flex,
9732
10491
  {
9733
10492
  $justifyContent: "space-between",
@@ -9735,8 +10494,8 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
9735
10494
  $width: "100%",
9736
10495
  ...canChangePlan && { $margin: "0 0 1.5rem" },
9737
10496
  children: [
9738
- /* @__PURE__ */ jsxs3("div", { children: [
9739
- /* @__PURE__ */ jsx8(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx8(
10497
+ /* @__PURE__ */ jsxs6("div", { children: [
10498
+ /* @__PURE__ */ jsx11(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx11(
9740
10499
  Text,
9741
10500
  {
9742
10501
  $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
@@ -9747,7 +10506,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
9747
10506
  children: currentPlan.name
9748
10507
  }
9749
10508
  ) }),
9750
- props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx8(
10509
+ props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx11(
9751
10510
  Text,
9752
10511
  {
9753
10512
  $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
@@ -9758,7 +10517,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
9758
10517
  }
9759
10518
  )
9760
10519
  ] }),
9761
- props.header.price.isVisible && currentPlan.planPrice >= 0 && currentPlan.planPeriod && /* @__PURE__ */ jsxs3(
10520
+ props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs6(
9762
10521
  Text,
9763
10522
  {
9764
10523
  $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
@@ -9766,8 +10525,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
9766
10525
  $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
9767
10526
  $color: settings.theme.typography[props.header.price.fontStyle].color,
9768
10527
  children: [
9769
- "$",
9770
- currentPlan.planPrice,
10528
+ formatCurrency(currentPlan.planPrice),
9771
10529
  "/",
9772
10530
  currentPlan.planPeriod
9773
10531
  ]
@@ -9778,7 +10536,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
9778
10536
  )
9779
10537
  }
9780
10538
  ),
9781
- canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ jsx8(
10539
+ canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ jsx11(
9782
10540
  StyledButton,
9783
10541
  {
9784
10542
  onClick: () => {
@@ -9786,7 +10544,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
9786
10544
  },
9787
10545
  $size: props.callToAction.buttonSize,
9788
10546
  $color: props.callToAction.buttonStyle,
9789
- children: /* @__PURE__ */ jsx8(
10547
+ children: /* @__PURE__ */ jsx11(
9790
10548
  Text,
9791
10549
  {
9792
10550
  $font: settings.theme.typography.text.fontFamily,
@@ -9797,306 +10555,13 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
9797
10555
  )
9798
10556
  }
9799
10557
  ),
9800
- canChangePlan && layout === "checkout" && createPortal(
9801
- /* @__PURE__ */ jsxs3(OverlayWrapper, { children: [
9802
- /* @__PURE__ */ jsx8(OverlayHeader, { children: /* @__PURE__ */ jsxs3(Flex, { $gap: "1rem", children: [
9803
- /* @__PURE__ */ jsxs3(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
9804
- checkoutStage === "plan" ? /* @__PURE__ */ jsx8(
9805
- Box,
9806
- {
9807
- $width: "15px",
9808
- $height: "15px",
9809
- $backgroundColor: "white",
9810
- $border: "2px solid #DDDDDD",
9811
- $borderRadius: "999px"
9812
- }
9813
- ) : /* @__PURE__ */ jsx8(
9814
- IconRound,
9815
- {
9816
- name: "check",
9817
- style: {
9818
- color: "#FFFFFF",
9819
- backgroundColor: "#DDDDDD",
9820
- fontSize: 16,
9821
- width: "1rem",
9822
- height: "1rem"
9823
- }
9824
- }
9825
- ),
9826
- /* @__PURE__ */ jsx8(
9827
- "div",
9828
- {
9829
- tabIndex: 0,
9830
- ...checkoutStage === "plan" ? {
9831
- style: {
9832
- fontWeight: "700"
9833
- }
9834
- } : {
9835
- style: {
9836
- cursor: "pointer"
9837
- },
9838
- onClick: () => setCheckoutStage("plan")
9839
- },
9840
- children: "1. Select plan"
9841
- }
9842
- ),
9843
- /* @__PURE__ */ jsx8(
9844
- Icon2,
9845
- {
9846
- name: "chevron-right",
9847
- style: { fontSize: 16, color: "#D0D0D0" }
9848
- }
9849
- )
9850
- ] }),
9851
- /* @__PURE__ */ jsxs3(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
9852
- /* @__PURE__ */ jsx8(
9853
- Box,
9854
- {
9855
- $width: "15px",
9856
- $height: "15px",
9857
- $border: "2px solid #DDDDDD",
9858
- $borderRadius: "999px",
9859
- $backgroundColor: "white"
9860
- }
9861
- ),
9862
- /* @__PURE__ */ jsx8(
9863
- "div",
9864
- {
9865
- tabIndex: 0,
9866
- ...checkoutStage === "checkout" && {
9867
- style: {
9868
- fontWeight: "700"
9869
- }
9870
- },
9871
- children: "2. Checkout"
9872
- }
9873
- )
9874
- ] })
9875
- ] }) }),
9876
- /* @__PURE__ */ jsxs3(Flex, { $flexDirection: "row", $height: "100%", children: [
9877
- /* @__PURE__ */ jsxs3(
9878
- Flex,
9879
- {
9880
- $flexDirection: "column",
9881
- $gap: "1rem",
9882
- $padding: "2rem 2.5rem 2rem 2.5rem",
9883
- $backgroundColor: "#FBFBFB",
9884
- $borderRadius: "0 0.5rem 0",
9885
- $flex: "1",
9886
- $height: "100%",
9887
- children: [
9888
- checkoutStage === "plan" && /* @__PURE__ */ jsxs3(Fragment, { children: [
9889
- /* @__PURE__ */ jsxs3(
9890
- Flex,
9891
- {
9892
- $flexDirection: "column",
9893
- $gap: "1rem",
9894
- $marginBottom: "1rem",
9895
- children: [
9896
- /* @__PURE__ */ jsx8(
9897
- Text,
9898
- {
9899
- as: "h1",
9900
- id: "select-plan-dialog-label",
9901
- $size: 18,
9902
- $marginBottom: ".5rem",
9903
- children: "Select plan"
9904
- }
9905
- ),
9906
- /* @__PURE__ */ jsx8(
9907
- Text,
9908
- {
9909
- as: "p",
9910
- id: "select-plan-dialog-description",
9911
- $size: 14,
9912
- $weight: 400,
9913
- children: "Choose your base plan"
9914
- }
9915
- )
9916
- ]
9917
- }
9918
- ),
9919
- /* @__PURE__ */ jsx8(
9920
- Flex,
9921
- {
9922
- $flexDirection: "row",
9923
- $gap: "1rem",
9924
- $flex: "1",
9925
- $height: "100%",
9926
- children: availablePlans?.map((plan) => {
9927
- return /* @__PURE__ */ jsxs3(
9928
- Flex,
9929
- {
9930
- $height: "100%",
9931
- $flexDirection: "column",
9932
- $backgroundColor: "white",
9933
- $flex: "1",
9934
- $border: `2px solid ${plan.id === selectedPlan?.id ? "#194BFB" : "transparent"}`,
9935
- $borderRadius: ".5rem",
9936
- $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)",
9937
- children: [
9938
- /* @__PURE__ */ jsxs3(
9939
- Flex,
9940
- {
9941
- $flexDirection: "column",
9942
- $position: "relative",
9943
- $gap: "1rem",
9944
- $width: "100%",
9945
- $height: "auto",
9946
- $padding: "2rem 1.5rem 1.5rem",
9947
- $borderBottom: "1px solid #DEDEDE",
9948
- children: [
9949
- /* @__PURE__ */ jsx8(Text, { $size: 20, $weight: 600, children: plan.name }),
9950
- /* @__PURE__ */ jsx8(Text, { $size: 14, children: plan.description }),
9951
- /* @__PURE__ */ jsxs3(Text, { children: [
9952
- /* @__PURE__ */ jsx8(Box, { $display: "inline-block", $fontSize: ".90rem", children: "$" }),
9953
- /* @__PURE__ */ jsx8(Box, { $display: "inline-block", $fontSize: "1.5rem", children: (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price }),
9954
- /* @__PURE__ */ jsxs3(Box, { $display: "inline-block", $fontSize: ".75rem", children: [
9955
- "/",
9956
- planPeriod
9957
- ] })
9958
- ] }),
9959
- (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ jsx8(
9960
- Flex,
9961
- {
9962
- $position: "absolute",
9963
- $right: "1rem",
9964
- $top: "1rem",
9965
- $fontSize: ".625rem",
9966
- $color: "white",
9967
- $backgroundColor: "#194BFB",
9968
- $borderRadius: "999px",
9969
- $padding: ".125rem .85rem",
9970
- children: "Current plan"
9971
- }
9972
- )
9973
- ]
9974
- }
9975
- ),
9976
- /* @__PURE__ */ jsx8(
9977
- Flex,
9978
- {
9979
- $flexDirection: "column",
9980
- $position: "relative",
9981
- $gap: "0.5rem",
9982
- $flex: "1",
9983
- $width: "100%",
9984
- $height: "auto",
9985
- $padding: "1.5rem",
9986
- children: plan.features.map((feature) => {
9987
- return /* @__PURE__ */ jsxs3(
9988
- Flex,
9989
- {
9990
- $flexShrink: "0",
9991
- $gap: "1rem",
9992
- children: [
9993
- /* @__PURE__ */ jsx8(
9994
- IconRound,
9995
- {
9996
- name: feature.icon,
9997
- size: "tn",
9998
- colors: ["#000000", "#F5F5F5"]
9999
- }
10000
- ),
10001
- /* @__PURE__ */ jsx8(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx8(Text, { $size: ".75rem", $color: "#00000", children: feature.name }) })
10002
- ]
10003
- },
10004
- feature.id
10005
- );
10006
- })
10007
- }
10008
- ),
10009
- /* @__PURE__ */ jsxs3(
10010
- Flex,
10011
- {
10012
- $flexDirection: "column",
10013
- $position: "relative",
10014
- $gap: "1rem",
10015
- $width: "100%",
10016
- $height: "auto",
10017
- $padding: "1.5rem",
10018
- children: [
10019
- plan.id === selectedPlan?.id && /* @__PURE__ */ jsxs3(
10020
- Flex,
10021
- {
10022
- $justifyContent: "center",
10023
- $alignItems: "center",
10024
- $gap: "0.25rem",
10025
- $fontSize: "0.9375rem",
10026
- $padding: "0.625rem 0",
10027
- children: [
10028
- /* @__PURE__ */ jsx8(
10029
- Icon2,
10030
- {
10031
- name: "check-rounded",
10032
- style: {
10033
- fontSize: 20,
10034
- lineHeight: "1",
10035
- color: "#194BFB"
10036
- }
10037
- }
10038
- ),
10039
- /* @__PURE__ */ jsx8(
10040
- "span",
10041
- {
10042
- style: {
10043
- color: "#7B7B7B",
10044
- lineHeight: "1.4"
10045
- },
10046
- children: "Selected"
10047
- }
10048
- )
10049
- ]
10050
- }
10051
- ),
10052
- !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ jsx8(
10053
- StyledButton,
10054
- {
10055
- $size: "sm",
10056
- $color: "secondary",
10057
- $variant: "outline",
10058
- onClick: () => {
10059
- setSelectedPlan(plan);
10060
- },
10061
- children: "Select"
10062
- }
10063
- )
10064
- ]
10065
- }
10066
- )
10067
- ]
10068
- },
10069
- plan.id
10070
- );
10071
- })
10072
- }
10073
- )
10074
- ] }),
10075
- selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ jsx8(CheckoutForm, { plan: selectedPlan, period: planPeriod })
10076
- ]
10077
- }
10078
- ),
10079
- /* @__PURE__ */ jsx8(
10080
- OverlaySideBar,
10081
- {
10082
- pricePeriod: planPeriod,
10083
- setPricePeriod: setPlanPeriod,
10084
- checkoutStage,
10085
- setCheckoutStage,
10086
- currentPlan,
10087
- selectedPlan
10088
- }
10089
- )
10090
- ] })
10091
- ] }),
10092
- portal || document.body
10093
- )
10558
+ canChangePlan && layout === "checkout" && createPortal(/* @__PURE__ */ jsx11(CheckoutDialog, {}), portal || document.body)
10094
10559
  ] });
10095
10560
  });
10096
10561
 
10097
10562
  // src/components/elements/included-features/IncludedFeatures.tsx
10098
- import { forwardRef as forwardRef2, useMemo as useMemo3 } from "react";
10099
- import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
10563
+ import { forwardRef as forwardRef2, useMemo as useMemo4 } from "react";
10564
+ import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
10100
10565
  function resolveDesignProps2(props) {
10101
10566
  return {
10102
10567
  header: {
@@ -10122,7 +10587,7 @@ function resolveDesignProps2(props) {
10122
10587
  var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10123
10588
  const props = resolveDesignProps2(rest);
10124
10589
  const { data, settings } = useEmbed();
10125
- const features = useMemo3(() => {
10590
+ const features = useMemo4(() => {
10126
10591
  return (data.featureUsage?.features || []).map(
10127
10592
  ({
10128
10593
  access,
@@ -10149,8 +10614,8 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10149
10614
  }
10150
10615
  );
10151
10616
  }, [data.featureUsage]);
10152
- return /* @__PURE__ */ jsxs4(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
10153
- props.header.isVisible && /* @__PURE__ */ jsx9(Box, { children: /* @__PURE__ */ jsx9(
10617
+ return /* @__PURE__ */ jsxs7(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
10618
+ props.header.isVisible && /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
10154
10619
  Text,
10155
10620
  {
10156
10621
  $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10167,7 +10632,7 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10167
10632
  }
10168
10633
  return [
10169
10634
  ...acc,
10170
- /* @__PURE__ */ jsxs4(
10635
+ /* @__PURE__ */ jsxs7(
10171
10636
  Flex,
10172
10637
  {
10173
10638
  $flexWrap: "wrap",
@@ -10175,19 +10640,19 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10175
10640
  $alignItems: "center",
10176
10641
  $gap: "1rem",
10177
10642
  children: [
10178
- /* @__PURE__ */ jsxs4(Flex, { $gap: "1rem", children: [
10179
- props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx9(
10643
+ /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
10644
+ props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx12(
10180
10645
  IconRound,
10181
10646
  {
10182
10647
  name: feature.icon,
10183
10648
  size: "sm",
10184
10649
  colors: [
10185
- settings.theme.card.background,
10186
- settings.theme.primary
10650
+ settings.theme.primary,
10651
+ `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`
10187
10652
  ]
10188
10653
  }
10189
10654
  ),
10190
- feature?.name && /* @__PURE__ */ jsx9(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx9(
10655
+ feature?.name && /* @__PURE__ */ jsx12(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx12(
10191
10656
  Text,
10192
10657
  {
10193
10658
  $font: settings.theme.typography[props.icons.fontStyle].fontFamily,
@@ -10198,8 +10663,8 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10198
10663
  }
10199
10664
  ) })
10200
10665
  ] }),
10201
- allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs4(Box, { $textAlign: "right", children: [
10202
- props.entitlement.isVisible && /* @__PURE__ */ jsx9(
10666
+ allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs7(Box, { $textAlign: "right", children: [
10667
+ props.entitlement.isVisible && /* @__PURE__ */ jsx12(
10203
10668
  Text,
10204
10669
  {
10205
10670
  as: Box,
@@ -10210,7 +10675,7 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10210
10675
  children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
10211
10676
  }
10212
10677
  ),
10213
- props.usage.isVisible && /* @__PURE__ */ jsx9(
10678
+ props.usage.isVisible && /* @__PURE__ */ jsx12(
10214
10679
  Text,
10215
10680
  {
10216
10681
  as: Box,
@@ -10234,8 +10699,8 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10234
10699
  });
10235
10700
 
10236
10701
  // src/components/elements/metered-features/MeteredFeatures.tsx
10237
- import { forwardRef as forwardRef3, useMemo as useMemo4 } from "react";
10238
- import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
10702
+ import { forwardRef as forwardRef3, useMemo as useMemo5 } from "react";
10703
+ import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
10239
10704
  function resolveDesignProps3(props) {
10240
10705
  return {
10241
10706
  isVisible: props.isVisible ?? true,
@@ -10260,14 +10725,14 @@ function resolveDesignProps3(props) {
10260
10725
  callToAction: {
10261
10726
  isVisible: props.callToAction?.isVisible ?? true,
10262
10727
  buttonSize: props.callToAction?.buttonSize ?? "md",
10263
- buttonStyle: props.callToAction?.buttonStyle ?? "secondary"
10728
+ buttonStyle: props.callToAction?.buttonStyle ?? "primary"
10264
10729
  }
10265
10730
  };
10266
10731
  }
10267
10732
  var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10268
10733
  const props = resolveDesignProps3(rest);
10269
10734
  const { data, settings } = useEmbed();
10270
- const features = useMemo4(() => {
10735
+ const features = useMemo5(() => {
10271
10736
  return (data.featureUsage?.features || []).map(
10272
10737
  ({
10273
10738
  access,
@@ -10294,19 +10759,19 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10294
10759
  }
10295
10760
  );
10296
10761
  }, [data.featureUsage]);
10297
- return /* @__PURE__ */ jsx10(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
10762
+ return /* @__PURE__ */ jsx13(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
10298
10763
  (acc, { allocation, allocationType, feature, usage }, index) => {
10299
10764
  if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
10300
10765
  return acc;
10301
10766
  }
10302
10767
  return [
10303
10768
  ...acc,
10304
- /* @__PURE__ */ jsxs5(Flex, { $gap: "1.5rem", children: [
10305
- props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx10(Box, { $flexShrink: "0", children: /* @__PURE__ */ jsx10(IconRound, { name: feature.icon, size: "sm" }) }),
10306
- /* @__PURE__ */ jsxs5(Box, { $flexGrow: "1", children: [
10307
- /* @__PURE__ */ jsxs5(Flex, { children: [
10308
- feature?.name && /* @__PURE__ */ jsxs5(Box, { $flexGrow: "1", children: [
10309
- /* @__PURE__ */ jsx10(
10769
+ /* @__PURE__ */ jsxs8(Flex, { $gap: "1.5rem", children: [
10770
+ props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx13(Box, { $flexShrink: "0", children: /* @__PURE__ */ jsx13(IconRound, { name: feature.icon, size: "sm" }) }),
10771
+ /* @__PURE__ */ jsxs8(Box, { $flexGrow: "1", children: [
10772
+ /* @__PURE__ */ jsxs8(Flex, { children: [
10773
+ feature?.name && /* @__PURE__ */ jsxs8(Box, { $flexGrow: "1", children: [
10774
+ /* @__PURE__ */ jsx13(
10310
10775
  Text,
10311
10776
  {
10312
10777
  as: Box,
@@ -10317,7 +10782,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10317
10782
  children: feature.name
10318
10783
  }
10319
10784
  ),
10320
- props.description.isVisible && /* @__PURE__ */ jsx10(
10785
+ props.description.isVisible && /* @__PURE__ */ jsx13(
10321
10786
  Text,
10322
10787
  {
10323
10788
  as: Box,
@@ -10329,8 +10794,8 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10329
10794
  }
10330
10795
  )
10331
10796
  ] }),
10332
- allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs5(Box, { $textAlign: "right", children: [
10333
- props.allocation.isVisible && /* @__PURE__ */ jsx10(
10797
+ allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs8(Box, { $textAlign: "right", children: [
10798
+ props.allocation.isVisible && /* @__PURE__ */ jsx13(
10334
10799
  Text,
10335
10800
  {
10336
10801
  as: Box,
@@ -10341,7 +10806,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10341
10806
  children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
10342
10807
  }
10343
10808
  ),
10344
- props.usage.isVisible && /* @__PURE__ */ jsx10(
10809
+ props.usage.isVisible && /* @__PURE__ */ jsx13(
10345
10810
  Text,
10346
10811
  {
10347
10812
  as: Box,
@@ -10354,7 +10819,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10354
10819
  )
10355
10820
  ] })
10356
10821
  ] }),
10357
- typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(
10822
+ typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
10358
10823
  ProgressBar,
10359
10824
  {
10360
10825
  progress: usage / allocation * 100,
@@ -10372,8 +10837,8 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10372
10837
  });
10373
10838
 
10374
10839
  // src/components/elements/upcoming-bill/UpcomingBill.tsx
10375
- import { forwardRef as forwardRef4, useMemo as useMemo5 } from "react";
10376
- import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
10840
+ import { forwardRef as forwardRef4, useMemo as useMemo6 } from "react";
10841
+ import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
10377
10842
  function resolveDesignProps4(props) {
10378
10843
  return {
10379
10844
  header: {
@@ -10395,7 +10860,7 @@ function resolveDesignProps4(props) {
10395
10860
  var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
10396
10861
  const props = resolveDesignProps4(rest);
10397
10862
  const { data, settings, stripe } = useEmbed();
10398
- const { upcomingInvoice } = useMemo5(() => {
10863
+ const { upcomingInvoice } = useMemo6(() => {
10399
10864
  return {
10400
10865
  upcomingInvoice: {
10401
10866
  ...data.upcomingInvoice?.amountDue && {
@@ -10413,14 +10878,14 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
10413
10878
  if (!stripe || !data.upcomingInvoice) {
10414
10879
  return null;
10415
10880
  }
10416
- return /* @__PURE__ */ jsxs6("div", { ref, className, children: [
10417
- props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsx11(
10881
+ return /* @__PURE__ */ jsxs9("div", { ref, className, children: [
10882
+ props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsx14(
10418
10883
  Flex,
10419
10884
  {
10420
10885
  $justifyContent: "space-between",
10421
10886
  $alignItems: "center",
10422
10887
  $margin: "0 0 0.75rem",
10423
- children: /* @__PURE__ */ jsxs6(
10888
+ children: /* @__PURE__ */ jsxs9(
10424
10889
  Text,
10425
10890
  {
10426
10891
  $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10436,8 +10901,8 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
10436
10901
  )
10437
10902
  }
10438
10903
  ),
10439
- upcomingInvoice.amountDue && /* @__PURE__ */ jsxs6(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
10440
- props.price.isVisible && /* @__PURE__ */ jsx11(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsxs6(
10904
+ upcomingInvoice.amountDue && /* @__PURE__ */ jsxs9(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
10905
+ props.price.isVisible && /* @__PURE__ */ jsx14(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx14(
10441
10906
  Text,
10442
10907
  {
10443
10908
  $font: settings.theme.typography[props.price.fontStyle].fontFamily,
@@ -10445,20 +10910,10 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
10445
10910
  $weight: settings.theme.typography[props.price.fontStyle].fontWeight,
10446
10911
  $color: settings.theme.typography[props.price.fontStyle].color,
10447
10912
  $lineHeight: 1,
10448
- children: [
10449
- /* @__PURE__ */ jsx11(
10450
- Text,
10451
- {
10452
- $size: "0.75em",
10453
- $color: settings.theme.typography[props.price.fontStyle].color,
10454
- children: "$"
10455
- }
10456
- ),
10457
- upcomingInvoice.amountDue
10458
- ]
10913
+ children: formatCurrency(upcomingInvoice.amountDue)
10459
10914
  }
10460
10915
  ) }),
10461
- /* @__PURE__ */ jsx11(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsx11(
10916
+ /* @__PURE__ */ jsx14(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsx14(
10462
10917
  Text,
10463
10918
  {
10464
10919
  $font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
@@ -10473,9 +10928,9 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
10473
10928
  });
10474
10929
 
10475
10930
  // src/components/elements/payment-method/PaymentMethod.tsx
10476
- import { forwardRef as forwardRef5, useMemo as useMemo6 } from "react";
10931
+ import { forwardRef as forwardRef5, useMemo as useMemo7 } from "react";
10477
10932
  import { createPortal as createPortal2 } from "react-dom";
10478
- import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
10933
+ import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
10479
10934
  var resolveDesignProps5 = (props) => {
10480
10935
  return {
10481
10936
  header: {
@@ -10490,7 +10945,7 @@ var resolveDesignProps5 = (props) => {
10490
10945
  var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref) => {
10491
10946
  const props = resolveDesignProps5(rest);
10492
10947
  const { data, settings, stripe, layout } = useEmbed();
10493
- const paymentMethod = useMemo6(() => {
10948
+ const paymentMethod = useMemo7(() => {
10494
10949
  const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
10495
10950
  let monthsToExpiration;
10496
10951
  if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
@@ -10509,15 +10964,15 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10509
10964
  if (!stripe || !data.subscription?.paymentMethod) {
10510
10965
  return null;
10511
10966
  }
10512
- return /* @__PURE__ */ jsxs7("div", { ref, className, children: [
10513
- props.header.isVisible && /* @__PURE__ */ jsxs7(
10967
+ return /* @__PURE__ */ jsxs10("div", { ref, className, children: [
10968
+ props.header.isVisible && /* @__PURE__ */ jsxs10(
10514
10969
  Flex,
10515
10970
  {
10516
10971
  $justifyContent: "space-between",
10517
10972
  $alignItems: "center",
10518
10973
  $margin: "0 0 1rem",
10519
10974
  children: [
10520
- /* @__PURE__ */ jsx12(
10975
+ /* @__PURE__ */ jsx15(
10521
10976
  Text,
10522
10977
  {
10523
10978
  $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10527,7 +10982,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10527
10982
  children: "Payment Method"
10528
10983
  }
10529
10984
  ),
10530
- typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ jsx12(
10985
+ typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ jsx15(
10531
10986
  Text,
10532
10987
  {
10533
10988
  $font: settings.theme.typography.text.fontFamily,
@@ -10539,7 +10994,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10539
10994
  ]
10540
10995
  }
10541
10996
  ),
10542
- paymentMethod.cardLast4 && /* @__PURE__ */ jsx12(
10997
+ paymentMethod.cardLast4 && /* @__PURE__ */ jsx15(
10543
10998
  Flex,
10544
10999
  {
10545
11000
  $justifyContent: "space-between",
@@ -10548,16 +11003,16 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10548
11003
  $background: `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`,
10549
11004
  $padding: "0.375rem 1rem",
10550
11005
  $borderRadius: "9999px",
10551
- children: /* @__PURE__ */ jsxs7(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
11006
+ children: /* @__PURE__ */ jsxs10(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
10552
11007
  "\u{1F4B3} Card ending in ",
10553
11008
  paymentMethod.cardLast4
10554
11009
  ] })
10555
11010
  }
10556
11011
  ),
10557
11012
  layout === "payment" && createPortal2(
10558
- /* @__PURE__ */ jsxs7(OverlayWrapper, { size: "md", children: [
10559
- /* @__PURE__ */ jsx12(OverlayHeader, { children: /* @__PURE__ */ jsx12(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
10560
- /* @__PURE__ */ jsxs7(
11013
+ /* @__PURE__ */ jsxs10(Modal, { size: "md", children: [
11014
+ /* @__PURE__ */ jsx15(ModalHeader, { children: /* @__PURE__ */ jsx15(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
11015
+ /* @__PURE__ */ jsxs10(
10561
11016
  Flex,
10562
11017
  {
10563
11018
  $flexDirection: "column",
@@ -10565,7 +11020,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10565
11020
  $height: "100%",
10566
11021
  $gap: "1.5rem",
10567
11022
  children: [
10568
- /* @__PURE__ */ jsx12(
11023
+ /* @__PURE__ */ jsx15(
10569
11024
  Flex,
10570
11025
  {
10571
11026
  $flexDirection: "column",
@@ -10574,8 +11029,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10574
11029
  $borderRadius: "0 0 0.5rem 0.5rem",
10575
11030
  $flex: "1",
10576
11031
  $height: "100%",
10577
- children: /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $height: "100%", children: [
10578
- /* @__PURE__ */ jsx12(
11032
+ children: /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $height: "100%", children: [
11033
+ /* @__PURE__ */ jsx15(
10579
11034
  Box,
10580
11035
  {
10581
11036
  $fontSize: "18px",
@@ -10585,8 +11040,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10585
11040
  children: "Default"
10586
11041
  }
10587
11042
  ),
10588
- /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
10589
- /* @__PURE__ */ jsx12(
11043
+ /* @__PURE__ */ jsxs10(Flex, { $gap: "1rem", children: [
11044
+ /* @__PURE__ */ jsx15(
10590
11045
  Flex,
10591
11046
  {
10592
11047
  $alignItems: "center",
@@ -10594,69 +11049,52 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10594
11049
  $border: "1px solid #E2E5E9",
10595
11050
  $borderRadius: ".5rem",
10596
11051
  $backgroundColor: "#ffffff",
10597
- $flexDirection: "row",
10598
11052
  $gap: "1rem",
10599
11053
  $width: "100%",
10600
- children: /* @__PURE__ */ jsxs7(
10601
- Flex,
10602
- {
10603
- $flexDirection: "row",
10604
- $justifyContent: "space-between",
10605
- $flex: "1",
10606
- children: [
10607
- /* @__PURE__ */ jsxs7(
10608
- Flex,
10609
- {
10610
- $flexDirection: "row",
10611
- $alignItems: "center",
10612
- $gap: "1rem",
10613
- children: [
10614
- /* @__PURE__ */ jsx12(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx12(
10615
- "svg",
10616
- {
10617
- viewBox: "0 0 24 16",
10618
- fill: "none",
10619
- xmlns: "http://www.w3.org/2000/svg",
10620
- width: "26px",
10621
- height: "auto",
10622
- children: /* @__PURE__ */ jsxs7("g", { children: [
10623
- /* @__PURE__ */ jsx12(
10624
- "rect",
10625
- {
10626
- stroke: "#DDD",
10627
- fill: "#FFF",
10628
- x: ".25",
10629
- y: ".25",
10630
- width: "23",
10631
- height: "15.5",
10632
- rx: "2"
10633
- }
10634
- ),
10635
- /* @__PURE__ */ jsx12(
10636
- "path",
10637
- {
10638
- 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",
10639
- fill: "#1434CB"
10640
- }
10641
- )
10642
- ] })
10643
- }
10644
- ) }),
10645
- /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
10646
- ]
10647
- }
10648
- ),
10649
- /* @__PURE__ */ jsx12(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx12(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
10650
- ]
10651
- }
10652
- )
11054
+ children: /* @__PURE__ */ jsxs10(Flex, { $justifyContent: "space-between", $flex: "1", children: [
11055
+ /* @__PURE__ */ jsxs10(Flex, { $alignItems: "center", $gap: "1rem", children: [
11056
+ /* @__PURE__ */ jsx15(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx15(
11057
+ "svg",
11058
+ {
11059
+ viewBox: "0 0 24 16",
11060
+ fill: "none",
11061
+ xmlns: "http://www.w3.org/2000/svg",
11062
+ width: "26px",
11063
+ height: "auto",
11064
+ children: /* @__PURE__ */ jsxs10("g", { children: [
11065
+ /* @__PURE__ */ jsx15(
11066
+ "rect",
11067
+ {
11068
+ stroke: "#DDD",
11069
+ fill: "#FFF",
11070
+ x: ".25",
11071
+ y: ".25",
11072
+ width: "23",
11073
+ height: "15.5",
11074
+ rx: "2"
11075
+ }
11076
+ ),
11077
+ /* @__PURE__ */ jsx15(
11078
+ "path",
11079
+ {
11080
+ 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",
11081
+ fill: "#1434CB"
11082
+ }
11083
+ )
11084
+ ] })
11085
+ }
11086
+ ) }),
11087
+ /* @__PURE__ */ jsx15(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
11088
+ ] }),
11089
+ /* @__PURE__ */ jsx15(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx15(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
11090
+ ] })
10653
11091
  }
10654
11092
  ),
10655
- /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsx12(
11093
+ /* @__PURE__ */ jsx15(Flex, { children: /* @__PURE__ */ jsx15(
10656
11094
  StyledButton,
10657
11095
  {
10658
11096
  $size: "sm",
10659
- $color: "secondary",
11097
+ $color: "primary",
10660
11098
  $variant: "outline",
10661
11099
  style: {
10662
11100
  whiteSpace: "nowrap",
@@ -10670,7 +11108,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10670
11108
  ] })
10671
11109
  }
10672
11110
  ),
10673
- /* @__PURE__ */ jsx12(
11111
+ /* @__PURE__ */ jsx15(
10674
11112
  Flex,
10675
11113
  {
10676
11114
  $flexDirection: "column",
@@ -10679,8 +11117,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10679
11117
  $borderRadius: "0 0 0.5rem 0.5rem",
10680
11118
  $flex: "1",
10681
11119
  $height: "100%",
10682
- children: /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $height: "100%", children: [
10683
- /* @__PURE__ */ jsx12(
11120
+ children: /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $height: "100%", children: [
11121
+ /* @__PURE__ */ jsx15(
10684
11122
  Box,
10685
11123
  {
10686
11124
  $fontSize: "18px",
@@ -10690,8 +11128,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10690
11128
  children: "Others"
10691
11129
  }
10692
11130
  ),
10693
- /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
10694
- /* @__PURE__ */ jsx12(
11131
+ /* @__PURE__ */ jsxs10(Flex, { $gap: "1rem", children: [
11132
+ /* @__PURE__ */ jsx15(
10695
11133
  Flex,
10696
11134
  {
10697
11135
  $alignItems: "center",
@@ -10699,70 +11137,53 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10699
11137
  $border: "1px solid #E2E5E9",
10700
11138
  $borderRadius: ".5rem",
10701
11139
  $backgroundColor: "#ffffff",
10702
- $flexDirection: "row",
10703
11140
  $gap: "1rem",
10704
11141
  $width: "100%",
10705
- children: /* @__PURE__ */ jsxs7(
10706
- Flex,
10707
- {
10708
- $flexDirection: "row",
10709
- $justifyContent: "space-between",
10710
- $flex: "1",
10711
- children: [
10712
- /* @__PURE__ */ jsxs7(
10713
- Flex,
10714
- {
10715
- $flexDirection: "row",
10716
- $alignItems: "center",
10717
- $gap: "1rem",
10718
- children: [
10719
- /* @__PURE__ */ jsx12(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx12(
10720
- "svg",
10721
- {
10722
- viewBox: "0 0 24 16",
10723
- fill: "none",
10724
- xmlns: "http://www.w3.org/2000/svg",
10725
- width: "26px",
10726
- height: "auto",
10727
- children: /* @__PURE__ */ jsxs7("g", { children: [
10728
- /* @__PURE__ */ jsx12(
10729
- "rect",
10730
- {
10731
- stroke: "#DDD",
10732
- fill: "#FFF",
10733
- x: ".25",
10734
- y: ".25",
10735
- width: "23",
10736
- height: "15.5",
10737
- rx: "2"
10738
- }
10739
- ),
10740
- /* @__PURE__ */ jsx12(
10741
- "path",
10742
- {
10743
- 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",
10744
- fill: "#1434CB"
10745
- }
10746
- )
10747
- ] })
10748
- }
10749
- ) }),
10750
- /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
10751
- ]
10752
- }
10753
- ),
10754
- /* @__PURE__ */ jsx12(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx12(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
10755
- ]
10756
- }
10757
- )
11142
+ children: /* @__PURE__ */ jsxs10(Flex, { $justifyContent: "space-between", $flex: "1", children: [
11143
+ /* @__PURE__ */ jsxs10(Flex, { $alignItems: "center", $gap: "1rem", children: [
11144
+ /* @__PURE__ */ jsx15(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx15(
11145
+ "svg",
11146
+ {
11147
+ viewBox: "0 0 24 16",
11148
+ fill: "none",
11149
+ xmlns: "http://www.w3.org/2000/svg",
11150
+ width: "26px",
11151
+ height: "auto",
11152
+ children: /* @__PURE__ */ jsxs10("g", { children: [
11153
+ /* @__PURE__ */ jsx15(
11154
+ "rect",
11155
+ {
11156
+ stroke: "#DDD",
11157
+ fill: "#FFF",
11158
+ x: ".25",
11159
+ y: ".25",
11160
+ width: "23",
11161
+ height: "15.5",
11162
+ rx: "2"
11163
+ }
11164
+ ),
11165
+ /* @__PURE__ */ jsx15(
11166
+ "path",
11167
+ {
11168
+ 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",
11169
+ fill: "#1434CB"
11170
+ }
11171
+ )
11172
+ ] })
11173
+ }
11174
+ ) }),
11175
+ /* @__PURE__ */ jsx15(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
11176
+ ] }),
11177
+ /* @__PURE__ */ jsx15(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx15(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
11178
+ ] })
10758
11179
  }
10759
11180
  ),
10760
- /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
10761
- /* @__PURE__ */ jsx12(
11181
+ /* @__PURE__ */ jsxs10(Flex, { $gap: "1rem", children: [
11182
+ /* @__PURE__ */ jsx15(
10762
11183
  StyledButton,
10763
11184
  {
10764
11185
  $size: "sm",
10765
- $color: "secondary",
11186
+ $color: "primary",
10766
11187
  $variant: "outline",
10767
11188
  style: {
10768
11189
  whiteSpace: "nowrap",
@@ -10772,11 +11193,11 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10772
11193
  children: "Make Default"
10773
11194
  }
10774
11195
  ),
10775
- /* @__PURE__ */ jsx12(
11196
+ /* @__PURE__ */ jsx15(
10776
11197
  StyledButton,
10777
11198
  {
10778
11199
  $size: "sm",
10779
- $color: "secondary",
11200
+ $color: "primary",
10780
11201
  $variant: "outline",
10781
11202
  style: {
10782
11203
  whiteSpace: "nowrap",
@@ -10801,8 +11222,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10801
11222
  });
10802
11223
 
10803
11224
  // src/components/elements/invoices/Invoices.tsx
10804
- import { forwardRef as forwardRef6, useMemo as useMemo7 } from "react";
10805
- import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
11225
+ import { forwardRef as forwardRef6, useMemo as useMemo8 } from "react";
11226
+ import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
10806
11227
  function resolveDesignProps6(props) {
10807
11228
  return {
10808
11229
  header: {
@@ -10830,7 +11251,7 @@ function resolveDesignProps6(props) {
10830
11251
  var Invoices = forwardRef6(({ className, ...rest }, ref) => {
10831
11252
  const props = resolveDesignProps6(rest);
10832
11253
  const { settings } = useEmbed();
10833
- const { invoices } = useMemo7(() => {
11254
+ const { invoices } = useMemo8(() => {
10834
11255
  return {
10835
11256
  invoices: [
10836
11257
  {
@@ -10844,8 +11265,8 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
10844
11265
  ]
10845
11266
  };
10846
11267
  }, []);
10847
- return /* @__PURE__ */ jsx13("div", { ref, className, children: /* @__PURE__ */ jsxs8(Flex, { $flexDirection: "column", $gap: "1rem", children: [
10848
- props.header.isVisible && /* @__PURE__ */ jsx13(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx13(
11268
+ return /* @__PURE__ */ jsx16("div", { ref, className, children: /* @__PURE__ */ jsxs11(Flex, { $flexDirection: "column", $gap: "1rem", children: [
11269
+ props.header.isVisible && /* @__PURE__ */ jsx16(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx16(
10849
11270
  Text,
10850
11271
  {
10851
11272
  $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10855,12 +11276,12 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
10855
11276
  children: "Invoices"
10856
11277
  }
10857
11278
  ) }),
10858
- /* @__PURE__ */ jsx13(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
11279
+ /* @__PURE__ */ jsx16(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
10859
11280
  0,
10860
11281
  props.limit.isVisible && props.limit.number || invoices.length
10861
11282
  ).map(({ date, amount }, index) => {
10862
- return /* @__PURE__ */ jsxs8(Flex, { $justifyContent: "space-between", children: [
10863
- props.date.isVisible && /* @__PURE__ */ jsx13(
11283
+ return /* @__PURE__ */ jsxs11(Flex, { $justifyContent: "space-between", children: [
11284
+ props.date.isVisible && /* @__PURE__ */ jsx16(
10864
11285
  Text,
10865
11286
  {
10866
11287
  $font: settings.theme.typography[props.date.fontStyle].fontFamily,
@@ -10870,7 +11291,7 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
10870
11291
  children: toPrettyDate(date)
10871
11292
  }
10872
11293
  ),
10873
- props.amount.isVisible && /* @__PURE__ */ jsxs8(
11294
+ props.amount.isVisible && /* @__PURE__ */ jsxs11(
10874
11295
  Text,
10875
11296
  {
10876
11297
  $font: settings.theme.typography[props.amount.fontStyle].fontFamily,
@@ -10885,9 +11306,9 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
10885
11306
  )
10886
11307
  ] }, index);
10887
11308
  }) }),
10888
- props.collapse.isVisible && /* @__PURE__ */ jsxs8(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
10889
- /* @__PURE__ */ jsx13(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
10890
- /* @__PURE__ */ jsx13(
11309
+ props.collapse.isVisible && /* @__PURE__ */ jsxs11(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
11310
+ /* @__PURE__ */ jsx16(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
11311
+ /* @__PURE__ */ jsx16(
10891
11312
  Text,
10892
11313
  {
10893
11314
  $font: settings.theme.typography[props.collapse.fontStyle].fontFamily,
@@ -10902,17 +11323,17 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
10902
11323
  });
10903
11324
 
10904
11325
  // src/components/embed/ComponentTree.tsx
10905
- import { useEffect as useEffect4, useState as useState6 } from "react";
11326
+ import { useEffect as useEffect5, useState as useState6 } from "react";
10906
11327
 
10907
11328
  // src/components/embed/renderer.ts
10908
11329
  import { createElement } from "react";
10909
11330
 
10910
11331
  // src/components/layout/root/Root.tsx
10911
11332
  import { forwardRef as forwardRef7 } from "react";
10912
- import { jsx as jsx14 } from "react/jsx-runtime";
11333
+ import { jsx as jsx17 } from "react/jsx-runtime";
10913
11334
  var Root = forwardRef7(
10914
11335
  (props, ref) => {
10915
- return /* @__PURE__ */ jsx14("div", { ref, ...props });
11336
+ return /* @__PURE__ */ jsx17("div", { ref, ...props });
10916
11337
  }
10917
11338
  );
10918
11339
 
@@ -10928,17 +11349,53 @@ var StyledViewport = dt.div`
10928
11349
  `;
10929
11350
 
10930
11351
  // src/components/layout/viewport/Viewport.tsx
10931
- import { jsx as jsx15 } from "react/jsx-runtime";
11352
+ import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
10932
11353
  var Viewport = forwardRef8(
10933
11354
  ({ children, ...props }, ref) => {
10934
11355
  const { settings, layout } = useEmbed();
10935
- return /* @__PURE__ */ jsx15(
11356
+ return /* @__PURE__ */ jsx18(
10936
11357
  StyledViewport,
10937
11358
  {
10938
11359
  ref,
10939
11360
  $numberOfColumns: settings.theme.numberOfColumns,
10940
11361
  ...props,
10941
- children: layout === "disabled" ? /* @__PURE__ */ jsx15("div", { className: "", children: "DISABLED" }) : children
11362
+ children: layout === "disabled" ? /* @__PURE__ */ jsx18(Box, { $width: "100%", children: /* @__PURE__ */ jsxs12(
11363
+ Flex,
11364
+ {
11365
+ $flexDirection: "column",
11366
+ $padding: `${settings.theme.card.padding / 16}rem`,
11367
+ $width: "100%",
11368
+ $height: "auto",
11369
+ $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
11370
+ $backgroundColor: settings.theme.card.background,
11371
+ $alignItems: "center",
11372
+ $justifyContent: "center",
11373
+ children: [
11374
+ /* @__PURE__ */ jsx18(
11375
+ Box,
11376
+ {
11377
+ $marginBottom: "8px",
11378
+ $fontSize: `${settings.theme.typography.heading1.fontSize / 16}rem`,
11379
+ $fontFamily: settings.theme.typography.heading1.fontFamily,
11380
+ $fontWeight: settings.theme.typography.heading1.fontWeight,
11381
+ $color: settings.theme.typography.heading1.color,
11382
+ children: "Coming soon"
11383
+ }
11384
+ ),
11385
+ /* @__PURE__ */ jsx18(
11386
+ Box,
11387
+ {
11388
+ $marginBottom: "8px",
11389
+ $fontSize: `${settings.theme.typography.text.fontSize / 16}rem`,
11390
+ $fontFamily: settings.theme.typography.text.fontFamily,
11391
+ $fontWeight: settings.theme.typography.text.fontWeight,
11392
+ $color: settings.theme.typography.text.color,
11393
+ children: "The plan manager will be back very soon."
11394
+ }
11395
+ )
11396
+ ]
11397
+ }
11398
+ ) }) : children
10942
11399
  }
10943
11400
  );
10944
11401
  }
@@ -10977,7 +11434,7 @@ var StyledCard = dt.div(
10977
11434
 
10978
11435
  ${() => {
10979
11436
  const { l: l2 } = hexToHSL(theme.card.background);
10980
- const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
11437
+ const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 20);
10981
11438
  const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
10982
11439
  const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
10983
11440
  if ($sectionLayout === "merged") {
@@ -11009,11 +11466,11 @@ var StyledCard = dt.div(
11009
11466
  );
11010
11467
 
11011
11468
  // src/components/layout/card/Card.tsx
11012
- import { jsx as jsx16 } from "react/jsx-runtime";
11469
+ import { jsx as jsx19 } from "react/jsx-runtime";
11013
11470
  var Card = forwardRef9(
11014
11471
  ({ children, className }, ref) => {
11015
11472
  const { settings } = useEmbed();
11016
- return /* @__PURE__ */ jsx16(
11473
+ return /* @__PURE__ */ jsx19(
11017
11474
  StyledCard,
11018
11475
  {
11019
11476
  ref,
@@ -11035,10 +11492,10 @@ var StyledColumn = dt.div`
11035
11492
  `;
11036
11493
 
11037
11494
  // src/components/layout/column/Column.tsx
11038
- import { jsx as jsx17 } from "react/jsx-runtime";
11495
+ import { jsx as jsx20 } from "react/jsx-runtime";
11039
11496
  var Column = forwardRef10(
11040
11497
  ({ children, ...props }, ref) => {
11041
- return /* @__PURE__ */ jsx17(StyledColumn, { ref, ...props, children: /* @__PURE__ */ jsx17(Card, { children }) });
11498
+ return /* @__PURE__ */ jsx20(StyledColumn, { ref, ...props, children: /* @__PURE__ */ jsx20(Card, { children }) });
11042
11499
  }
11043
11500
  );
11044
11501
 
@@ -11084,31 +11541,101 @@ function createRenderer(options) {
11084
11541
  };
11085
11542
  }
11086
11543
 
11544
+ // src/components/ui/loader/styles.ts
11545
+ var spin = mt`
11546
+ 0% {
11547
+ transform: rotate(0deg);
11548
+ }
11549
+ 100% {
11550
+ transform: rotate(360deg);
11551
+ }
11552
+ `;
11553
+ var Loader = dt.div(() => {
11554
+ const { settings } = useEmbed();
11555
+ return lt`
11556
+ border: 4px solid rgba(0, 0, 0, 0.1);
11557
+ border-top: 4px solid ${settings.theme.primary};
11558
+ border-radius: 50%;
11559
+ width: 40px;
11560
+ height: 40px;
11561
+ animation: ${spin} 1.5s linear infinite;
11562
+ display: inline-block;
11563
+ `;
11564
+ });
11565
+
11087
11566
  // src/components/embed/ComponentTree.tsx
11088
- import { Fragment as Fragment2, jsx as jsx18 } from "react/jsx-runtime";
11567
+ import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
11089
11568
  var ComponentTree = () => {
11090
- const [children, setChildren] = useState6("Loading");
11091
- const { error, nodes } = useEmbed();
11092
- useEffect4(() => {
11569
+ const { error, nodes, settings } = useEmbed();
11570
+ const [children, setChildren] = useState6(
11571
+ /* @__PURE__ */ jsx21(
11572
+ Flex,
11573
+ {
11574
+ $width: "100%",
11575
+ $height: "100%",
11576
+ $alignItems: "center",
11577
+ $justifyContent: "center",
11578
+ $padding: `${settings.theme.card.padding / 16}rem`,
11579
+ children: /* @__PURE__ */ jsx21(Loader, {})
11580
+ }
11581
+ )
11582
+ );
11583
+ useEffect5(() => {
11093
11584
  const renderer = createRenderer();
11094
11585
  setChildren(nodes.map(renderer));
11095
11586
  }, [nodes]);
11096
11587
  if (error) {
11097
- return /* @__PURE__ */ jsx18("div", { children: error.message });
11588
+ return /* @__PURE__ */ jsxs13(
11589
+ Flex,
11590
+ {
11591
+ $flexDirection: "column",
11592
+ $padding: `${settings.theme.card.padding / 16}rem`,
11593
+ $width: "100%",
11594
+ $height: "auto",
11595
+ $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
11596
+ $backgroundColor: settings.theme.card.background,
11597
+ $alignItems: "center",
11598
+ $justifyContent: "center",
11599
+ children: [
11600
+ /* @__PURE__ */ jsx21(
11601
+ Box,
11602
+ {
11603
+ $marginBottom: "8px",
11604
+ $fontSize: `${settings.theme.typography.heading1.fontSize / 16}rem`,
11605
+ $fontFamily: settings.theme.typography.heading1.fontFamily,
11606
+ $fontWeight: settings.theme.typography.heading1.fontWeight,
11607
+ $color: settings.theme.typography.heading1.color,
11608
+ children: "404 Error"
11609
+ }
11610
+ ),
11611
+ /* @__PURE__ */ jsx21(
11612
+ Box,
11613
+ {
11614
+ $marginBottom: "8px",
11615
+ $fontSize: `${settings.theme.typography.text.fontSize / 16}rem`,
11616
+ $fontFamily: settings.theme.typography.text.fontFamily,
11617
+ $fontWeight: settings.theme.typography.text.fontWeight,
11618
+ $color: settings.theme.typography.text.color,
11619
+ children: error.message
11620
+ }
11621
+ )
11622
+ ]
11623
+ }
11624
+ );
11098
11625
  }
11099
- return /* @__PURE__ */ jsx18(Fragment2, { children });
11626
+ return /* @__PURE__ */ jsx21(Fragment2, { children });
11100
11627
  };
11101
11628
 
11102
11629
  // src/components/embed/Embed.tsx
11103
- import { jsx as jsx19 } from "react/jsx-runtime";
11630
+ import { jsx as jsx22 } from "react/jsx-runtime";
11104
11631
  var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
11105
11632
  if (accessToken?.length === 0) {
11106
- return /* @__PURE__ */ jsx19("div", { children: "Please provide an access token." });
11633
+ return /* @__PURE__ */ jsx22("div", { children: "Please provide an access token." });
11107
11634
  }
11108
11635
  if (!accessToken?.startsWith("token_")) {
11109
- return /* @__PURE__ */ jsx19("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
11636
+ return /* @__PURE__ */ jsx22("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
11110
11637
  }
11111
- return /* @__PURE__ */ jsx19(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ jsx19(ComponentTree, {}) });
11638
+ return /* @__PURE__ */ jsx22(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ jsx22(ComponentTree, {}) });
11112
11639
  };
11113
11640
  export {
11114
11641
  Box,
@@ -11123,9 +11650,8 @@ export {
11123
11650
  IncludedFeatures,
11124
11651
  Invoices,
11125
11652
  MeteredFeatures,
11126
- OverlayHeader,
11127
- OverlaySideBar,
11128
- OverlayWrapper,
11653
+ Modal,
11654
+ ModalHeader,
11129
11655
  PaymentMethod,
11130
11656
  PlanManager,
11131
11657
  ProgressBar,