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

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.
@@ -864,9 +864,8 @@ __export(src_exports, {
864
864
  IncludedFeatures: () => IncludedFeatures,
865
865
  Invoices: () => Invoices,
866
866
  MeteredFeatures: () => MeteredFeatures,
867
- OverlayHeader: () => OverlayHeader,
868
- OverlaySideBar: () => OverlaySideBar,
869
- OverlayWrapper: () => OverlayWrapper,
867
+ Modal: () => Modal,
868
+ ModalHeader: () => ModalHeader,
870
869
  PaymentMethod: () => PaymentMethod,
871
870
  PlanManager: () => PlanManager,
872
871
  ProgressBar: () => ProgressBar,
@@ -883,7 +882,8 @@ __export(src_exports, {
883
882
  useSchematic: () => useSchematic,
884
883
  useSchematicContext: () => useSchematicContext,
885
884
  useSchematicEvents: () => useSchematicEvents,
886
- useSchematicFlag: () => useSchematicFlag
885
+ useSchematicFlag: () => useSchematicFlag,
886
+ useSchematicIsPending: () => useSchematicIsPending
887
887
  });
888
888
  module.exports = __toCommonJS(src_exports);
889
889
 
@@ -6236,6 +6236,11 @@ var Qe = function() {
6236
6236
  }();
6237
6237
  var et = import_react.default.createContext(void 0);
6238
6238
  var tt = et.Consumer;
6239
+ function nt() {
6240
+ var e = (0, import_react.useContext)(et);
6241
+ if (!e) throw he(18);
6242
+ return e;
6243
+ }
6239
6244
  function ot(e) {
6240
6245
  var n = import_react.default.useContext(et), r2 = (0, import_react.useMemo)(function() {
6241
6246
  return function(e2, n2) {
@@ -6383,6 +6388,12 @@ function ft(n) {
6383
6388
  }
6384
6389
  return import_react.default.memo(l2);
6385
6390
  }
6391
+ function mt(t) {
6392
+ for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
6393
+ "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.");
6394
+ var r2 = ae(lt.apply(void 0, __spreadArray([t], n, false))), s2 = $(r2);
6395
+ return new We(s2, r2);
6396
+ }
6386
6397
  var vt = function() {
6387
6398
  function e() {
6388
6399
  var e2 = this;
@@ -6451,7 +6462,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
6451
6462
  }
6452
6463
  stripe._registerWrapper({
6453
6464
  name: "stripe-js",
6454
- version: "4.3.0",
6465
+ version: "4.4.0",
6455
6466
  startTime
6456
6467
  });
6457
6468
  };
@@ -7351,6 +7362,7 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
7351
7362
  environmentId: json["environment_id"],
7352
7363
  externalId: json["external_id"],
7353
7364
  id: json["id"],
7365
+ paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
7354
7366
  subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
7355
7367
  subtotal: json["subtotal"],
7356
7368
  updatedAt: new Date(json["updated_at"])
@@ -7376,7 +7388,6 @@ function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
7376
7388
  environmentId: json["environment_id"],
7377
7389
  externalId: json["external_id"],
7378
7390
  id: json["id"],
7379
- invoiceExternalId: json["invoice_external_id"] == null ? void 0 : json["invoice_external_id"],
7380
7391
  paymentMethodType: json["payment_method_type"],
7381
7392
  subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
7382
7393
  updatedAt: new Date(json["updated_at"])
@@ -8001,33 +8012,6 @@ function parseEditorState(data) {
8001
8012
  });
8002
8013
  return arr;
8003
8014
  }
8004
- async function fetchComponent(id, api) {
8005
- const settings = { ...defaultSettings };
8006
- const nodes = [];
8007
- const response = await api.hydrateComponent({ componentId: id });
8008
- const { data } = response;
8009
- if (data.component?.ast) {
8010
- const compressed = data.component.ast;
8011
- const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
8012
- to: "string"
8013
- });
8014
- const ast = getEditorState(json);
8015
- if (ast) {
8016
- (0, import_lodash.default)(settings, ast.ROOT.props.settings);
8017
- nodes.push(...parseEditorState(ast));
8018
- }
8019
- }
8020
- let stripe = null;
8021
- if (data.stripeEmbed?.publishableKey) {
8022
- stripe = loadStripe(data.stripeEmbed.publishableKey);
8023
- }
8024
- return {
8025
- data,
8026
- nodes,
8027
- settings,
8028
- stripe
8029
- };
8030
- }
8031
8015
  var EmbedContext = (0, import_react2.createContext)({
8032
8016
  api: null,
8033
8017
  data: {
@@ -8038,6 +8022,9 @@ var EmbedContext = (0, import_react2.createContext)({
8038
8022
  stripe: null,
8039
8023
  layout: "portal",
8040
8024
  error: void 0,
8025
+ isPending: false,
8026
+ hydrate: () => {
8027
+ },
8041
8028
  setData: () => {
8042
8029
  },
8043
8030
  updateSettings: () => {
@@ -8064,7 +8051,10 @@ var EmbedProvider = ({
8064
8051
  settings: { ...defaultSettings },
8065
8052
  stripe: null,
8066
8053
  layout: "portal",
8054
+ isPending: false,
8067
8055
  error: void 0,
8056
+ hydrate: () => {
8057
+ },
8068
8058
  setData: () => {
8069
8059
  },
8070
8060
  updateSettings: () => {
@@ -8075,51 +8065,55 @@ var EmbedProvider = ({
8075
8065
  }
8076
8066
  };
8077
8067
  });
8078
- (0, import_react2.useEffect)(() => {
8079
- const element = document.getElementById("schematic-fonts");
8080
- if (element) {
8081
- return void (styleRef.current = element);
8082
- }
8083
- const style = document.createElement("link");
8084
- style.id = "schematic-fonts";
8085
- style.rel = "stylesheet";
8086
- document.head.appendChild(style);
8087
- styleRef.current = style;
8088
- }, []);
8089
- (0, import_react2.useEffect)(() => {
8090
- if (!accessToken) {
8091
- return;
8092
- }
8093
- const config = new Configuration({ ...apiConfig, apiKey: accessToken });
8094
- const api = new CheckoutApi(config);
8095
- setState((prev2) => ({ ...prev2, api }));
8096
- }, [accessToken, apiConfig]);
8097
- (0, import_react2.useEffect)(() => {
8098
- if (!id || !state.api) {
8099
- return;
8100
- }
8101
- fetchComponent(id, state.api).then(async (resolvedData) => {
8102
- setState((prev2) => ({ ...prev2, ...resolvedData }));
8103
- }).catch((error) => setState((prev2) => ({ ...prev2, error })));
8104
- }, [id, state.api]);
8105
- (0, import_react2.useEffect)(() => {
8106
- const fontSet = /* @__PURE__ */ new Set([]);
8107
- Object.values(state.settings.theme.typography).forEach(({ fontFamily }) => {
8108
- fontSet.add(fontFamily);
8109
- });
8110
- if (fontSet.size > 0) {
8111
- const src = `https://fonts.googleapis.com/css2?${[...fontSet].map((fontFamily) => `family=${fontFamily}&display=swap`).join("&")}`;
8112
- if (styleRef.current) {
8113
- styleRef.current.href = src;
8068
+ const hydrate = (0, import_react2.useCallback)(async () => {
8069
+ setState((prev2) => ({ ...prev2, isPending: true, error: void 0 }));
8070
+ try {
8071
+ const nodes = [];
8072
+ const settings = { ...defaultSettings };
8073
+ if (!id || !state.api) {
8074
+ throw new Error("Invalid component id or api instance.");
8075
+ }
8076
+ const response = await state.api.hydrateComponent({ componentId: id });
8077
+ const { data } = response;
8078
+ if (data.component?.ast) {
8079
+ const compressed = data.component.ast;
8080
+ const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
8081
+ to: "string"
8082
+ });
8083
+ const ast = getEditorState(json);
8084
+ if (ast) {
8085
+ (0, import_lodash.default)(settings, ast.ROOT.props.settings);
8086
+ nodes.push(...parseEditorState(ast));
8087
+ }
8114
8088
  }
8089
+ let stripe = null;
8090
+ if (data.stripeEmbed?.publishableKey) {
8091
+ stripe = loadStripe(data.stripeEmbed.publishableKey);
8092
+ }
8093
+ setState((prev2) => ({
8094
+ ...prev2,
8095
+ data,
8096
+ nodes,
8097
+ settings,
8098
+ stripe,
8099
+ isPending: false
8100
+ }));
8101
+ } catch (error) {
8102
+ setState((prev2) => ({
8103
+ ...prev2,
8104
+ isPending: false,
8105
+ error: error instanceof Error ? error : new Error("An unknown error occurred.")
8106
+ }));
8115
8107
  }
8116
- }, [state.settings.theme.typography]);
8108
+ }, [id, state.api]);
8117
8109
  const setData = (0, import_react2.useCallback)(
8118
8110
  (data) => {
8119
8111
  setState((prev2) => {
8120
- const updated = { ...prev2 };
8121
- (0, import_lodash.default)(updated.data, data);
8122
- return updated;
8112
+ const updatedData = (0, import_lodash.default)({}, prev2.data, { ...data });
8113
+ return {
8114
+ ...prev2,
8115
+ data: updatedData
8116
+ };
8123
8117
  });
8124
8118
  },
8125
8119
  [setState]
@@ -8127,9 +8121,11 @@ var EmbedProvider = ({
8127
8121
  const updateSettings = (0, import_react2.useCallback)(
8128
8122
  (settings) => {
8129
8123
  setState((prev2) => {
8130
- const updated = { ...prev2 };
8131
- (0, import_lodash.default)(updated.settings, settings);
8132
- return updated;
8124
+ const updatedSettings = (0, import_lodash.default)({}, prev2.settings, { ...settings });
8125
+ return {
8126
+ ...prev2,
8127
+ settings: updatedSettings
8128
+ };
8133
8129
  });
8134
8130
  },
8135
8131
  [setState]
@@ -8152,6 +8148,40 @@ var EmbedProvider = ({
8152
8148
  },
8153
8149
  [setState]
8154
8150
  );
8151
+ (0, import_react2.useEffect)(() => {
8152
+ const element = document.getElementById("schematic-fonts");
8153
+ if (element) {
8154
+ return void (styleRef.current = element);
8155
+ }
8156
+ const style = document.createElement("link");
8157
+ style.id = "schematic-fonts";
8158
+ style.rel = "stylesheet";
8159
+ document.head.appendChild(style);
8160
+ styleRef.current = style;
8161
+ }, []);
8162
+ (0, import_react2.useEffect)(() => {
8163
+ if (!accessToken) {
8164
+ return;
8165
+ }
8166
+ const config = new Configuration({ ...apiConfig, apiKey: accessToken });
8167
+ const api = new CheckoutApi(config);
8168
+ setState((prev2) => ({ ...prev2, api }));
8169
+ }, [accessToken, apiConfig]);
8170
+ (0, import_react2.useEffect)(() => {
8171
+ hydrate();
8172
+ }, [hydrate]);
8173
+ (0, import_react2.useEffect)(() => {
8174
+ const fontSet = /* @__PURE__ */ new Set([]);
8175
+ Object.values(state.settings.theme.typography).forEach(({ fontFamily }) => {
8176
+ fontSet.add(fontFamily);
8177
+ });
8178
+ if (fontSet.size > 0) {
8179
+ const src = `https://fonts.googleapis.com/css2?${[...fontSet].map((fontFamily) => `family=${fontFamily}&display=swap`).join("&")}`;
8180
+ if (styleRef.current) {
8181
+ styleRef.current.href = src;
8182
+ }
8183
+ }
8184
+ }, [state.settings.theme.typography]);
8155
8185
  const renderChildren = () => {
8156
8186
  if (state.stripe) {
8157
8187
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -8204,6 +8234,8 @@ var EmbedProvider = ({
8204
8234
  stripe: state.stripe,
8205
8235
  layout: state.layout,
8206
8236
  error: state.error,
8237
+ isPending: state.isPending,
8238
+ hydrate,
8207
8239
  setData,
8208
8240
  updateSettings,
8209
8241
  setStripe,
@@ -8784,19 +8816,36 @@ function v4(options, buf, offset) {
8784
8816
  }
8785
8817
  var v4_default = v4;
8786
8818
  var import_polyfill = __toESM2(require_browser_polyfill());
8819
+ function contextString(context) {
8820
+ const sortedContext = Object.keys(context).reduce((acc, key) => {
8821
+ const sortedKeys = Object.keys(
8822
+ context[key] || {}
8823
+ ).sort();
8824
+ const sortedObj = sortedKeys.reduce((obj, sortedKey) => {
8825
+ obj[sortedKey] = context[key][sortedKey];
8826
+ return obj;
8827
+ }, {});
8828
+ acc[key] = sortedObj;
8829
+ return acc;
8830
+ }, {});
8831
+ return JSON.stringify(sortedContext);
8832
+ }
8787
8833
  var anonymousIdKey = "schematicId";
8788
8834
  var Schematic = class {
8789
8835
  apiKey;
8790
8836
  apiUrl = "https://api.schematichq.com";
8791
- webSocketUrl = "wss://api.schematichq.com";
8792
- eventUrl = "https://c.schematichq.com";
8793
8837
  conn = null;
8794
8838
  context = {};
8795
8839
  eventQueue;
8840
+ eventUrl = "https://c.schematichq.com";
8841
+ flagListener;
8842
+ flagValueListeners = {};
8843
+ isPending = true;
8844
+ isPendingListeners = /* @__PURE__ */ new Set();
8796
8845
  storage;
8797
8846
  useWebSocket = false;
8798
8847
  values = {};
8799
- flagListener;
8848
+ webSocketUrl = "wss://api.schematichq.com";
8800
8849
  constructor(apiKey, options) {
8801
8850
  this.apiKey = apiKey;
8802
8851
  this.eventQueue = [];
@@ -8816,12 +8865,14 @@ var Schematic = class {
8816
8865
  if (options?.webSocketUrl !== void 0) {
8817
8866
  this.webSocketUrl = options.webSocketUrl;
8818
8867
  }
8819
- if (window?.addEventListener) {
8868
+ if (typeof window !== "undefined" && window?.addEventListener) {
8820
8869
  window.addEventListener("beforeunload", () => {
8821
8870
  this.flushEventQueue();
8822
8871
  });
8823
8872
  }
8824
8873
  }
8874
+ // Get value for a single flag
8875
+ // If in websocket mode, return the local value, otherwise make an API call
8825
8876
  async checkFlag(options) {
8826
8877
  const { fallback = false, key } = options;
8827
8878
  const context = options.context || this.context;
@@ -8849,7 +8900,7 @@ var Schematic = class {
8849
8900
  return fallback;
8850
8901
  });
8851
8902
  }
8852
- // Make a REST API call to fetch all flag values for a given context
8903
+ // Make an API call to fetch all flag values for a given context (use if not in websocket mode)
8853
8904
  checkFlags = async (context) => {
8854
8905
  context = context || this.context;
8855
8906
  const requestUrl = `${this.apiUrl}/flags/check`;
@@ -8879,18 +8930,6 @@ var Schematic = class {
8879
8930
  return false;
8880
8931
  });
8881
8932
  };
8882
- cleanup = async () => {
8883
- if (this.conn) {
8884
- try {
8885
- const socket = await this.conn;
8886
- socket.close();
8887
- } catch (error) {
8888
- console.error("Error during cleanup:", error);
8889
- } finally {
8890
- this.conn = null;
8891
- }
8892
- }
8893
- };
8894
8933
  // Send an identify event
8895
8934
  identify = (body) => {
8896
8935
  this.setContext({
@@ -8908,12 +8947,16 @@ var Schematic = class {
8908
8947
  this.context = context;
8909
8948
  return Promise.resolve();
8910
8949
  }
8911
- if (!this.conn) {
8912
- this.conn = this.wsConnect();
8950
+ try {
8951
+ this.setIsPending(true);
8952
+ if (!this.conn) {
8953
+ this.conn = this.wsConnect();
8954
+ }
8955
+ const socket = await this.conn;
8956
+ await this.wsSendMessage(socket, context);
8957
+ } catch (error) {
8958
+ console.error("Error setting Schematic context:", error);
8913
8959
  }
8914
- return this.conn.then((socket) => {
8915
- return this.wsSendMessage(socket, context);
8916
- });
8917
8960
  };
8918
8961
  // Send track event
8919
8962
  track = (body) => {
@@ -8925,6 +8968,9 @@ var Schematic = class {
8925
8968
  user: user ?? this.context.user
8926
8969
  });
8927
8970
  };
8971
+ /**
8972
+ * Event processing
8973
+ */
8928
8974
  flushEventQueue = () => {
8929
8975
  while (this.eventQueue.length > 0) {
8930
8976
  const event = this.eventQueue.shift();
@@ -8980,6 +9026,22 @@ var Schematic = class {
8980
9026
  this.eventQueue.push(event);
8981
9027
  return Promise.resolve();
8982
9028
  };
9029
+ /**
9030
+ * Websocket management
9031
+ */
9032
+ cleanup = async () => {
9033
+ if (this.conn) {
9034
+ try {
9035
+ const socket = await this.conn;
9036
+ socket.close();
9037
+ } catch (error) {
9038
+ console.error("Error during cleanup:", error);
9039
+ } finally {
9040
+ this.conn = null;
9041
+ }
9042
+ }
9043
+ };
9044
+ // Open a websocket connection
8983
9045
  wsConnect = () => {
8984
9046
  return new Promise((resolve, reject) => {
8985
9047
  const wsUrl = `${this.webSocketUrl}/flags/bootstrap`;
@@ -8995,6 +9057,8 @@ var Schematic = class {
8995
9057
  };
8996
9058
  });
8997
9059
  };
9060
+ // Send a message on the websocket indicating interest in a particular evaluation context
9061
+ // and wait for the initial set of flag values to be returned
8998
9062
  wsSendMessage = (socket, context) => {
8999
9063
  return new Promise((resolve, reject) => {
9000
9064
  if (contextString(context) == contextString(this.context)) {
@@ -9012,16 +9076,17 @@ var Schematic = class {
9012
9076
  (message.flags ?? []).forEach(
9013
9077
  (flag) => {
9014
9078
  this.values[contextString(context)][flag.flag] = flag.value;
9079
+ this.notifyFlagValueListeners(flag.flag);
9015
9080
  }
9016
9081
  );
9017
9082
  if (this.flagListener) {
9018
- this.flagListener(this.values[contextString(context)]);
9083
+ this.flagListener(this.getFlagValues());
9019
9084
  }
9085
+ this.setIsPending(false);
9020
9086
  if (!resolved) {
9021
9087
  resolved = true;
9022
9088
  resolve();
9023
9089
  }
9024
- socket.removeEventListener("message", messageHandler);
9025
9090
  };
9026
9091
  socket.addEventListener("message", messageHandler);
9027
9092
  socket.send(
@@ -9040,72 +9105,93 @@ var Schematic = class {
9040
9105
  }
9041
9106
  });
9042
9107
  };
9108
+ /**
9109
+ * State management
9110
+ */
9111
+ // isPending state
9112
+ getIsPending = () => {
9113
+ return this.isPending;
9114
+ };
9115
+ addIsPendingListener = (listener) => {
9116
+ this.isPendingListeners.add(listener);
9117
+ return () => {
9118
+ this.isPendingListeners.delete(listener);
9119
+ };
9120
+ };
9121
+ setIsPending = (isPending) => {
9122
+ this.isPending = isPending;
9123
+ this.isPendingListeners.forEach((listener) => listener());
9124
+ };
9125
+ // flagValues state
9126
+ getFlagValue = (flagKey) => {
9127
+ const values = this.getFlagValues();
9128
+ return values[flagKey];
9129
+ };
9130
+ getFlagValues = () => {
9131
+ const contextStr = contextString(this.context);
9132
+ return this.values[contextStr] ?? {};
9133
+ };
9134
+ addFlagValueListener = (flagKey, listener) => {
9135
+ if (!(flagKey in this.flagValueListeners)) {
9136
+ this.flagValueListeners[flagKey] = /* @__PURE__ */ new Set();
9137
+ }
9138
+ this.flagValueListeners[flagKey].add(listener);
9139
+ return () => {
9140
+ this.flagValueListeners[flagKey].delete(listener);
9141
+ };
9142
+ };
9143
+ notifyFlagValueListeners = (flagKey) => {
9144
+ const listeners = this.flagValueListeners?.[flagKey] ?? [];
9145
+ listeners.forEach((listener) => listener());
9146
+ };
9043
9147
  };
9044
- function contextString(context) {
9045
- const sortedContext = Object.keys(context).reduce((acc, key) => {
9046
- const sortedKeys = Object.keys(
9047
- context[key] || {}
9048
- ).sort();
9049
- const sortedObj = sortedKeys.reduce((obj, sortedKey) => {
9050
- obj[sortedKey] = context[key][sortedKey];
9051
- return obj;
9052
- }, {});
9053
- acc[key] = sortedObj;
9054
- return acc;
9055
- }, {});
9056
- return JSON.stringify(sortedContext);
9057
- }
9058
9148
 
9059
9149
  // src/context/schematic.tsx
9060
- var import_react3 = require("react");
9150
+ var import_react3 = __toESM(require("react"));
9061
9151
  var import_jsx_runtime2 = require("react/jsx-runtime");
9062
- var SchematicContext = (0, import_react3.createContext)({
9063
- flagValues: {}
9064
- });
9152
+ var SchematicContext = (0, import_react3.createContext)(
9153
+ null
9154
+ );
9065
9155
  var SchematicProvider = ({
9066
9156
  children,
9067
9157
  client: providedClient,
9068
9158
  publishableKey,
9069
9159
  ...clientOpts
9070
9160
  }) => {
9071
- const [client, setClient] = (0, import_react3.useState)();
9072
- const [flagValues, setFlagValues] = (0, import_react3.useState)({});
9073
- const memoizedClientOpts = (0, import_react3.useMemo)(
9074
- () => clientOpts,
9075
- /* eslint-disable-next-line react-hooks/exhaustive-deps */
9076
- [JSON.stringify(clientOpts)]
9077
- );
9078
- const { useWebSocket = true } = clientOpts;
9079
- (0, import_react3.useEffect)(() => {
9080
- let cleanupFunction;
9161
+ const client = (0, import_react3.useMemo)(() => {
9162
+ const { useWebSocket = true } = clientOpts;
9081
9163
  if (providedClient) {
9082
- setClient(providedClient);
9083
- cleanupFunction = () => {
9084
- providedClient.cleanup().catch((error) => {
9085
- console.error("Error during cleanup:", error);
9086
- });
9087
- };
9088
- } else {
9089
- const newClient = new Schematic(publishableKey, {
9090
- ...memoizedClientOpts,
9091
- flagListener: setFlagValues,
9092
- useWebSocket
9093
- });
9094
- setClient(newClient);
9095
- cleanupFunction = () => {
9096
- newClient.cleanup().catch((error) => {
9164
+ return providedClient;
9165
+ }
9166
+ return new Schematic(publishableKey, {
9167
+ useWebSocket,
9168
+ ...clientOpts
9169
+ });
9170
+ }, [providedClient, publishableKey, clientOpts]);
9171
+ (0, import_react3.useEffect)(() => {
9172
+ return () => {
9173
+ if (!providedClient) {
9174
+ client.cleanup().catch((error) => {
9097
9175
  console.error("Error during cleanup:", error);
9098
9176
  });
9099
- };
9100
- }
9101
- return cleanupFunction;
9102
- }, [memoizedClientOpts, providedClient, publishableKey, useWebSocket]);
9103
- const contextValue = {
9104
- client,
9105
- flagValues
9106
- };
9177
+ }
9178
+ };
9179
+ }, [client, providedClient]);
9180
+ const contextValue = (0, import_react3.useMemo)(
9181
+ () => ({
9182
+ client
9183
+ }),
9184
+ [client]
9185
+ );
9107
9186
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SchematicContext.Provider, { value: contextValue, children });
9108
9187
  };
9188
+ var useSchematic = () => {
9189
+ const context = import_react3.default.useContext(SchematicContext);
9190
+ if (context === null) {
9191
+ throw new Error("useSchematic must be used within a SchematicProvider");
9192
+ }
9193
+ return context;
9194
+ };
9109
9195
 
9110
9196
  // src/hooks/embed.ts
9111
9197
  var import_react4 = require("react");
@@ -9113,45 +9199,62 @@ var useEmbed = () => (0, import_react4.useContext)(EmbedContext);
9113
9199
 
9114
9200
  // src/hooks/schematic.ts
9115
9201
  var import_react5 = require("react");
9116
- var useSchematic = () => (0, import_react5.useContext)(SchematicContext);
9117
9202
  var useSchematicClient = (opts) => {
9118
9203
  const schematic = useSchematic();
9119
9204
  const { client } = opts ?? {};
9120
- if (client) {
9121
- return client;
9122
- }
9123
- return schematic.client;
9205
+ return (0, import_react5.useMemo)(() => {
9206
+ if (client) {
9207
+ return client;
9208
+ }
9209
+ return schematic.client;
9210
+ }, [client, schematic.client]);
9124
9211
  };
9125
9212
  var useSchematicContext = (opts) => {
9126
9213
  const client = useSchematicClient(opts);
9127
- const { setContext } = client ?? {};
9128
- return { setContext };
9214
+ return (0, import_react5.useMemo)(
9215
+ () => ({
9216
+ setContext: client.setContext.bind(client)
9217
+ }),
9218
+ [client]
9219
+ );
9129
9220
  };
9130
9221
  var useSchematicEvents = (opts) => {
9131
9222
  const client = useSchematicClient(opts);
9132
- const { track, identify } = client ?? {};
9133
- return { track, identify };
9223
+ const track = (0, import_react5.useCallback)(
9224
+ (...args) => client.track(...args),
9225
+ [client]
9226
+ );
9227
+ const identify = (0, import_react5.useCallback)(
9228
+ (...args) => client.identify(...args),
9229
+ [client]
9230
+ );
9231
+ return (0, import_react5.useMemo)(() => ({ track, identify }), [track, identify]);
9134
9232
  };
9135
9233
  var useSchematicFlag = (key, opts) => {
9136
- const { flagValues } = useSchematic();
9137
- const { client } = opts ?? {};
9138
- const { fallback = false } = opts ?? {};
9139
- const [value, setValue] = (0, import_react5.useState)(fallback);
9140
- const flagValue = flagValues[key];
9141
- (0, import_react5.useEffect)(() => {
9142
- if (typeof flagValue !== "undefined") {
9143
- setValue(flagValue);
9144
- } else if (client) {
9145
- client.checkFlag({ key, fallback }).then(setValue);
9146
- } else {
9147
- setValue(fallback);
9148
- }
9149
- }, [key, fallback, flagValue, client]);
9150
- return value;
9234
+ const client = useSchematicClient(opts);
9235
+ const fallback = opts?.fallback ?? false;
9236
+ const subscribe = (0, import_react5.useCallback)(
9237
+ (callback) => client.addFlagValueListener(key, callback),
9238
+ [client, key]
9239
+ );
9240
+ const getSnapshot = (0, import_react5.useCallback)(() => {
9241
+ const value = client.getFlagValue(key);
9242
+ return typeof value === "undefined" ? fallback : value;
9243
+ }, [client, key, fallback]);
9244
+ return (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot);
9245
+ };
9246
+ var useSchematicIsPending = (opts) => {
9247
+ const client = useSchematicClient(opts);
9248
+ const subscribe = (0, import_react5.useCallback)(
9249
+ (callback) => client.addIsPendingListener(callback),
9250
+ [client]
9251
+ );
9252
+ const getSnapshot = (0, import_react5.useCallback)(() => client.getIsPending(), [client]);
9253
+ return (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot);
9151
9254
  };
9152
9255
 
9153
9256
  // src/components/elements/plan-manager/PlanManager.tsx
9154
- var import_react8 = require("react");
9257
+ var import_react10 = require("react");
9155
9258
  var import_react_dom = require("react-dom");
9156
9259
 
9157
9260
  // src/utils/color.ts
@@ -9233,7 +9336,7 @@ function hslToHex({ h, s: s2, l: l2 }) {
9233
9336
  }
9234
9337
  function adjustLightness(color, amount) {
9235
9338
  const { h, s: s2, l: l2 } = hexToHSL(color);
9236
- return hslToHex({ h, s: s2, l: Math.max(Math.min(l2 + amount, 100), 0) });
9339
+ return hslToHex({ h, s: s2, l: Math.max(Math.min(l2 + amount * 100, 100), 0) });
9237
9340
  }
9238
9341
  function lighten(color, amount) {
9239
9342
  return adjustLightness(color, amount);
@@ -9463,6 +9566,7 @@ var Container = dt.div`
9463
9566
  align-items: center;
9464
9567
  flex-shrink: 0;
9465
9568
  border-radius: 9999px;
9569
+
9466
9570
  ${({ $size }) => {
9467
9571
  const base = 24;
9468
9572
  let scale = 1;
@@ -9480,6 +9584,15 @@ var Container = dt.div`
9480
9584
  case "lg":
9481
9585
  scale *= 1.75;
9482
9586
  break;
9587
+ case "xl":
9588
+ scale *= 2;
9589
+ break;
9590
+ case "2xl":
9591
+ scale *= 2.5;
9592
+ break;
9593
+ case "3xl":
9594
+ scale *= 3;
9595
+ break;
9483
9596
  }
9484
9597
  return lt`
9485
9598
  font-size: ${base * scale / TEXT_BASE_SIZE}rem;
@@ -9488,12 +9601,19 @@ var Container = dt.div`
9488
9601
  height: ${(base + 8) * scale / TEXT_BASE_SIZE}rem;
9489
9602
  `;
9490
9603
  }}
9604
+
9491
9605
  ${({ $variant, $colors }) => $variant === "outline" ? lt`
9492
- color: ${$colors[0]};
9493
9606
  background-color: transparent;
9607
+
9608
+ ${Icon} {
9609
+ color: ${$colors[0]};
9610
+ }
9494
9611
  ` : lt`
9495
- color: ${$colors[0]};
9496
9612
  background-color: ${$colors[1]};
9613
+
9614
+ ${Icon} {
9615
+ color: ${$colors[0]};
9616
+ }
9497
9617
  `}
9498
9618
  `;
9499
9619
 
@@ -9515,57 +9635,175 @@ var IconRound = ({
9515
9635
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon2, { name }) });
9516
9636
  };
9517
9637
 
9518
- // src/components/ui/progress-bar/styles.ts
9519
- var Container2 = dt(Flex)`
9520
- position: relative;
9521
- `;
9522
-
9523
- // src/components/ui/progress-bar/ProgressBar.tsx
9638
+ // src/components/ui/modal/Modal.tsx
9639
+ var import_react6 = require("react");
9524
9640
  var import_jsx_runtime6 = require("react/jsx-runtime");
9525
- var ProgressBar = ({
9526
- progress,
9527
- value,
9528
- total = 0,
9529
- color = "gray",
9530
- barWidth = "100%",
9531
- ...props
9532
- }) => {
9533
- const barColorMap = {
9534
- gray: "#9CA3AF",
9535
- blue: "#2563EB",
9536
- yellow: "#FFAA06",
9537
- orange: "#DB6769",
9538
- red: "#EF4444"
9539
- };
9540
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
9541
- Container2,
9641
+ var Modal = ({ children, size = "auto", onClose }) => {
9642
+ const theme = nt();
9643
+ const { setLayout } = useEmbed();
9644
+ const ref = (0, import_react6.useRef)(null);
9645
+ const isLightBackground = (0, import_react6.useMemo)(() => {
9646
+ return hexToHSL(theme.card.background).l > 50;
9647
+ }, [theme.card.background]);
9648
+ const handleClose = (0, import_react6.useCallback)(() => {
9649
+ setLayout("portal");
9650
+ onClose?.();
9651
+ }, [setLayout, onClose]);
9652
+ (0, import_react6.useEffect)(() => {
9653
+ ref.current?.focus();
9654
+ }, []);
9655
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
9656
+ Box,
9542
9657
  {
9543
- $alignItems: "center",
9544
- $gap: `${16 / TEXT_BASE_SIZE}rem`,
9545
- ...props,
9546
- children: [
9547
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
9548
- Flex,
9549
- {
9550
- $position: "relative",
9551
- $alignItems: "center",
9552
- $width: `${barWidth}`,
9658
+ ref,
9659
+ tabIndex: 0,
9660
+ onClick: (event) => {
9661
+ if (event.target === event.currentTarget) {
9662
+ handleClose();
9663
+ }
9664
+ },
9665
+ onKeyDown: (event) => {
9666
+ if (event.key === "Escape") {
9667
+ handleClose();
9668
+ }
9669
+ },
9670
+ $position: "absolute",
9671
+ $top: "50%",
9672
+ $left: "50%",
9673
+ $zIndex: "999999",
9674
+ $transform: "translate(-50%, -50%)",
9675
+ $width: "100%",
9676
+ $height: "100%",
9677
+ $backgroundColor: isLightBackground ? "hsl(0, 0%, 85%)" : "hsl(0, 0%, 15%)",
9678
+ $overflow: "hidden",
9679
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
9680
+ Flex,
9681
+ {
9682
+ $position: "relative",
9683
+ $top: "50%",
9684
+ $left: "50%",
9685
+ $transform: "translate(-50%, -50%)",
9686
+ $flexDirection: "column",
9687
+ $overflow: "hidden",
9688
+ ...size === "auto" ? { $width: "min-content", $height: "min-content" } : {
9689
+ $width: "100%",
9690
+ $height: "100%",
9691
+ $maxWidth: "1366px",
9692
+ $maxHeight: "768px"
9693
+ },
9694
+ $backgroundColor: theme.card.background,
9695
+ $borderRadius: "0.5rem",
9696
+ $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
9697
+ id: "select-plan-dialog",
9698
+ role: "dialog",
9699
+ "aria-labelledby": "select-plan-dialog-label",
9700
+ "aria-modal": "true",
9701
+ children
9702
+ }
9703
+ )
9704
+ }
9705
+ );
9706
+ };
9707
+
9708
+ // src/components/ui/modal/ModalHeader.tsx
9709
+ var import_react7 = require("react");
9710
+ var import_jsx_runtime7 = require("react/jsx-runtime");
9711
+ var ModalHeader = ({
9712
+ children,
9713
+ bordered = false,
9714
+ onClose
9715
+ }) => {
9716
+ const theme = nt();
9717
+ const { setLayout } = useEmbed();
9718
+ const isLightBackground = (0, import_react7.useMemo)(() => {
9719
+ return hexToHSL(theme.card.background).l > 50;
9720
+ }, [theme.card.background]);
9721
+ const handleClose = (0, import_react7.useCallback)(() => {
9722
+ setLayout("portal");
9723
+ onClose?.();
9724
+ }, [setLayout, onClose]);
9725
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
9726
+ Flex,
9727
+ {
9728
+ $justifyContent: "space-between",
9729
+ $alignItems: "center",
9730
+ $flexShrink: "0",
9731
+ $gap: "1rem",
9732
+ $height: "5rem",
9733
+ $padding: "0 1.5rem 0 3rem",
9734
+ ...bordered && {
9735
+ $borderBottomWidth: "1px",
9736
+ $borderBottomStyle: "solid",
9737
+ $borderBottomColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)"
9738
+ },
9739
+ children: [
9740
+ children,
9741
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
9742
+ Icon2,
9743
+ {
9744
+ name: "close",
9745
+ style: {
9746
+ fontSize: 36,
9747
+ color: isLightBackground ? "hsla(0, 0%, 0%, 0.275)" : "hsla(0, 0%, 100%, 0.275)"
9748
+ }
9749
+ }
9750
+ ) })
9751
+ ]
9752
+ }
9753
+ );
9754
+ };
9755
+
9756
+ // src/components/ui/progress-bar/styles.ts
9757
+ var Container2 = dt(Flex)`
9758
+ position: relative;
9759
+ `;
9760
+
9761
+ // src/components/ui/progress-bar/ProgressBar.tsx
9762
+ var import_jsx_runtime8 = require("react/jsx-runtime");
9763
+ var ProgressBar = ({
9764
+ progress,
9765
+ value,
9766
+ total = 0,
9767
+ color = "gray",
9768
+ barWidth = "100%",
9769
+ ...props
9770
+ }) => {
9771
+ const barColorMap = {
9772
+ gray: "#9CA3AF",
9773
+ blue: "#2563EB",
9774
+ yellow: "#FFAA06",
9775
+ orange: "#DB6769",
9776
+ red: "#EF4444"
9777
+ };
9778
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
9779
+ Container2,
9780
+ {
9781
+ $alignItems: "center",
9782
+ $gap: `${16 / TEXT_BASE_SIZE}rem`,
9783
+ ...props,
9784
+ children: [
9785
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
9786
+ Flex,
9787
+ {
9788
+ $position: "relative",
9789
+ $alignItems: "center",
9790
+ $width: `${barWidth}`,
9553
9791
  $maxWidth: "100%",
9554
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
9792
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
9555
9793
  Flex,
9556
9794
  {
9557
9795
  $position: "relative",
9558
9796
  $overflow: "hidden",
9559
9797
  $width: "100%",
9560
9798
  $height: `${8 / TEXT_BASE_SIZE}rem`,
9561
- $background: "#F2F4F7",
9799
+ $backgroundColor: "#F2F4F7",
9562
9800
  $borderRadius: "9999px",
9563
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
9801
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
9564
9802
  Box,
9565
9803
  {
9566
9804
  $width: `${Math.min(progress, 100)}%`,
9567
9805
  $height: "100%",
9568
- $background: barColorMap[color],
9806
+ $backgroundColor: barColorMap[color],
9569
9807
  $borderRadius: "9999px"
9570
9808
  }
9571
9809
  )
@@ -9573,7 +9811,7 @@ var ProgressBar = ({
9573
9811
  )
9574
9812
  }
9575
9813
  ),
9576
- total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { $size: 14, $weight: 500, children: [
9814
+ total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { $size: 14, $weight: 500, children: [
9577
9815
  value,
9578
9816
  "/",
9579
9817
  total
@@ -9584,10 +9822,10 @@ var ProgressBar = ({
9584
9822
  };
9585
9823
 
9586
9824
  // src/components/elements/plan-manager/CheckoutDialog.tsx
9587
- var import_react7 = require("react");
9825
+ var import_react9 = require("react");
9588
9826
 
9589
9827
  // src/components/elements/plan-manager/PaymentForm.tsx
9590
- var import_react6 = require("react");
9828
+ var import_react8 = require("react");
9591
9829
  var import_react_stripe_js2 = require("@stripe/react-stripe-js");
9592
9830
  var import_react_stripe_js3 = require("@stripe/react-stripe-js");
9593
9831
 
@@ -9599,7 +9837,18 @@ var StyledButton = dt(Button2)`
9599
9837
  width: 100%;
9600
9838
  ${({ disabled, $color = "primary", theme }) => {
9601
9839
  const { l: l2 } = hexToHSL(theme[$color]);
9602
- const textColor = disabled ? "#989898" : l2 > 50 ? "#000000" : "#FFFFFF";
9840
+ let textColor;
9841
+ let colorFn;
9842
+ if (l2 > 50) {
9843
+ textColor = "#000000";
9844
+ colorFn = lighten;
9845
+ } else {
9846
+ textColor = "#FFFFFF";
9847
+ colorFn = darken;
9848
+ }
9849
+ if (disabled) {
9850
+ textColor = colorFn(textColor, 42.5);
9851
+ }
9603
9852
  return lt`
9604
9853
  color: ${textColor};
9605
9854
 
@@ -9610,35 +9859,47 @@ var StyledButton = dt(Button2)`
9610
9859
  }};
9611
9860
 
9612
9861
  ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
9613
- const color = disabled ? "#EEEEEE" : theme[$color];
9862
+ let color = theme[$color];
9863
+ if (disabled) {
9864
+ const { l: l2 } = hexToHSL(theme.card.background);
9865
+ color = hslToHex({ h: 0, s: 0, l: l2 });
9866
+ color = l2 > 50 ? darken(color, 0.075) : lighten(color, 0.15);
9867
+ }
9614
9868
  return $variant === "filled" ? lt`
9615
9869
  background-color: ${color};
9616
9870
  border-color: ${color};
9617
9871
  ` : lt`
9618
9872
  background-color: transparent;
9619
- border-color: #d2d2d2;
9620
- color: #194bfb;
9873
+ border-color: ${color};
9874
+ color: ${color};
9875
+
9621
9876
  ${Text} {
9622
- color: #194bfb;
9877
+ color: ${color};
9623
9878
  }
9624
9879
  `;
9625
9880
  }}
9626
9881
 
9627
- &:hover {
9628
- ${({ disabled }) => disabled && "cursor: not-allowed;"}
9629
- ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
9882
+ &:disabled:hover {
9883
+ cursor: not-allowed;
9884
+ }
9885
+
9886
+ &:not(:disabled):hover {
9887
+ ${({ $color = "primary", theme, $variant = "filled" }) => {
9630
9888
  const specified = theme[$color];
9631
- const lightened = lighten(specified, 15);
9632
- const color = disabled ? "#EEEEEE" : specified === lightened ? darken(specified, 15) : lightened;
9889
+ const lightened = lighten(specified, 0.15);
9890
+ const color = specified === lightened ? darken(specified, 0.15) : lightened;
9891
+ const { l: l2 } = hexToHSL(theme[$color]);
9892
+ const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
9633
9893
  return $variant === "filled" ? lt`
9634
9894
  background-color: ${color};
9635
9895
  border-color: ${color};
9636
9896
  ` : lt`
9637
9897
  background-color: ${color};
9638
9898
  border-color: ${color};
9639
- color: #ffffff;
9899
+ color: ${textColor};
9900
+
9640
9901
  ${Text} {
9641
- color: #ffffff;
9902
+ color: ${textColor};
9642
9903
  }
9643
9904
  `;
9644
9905
  }}
@@ -9648,35 +9909,35 @@ var StyledButton = dt(Button2)`
9648
9909
  switch ($size) {
9649
9910
  case "sm":
9650
9911
  return lt`
9651
- font-size: ${15 / 16}rem;
9652
- padding: ${12 / 16}rem 0;
9653
- border-radius: ${6 / 16}rem;
9912
+ font-size: ${15 / TEXT_BASE_SIZE}rem;
9913
+ padding: ${12 / TEXT_BASE_SIZE}rem 0;
9914
+ border-radius: ${6 / TEXT_BASE_SIZE}rem;
9654
9915
  `;
9655
9916
  case "md":
9656
9917
  return lt`
9657
- font-size: ${17 / 16}rem;
9658
- padding: ${16 / 16}rem 0;
9659
- border-radius: ${8 / 16}rem;
9918
+ font-size: ${17 / TEXT_BASE_SIZE}rem;
9919
+ padding: ${16 / TEXT_BASE_SIZE}rem 0;
9920
+ border-radius: ${8 / TEXT_BASE_SIZE}rem;
9660
9921
  `;
9661
9922
  case "lg":
9662
9923
  return lt`
9663
- font-size: ${19 / 16}rem;
9664
- padding: ${20 / 16}rem 0;
9665
- border-radius: ${10 / 16}rem;
9924
+ font-size: ${19 / TEXT_BASE_SIZE}rem;
9925
+ padding: ${20 / TEXT_BASE_SIZE}rem 0;
9926
+ border-radius: ${10 / TEXT_BASE_SIZE}rem;
9666
9927
  `;
9667
9928
  }
9668
9929
  }}
9669
9930
  `;
9670
9931
 
9671
9932
  // src/components/elements/plan-manager/PaymentForm.tsx
9672
- var import_jsx_runtime7 = require("react/jsx-runtime");
9933
+ var import_jsx_runtime9 = require("react/jsx-runtime");
9673
9934
  var PaymentForm = ({ plan, period, onConfirm }) => {
9674
9935
  const stripe = (0, import_react_stripe_js3.useStripe)();
9675
9936
  const elements = (0, import_react_stripe_js3.useElements)();
9676
9937
  const { api, data } = useEmbed();
9677
- const [message, setMessage] = (0, import_react6.useState)(null);
9678
- const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
9679
- const [isConfirmed, setIsConfirmed] = (0, import_react6.useState)(false);
9938
+ const [message, setMessage] = (0, import_react8.useState)(null);
9939
+ const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
9940
+ const [isConfirmed, setIsConfirmed] = (0, import_react8.useState)(false);
9680
9941
  const handleSubmit = async (event) => {
9681
9942
  event.preventDefault();
9682
9943
  const priceId = period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
@@ -9685,6 +9946,7 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
9685
9946
  }
9686
9947
  setIsLoading(true);
9687
9948
  setIsConfirmed(false);
9949
+ setMessage(null);
9688
9950
  try {
9689
9951
  const { setupIntent, error } = await stripe.confirmSetup({
9690
9952
  elements,
@@ -9700,20 +9962,14 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
9700
9962
  }
9701
9963
  if (error?.type === "card_error" || error?.type === "validation_error") {
9702
9964
  setMessage(error.message);
9703
- } else {
9704
- setMessage("An unexpected error occured.");
9705
9965
  }
9706
- setIsLoading(false);
9707
9966
  } catch (error) {
9708
- if (error instanceof Error) {
9709
- setMessage(error.message);
9710
- } else {
9711
- setMessage("An unexpected error occured.");
9712
- }
9967
+ setMessage("A problem occurred while saving your payment method.");
9968
+ } finally {
9713
9969
  setIsLoading(false);
9714
9970
  }
9715
9971
  };
9716
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
9972
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
9717
9973
  "form",
9718
9974
  {
9719
9975
  id: "payment-form",
@@ -9726,27 +9982,15 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
9726
9982
  overflowY: "auto"
9727
9983
  },
9728
9984
  children: [
9729
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
9730
- Box,
9731
- {
9732
- $fontSize: "18px",
9733
- $marginBottom: "1.5rem",
9734
- $display: "inline-block",
9735
- $width: "100%",
9736
- children: [
9737
- "Add payment method",
9738
- " "
9739
- ]
9740
- }
9741
- ),
9742
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
9985
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $width: "100%", $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { $size: 18, children: "Add payment method" }) }),
9986
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
9743
9987
  Flex,
9744
9988
  {
9745
9989
  $flexDirection: "column",
9746
9990
  $gap: "1.5rem",
9747
- $marginBottom: "1.5rem",
9748
9991
  $width: "100%",
9749
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
9992
+ $marginBottom: "1.5rem",
9993
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
9750
9994
  import_react_stripe_js2.LinkAuthenticationElement,
9751
9995
  {
9752
9996
  id: "link-authentication-element"
@@ -9754,512 +9998,247 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
9754
9998
  )
9755
9999
  }
9756
10000
  ),
9757
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
9758
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }),
9759
- message && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: "payment-message", children: message })
9760
- ] }),
9761
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
10001
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }) }),
10002
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
9762
10003
  StyledButton,
9763
10004
  {
9764
10005
  id: "submit",
9765
10006
  disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
9766
10007
  $size: "md",
9767
10008
  $color: "primary",
9768
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
10009
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
9769
10010
  }
9770
- ) })
10011
+ ),
10012
+ message && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $margin: "1rem 0", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
9771
10013
  ]
9772
10014
  }
9773
10015
  );
9774
10016
  };
9775
10017
 
9776
10018
  // src/components/elements/plan-manager/CheckoutDialog.tsx
9777
- var import_jsx_runtime8 = require("react/jsx-runtime");
9778
- var OverlayHeader = ({
9779
- children,
9780
- onClose
9781
- }) => {
9782
- const { setLayout } = useEmbed();
9783
- const handleClose = (0, import_react7.useCallback)(() => {
9784
- setLayout("portal");
9785
- onClose?.();
9786
- }, [setLayout, onClose]);
9787
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
9788
- Flex,
9789
- {
9790
- $paddingLeft: "2.5rem",
9791
- $paddingRight: "2.5rem",
9792
- $padding: ".75rem 2.5rem",
9793
- $flexDirection: "row",
9794
- $justifyContent: "space-between",
9795
- $alignItems: "center",
9796
- $borderBottom: "1px solid #DEDEDE",
9797
- $gap: "1rem",
9798
- $backgroundColor: "#FFFFFF",
9799
- $borderRadius: ".5rem .5rem 0 0",
9800
- children: [
9801
- children,
9802
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } }) }) })
9803
- ]
9804
- }
9805
- );
9806
- };
9807
- var OverlayWrapper = ({
9808
- children,
9809
- size = "lg",
9810
- onClose
9811
- }) => {
9812
- const { setLayout } = useEmbed();
9813
- const ref = (0, import_react7.useRef)(null);
9814
- const sizeWidthMap = {
9815
- md: "700px",
9816
- lg: "75%"
9817
- };
9818
- const sizeHeighthMap = {
9819
- md: "auto",
9820
- lg: "75%"
9821
- };
9822
- const sizeMaxWidthMap = {
9823
- md: "auto",
9824
- lg: "1140px"
9825
- };
9826
- const handleClose = (0, import_react7.useCallback)(() => {
9827
- setLayout("portal");
9828
- onClose?.();
9829
- }, [setLayout, onClose]);
9830
- (0, import_react7.useEffect)(() => {
9831
- ref.current?.focus();
9832
- }, []);
9833
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
9834
- Box,
9835
- {
9836
- ref,
9837
- tabIndex: 0,
9838
- onClick: (event) => {
9839
- if (event.target === event.currentTarget) {
9840
- handleClose();
9841
- }
9842
- },
9843
- onKeyDown: (event) => {
9844
- if (event.key === "Escape") {
9845
- handleClose();
9846
- }
9847
- },
9848
- $position: "absolute",
9849
- $top: "50%",
9850
- $left: "50%",
9851
- $zIndex: "999999",
9852
- $transform: "translate(-50%, -50%)",
9853
- $width: "100%",
9854
- $height: "100%",
9855
- $backgroundColor: "#D9D9D9",
9856
- $overflow: "hidden",
9857
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
9858
- Flex,
9859
- {
9860
- $position: "relative",
9861
- $top: "50%",
9862
- $left: "50%",
9863
- $transform: "translate(-50%, -50%)",
9864
- $flexDirection: "column",
9865
- $maxWidth: sizeMaxWidthMap[size],
9866
- $width: sizeWidthMap[size],
9867
- $height: sizeHeighthMap[size],
9868
- $backgroundColor: "#FBFBFB",
9869
- $borderBottom: "1px solid #DEDEDE",
9870
- $borderRadius: "8px",
9871
- $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
9872
- id: "select-plan-dialog",
9873
- role: "dialog",
9874
- "aria-labelledby": "select-plan-dialog-label",
9875
- "aria-modal": "true",
9876
- children
9877
- }
9878
- )
9879
- }
9880
- );
9881
- };
9882
- var OverlaySideBar = ({
9883
- pricePeriod,
9884
- setPricePeriod,
9885
- checkoutStage,
9886
- setCheckoutStage,
9887
- currentPlan,
9888
- selectedPlan,
9889
- paymentMethodId
9890
- }) => {
9891
- const { api } = useEmbed();
9892
- const savingsPercentage = (0, import_react7.useMemo)(() => {
9893
- if (selectedPlan && pricePeriod === "month") {
9894
- const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
9895
- const yearly = selectedPlan?.yearlyPrice?.price || 0;
9896
- return Math.round((monthly - yearly) / monthly * 1e4) / 100;
9897
- }
9898
- return 0;
9899
- }, [selectedPlan, pricePeriod]);
9900
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
9901
- Flex,
9902
- {
9903
- $flexDirection: "column",
9904
- $background: "white",
9905
- $borderRadius: "0 0 0.5rem",
9906
- $maxWidth: "275px",
9907
- $height: "100%",
9908
- $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
9909
- children: [
9910
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
9911
- Flex,
9912
- {
9913
- $flexDirection: "column",
9914
- $position: "relative",
9915
- $gap: "1rem",
9916
- $width: "100%",
9917
- $height: "auto",
9918
- $padding: "1.5rem",
9919
- $borderBottom: "1px solid #DEDEDE",
9920
- children: [
9921
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $flexDirection: "row", $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
9922
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
9923
- Flex,
9924
- {
9925
- $flexDirection: "row",
9926
- $border: "1px solid #D9D9D9",
9927
- $borderRadius: "40px",
9928
- $fontSize: "12px",
9929
- $textAlign: "center",
9930
- $cursor: "pointer",
9931
- children: [
9932
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
9933
- Box,
9934
- {
9935
- onClick: () => setPricePeriod("month"),
9936
- $padding: ".25rem .5rem",
9937
- $flex: "1",
9938
- $fontWeight: pricePeriod === "month" ? "600" : "400",
9939
- $backgroundColor: pricePeriod === "month" ? "#DDDDDD" : "white",
9940
- $borderRadius: "40px",
9941
- children: "Billed monthly"
9942
- }
9943
- ),
9944
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
9945
- Box,
9946
- {
9947
- onClick: () => setPricePeriod("year"),
9948
- $padding: ".25rem .5rem",
9949
- $flex: "1",
9950
- $fontWeight: pricePeriod === "year" ? "600" : "400",
9951
- $backgroundColor: pricePeriod === "year" ? "#DDDDDD" : "white",
9952
- $borderRadius: "40px",
9953
- children: "Billed yearly"
9954
- }
9955
- )
9956
- ]
9957
- }
9958
- ),
9959
- savingsPercentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "11px", $color: "#194BFB", children: [
9960
- "Save up to ",
9961
- savingsPercentage,
9962
- "% with yearly billing"
9963
- ] })
9964
- ]
9965
- }
9966
- ),
9967
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
9968
- Flex,
9969
- {
9970
- $flexDirection: "column",
9971
- $position: "relative",
9972
- $gap: "1rem",
9973
- $width: "100%",
9974
- $height: "auto",
9975
- $padding: "1.5rem",
9976
- $flex: "1",
9977
- $borderBottom: "1px solid #DEDEDE",
9978
- children: [
9979
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "14px", $color: "#5D5D5D", children: "Plan" }),
9980
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
9981
- Flex,
9982
- {
9983
- $flexDirection: "column",
9984
- $fontSize: "14px",
9985
- $color: "#5D5D5D",
9986
- $gap: ".5rem",
9987
- children: [
9988
- currentPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
9989
- Flex,
9990
- {
9991
- $flexDirection: "row",
9992
- $alignItems: "center",
9993
- $justifyContent: "space-between",
9994
- $fontSize: "14px",
9995
- $color: "#5D5D5D",
9996
- children: [
9997
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: currentPlan.name }),
9998
- typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
9999
- formatCurrency(currentPlan.planPrice),
10000
- "/",
10001
- currentPlan.planPeriod
10002
- ] })
10003
- ]
10004
- }
10005
- ),
10006
- selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
10007
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10008
- Box,
10009
- {
10010
- $width: "100%",
10011
- $textAlign: "left",
10012
- $opacity: "50%",
10013
- $marginBottom: "-.25rem",
10014
- $marginTop: "-.25rem",
10015
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10016
- Icon2,
10017
- {
10018
- name: "arrow-down",
10019
- style: {
10020
- display: "inline-block"
10021
- }
10022
- }
10023
- )
10024
- }
10025
- ),
10026
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
10027
- Flex,
10028
- {
10029
- $flexDirection: "row",
10030
- $alignItems: "center",
10031
- $justifyContent: "space-between",
10032
- $fontSize: "14px",
10033
- $color: "#5D5D5D",
10034
- children: [
10035
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#000000", $fontWeight: "600", children: selectedPlan.name }),
10036
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
10037
- formatCurrency(
10038
- (pricePeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10039
- ),
10040
- "/",
10041
- pricePeriod
10042
- ] })
10043
- ]
10044
- }
10045
- )
10046
- ] })
10047
- ]
10048
- }
10049
- )
10050
- ]
10051
- }
10052
- ),
10053
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
10054
- Flex,
10055
- {
10056
- $flexDirection: "column",
10057
- $position: "relative",
10058
- $gap: ".75rem",
10059
- $width: "100%",
10060
- $height: "auto",
10061
- $padding: "1.5rem",
10062
- children: [
10063
- selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
10064
- Flex,
10065
- {
10066
- $fontSize: "12px",
10067
- $color: "#5D5D5D",
10068
- $justifyContent: "space-between",
10069
- children: [
10070
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
10071
- "Monthly total:",
10072
- " "
10073
- ] }),
10074
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#000000", children: [
10075
- formatCurrency(
10076
- (pricePeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10077
- ),
10078
- "/",
10079
- pricePeriod
10080
- ] })
10081
- ]
10082
- }
10083
- ),
10084
- checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10085
- StyledButton,
10086
- {
10087
- $size: "sm",
10088
- onClick: () => {
10089
- setCheckoutStage("checkout");
10090
- },
10091
- ...!selectedPlan && { disabled: true },
10092
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", $justifyContent: "center", children: [
10093
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Next: Checkout" }),
10094
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "arrow-right" })
10095
- ] })
10096
- }
10097
- ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10098
- StyledButton,
10099
- {
10100
- disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId,
10101
- onClick: async () => {
10102
- const priceId = (pricePeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
10103
- if (!api || !selectedPlan || !priceId || !paymentMethodId) {
10104
- return;
10105
- }
10106
- await api.checkout({
10107
- changeSubscriptionRequestBody: {
10108
- newPlanId: selectedPlan.id,
10109
- newPriceId: priceId,
10110
- paymentMethodId
10111
- }
10112
- });
10113
- },
10114
- $size: "md",
10115
- children: "Pay now"
10116
- }
10117
- ),
10118
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
10119
- ]
10120
- }
10121
- )
10122
- ]
10123
- }
10124
- );
10125
- };
10019
+ var import_jsx_runtime10 = require("react/jsx-runtime");
10126
10020
  var CheckoutDialog = () => {
10127
- const [checkoutStage, setCheckoutStage] = (0, import_react7.useState)(
10021
+ const [checkoutStage, setCheckoutStage] = (0, import_react9.useState)(
10128
10022
  "plan"
10129
10023
  );
10130
- const [planPeriod, setPlanPeriod] = (0, import_react7.useState)("month");
10131
- const [selectedPlan, setSelectedPlan] = (0, import_react7.useState)();
10132
- const [paymentMethodId, setPaymentMethodId] = (0, import_react7.useState)();
10133
- const { data } = useEmbed();
10134
- const { currentPlan, availablePlans } = (0, import_react7.useMemo)(() => {
10024
+ const [planPeriod, setPlanPeriod] = (0, import_react9.useState)("month");
10025
+ const [selectedPlan, setSelectedPlan] = (0, import_react9.useState)();
10026
+ const [paymentMethodId, setPaymentMethodId] = (0, import_react9.useState)();
10027
+ const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
10028
+ const [isCheckoutComplete, setIsCheckoutComplete] = (0, import_react9.useState)(false);
10029
+ const [error, setError] = (0, import_react9.useState)();
10030
+ const theme = nt();
10031
+ const { api, data, hydrate, setLayout } = useEmbed();
10032
+ const { currentPlan, availablePlans } = (0, import_react9.useMemo)(() => {
10135
10033
  return {
10136
10034
  currentPlan: data.company?.plan,
10137
10035
  availablePlans: data.activePlans
10138
10036
  };
10139
10037
  }, [data.company, data.activePlans]);
10140
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(OverlayWrapper, { children: [
10141
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: "1rem", children: [
10142
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
10143
- checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10038
+ const savingsPercentage = (0, import_react9.useMemo)(() => {
10039
+ if (selectedPlan) {
10040
+ const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
10041
+ const yearly = selectedPlan?.yearlyPrice?.price || 0;
10042
+ return Math.round((monthly - yearly) / monthly * 1e4) / 100;
10043
+ }
10044
+ return 0;
10045
+ }, [selectedPlan]);
10046
+ const isLightBackground = (0, import_react9.useMemo)(() => {
10047
+ return hexToHSL(theme.card.background).l > 50;
10048
+ }, [theme.card.background]);
10049
+ (0, import_react9.useEffect)(() => {
10050
+ if (isCheckoutComplete && api && data.component?.id) {
10051
+ hydrate();
10052
+ }
10053
+ }, [isCheckoutComplete, api, data.component?.id, hydrate]);
10054
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Modal, { size: isCheckoutComplete ? "auto" : "lg", children: [
10055
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ModalHeader, { bordered: !isCheckoutComplete, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $gap: "1rem", children: !isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
10056
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
10057
+ checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10144
10058
  Box,
10145
10059
  {
10146
- $width: "15px",
10147
- $height: "15px",
10148
- $backgroundColor: "white",
10149
- $border: "2px solid #DDDDDD",
10150
- $borderRadius: "999px"
10060
+ $width: `${20 / TEXT_BASE_SIZE}rem`,
10061
+ $height: `${20 / TEXT_BASE_SIZE}rem`,
10062
+ $borderWidth: "2px",
10063
+ $borderStyle: "solid",
10064
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
10065
+ $borderRadius: "9999px"
10151
10066
  }
10152
- ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10067
+ ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10153
10068
  IconRound,
10154
10069
  {
10155
10070
  name: "check",
10071
+ colors: [
10072
+ theme.card.background,
10073
+ isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
10074
+ ],
10156
10075
  style: {
10157
- color: "#FFFFFF",
10158
- backgroundColor: "#DDDDDD",
10159
- fontSize: 16,
10160
- width: "1rem",
10161
- height: "1rem"
10076
+ fontSize: `${16 / TEXT_BASE_SIZE}rem`,
10077
+ width: `${20 / TEXT_BASE_SIZE}rem`,
10078
+ height: `${20 / TEXT_BASE_SIZE}rem`
10162
10079
  }
10163
10080
  }
10164
10081
  ),
10165
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10166
- "div",
10082
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10083
+ Box,
10167
10084
  {
10168
10085
  tabIndex: 0,
10169
- ...checkoutStage === "plan" ? {
10170
- style: {
10171
- fontWeight: "700"
10172
- }
10173
- } : {
10174
- style: {
10175
- cursor: "pointer"
10176
- },
10177
- onClick: () => setCheckoutStage("plan")
10086
+ ...checkoutStage !== "plan" && {
10087
+ onClick: () => setCheckoutStage("plan"),
10088
+ $opacity: "0.6375",
10089
+ $cursor: "pointer"
10178
10090
  },
10179
- children: "1. Select plan"
10180
- }
10181
- ),
10182
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10183
- Icon2,
10184
- {
10185
- name: "chevron-right",
10186
- style: { fontSize: 16, color: "#D0D0D0" }
10091
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10092
+ Text,
10093
+ {
10094
+ $font: theme.typography.text.fontFamily,
10095
+ $size: 19,
10096
+ $weight: checkoutStage === "plan" ? 600 : 400,
10097
+ $color: theme.typography.text.color,
10098
+ children: "1. Select plan"
10099
+ }
10100
+ )
10187
10101
  }
10188
10102
  )
10189
10103
  ] }),
10190
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
10191
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10104
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10105
+ Icon2,
10106
+ {
10107
+ name: "chevron-right",
10108
+ style: {
10109
+ fontSize: 16,
10110
+ color: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.35)"
10111
+ }
10112
+ }
10113
+ ),
10114
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
10115
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10192
10116
  Box,
10193
10117
  {
10194
- $width: "15px",
10195
- $height: "15px",
10196
- $border: "2px solid #DDDDDD",
10197
- $borderRadius: "999px",
10198
- $backgroundColor: "white"
10118
+ $width: `${20 / TEXT_BASE_SIZE}rem`,
10119
+ $height: `${20 / TEXT_BASE_SIZE}rem`,
10120
+ $borderWidth: "2px",
10121
+ $borderStyle: "solid",
10122
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
10123
+ $borderRadius: "9999px"
10199
10124
  }
10200
10125
  ),
10201
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10202
- "div",
10126
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10127
+ Box,
10203
10128
  {
10204
10129
  tabIndex: 0,
10205
- ...checkoutStage === "checkout" && {
10206
- style: {
10207
- fontWeight: "700"
10208
- }
10130
+ ...checkoutStage !== "checkout" && {
10131
+ $opacity: "0.6375"
10209
10132
  },
10210
- children: "2. Checkout"
10133
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10134
+ Text,
10135
+ {
10136
+ $font: theme.typography.text.fontFamily,
10137
+ $size: 19,
10138
+ $weight: checkoutStage === "plan" ? 600 : 400,
10139
+ $color: theme.typography.text.color,
10140
+ children: "2. Checkout"
10141
+ }
10142
+ )
10211
10143
  }
10212
10144
  )
10213
10145
  ] })
10214
- ] }) }),
10215
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $height: "100%", children: [
10216
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
10146
+ ] }) }) }),
10147
+ isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10148
+ Flex,
10149
+ {
10150
+ $flexDirection: "column",
10151
+ $justifyContent: "center",
10152
+ $alignItems: "center",
10153
+ $flexGrow: "1",
10154
+ $gap: `${32 / TEXT_BASE_SIZE}rem`,
10155
+ $padding: `${32 / TEXT_BASE_SIZE}rem ${40 / TEXT_BASE_SIZE}rem`,
10156
+ $whiteSpace: "nowrap",
10157
+ children: [
10158
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10159
+ IconRound,
10160
+ {
10161
+ name: "check",
10162
+ size: "3xl",
10163
+ colors: [
10164
+ theme.card.background,
10165
+ isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
10166
+ ]
10167
+ }
10168
+ ),
10169
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10170
+ Text,
10171
+ {
10172
+ as: "h1",
10173
+ $font: theme.typography.heading1.fontFamily,
10174
+ $size: theme.typography.heading1.fontSize,
10175
+ $weight: theme.typography.heading1.fontWeight,
10176
+ $color: theme.typography.heading1.color,
10177
+ children: "Subscription updated!"
10178
+ }
10179
+ ),
10180
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledButton, { onClick: () => setLayout("portal"), children: "Close" })
10181
+ ]
10182
+ }
10183
+ ),
10184
+ !isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: [
10185
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10217
10186
  Flex,
10218
10187
  {
10219
10188
  $flexDirection: "column",
10189
+ $flexGrow: "1",
10220
10190
  $gap: "1rem",
10221
10191
  $padding: "2rem 2.5rem 2rem 2.5rem",
10222
- $backgroundColor: "#FBFBFB",
10223
- $borderRadius: "0 0.5rem 0",
10192
+ $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
10224
10193
  $flex: "1",
10225
- $height: "100%",
10194
+ $overflow: "auto",
10226
10195
  children: [
10227
- checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
10228
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
10229
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10196
+ checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
10197
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
10198
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10230
10199
  Text,
10231
10200
  {
10232
- as: "h1",
10201
+ as: "h3",
10233
10202
  id: "select-plan-dialog-label",
10234
- $size: 18,
10235
- $marginBottom: ".5rem",
10203
+ $font: theme.typography.heading3.fontFamily,
10204
+ $size: theme.typography.heading3.fontSize,
10205
+ $weight: theme.typography.heading3.fontWeight,
10206
+ $color: theme.typography.heading3.color,
10207
+ $marginBottom: "0.5rem",
10236
10208
  children: "Select plan"
10237
10209
  }
10238
10210
  ),
10239
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10211
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10240
10212
  Text,
10241
10213
  {
10242
10214
  as: "p",
10243
10215
  id: "select-plan-dialog-description",
10244
- $size: 14,
10245
- $weight: 400,
10216
+ $font: theme.typography.text.fontFamily,
10217
+ $size: theme.typography.text.fontSize,
10218
+ $weight: theme.typography.text.fontWeight,
10219
+ $color: theme.typography.text.color,
10246
10220
  children: "Choose your base plan"
10247
10221
  }
10248
10222
  )
10249
10223
  ] }),
10250
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $flexDirection: "row", $gap: "1rem", $flex: "1", $height: "100%", children: availablePlans?.map((plan) => {
10251
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
10224
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $flexWrap: "wrap", $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
10225
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10252
10226
  Flex,
10253
10227
  {
10254
- $height: "100%",
10255
10228
  $flexDirection: "column",
10256
- $backgroundColor: "white",
10257
- $flex: "1",
10258
- $border: `2px solid ${plan.id === selectedPlan?.id ? "#194BFB" : "transparent"}`,
10259
- $borderRadius: ".5rem",
10260
- $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)",
10229
+ $width: "100%",
10230
+ $minWidth: "280px",
10231
+ $maxWidth: `calc(${100 / 3}% - 1rem)`,
10232
+ $backgroundColor: theme.card.background,
10233
+ $outlineWidth: "2px",
10234
+ $outlineStyle: "solid",
10235
+ $outlineColor: plan.id === selectedPlan?.id ? theme.primary : "transparent",
10236
+ $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
10237
+ ...theme.card.hasShadow && {
10238
+ $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)"
10239
+ },
10261
10240
  children: [
10262
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
10241
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10263
10242
  Flex,
10264
10243
  {
10265
10244
  $flexDirection: "column",
@@ -10267,38 +10246,40 @@ var CheckoutDialog = () => {
10267
10246
  $gap: "1rem",
10268
10247
  $width: "100%",
10269
10248
  $height: "auto",
10270
- $padding: "2rem 1.5rem 1.5rem",
10271
- $borderBottom: "1px solid #DEDEDE",
10249
+ $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
10250
+ $borderBottomWidth: "1px",
10251
+ $borderStyle: "solid",
10252
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
10272
10253
  children: [
10273
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: plan.name }),
10274
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 14, children: plan.description }),
10275
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { children: [
10276
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
10254
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 20, $weight: 600, children: plan.name }),
10255
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 14, children: plan.description }),
10256
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { children: [
10257
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
10277
10258
  (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
10278
10259
  ) }),
10279
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $display: "inline-block", $fontSize: ".75rem", children: [
10260
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
10280
10261
  "/",
10281
10262
  planPeriod
10282
10263
  ] })
10283
10264
  ] }),
10284
- (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10265
+ (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10285
10266
  Flex,
10286
10267
  {
10287
10268
  $position: "absolute",
10288
10269
  $right: "1rem",
10289
10270
  $top: "1rem",
10290
- $fontSize: ".625rem",
10291
- $color: "white",
10292
- $backgroundColor: "#194BFB",
10293
- $borderRadius: "999px",
10294
- $padding: ".125rem .85rem",
10271
+ $fontSize: "0.625rem",
10272
+ $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
10273
+ $backgroundColor: theme.primary,
10274
+ $borderRadius: "9999px",
10275
+ $padding: "0.125rem 0.85rem",
10295
10276
  children: "Current plan"
10296
10277
  }
10297
10278
  )
10298
10279
  ]
10299
10280
  }
10300
10281
  ),
10301
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10282
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10302
10283
  Flex,
10303
10284
  {
10304
10285
  $flexDirection: "column",
@@ -10309,21 +10290,32 @@ var CheckoutDialog = () => {
10309
10290
  $height: "auto",
10310
10291
  $padding: "1.5rem",
10311
10292
  children: plan.features.map((feature) => {
10312
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexShrink: "0", $gap: "1rem", children: [
10313
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10314
- IconRound,
10315
- {
10316
- name: feature.icon,
10317
- size: "tn",
10318
- colors: ["#000000", "#F5F5F5"]
10319
- }
10320
- ),
10321
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: ".75rem", $color: "#00000", children: feature.name }) })
10322
- ] }, feature.id);
10293
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10294
+ Flex,
10295
+ {
10296
+ $flexShrink: "0",
10297
+ $gap: "1rem",
10298
+ children: [
10299
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10300
+ IconRound,
10301
+ {
10302
+ name: feature.icon,
10303
+ size: "tn",
10304
+ colors: [
10305
+ theme.primary,
10306
+ isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.0625)"
10307
+ ]
10308
+ }
10309
+ ),
10310
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 12, children: feature.name }) })
10311
+ ]
10312
+ },
10313
+ feature.id
10314
+ );
10323
10315
  })
10324
10316
  }
10325
10317
  ),
10326
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
10318
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10327
10319
  Flex,
10328
10320
  {
10329
10321
  $flexDirection: "column",
@@ -10333,7 +10325,7 @@ var CheckoutDialog = () => {
10333
10325
  $height: "auto",
10334
10326
  $padding: "1.5rem",
10335
10327
  children: [
10336
- plan.id === selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
10328
+ plan.id === selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10337
10329
  Flex,
10338
10330
  {
10339
10331
  $justifyContent: "center",
@@ -10342,39 +10334,38 @@ var CheckoutDialog = () => {
10342
10334
  $fontSize: "0.9375rem",
10343
10335
  $padding: "0.625rem 0",
10344
10336
  children: [
10345
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10337
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10346
10338
  Icon2,
10347
10339
  {
10348
10340
  name: "check-rounded",
10349
10341
  style: {
10350
10342
  fontSize: 20,
10351
10343
  lineHeight: "1",
10352
- color: "#194BFB"
10344
+ color: theme.primary
10353
10345
  }
10354
10346
  }
10355
10347
  ),
10356
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10357
- "span",
10348
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10349
+ Text,
10358
10350
  {
10359
- style: {
10360
- color: "#7B7B7B",
10361
- lineHeight: "1.4"
10362
- },
10351
+ $lineHeight: "1.4",
10352
+ $color: theme.typography.text.color,
10363
10353
  children: "Selected"
10364
10354
  }
10365
10355
  )
10366
10356
  ]
10367
10357
  }
10368
10358
  ),
10369
- !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10359
+ !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10370
10360
  StyledButton,
10371
10361
  {
10362
+ disabled: plan.valid === false,
10363
+ ...plan.valid === true && {
10364
+ onClick: () => setSelectedPlan(plan)
10365
+ },
10372
10366
  $size: "sm",
10373
10367
  $color: "primary",
10374
10368
  $variant: "outline",
10375
- onClick: () => {
10376
- setSelectedPlan(plan);
10377
- },
10378
10369
  children: "Select"
10379
10370
  }
10380
10371
  )
@@ -10387,7 +10378,7 @@ var CheckoutDialog = () => {
10387
10378
  );
10388
10379
  }) })
10389
10380
  ] }),
10390
- selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10381
+ selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10391
10382
  PaymentForm,
10392
10383
  {
10393
10384
  plan: selectedPlan,
@@ -10400,16 +10391,345 @@ var CheckoutDialog = () => {
10400
10391
  ]
10401
10392
  }
10402
10393
  ),
10403
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
10404
- OverlaySideBar,
10394
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10395
+ Flex,
10405
10396
  {
10406
- pricePeriod: planPeriod,
10407
- setPricePeriod: setPlanPeriod,
10408
- checkoutStage,
10409
- setCheckoutStage,
10410
- currentPlan,
10411
- selectedPlan,
10412
- paymentMethodId
10397
+ $flexDirection: "column",
10398
+ $backgroundColor: theme.card.background,
10399
+ $borderRadius: "0 0 0.5rem",
10400
+ $width: "21.5rem",
10401
+ $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
10402
+ children: [
10403
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10404
+ Flex,
10405
+ {
10406
+ $flexDirection: "column",
10407
+ $position: "relative",
10408
+ $gap: "1rem",
10409
+ $width: "100%",
10410
+ $height: "auto",
10411
+ $padding: "1.5rem",
10412
+ $borderBottomWidth: "1px",
10413
+ $borderStyle: "solid",
10414
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
10415
+ children: [
10416
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10417
+ Text,
10418
+ {
10419
+ as: "h3",
10420
+ $font: theme.typography.heading3.fontFamily,
10421
+ $size: theme.typography.heading3.fontSize,
10422
+ $weight: theme.typography.heading3.fontWeight,
10423
+ $color: theme.typography.heading3.color,
10424
+ children: "Subscription"
10425
+ }
10426
+ ) }),
10427
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10428
+ Flex,
10429
+ {
10430
+ $borderWidth: "1px",
10431
+ $borderStyle: "solid",
10432
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
10433
+ $borderRadius: "2.5rem",
10434
+ $cursor: "pointer",
10435
+ children: [
10436
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10437
+ Flex,
10438
+ {
10439
+ onClick: () => setPlanPeriod("month"),
10440
+ $justifyContent: "center",
10441
+ $alignItems: "center",
10442
+ $padding: "0.25rem 0.5rem",
10443
+ $flex: "1",
10444
+ ...planPeriod === "month" && {
10445
+ $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.075)" : "hsla(0, 0%, 100%, 0.15)"
10446
+ },
10447
+ $borderRadius: "2.5rem",
10448
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10449
+ Text,
10450
+ {
10451
+ $font: theme.typography.text.fontFamily,
10452
+ $size: 14,
10453
+ $weight: planPeriod === "month" ? 600 : 400,
10454
+ $color: theme.typography.text.color,
10455
+ children: "Billed monthly"
10456
+ }
10457
+ )
10458
+ }
10459
+ ),
10460
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10461
+ Flex,
10462
+ {
10463
+ onClick: () => setPlanPeriod("year"),
10464
+ $justifyContent: "center",
10465
+ $alignItems: "center",
10466
+ $padding: "0.25rem 0.5rem",
10467
+ $flex: "1",
10468
+ ...planPeriod === "year" && {
10469
+ $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.075)" : "hsla(0, 0%, 100%, 0.15)"
10470
+ },
10471
+ $borderRadius: "2.5rem",
10472
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10473
+ Text,
10474
+ {
10475
+ $font: theme.typography.text.fontFamily,
10476
+ $size: 14,
10477
+ $weight: planPeriod === "year" ? 600 : 400,
10478
+ $color: theme.typography.text.color,
10479
+ children: "Billed yearly"
10480
+ }
10481
+ )
10482
+ }
10483
+ )
10484
+ ]
10485
+ }
10486
+ ),
10487
+ savingsPercentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10488
+ Text,
10489
+ {
10490
+ $font: theme.typography.text.fontFamily,
10491
+ $size: 11,
10492
+ $weight: theme.typography.text.fontWeight,
10493
+ $color: theme.primary,
10494
+ children: planPeriod === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing`
10495
+ }
10496
+ ) })
10497
+ ]
10498
+ }
10499
+ ),
10500
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10501
+ Flex,
10502
+ {
10503
+ $flexDirection: "column",
10504
+ $position: "relative",
10505
+ $gap: "1rem",
10506
+ $width: "100%",
10507
+ $height: "auto",
10508
+ $padding: "1.5rem",
10509
+ $flex: "1",
10510
+ $borderBottomWidth: "1px",
10511
+ $borderStyle: "solid",
10512
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
10513
+ children: [
10514
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10515
+ Text,
10516
+ {
10517
+ $font: theme.typography.text.fontFamily,
10518
+ $size: 14,
10519
+ $weight: theme.typography.text.fontWeight,
10520
+ $color: theme.typography.text.color,
10521
+ children: "Plan"
10522
+ }
10523
+ ) }),
10524
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
10525
+ currentPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
10526
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10527
+ Flex,
10528
+ {
10529
+ ...selectedPlan && {
10530
+ $opacity: "0.625",
10531
+ $textDecoration: "line-through"
10532
+ },
10533
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10534
+ Text,
10535
+ {
10536
+ $font: theme.typography.heading4.fontFamily,
10537
+ $size: theme.typography.heading4.fontSize,
10538
+ $weight: theme.typography.heading4.fontWeight,
10539
+ $color: theme.typography.heading4.color,
10540
+ children: currentPlan.name
10541
+ }
10542
+ )
10543
+ }
10544
+ ),
10545
+ typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10546
+ Text,
10547
+ {
10548
+ $font: theme.typography.text.fontFamily,
10549
+ $size: theme.typography.text.fontSize,
10550
+ $weight: theme.typography.text.fontWeight,
10551
+ $color: theme.typography.text.color,
10552
+ children: [
10553
+ formatCurrency(currentPlan.planPrice),
10554
+ "/",
10555
+ currentPlan.planPeriod
10556
+ ]
10557
+ }
10558
+ ) })
10559
+ ] }),
10560
+ selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
10561
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10562
+ Box,
10563
+ {
10564
+ $width: "100%",
10565
+ $textAlign: "left",
10566
+ $opacity: "50%",
10567
+ $marginBottom: "-0.25rem",
10568
+ $marginTop: "-0.25rem",
10569
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10570
+ Icon2,
10571
+ {
10572
+ name: "arrow-down",
10573
+ style: {
10574
+ display: "inline-block"
10575
+ }
10576
+ }
10577
+ )
10578
+ }
10579
+ ),
10580
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
10581
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10582
+ Text,
10583
+ {
10584
+ $font: theme.typography.heading4.fontFamily,
10585
+ $size: theme.typography.heading4.fontSize,
10586
+ $weight: theme.typography.heading4.fontWeight,
10587
+ $color: theme.typography.heading4.color,
10588
+ children: selectedPlan.name
10589
+ }
10590
+ ) }),
10591
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10592
+ Text,
10593
+ {
10594
+ $font: theme.typography.text.fontFamily,
10595
+ $size: theme.typography.text.fontSize,
10596
+ $weight: theme.typography.text.fontWeight,
10597
+ $color: theme.typography.text.color,
10598
+ children: [
10599
+ formatCurrency(
10600
+ (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10601
+ ),
10602
+ "/",
10603
+ planPeriod
10604
+ ]
10605
+ }
10606
+ ) })
10607
+ ] })
10608
+ ] })
10609
+ ] })
10610
+ ]
10611
+ }
10612
+ ),
10613
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10614
+ Flex,
10615
+ {
10616
+ $flexDirection: "column",
10617
+ $position: "relative",
10618
+ $gap: "1rem",
10619
+ $width: "100%",
10620
+ $height: "auto",
10621
+ $padding: "1.5rem",
10622
+ children: [
10623
+ selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", children: [
10624
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10625
+ Text,
10626
+ {
10627
+ $font: theme.typography.text.fontFamily,
10628
+ $size: theme.typography.text.fontSize,
10629
+ $weight: theme.typography.text.fontWeight,
10630
+ $color: theme.typography.text.color,
10631
+ children: [
10632
+ planPeriod === "month" ? "Monthly" : "Yearly",
10633
+ " total:",
10634
+ " "
10635
+ ]
10636
+ }
10637
+ ) }),
10638
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10639
+ Text,
10640
+ {
10641
+ $font: theme.typography.text.fontFamily,
10642
+ $size: theme.typography.text.fontSize,
10643
+ $weight: theme.typography.text.fontWeight,
10644
+ $color: theme.typography.text.color,
10645
+ children: [
10646
+ formatCurrency(
10647
+ (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10648
+ ),
10649
+ "/",
10650
+ planPeriod
10651
+ ]
10652
+ }
10653
+ ) })
10654
+ ] }),
10655
+ checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10656
+ StyledButton,
10657
+ {
10658
+ disabled: !selectedPlan,
10659
+ ...selectedPlan && {
10660
+ onClick: () => setCheckoutStage("checkout")
10661
+ },
10662
+ $size: "sm",
10663
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10664
+ Flex,
10665
+ {
10666
+ $gap: "0.5rem",
10667
+ $justifyContent: "center",
10668
+ $alignItems: "center",
10669
+ $padding: "0 1rem",
10670
+ children: [
10671
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $align: "left", children: "Next: Checkout" }),
10672
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
10673
+ ]
10674
+ }
10675
+ )
10676
+ }
10677
+ ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10678
+ StyledButton,
10679
+ {
10680
+ disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId || isLoading,
10681
+ onClick: async () => {
10682
+ const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
10683
+ if (!api || !selectedPlan || !priceId || !paymentMethodId) {
10684
+ return;
10685
+ }
10686
+ try {
10687
+ setIsLoading(true);
10688
+ setIsCheckoutComplete(false);
10689
+ await api.checkout({
10690
+ changeSubscriptionRequestBody: {
10691
+ newPlanId: selectedPlan.id,
10692
+ newPriceId: priceId,
10693
+ paymentMethodId
10694
+ }
10695
+ });
10696
+ setIsCheckoutComplete(true);
10697
+ } catch {
10698
+ setError(
10699
+ "Error processing payment. Please try a different payment method."
10700
+ );
10701
+ } finally {
10702
+ setIsLoading(false);
10703
+ }
10704
+ },
10705
+ $size: "md",
10706
+ children: "Pay now"
10707
+ }
10708
+ ),
10709
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10710
+ Text,
10711
+ {
10712
+ $font: theme.typography.text.fontFamily,
10713
+ $size: theme.typography.text.fontSize,
10714
+ $weight: theme.typography.text.fontWeight,
10715
+ $color: theme.typography.text.color,
10716
+ children: "Discounts & credits applied at checkout"
10717
+ }
10718
+ ) }),
10719
+ error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10720
+ Text,
10721
+ {
10722
+ $font: theme.typography.text.fontFamily,
10723
+ $size: theme.typography.text.fontSize,
10724
+ $weight: 500,
10725
+ $color: "#DB6669",
10726
+ children: error
10727
+ }
10728
+ ) })
10729
+ ]
10730
+ }
10731
+ )
10732
+ ]
10413
10733
  }
10414
10734
  )
10415
10735
  ] })
@@ -10417,7 +10737,7 @@ var CheckoutDialog = () => {
10417
10737
  };
10418
10738
 
10419
10739
  // src/components/elements/plan-manager/PlanManager.tsx
10420
- var import_jsx_runtime9 = require("react/jsx-runtime");
10740
+ var import_jsx_runtime11 = require("react/jsx-runtime");
10421
10741
  var resolveDesignProps = (props) => {
10422
10742
  return {
10423
10743
  header: {
@@ -10441,28 +10761,29 @@ var resolveDesignProps = (props) => {
10441
10761
  },
10442
10762
  callToAction: {
10443
10763
  isVisible: props.callToAction?.isVisible ?? true,
10444
- buttonSize: props.callToAction?.buttonSize ?? "md",
10764
+ buttonSize: props.callToAction?.buttonSize ?? "lg",
10445
10765
  buttonStyle: props.callToAction?.buttonStyle ?? "primary"
10446
10766
  }
10447
10767
  };
10448
10768
  };
10449
- var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal, ...rest }, ref) => {
10769
+ var PlanManager = (0, import_react10.forwardRef)(({ children, className, portal, ...rest }, ref) => {
10450
10770
  const props = resolveDesignProps(rest);
10451
- const { data, settings, layout, stripe, setLayout } = useEmbed();
10452
- const { currentPlan, canChangePlan } = (0, import_react8.useMemo)(() => {
10771
+ const theme = nt();
10772
+ const { data, layout, stripe, setLayout } = useEmbed();
10773
+ const { currentPlan, canChangePlan } = (0, import_react10.useMemo)(() => {
10453
10774
  return {
10454
10775
  currentPlan: data.company?.plan,
10455
10776
  canChangePlan: stripe !== null
10456
10777
  };
10457
10778
  }, [data.company, stripe]);
10458
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref, className, children: [
10459
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10779
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
10780
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10460
10781
  Flex,
10461
10782
  {
10462
10783
  $flexDirection: "column",
10463
10784
  $gap: "0.75rem",
10464
10785
  ...canChangePlan && { $margin: "0 0 0.5rem" },
10465
- children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
10786
+ children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
10466
10787
  Flex,
10467
10788
  {
10468
10789
  $justifyContent: "space-between",
@@ -10470,36 +10791,36 @@ var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal,
10470
10791
  $width: "100%",
10471
10792
  ...canChangePlan && { $margin: "0 0 1.5rem" },
10472
10793
  children: [
10473
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
10474
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10794
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
10795
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10475
10796
  Text,
10476
10797
  {
10477
- $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
10478
- $size: settings.theme.typography[props.header.title.fontStyle].fontSize,
10479
- $weight: settings.theme.typography[props.header.title.fontStyle].fontWeight,
10480
- $color: settings.theme.typography[props.header.title.fontStyle].color,
10798
+ $font: theme.typography[props.header.title.fontStyle].fontFamily,
10799
+ $size: theme.typography[props.header.title.fontStyle].fontSize,
10800
+ $weight: theme.typography[props.header.title.fontStyle].fontWeight,
10801
+ $color: theme.typography[props.header.title.fontStyle].color,
10481
10802
  $lineHeight: 1,
10482
10803
  children: currentPlan.name
10483
10804
  }
10484
10805
  ) }),
10485
- props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10806
+ props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10486
10807
  Text,
10487
10808
  {
10488
- $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
10489
- $size: settings.theme.typography[props.header.description.fontStyle].fontSize,
10490
- $weight: settings.theme.typography[props.header.description.fontStyle].fontWeight,
10491
- $color: settings.theme.typography[props.header.description.fontStyle].color,
10809
+ $font: theme.typography[props.header.description.fontStyle].fontFamily,
10810
+ $size: theme.typography[props.header.description.fontStyle].fontSize,
10811
+ $weight: theme.typography[props.header.description.fontStyle].fontWeight,
10812
+ $color: theme.typography[props.header.description.fontStyle].color,
10492
10813
  children: currentPlan.description
10493
10814
  }
10494
10815
  )
10495
10816
  ] }),
10496
- props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
10817
+ props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
10497
10818
  Text,
10498
10819
  {
10499
- $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
10500
- $size: settings.theme.typography[props.header.price.fontStyle].fontSize,
10501
- $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
10502
- $color: settings.theme.typography[props.header.price.fontStyle].color,
10820
+ $font: theme.typography[props.header.price.fontStyle].fontFamily,
10821
+ $size: theme.typography[props.header.price.fontStyle].fontSize,
10822
+ $weight: theme.typography[props.header.price.fontStyle].fontWeight,
10823
+ $color: theme.typography[props.header.price.fontStyle].color,
10503
10824
  children: [
10504
10825
  formatCurrency(currentPlan.planPrice),
10505
10826
  "/",
@@ -10512,7 +10833,7 @@ var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal,
10512
10833
  )
10513
10834
  }
10514
10835
  ),
10515
- canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10836
+ canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10516
10837
  StyledButton,
10517
10838
  {
10518
10839
  onClick: () => {
@@ -10520,24 +10841,16 @@ var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal,
10520
10841
  },
10521
10842
  $size: props.callToAction.buttonSize,
10522
10843
  $color: props.callToAction.buttonStyle,
10523
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10524
- Text,
10525
- {
10526
- $font: settings.theme.typography.text.fontFamily,
10527
- $size: settings.theme.typography.text.fontSize,
10528
- $weight: settings.theme.typography.text.fontWeight,
10529
- children: "Change Plan"
10530
- }
10531
- )
10844
+ children: "Change Plan"
10532
10845
  }
10533
10846
  ),
10534
- canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckoutDialog, {}), portal || document.body)
10847
+ canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckoutDialog, {}), portal || document.body)
10535
10848
  ] });
10536
10849
  });
10537
10850
 
10538
10851
  // src/components/elements/included-features/IncludedFeatures.tsx
10539
- var import_react9 = require("react");
10540
- var import_jsx_runtime10 = require("react/jsx-runtime");
10852
+ var import_react11 = require("react");
10853
+ var import_jsx_runtime12 = require("react/jsx-runtime");
10541
10854
  function resolveDesignProps2(props) {
10542
10855
  return {
10543
10856
  header: {
@@ -10547,12 +10860,12 @@ function resolveDesignProps2(props) {
10547
10860
  },
10548
10861
  icons: {
10549
10862
  isVisible: props.icons?.isVisible ?? true,
10550
- fontStyle: props.icons?.fontStyle ?? "heading3",
10863
+ fontStyle: props.icons?.fontStyle ?? "heading5",
10551
10864
  style: props.icons?.style ?? "light"
10552
10865
  },
10553
10866
  entitlement: {
10554
10867
  isVisible: props.entitlement?.isVisible ?? true,
10555
- fontStyle: props.entitlement?.fontStyle ?? "heading5"
10868
+ fontStyle: props.entitlement?.fontStyle ?? "text"
10556
10869
  },
10557
10870
  usage: {
10558
10871
  isVisible: props.usage?.isVisible ?? true,
@@ -10560,10 +10873,11 @@ function resolveDesignProps2(props) {
10560
10873
  }
10561
10874
  };
10562
10875
  }
10563
- var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref) => {
10876
+ var IncludedFeatures = (0, import_react11.forwardRef)(({ className, ...rest }, ref) => {
10564
10877
  const props = resolveDesignProps2(rest);
10565
- const { data, settings } = useEmbed();
10566
- const features = (0, import_react9.useMemo)(() => {
10878
+ const theme = nt();
10879
+ const { data } = useEmbed();
10880
+ const features = (0, import_react11.useMemo)(() => {
10567
10881
  return (data.featureUsage?.features || []).map(
10568
10882
  ({
10569
10883
  access,
@@ -10590,14 +10904,17 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
10590
10904
  }
10591
10905
  );
10592
10906
  }, [data.featureUsage]);
10593
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
10594
- props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10907
+ const isLightBackground = (0, import_react11.useMemo)(() => {
10908
+ return hexToHSL(theme.card.background).l > 50;
10909
+ }, [theme.card.background]);
10910
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
10911
+ props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
10595
10912
  Text,
10596
10913
  {
10597
- $font: settings.theme.typography[props.header.fontStyle].fontFamily,
10598
- $size: settings.theme.typography[props.header.fontStyle].fontSize,
10599
- $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
10600
- $color: settings.theme.typography[props.header.fontStyle].color,
10914
+ $font: theme.typography[props.header.fontStyle].fontFamily,
10915
+ $size: theme.typography[props.header.fontStyle].fontSize,
10916
+ $weight: theme.typography[props.header.fontStyle].fontWeight,
10917
+ $color: theme.typography[props.header.fontStyle].color,
10601
10918
  children: props.header.text
10602
10919
  }
10603
10920
  ) }),
@@ -10608,7 +10925,7 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
10608
10925
  }
10609
10926
  return [
10610
10927
  ...acc,
10611
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10928
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
10612
10929
  Flex,
10613
10930
  {
10614
10931
  $flexWrap: "wrap",
@@ -10616,49 +10933,51 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
10616
10933
  $alignItems: "center",
10617
10934
  $gap: "1rem",
10618
10935
  children: [
10619
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "1rem", children: [
10620
- props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10936
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
10937
+ props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
10621
10938
  IconRound,
10622
10939
  {
10623
10940
  name: feature.icon,
10624
10941
  size: "sm",
10625
10942
  colors: [
10626
- settings.theme.primary,
10627
- `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`
10943
+ theme.primary,
10944
+ isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
10628
10945
  ]
10629
10946
  }
10630
10947
  ),
10631
- feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10948
+ feature?.name && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
10632
10949
  Text,
10633
10950
  {
10634
- $font: settings.theme.typography[props.icons.fontStyle].fontFamily,
10635
- $size: settings.theme.typography[props.icons.fontStyle].fontSize,
10636
- $weight: settings.theme.typography[props.icons.fontStyle].fontWeight,
10637
- $color: settings.theme.typography[props.icons.fontStyle].color,
10951
+ $font: theme.typography[props.icons.fontStyle].fontFamily,
10952
+ $size: theme.typography[props.icons.fontStyle].fontSize,
10953
+ $weight: theme.typography[props.icons.fontStyle].fontWeight,
10954
+ $color: theme.typography[props.icons.fontStyle].color,
10638
10955
  children: feature.name
10639
10956
  }
10640
10957
  ) })
10641
10958
  ] }),
10642
- allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $textAlign: "right", children: [
10643
- props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10959
+ allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { $textAlign: "right", children: [
10960
+ props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
10644
10961
  Text,
10645
10962
  {
10646
10963
  as: Box,
10647
- $font: settings.theme.typography[props.entitlement.fontStyle].fontFamily,
10648
- $size: settings.theme.typography[props.entitlement.fontStyle].fontSize,
10649
- $weight: settings.theme.typography[props.entitlement.fontStyle].fontWeight,
10650
- $color: settings.theme.typography[props.entitlement.fontStyle].color,
10964
+ $font: theme.typography[props.entitlement.fontStyle].fontFamily,
10965
+ $size: theme.typography[props.entitlement.fontStyle].fontSize,
10966
+ $weight: theme.typography[props.entitlement.fontStyle].fontWeight,
10967
+ $lineHeight: 1.5,
10968
+ $color: theme.typography[props.entitlement.fontStyle].color,
10651
10969
  children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
10652
10970
  }
10653
10971
  ),
10654
- props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10972
+ props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
10655
10973
  Text,
10656
10974
  {
10657
10975
  as: Box,
10658
- $font: settings.theme.typography[props.usage.fontStyle].fontFamily,
10659
- $size: settings.theme.typography[props.usage.fontStyle].fontSize,
10660
- $weight: settings.theme.typography[props.usage.fontStyle].fontWeight,
10661
- $color: settings.theme.typography[props.usage.fontStyle].color,
10976
+ $font: theme.typography[props.usage.fontStyle].fontFamily,
10977
+ $size: theme.typography[props.usage.fontStyle].fontSize,
10978
+ $weight: theme.typography[props.usage.fontStyle].fontWeight,
10979
+ $lineHeight: 1.5,
10980
+ $color: theme.typography[props.usage.fontStyle].color,
10662
10981
  children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
10663
10982
  }
10664
10983
  )
@@ -10675,8 +10994,8 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
10675
10994
  });
10676
10995
 
10677
10996
  // src/components/elements/metered-features/MeteredFeatures.tsx
10678
- var import_react10 = require("react");
10679
- var import_jsx_runtime11 = require("react/jsx-runtime");
10997
+ var import_react12 = require("react");
10998
+ var import_jsx_runtime13 = require("react/jsx-runtime");
10680
10999
  function resolveDesignProps3(props) {
10681
11000
  return {
10682
11001
  isVisible: props.isVisible ?? true,
@@ -10705,10 +11024,11 @@ function resolveDesignProps3(props) {
10705
11024
  }
10706
11025
  };
10707
11026
  }
10708
- var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, ref) => {
11027
+ var MeteredFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
10709
11028
  const props = resolveDesignProps3(rest);
10710
- const { data, settings } = useEmbed();
10711
- const features = (0, import_react10.useMemo)(() => {
11029
+ const theme = nt();
11030
+ const { data } = useEmbed();
11031
+ const features = (0, import_react12.useMemo)(() => {
10712
11032
  return (data.featureUsage?.features || []).map(
10713
11033
  ({
10714
11034
  access,
@@ -10735,67 +11055,67 @@ var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, re
10735
11055
  }
10736
11056
  );
10737
11057
  }, [data.featureUsage]);
10738
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
11058
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
10739
11059
  (acc, { allocation, allocationType, feature, usage }, index) => {
10740
11060
  if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
10741
11061
  return acc;
10742
11062
  }
10743
11063
  return [
10744
11064
  ...acc,
10745
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $gap: "1.5rem", children: [
10746
- props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconRound, { name: feature.icon, size: "sm" }) }),
10747
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { $flexGrow: "1", children: [
10748
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { children: [
10749
- feature?.name && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { $flexGrow: "1", children: [
10750
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11065
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1.5rem", children: [
11066
+ props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconRound, { name: feature.icon, size: "sm" }) }),
11067
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $flexGrow: "1", children: [
11068
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { children: [
11069
+ feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $flexGrow: "1", children: [
11070
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
10751
11071
  Text,
10752
11072
  {
10753
11073
  as: Box,
10754
- $font: settings.theme.typography[props.header.fontStyle].fontFamily,
10755
- $size: settings.theme.typography[props.header.fontStyle].fontSize,
10756
- $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
10757
- $color: settings.theme.typography[props.header.fontStyle].color,
11074
+ $font: theme.typography[props.header.fontStyle].fontFamily,
11075
+ $size: theme.typography[props.header.fontStyle].fontSize,
11076
+ $weight: theme.typography[props.header.fontStyle].fontWeight,
11077
+ $color: theme.typography[props.header.fontStyle].color,
10758
11078
  children: feature.name
10759
11079
  }
10760
11080
  ),
10761
- props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11081
+ props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
10762
11082
  Text,
10763
11083
  {
10764
11084
  as: Box,
10765
- $font: settings.theme.typography[props.description.fontStyle].fontFamily,
10766
- $size: settings.theme.typography[props.description.fontStyle].fontSize,
10767
- $weight: settings.theme.typography[props.description.fontStyle].fontWeight,
10768
- $color: settings.theme.typography[props.description.fontStyle].color,
11085
+ $font: theme.typography[props.description.fontStyle].fontFamily,
11086
+ $size: theme.typography[props.description.fontStyle].fontSize,
11087
+ $weight: theme.typography[props.description.fontStyle].fontWeight,
11088
+ $color: theme.typography[props.description.fontStyle].color,
10769
11089
  children: feature.description
10770
11090
  }
10771
11091
  )
10772
11092
  ] }),
10773
- allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { $textAlign: "right", children: [
10774
- props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11093
+ allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $textAlign: "right", children: [
11094
+ props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
10775
11095
  Text,
10776
11096
  {
10777
11097
  as: Box,
10778
- $font: settings.theme.typography[props.allocation.fontStyle].fontFamily,
10779
- $size: settings.theme.typography[props.allocation.fontStyle].fontSize,
10780
- $weight: settings.theme.typography[props.allocation.fontStyle].fontWeight,
10781
- $color: settings.theme.typography[props.allocation.fontStyle].color,
11098
+ $font: theme.typography[props.allocation.fontStyle].fontFamily,
11099
+ $size: theme.typography[props.allocation.fontStyle].fontSize,
11100
+ $weight: theme.typography[props.allocation.fontStyle].fontWeight,
11101
+ $color: theme.typography[props.allocation.fontStyle].color,
10782
11102
  children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
10783
11103
  }
10784
11104
  ),
10785
- props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11105
+ props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
10786
11106
  Text,
10787
11107
  {
10788
11108
  as: Box,
10789
- $font: settings.theme.typography[props.usage.fontStyle].fontFamily,
10790
- $size: settings.theme.typography[props.usage.fontStyle].fontSize,
10791
- $weight: settings.theme.typography[props.usage.fontStyle].fontWeight,
10792
- $color: settings.theme.typography[props.usage.fontStyle].color,
11109
+ $font: theme.typography[props.usage.fontStyle].fontFamily,
11110
+ $size: theme.typography[props.usage.fontStyle].fontSize,
11111
+ $weight: theme.typography[props.usage.fontStyle].fontWeight,
11112
+ $color: theme.typography[props.usage.fontStyle].color,
10793
11113
  children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
10794
11114
  }
10795
11115
  )
10796
11116
  ] })
10797
11117
  ] }),
10798
- typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11118
+ typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
10799
11119
  ProgressBar,
10800
11120
  {
10801
11121
  progress: usage / allocation * 100,
@@ -10813,8 +11133,8 @@ var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, re
10813
11133
  });
10814
11134
 
10815
11135
  // src/components/elements/upcoming-bill/UpcomingBill.tsx
10816
- var import_react11 = require("react");
10817
- var import_jsx_runtime12 = require("react/jsx-runtime");
11136
+ var import_react13 = require("react");
11137
+ var import_jsx_runtime14 = require("react/jsx-runtime");
10818
11138
  function resolveDesignProps4(props) {
10819
11139
  return {
10820
11140
  header: {
@@ -10833,10 +11153,11 @@ function resolveDesignProps4(props) {
10833
11153
  }
10834
11154
  };
10835
11155
  }
10836
- var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref) => {
11156
+ var UpcomingBill = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
10837
11157
  const props = resolveDesignProps4(rest);
10838
- const { data, settings, stripe } = useEmbed();
10839
- const { upcomingInvoice } = (0, import_react11.useMemo)(() => {
11158
+ const theme = nt();
11159
+ const { data, stripe } = useEmbed();
11160
+ const { upcomingInvoice } = (0, import_react13.useMemo)(() => {
10840
11161
  return {
10841
11162
  upcomingInvoice: {
10842
11163
  ...data.upcomingInvoice?.amountDue && {
@@ -10851,23 +11172,23 @@ var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref)
10851
11172
  }
10852
11173
  };
10853
11174
  }, [data.subscription, data.upcomingInvoice]);
10854
- if (!stripe || !data.upcomingInvoice) {
11175
+ if (!stripe || !upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
10855
11176
  return null;
10856
11177
  }
10857
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className, children: [
10858
- props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
11178
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref, className, children: [
11179
+ props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
10859
11180
  Flex,
10860
11181
  {
10861
11182
  $justifyContent: "space-between",
10862
11183
  $alignItems: "center",
10863
11184
  $margin: "0 0 0.75rem",
10864
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
11185
+ children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
10865
11186
  Text,
10866
11187
  {
10867
- $font: settings.theme.typography[props.header.fontStyle].fontFamily,
10868
- $size: settings.theme.typography[props.header.fontStyle].fontSize,
10869
- $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
10870
- $color: settings.theme.typography[props.header.fontStyle].color,
11188
+ $font: theme.typography[props.header.fontStyle].fontFamily,
11189
+ $size: theme.typography[props.header.fontStyle].fontSize,
11190
+ $weight: theme.typography[props.header.fontStyle].fontWeight,
11191
+ $color: theme.typography[props.header.fontStyle].color,
10871
11192
  children: [
10872
11193
  props.header.prefix,
10873
11194
  " ",
@@ -10877,25 +11198,25 @@ var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref)
10877
11198
  )
10878
11199
  }
10879
11200
  ),
10880
- upcomingInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
10881
- props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
11201
+ upcomingInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
11202
+ props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
10882
11203
  Text,
10883
11204
  {
10884
- $font: settings.theme.typography[props.price.fontStyle].fontFamily,
10885
- $size: settings.theme.typography[props.price.fontStyle].fontSize,
10886
- $weight: settings.theme.typography[props.price.fontStyle].fontWeight,
10887
- $color: settings.theme.typography[props.price.fontStyle].color,
11205
+ $font: theme.typography[props.price.fontStyle].fontFamily,
11206
+ $size: theme.typography[props.price.fontStyle].fontSize,
11207
+ $weight: theme.typography[props.price.fontStyle].fontWeight,
11208
+ $color: theme.typography[props.price.fontStyle].color,
10888
11209
  $lineHeight: 1,
10889
11210
  children: formatCurrency(upcomingInvoice.amountDue)
10890
11211
  }
10891
11212
  ) }),
10892
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
11213
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
10893
11214
  Text,
10894
11215
  {
10895
- $font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
10896
- $size: settings.theme.typography[props.contractEndDate.fontStyle].fontSize,
10897
- $weight: settings.theme.typography[props.contractEndDate.fontStyle].fontWeight,
10898
- $color: settings.theme.typography[props.contractEndDate.fontStyle].color,
11216
+ $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
11217
+ $size: theme.typography[props.contractEndDate.fontStyle].fontSize,
11218
+ $weight: theme.typography[props.contractEndDate.fontStyle].fontWeight,
11219
+ $color: theme.typography[props.contractEndDate.fontStyle].color,
10899
11220
  children: "Estimated monthly bill."
10900
11221
  }
10901
11222
  ) })
@@ -10904,9 +11225,9 @@ var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref)
10904
11225
  });
10905
11226
 
10906
11227
  // src/components/elements/payment-method/PaymentMethod.tsx
10907
- var import_react12 = require("react");
11228
+ var import_react14 = require("react");
10908
11229
  var import_react_dom2 = require("react-dom");
10909
- var import_jsx_runtime13 = require("react/jsx-runtime");
11230
+ var import_jsx_runtime15 = require("react/jsx-runtime");
10910
11231
  var resolveDesignProps5 = (props) => {
10911
11232
  return {
10912
11233
  header: {
@@ -10918,10 +11239,11 @@ var resolveDesignProps5 = (props) => {
10918
11239
  }
10919
11240
  };
10920
11241
  };
10921
- var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, portal, ...rest }, ref) => {
11242
+ var PaymentMethod = (0, import_react14.forwardRef)(({ children, className, portal, ...rest }, ref) => {
10922
11243
  const props = resolveDesignProps5(rest);
10923
- const { data, settings, stripe, layout } = useEmbed();
10924
- const paymentMethod = (0, import_react12.useMemo)(() => {
11244
+ const theme = nt();
11245
+ const { data, stripe, layout } = useEmbed();
11246
+ const paymentMethod = (0, import_react14.useMemo)(() => {
10925
11247
  const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
10926
11248
  let monthsToExpiration;
10927
11249
  if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
@@ -10937,31 +11259,34 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
10937
11259
  monthsToExpiration
10938
11260
  };
10939
11261
  }, [data.subscription?.paymentMethod]);
10940
- if (!stripe || !data.subscription?.paymentMethod) {
11262
+ const isLightBackground = (0, import_react14.useMemo)(() => {
11263
+ return hexToHSL(theme.card.background).l > 50;
11264
+ }, [theme.card.background]);
11265
+ if (!stripe || !paymentMethod.cardLast4) {
10941
11266
  return null;
10942
11267
  }
10943
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref, className, children: [
10944
- props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
11268
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref, className, children: [
11269
+ props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
10945
11270
  Flex,
10946
11271
  {
10947
11272
  $justifyContent: "space-between",
10948
11273
  $alignItems: "center",
10949
11274
  $margin: "0 0 1rem",
10950
11275
  children: [
10951
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11276
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
10952
11277
  Text,
10953
11278
  {
10954
- $font: settings.theme.typography[props.header.fontStyle].fontFamily,
10955
- $size: settings.theme.typography[props.header.fontStyle].fontSize,
10956
- $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
10957
- $color: settings.theme.typography[props.header.fontStyle].color,
11279
+ $font: theme.typography[props.header.fontStyle].fontFamily,
11280
+ $size: theme.typography[props.header.fontStyle].fontSize,
11281
+ $weight: theme.typography[props.header.fontStyle].fontWeight,
11282
+ $color: theme.typography[props.header.fontStyle].color,
10958
11283
  children: "Payment Method"
10959
11284
  }
10960
11285
  ),
10961
- typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11286
+ typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
10962
11287
  Text,
10963
11288
  {
10964
- $font: settings.theme.typography.text.fontFamily,
11289
+ $font: theme.typography.text.fontFamily,
10965
11290
  $size: 14,
10966
11291
  $color: "#DB6769",
10967
11292
  children: paymentMethod.monthsToExpiration > 0 ? `Expires in ${paymentMethod.monthsToExpiration} mo` : "Expired"
@@ -10970,25 +11295,25 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
10970
11295
  ]
10971
11296
  }
10972
11297
  ),
10973
- paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11298
+ paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
10974
11299
  Flex,
10975
11300
  {
10976
11301
  $justifyContent: "space-between",
10977
11302
  $alignItems: "center",
10978
11303
  $margin: "0 0 1rem",
10979
- $background: `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`,
11304
+ $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.125)",
10980
11305
  $padding: "0.375rem 1rem",
10981
11306
  $borderRadius: "9999px",
10982
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
11307
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Text, { $font: theme.typography.text.fontFamily, $size: 14, children: [
10983
11308
  "\u{1F4B3} Card ending in ",
10984
11309
  paymentMethod.cardLast4
10985
11310
  ] })
10986
11311
  }
10987
11312
  ),
10988
11313
  layout === "payment" && (0, import_react_dom2.createPortal)(
10989
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(OverlayWrapper, { size: "md", children: [
10990
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
10991
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
11314
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Modal, { size: "md", children: [
11315
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
11316
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
10992
11317
  Flex,
10993
11318
  {
10994
11319
  $flexDirection: "column",
@@ -10996,7 +11321,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
10996
11321
  $height: "100%",
10997
11322
  $gap: "1.5rem",
10998
11323
  children: [
10999
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11324
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11000
11325
  Flex,
11001
11326
  {
11002
11327
  $flexDirection: "column",
@@ -11005,8 +11330,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
11005
11330
  $borderRadius: "0 0 0.5rem 0.5rem",
11006
11331
  $flex: "1",
11007
11332
  $height: "100%",
11008
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
11009
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11333
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
11334
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11010
11335
  Box,
11011
11336
  {
11012
11337
  $fontSize: "18px",
@@ -11016,8 +11341,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
11016
11341
  children: "Default"
11017
11342
  }
11018
11343
  ),
11019
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1rem", children: [
11020
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11344
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
11345
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11021
11346
  Flex,
11022
11347
  {
11023
11348
  $alignItems: "center",
@@ -11025,65 +11350,48 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
11025
11350
  $border: "1px solid #E2E5E9",
11026
11351
  $borderRadius: ".5rem",
11027
11352
  $backgroundColor: "#ffffff",
11028
- $flexDirection: "row",
11029
11353
  $gap: "1rem",
11030
11354
  $width: "100%",
11031
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
11032
- Flex,
11033
- {
11034
- $flexDirection: "row",
11035
- $justifyContent: "space-between",
11036
- $flex: "1",
11037
- children: [
11038
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
11039
- Flex,
11040
- {
11041
- $flexDirection: "row",
11042
- $alignItems: "center",
11043
- $gap: "1rem",
11044
- children: [
11045
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11046
- "svg",
11047
- {
11048
- viewBox: "0 0 24 16",
11049
- fill: "none",
11050
- xmlns: "http://www.w3.org/2000/svg",
11051
- width: "26px",
11052
- height: "auto",
11053
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { children: [
11054
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11055
- "rect",
11056
- {
11057
- stroke: "#DDD",
11058
- fill: "#FFF",
11059
- x: ".25",
11060
- y: ".25",
11061
- width: "23",
11062
- height: "15.5",
11063
- rx: "2"
11064
- }
11065
- ),
11066
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11067
- "path",
11068
- {
11069
- 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",
11070
- fill: "#1434CB"
11071
- }
11072
- )
11073
- ] })
11074
- }
11075
- ) }),
11076
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
11077
- ]
11078
- }
11079
- ),
11080
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
11081
- ]
11082
- }
11083
- )
11355
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $justifyContent: "space-between", $flex: "1", children: [
11356
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
11357
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11358
+ "svg",
11359
+ {
11360
+ viewBox: "0 0 24 16",
11361
+ fill: "none",
11362
+ xmlns: "http://www.w3.org/2000/svg",
11363
+ width: "26px",
11364
+ height: "auto",
11365
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { children: [
11366
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11367
+ "rect",
11368
+ {
11369
+ stroke: "#DDD",
11370
+ fill: "#FFF",
11371
+ x: ".25",
11372
+ y: ".25",
11373
+ width: "23",
11374
+ height: "15.5",
11375
+ rx: "2"
11376
+ }
11377
+ ),
11378
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11379
+ "path",
11380
+ {
11381
+ 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",
11382
+ fill: "#1434CB"
11383
+ }
11384
+ )
11385
+ ] })
11386
+ }
11387
+ ) }),
11388
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
11389
+ ] }),
11390
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
11391
+ ] })
11084
11392
  }
11085
11393
  ),
11086
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11394
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11087
11395
  StyledButton,
11088
11396
  {
11089
11397
  $size: "sm",
@@ -11101,7 +11409,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
11101
11409
  ] })
11102
11410
  }
11103
11411
  ),
11104
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11412
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11105
11413
  Flex,
11106
11414
  {
11107
11415
  $flexDirection: "column",
@@ -11110,8 +11418,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
11110
11418
  $borderRadius: "0 0 0.5rem 0.5rem",
11111
11419
  $flex: "1",
11112
11420
  $height: "100%",
11113
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
11114
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11421
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
11422
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11115
11423
  Box,
11116
11424
  {
11117
11425
  $fontSize: "18px",
@@ -11121,8 +11429,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
11121
11429
  children: "Others"
11122
11430
  }
11123
11431
  ),
11124
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1rem", children: [
11125
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11432
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
11433
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11126
11434
  Flex,
11127
11435
  {
11128
11436
  $alignItems: "center",
@@ -11130,66 +11438,49 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
11130
11438
  $border: "1px solid #E2E5E9",
11131
11439
  $borderRadius: ".5rem",
11132
11440
  $backgroundColor: "#ffffff",
11133
- $flexDirection: "row",
11134
11441
  $gap: "1rem",
11135
11442
  $width: "100%",
11136
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
11137
- Flex,
11138
- {
11139
- $flexDirection: "row",
11140
- $justifyContent: "space-between",
11141
- $flex: "1",
11142
- children: [
11143
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
11144
- Flex,
11145
- {
11146
- $flexDirection: "row",
11147
- $alignItems: "center",
11148
- $gap: "1rem",
11149
- children: [
11150
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11151
- "svg",
11152
- {
11153
- viewBox: "0 0 24 16",
11154
- fill: "none",
11155
- xmlns: "http://www.w3.org/2000/svg",
11156
- width: "26px",
11157
- height: "auto",
11158
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { children: [
11159
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11160
- "rect",
11161
- {
11162
- stroke: "#DDD",
11163
- fill: "#FFF",
11164
- x: ".25",
11165
- y: ".25",
11166
- width: "23",
11167
- height: "15.5",
11168
- rx: "2"
11169
- }
11170
- ),
11171
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11172
- "path",
11173
- {
11174
- 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",
11175
- fill: "#1434CB"
11176
- }
11177
- )
11178
- ] })
11179
- }
11180
- ) }),
11181
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
11182
- ]
11183
- }
11184
- ),
11185
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
11186
- ]
11187
- }
11188
- )
11443
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $justifyContent: "space-between", $flex: "1", children: [
11444
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
11445
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11446
+ "svg",
11447
+ {
11448
+ viewBox: "0 0 24 16",
11449
+ fill: "none",
11450
+ xmlns: "http://www.w3.org/2000/svg",
11451
+ width: "26px",
11452
+ height: "auto",
11453
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { children: [
11454
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11455
+ "rect",
11456
+ {
11457
+ stroke: "#DDD",
11458
+ fill: "#FFF",
11459
+ x: ".25",
11460
+ y: ".25",
11461
+ width: "23",
11462
+ height: "15.5",
11463
+ rx: "2"
11464
+ }
11465
+ ),
11466
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11467
+ "path",
11468
+ {
11469
+ 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",
11470
+ fill: "#1434CB"
11471
+ }
11472
+ )
11473
+ ] })
11474
+ }
11475
+ ) }),
11476
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
11477
+ ] }),
11478
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
11479
+ ] })
11189
11480
  }
11190
11481
  ),
11191
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1rem", children: [
11192
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11482
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
11483
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11193
11484
  StyledButton,
11194
11485
  {
11195
11486
  $size: "sm",
@@ -11203,7 +11494,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
11203
11494
  children: "Make Default"
11204
11495
  }
11205
11496
  ),
11206
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11497
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11207
11498
  StyledButton,
11208
11499
  {
11209
11500
  $size: "sm",
@@ -11232,8 +11523,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
11232
11523
  });
11233
11524
 
11234
11525
  // src/components/elements/invoices/Invoices.tsx
11235
- var import_react13 = require("react");
11236
- var import_jsx_runtime14 = require("react/jsx-runtime");
11526
+ var import_react15 = require("react");
11527
+ var import_jsx_runtime16 = require("react/jsx-runtime");
11237
11528
  function resolveDesignProps6(props) {
11238
11529
  return {
11239
11530
  header: {
@@ -11258,10 +11549,10 @@ function resolveDesignProps6(props) {
11258
11549
  }
11259
11550
  };
11260
11551
  }
11261
- var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
11552
+ var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
11262
11553
  const props = resolveDesignProps6(rest);
11263
- const { settings } = useEmbed();
11264
- const { invoices } = (0, import_react13.useMemo)(() => {
11554
+ const theme = nt();
11555
+ const { invoices } = (0, import_react15.useMemo)(() => {
11265
11556
  return {
11266
11557
  invoices: [
11267
11558
  {
@@ -11275,39 +11566,39 @@ var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
11275
11566
  ]
11276
11567
  };
11277
11568
  }, []);
11278
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
11279
- props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
11569
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
11570
+ props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
11280
11571
  Text,
11281
11572
  {
11282
- $font: settings.theme.typography[props.header.fontStyle].fontFamily,
11283
- $size: settings.theme.typography[props.header.fontStyle].fontSize,
11284
- $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
11285
- $color: settings.theme.typography[props.header.fontStyle].color,
11573
+ $font: theme.typography[props.header.fontStyle].fontFamily,
11574
+ $size: theme.typography[props.header.fontStyle].fontSize,
11575
+ $weight: theme.typography[props.header.fontStyle].fontWeight,
11576
+ $color: theme.typography[props.header.fontStyle].color,
11286
11577
  children: "Invoices"
11287
11578
  }
11288
11579
  ) }),
11289
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
11580
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
11290
11581
  0,
11291
11582
  props.limit.isVisible && props.limit.number || invoices.length
11292
11583
  ).map(({ date, amount }, index) => {
11293
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $justifyContent: "space-between", children: [
11294
- props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
11584
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $justifyContent: "space-between", children: [
11585
+ props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
11295
11586
  Text,
11296
11587
  {
11297
- $font: settings.theme.typography[props.date.fontStyle].fontFamily,
11298
- $size: settings.theme.typography[props.date.fontStyle].fontSize,
11299
- $weight: settings.theme.typography[props.date.fontStyle].fontWeight,
11300
- $color: settings.theme.typography[props.date.fontStyle].color,
11588
+ $font: theme.typography[props.date.fontStyle].fontFamily,
11589
+ $size: theme.typography[props.date.fontStyle].fontSize,
11590
+ $weight: theme.typography[props.date.fontStyle].fontWeight,
11591
+ $color: theme.typography[props.date.fontStyle].color,
11301
11592
  children: toPrettyDate(date)
11302
11593
  }
11303
11594
  ),
11304
- props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
11595
+ props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
11305
11596
  Text,
11306
11597
  {
11307
- $font: settings.theme.typography[props.amount.fontStyle].fontFamily,
11308
- $size: settings.theme.typography[props.amount.fontStyle].fontSize,
11309
- $weight: settings.theme.typography[props.amount.fontStyle].fontWeight,
11310
- $color: settings.theme.typography[props.amount.fontStyle].color,
11598
+ $font: theme.typography[props.amount.fontStyle].fontFamily,
11599
+ $size: theme.typography[props.amount.fontStyle].fontSize,
11600
+ $weight: theme.typography[props.amount.fontStyle].fontWeight,
11601
+ $color: theme.typography[props.amount.fontStyle].color,
11311
11602
  children: [
11312
11603
  "$",
11313
11604
  amount
@@ -11316,15 +11607,15 @@ var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
11316
11607
  )
11317
11608
  ] }, index);
11318
11609
  }) }),
11319
- props.collapse.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
11320
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
11321
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
11610
+ props.collapse.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
11611
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
11612
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
11322
11613
  Text,
11323
11614
  {
11324
- $font: settings.theme.typography[props.collapse.fontStyle].fontFamily,
11325
- $size: settings.theme.typography[props.collapse.fontStyle].fontSize,
11326
- $weight: settings.theme.typography[props.collapse.fontStyle].fontWeight,
11327
- $color: settings.theme.typography[props.collapse.fontStyle].color,
11615
+ $font: theme.typography[props.collapse.fontStyle].fontFamily,
11616
+ $size: theme.typography[props.collapse.fontStyle].fontSize,
11617
+ $weight: theme.typography[props.collapse.fontStyle].fontWeight,
11618
+ $color: theme.typography[props.collapse.fontStyle].color,
11328
11619
  children: "See all"
11329
11620
  }
11330
11621
  )
@@ -11333,22 +11624,22 @@ var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
11333
11624
  });
11334
11625
 
11335
11626
  // src/components/embed/ComponentTree.tsx
11336
- var import_react19 = require("react");
11627
+ var import_react21 = require("react");
11337
11628
 
11338
11629
  // src/components/embed/renderer.ts
11339
- var import_react18 = require("react");
11630
+ var import_react20 = require("react");
11340
11631
 
11341
11632
  // src/components/layout/root/Root.tsx
11342
- var import_react14 = require("react");
11343
- var import_jsx_runtime15 = require("react/jsx-runtime");
11344
- var Root = (0, import_react14.forwardRef)(
11633
+ var import_react16 = require("react");
11634
+ var import_jsx_runtime17 = require("react/jsx-runtime");
11635
+ var Root = (0, import_react16.forwardRef)(
11345
11636
  (props, ref) => {
11346
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, ...props });
11637
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref, ...props });
11347
11638
  }
11348
11639
  );
11349
11640
 
11350
11641
  // src/components/layout/viewport/Viewport.tsx
11351
- var import_react15 = require("react");
11642
+ var import_react17 = require("react");
11352
11643
 
11353
11644
  // src/components/layout/viewport/styles.ts
11354
11645
  var StyledViewport = dt.div`
@@ -11359,27 +11650,64 @@ var StyledViewport = dt.div`
11359
11650
  `;
11360
11651
 
11361
11652
  // src/components/layout/viewport/Viewport.tsx
11362
- var import_jsx_runtime16 = require("react/jsx-runtime");
11363
- var Viewport = (0, import_react15.forwardRef)(
11653
+ var import_jsx_runtime18 = require("react/jsx-runtime");
11654
+ var Viewport = (0, import_react17.forwardRef)(
11364
11655
  ({ children, ...props }, ref) => {
11365
- const { settings, layout } = useEmbed();
11366
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
11656
+ const theme = nt();
11657
+ const { layout } = useEmbed();
11658
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
11367
11659
  StyledViewport,
11368
11660
  {
11369
11661
  ref,
11370
- $numberOfColumns: settings.theme.numberOfColumns,
11662
+ $numberOfColumns: theme.numberOfColumns,
11371
11663
  ...props,
11372
- children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "", children: "DISABLED" }) : children
11664
+ children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Box, { $width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
11665
+ Flex,
11666
+ {
11667
+ $flexDirection: "column",
11668
+ $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
11669
+ $width: "100%",
11670
+ $height: "auto",
11671
+ $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
11672
+ $backgroundColor: theme.card.background,
11673
+ $alignItems: "center",
11674
+ $justifyContent: "center",
11675
+ children: [
11676
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
11677
+ Box,
11678
+ {
11679
+ $marginBottom: "8px",
11680
+ $fontSize: `${theme.typography.heading1.fontSize / TEXT_BASE_SIZE}rem`,
11681
+ $fontFamily: theme.typography.heading1.fontFamily,
11682
+ $fontWeight: theme.typography.heading1.fontWeight,
11683
+ $color: theme.typography.heading1.color,
11684
+ children: "Coming soon"
11685
+ }
11686
+ ),
11687
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
11688
+ Box,
11689
+ {
11690
+ $marginBottom: "8px",
11691
+ $fontSize: `${theme.typography.text.fontSize / TEXT_BASE_SIZE}rem`,
11692
+ $fontFamily: theme.typography.text.fontFamily,
11693
+ $fontWeight: theme.typography.text.fontWeight,
11694
+ $color: theme.typography.text.color,
11695
+ children: "The plan manager will be back very soon."
11696
+ }
11697
+ )
11698
+ ]
11699
+ }
11700
+ ) }) : children
11373
11701
  }
11374
11702
  );
11375
11703
  }
11376
11704
  );
11377
11705
 
11378
11706
  // src/components/layout/column/Column.tsx
11379
- var import_react17 = require("react");
11707
+ var import_react19 = require("react");
11380
11708
 
11381
11709
  // src/components/layout/card/Card.tsx
11382
- var import_react16 = require("react");
11710
+ var import_react18 = require("react");
11383
11711
 
11384
11712
  // src/components/layout/card/styles.ts
11385
11713
  var StyledCard = dt.div(
@@ -11408,7 +11736,7 @@ var StyledCard = dt.div(
11408
11736
 
11409
11737
  ${() => {
11410
11738
  const { l: l2 } = hexToHSL(theme.card.background);
11411
- const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
11739
+ const borderColor = l2 > 50 ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)";
11412
11740
  const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
11413
11741
  const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
11414
11742
  if ($sectionLayout === "merged") {
@@ -11440,19 +11768,19 @@ var StyledCard = dt.div(
11440
11768
  );
11441
11769
 
11442
11770
  // src/components/layout/card/Card.tsx
11443
- var import_jsx_runtime17 = require("react/jsx-runtime");
11444
- var Card = (0, import_react16.forwardRef)(
11771
+ var import_jsx_runtime19 = require("react/jsx-runtime");
11772
+ var Card = (0, import_react18.forwardRef)(
11445
11773
  ({ children, className }, ref) => {
11446
- const { settings } = useEmbed();
11447
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
11774
+ const theme = nt();
11775
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
11448
11776
  StyledCard,
11449
11777
  {
11450
11778
  ref,
11451
11779
  className,
11452
- $sectionLayout: settings.theme?.sectionLayout,
11453
- $borderRadius: settings.theme?.card?.borderRadius,
11454
- $padding: settings.theme?.card?.padding,
11455
- $shadow: settings.theme?.card?.hasShadow,
11780
+ $sectionLayout: theme?.sectionLayout,
11781
+ $borderRadius: theme?.card?.borderRadius,
11782
+ $padding: theme?.card?.padding,
11783
+ $shadow: theme?.card?.hasShadow,
11456
11784
  children
11457
11785
  }
11458
11786
  );
@@ -11466,10 +11794,10 @@ var StyledColumn = dt.div`
11466
11794
  `;
11467
11795
 
11468
11796
  // src/components/layout/column/Column.tsx
11469
- var import_jsx_runtime18 = require("react/jsx-runtime");
11470
- var Column = (0, import_react17.forwardRef)(
11797
+ var import_jsx_runtime20 = require("react/jsx-runtime");
11798
+ var Column = (0, import_react19.forwardRef)(
11471
11799
  ({ children, ...props }, ref) => {
11472
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Card, { children }) });
11800
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Card, { children }) });
11473
11801
  }
11474
11802
  );
11475
11803
 
@@ -11502,7 +11830,7 @@ function createRenderer(options) {
11502
11830
  const { className, ...rest } = props;
11503
11831
  const resolvedProps = component === "div" ? rest : props;
11504
11832
  const resolvedChildren = children.map(renderNode);
11505
- return (0, import_react18.createElement)(
11833
+ return (0, import_react20.createElement)(
11506
11834
  component,
11507
11835
  {
11508
11836
  className,
@@ -11515,31 +11843,107 @@ function createRenderer(options) {
11515
11843
  };
11516
11844
  }
11517
11845
 
11846
+ // src/components/ui/loader/styles.ts
11847
+ var spin = mt`
11848
+ 0% {
11849
+ transform: rotate(0deg);
11850
+ }
11851
+ 100% {
11852
+ transform: rotate(360deg);
11853
+ }
11854
+ `;
11855
+ var Loader = dt.div`
11856
+ border: ${({ theme }) => `${4 / TEXT_BASE_SIZE}rem solid hsla(0, 0%, ${hexToHSL(theme.card.background).l > 50 ? 0 : 100}%, 0.1)`};
11857
+ border-top: ${4 / TEXT_BASE_SIZE}rem solid ${({ theme }) => theme.primary};
11858
+ border-radius: 50%;
11859
+ width: ${40 / TEXT_BASE_SIZE}rem;
11860
+ height: ${40 / TEXT_BASE_SIZE}rem;
11861
+ animation: ${spin} 1.5s linear infinite;
11862
+ display: inline-block;
11863
+ `;
11864
+
11518
11865
  // src/components/embed/ComponentTree.tsx
11519
- var import_jsx_runtime19 = require("react/jsx-runtime");
11866
+ var import_jsx_runtime21 = require("react/jsx-runtime");
11867
+ var Loading = () => {
11868
+ const theme = nt();
11869
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
11870
+ Flex,
11871
+ {
11872
+ $width: "100%",
11873
+ $height: "100%",
11874
+ $alignItems: "center",
11875
+ $justifyContent: "center",
11876
+ $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
11877
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader, {})
11878
+ }
11879
+ );
11880
+ };
11881
+ var Error2 = ({ message }) => {
11882
+ const theme = nt();
11883
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
11884
+ Flex,
11885
+ {
11886
+ $flexDirection: "column",
11887
+ $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
11888
+ $width: "100%",
11889
+ $height: "auto",
11890
+ $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
11891
+ $backgroundColor: theme.card.background,
11892
+ $alignItems: "center",
11893
+ $justifyContent: "center",
11894
+ children: [
11895
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
11896
+ Box,
11897
+ {
11898
+ $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
11899
+ $fontSize: `${theme.typography.heading1.fontSize / TEXT_BASE_SIZE}rem`,
11900
+ $fontFamily: theme.typography.heading1.fontFamily,
11901
+ $fontWeight: theme.typography.heading1.fontWeight,
11902
+ $color: theme.typography.heading1.color,
11903
+ children: "404 Error"
11904
+ }
11905
+ ),
11906
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
11907
+ Box,
11908
+ {
11909
+ $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
11910
+ $fontSize: `${theme.typography.text.fontSize / TEXT_BASE_SIZE}rem`,
11911
+ $fontFamily: theme.typography.text.fontFamily,
11912
+ $fontWeight: theme.typography.text.fontWeight,
11913
+ $color: theme.typography.text.color,
11914
+ children: message
11915
+ }
11916
+ )
11917
+ ]
11918
+ }
11919
+ );
11920
+ };
11520
11921
  var ComponentTree = () => {
11521
- const [children, setChildren] = (0, import_react19.useState)("Loading");
11522
11922
  const { error, nodes } = useEmbed();
11523
- (0, import_react19.useEffect)(() => {
11923
+ const [children, setChildren] = (0, import_react21.useState)(/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loading, {}));
11924
+ (0, import_react21.useEffect)(() => {
11524
11925
  const renderer = createRenderer();
11525
11926
  setChildren(nodes.map(renderer));
11526
11927
  }, [nodes]);
11527
11928
  if (error) {
11528
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: error.message });
11929
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Error2, { message: error.message });
11529
11930
  }
11530
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children });
11931
+ if (import_react21.Children.count(children) === 0) {
11932
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loading, {});
11933
+ }
11934
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children });
11531
11935
  };
11532
11936
 
11533
11937
  // src/components/embed/Embed.tsx
11534
- var import_jsx_runtime20 = require("react/jsx-runtime");
11938
+ var import_jsx_runtime22 = require("react/jsx-runtime");
11535
11939
  var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
11536
11940
  if (accessToken?.length === 0) {
11537
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: "Please provide an access token." });
11941
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: "Please provide an access token." });
11538
11942
  }
11539
11943
  if (!accessToken?.startsWith("token_")) {
11540
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
11944
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
11541
11945
  }
11542
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ComponentTree, {}) });
11946
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentTree, {}) });
11543
11947
  };
11544
11948
  /*! Bundled license information:
11545
11949