npm - @schematichq/schematic-components - Versions diffs - 0.7.8 → 0.8.0 - Mend

@schematichq/schematic-components 0.7.8 → 0.8.0

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.

Files changed (4) hide show

package/dist/schematic-components.cjs.js +157 -218
package/dist/schematic-components.d.ts +55 -125
package/dist/schematic-components.esm.js +481 -542
package/package.json +10 -1

package/dist/schematic-components.esm.js CHANGED Viewed

@@ -2015,66 +2015,6 @@ var require_pluralize = __commonJS({
   }
 });
-// node_modules/classnames/index.js
-var require_classnames = __commonJS({
-  "node_modules/classnames/index.js"(exports, module) {
-    (function() {
-      "use strict";
-      var hasOwn = {}.hasOwnProperty;
-      function classNames() {
-        var classes = "";
-        for (var i2 = 0; i2 < arguments.length; i2++) {
-          var arg = arguments[i2];
-          if (arg) {
-            classes = appendClass(classes, parseValue(arg));
-          }
-        }
-        return classes;
-      }
-      function parseValue(arg) {
-        if (typeof arg === "string" || typeof arg === "number") {
-          return arg;
-        }
-        if (typeof arg !== "object") {
-          return "";
-        }
-        if (Array.isArray(arg)) {
-          return classNames.apply(null, arg);
-        }
-        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
-          return arg.toString();
-        }
-        var classes = "";
-        for (var key in arg) {
-          if (hasOwn.call(arg, key) && arg[key]) {
-            classes = appendClass(classes, key);
-          }
-        }
-        return classes;
-      }
-      function appendClass(value, newClass) {
-        if (!newClass) {
-          return value;
-        }
-        if (value) {
-          return value + " " + newClass;
-        }
-        return value + newClass;
-      }
-      if (typeof module !== "undefined" && module.exports) {
-        classNames.default = classNames;
-        module.exports = classNames;
-      } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
-        define("classnames", [], function() {
-          return classNames;
-        });
-      } else {
-        window.classNames = classNames;
-      }
-    })();
-  }
-});
 // node_modules/lodash/now.js
 var require_now = __commonJS({
   "node_modules/lodash/now.js"(exports, module) {
@@ -11080,6 +11020,8 @@ function CompanyPlanWithBillingSubViewFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    addedOn: json["added_on"] == null ? void 0 : new Date(json["added_on"]),
+    billingProductExternalId: json["billing_product_external_id"] == null ? void 0 : json["billing_product_external_id"],
     billingProductId: json["billing_product_id"] == null ? void 0 : json["billing_product_id"],
     description: json["description"] == null ? void 0 : json["description"],
     id: json["id"],
@@ -11519,6 +11461,7 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   return {
     audienceType: json["audience_type"] == null ? void 0 : json["audience_type"],
     billingProduct: json["billing_product"] == null ? void 0 : BillingProductDetailResponseDataFromJSON(json["billing_product"]),
+    chargeType: json["charge_type"],
     companyCanTrial: json["company_can_trial"],
     companyCount: json["company_count"],
     createdAt: new Date(json["created_at"]),
@@ -11540,6 +11483,7 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     isTrialable: json["is_trialable"],
     monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["monthly_price"]),
     name: json["name"],
+    oneTimePrice: json["one_time_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["one_time_price"]),
     planType: json["plan_type"],
     trialDays: json["trial_days"] == null ? void 0 : json["trial_days"],
     updatedAt: new Date(json["updated_at"]),
@@ -11603,6 +11547,7 @@ function PlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   return {
     audienceType: json["audience_type"] == null ? void 0 : json["audience_type"],
     billingProduct: json["billing_product"] == null ? void 0 : BillingProductDetailResponseDataFromJSON(json["billing_product"]),
+    chargeType: json["charge_type"],
     companyCount: json["company_count"],
     createdAt: new Date(json["created_at"]),
     description: json["description"],
@@ -11616,6 +11561,7 @@ function PlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     isTrialable: json["is_trialable"],
     monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["monthly_price"]),
     name: json["name"],
+    oneTimePrice: json["one_time_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["one_time_price"]),
     planType: json["plan_type"],
     trialDays: json["trial_days"] == null ? void 0 : json["trial_days"],
     updatedAt: new Date(json["updated_at"]),
@@ -13142,7 +13088,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.8";
+      headers["X-Schematic-Components-Version"] = "0.8.0";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13627,13 +13573,143 @@ var Button2 = forwardRef(
 );
 Button2.displayName = "Button";
+// node_modules/@schematichq/schematic-icons/dist/components/Icon.js
+import { jsx as _jsx } from "react/jsx-runtime";
+var Icon = ({ name, className = "", style, ...rest }) => {
+  return _jsx("i", { className: `icon icon-${name} ${className}`, style, ...rest });
+};
+var Icon_default = Icon;
+// node_modules/@schematichq/schematic-icons/dist/types.js
+var iconsList = {
+  "wind": 61697,
+  "webhook": 61698,
+  "waves": 61699,
+  "water-drop": 61700,
+  "watch-pocket": 61701,
+  "watch-hand": 61702,
+  "wallet": 61703,
+  "visa": 61704,
+  "video-camera": 61705,
+  "verified": 61706,
+  "unsubscribe": 61707,
+  "unprotected": 61708,
+  "tube": 61709,
+  "truck": 61710,
+  "tornado": 61711,
+  "thunder": 61712,
+  "text": 61713,
+  "test": 61714,
+  "stripe": 61715,
+  "stacks": 61716,
+  "stacked": 61717,
+  "speaker": 61718,
+  "spade": 61719,
+  "silence": 61720,
+  "signal": 61721,
+  "sidebar": 61722,
+  "server-search": 61723,
+  "segment": 61724,
+  "search": 61725,
+  "schematic": 61726,
+  "present": 61727,
+  "plus-rounded-outline": 61728,
+  "plus-minus": 61729,
+  "plug": 61730,
+  "plan": 61731,
+  "picker": 61732,
+  "percent": 61733,
+  "pencil": 61734,
+  "paypal": 61735,
+  "paper-plane": 61736,
+  "package": 61737,
+  "node-plus": 61738,
+  "node-minus": 61739,
+  "music": 61740,
+  "move": 61741,
+  "mastercard": 61742,
+  "link": 61743,
+  "key": 61744,
+  "juice": 61745,
+  "integration": 61746,
+  "info-rounded": 61747,
+  "image": 61748,
+  "hubspot": 61749,
+  "heart": 61750,
+  "hash": 61751,
+  "hammer": 61752,
+  "google": 61753,
+  "globe": 61754,
+  "glasses": 61755,
+  "github": 61756,
+  "generic-payment": 61757,
+  "folder": 61758,
+  "folder-plus": 61759,
+  "folder-minus": 61760,
+  "flask": 61761,
+  "filter": 61762,
+  "eye": 61763,
+  "exclamation-rounded-filled": 61764,
+  "equalizer": 61765,
+  "entitlements": 61766,
+  "dots-vertical": 61767,
+  "dots-horizontal": 61768,
+  "dollar-rounded": 61769,
+  "diamond": 61770,
+  "cylnder": 61771,
+  "credit": 61772,
+  "copy": 61773,
+  "connection": 61774,
+  "compass": 61775,
+  "collapse": 61776,
+  "collapse-empty": 61777,
+  "cog": 61778,
+  "coffee": 61779,
+  "code": 61780,
+  "cmd": 61781,
+  "club": 61782,
+  "cloud-up": 61783,
+  "close": 61784,
+  "close-rounded-filled": 61785,
+  "clerk": 61786,
+  "chips": 61787,
+  "chip": 61788,
+  "chevron-up": 61789,
+  "chevron-right": 61790,
+  "chevron-left": 61791,
+  "chevron-down": 61792,
+  "check": 61793,
+  "check-rounded": 61794,
+  "cashapp": 61795,
+  "burger": 61796,
+  "bulb": 61797,
+  "boolean": 61798,
+  "boolean-on": 61799,
+  "bookmark": 61800,
+  "board": 61801,
+  "bell": 61802,
+  "bank": 61803,
+  "backspace": 61804,
+  "arrow-upward": 61805,
+  "arrow-up": 61806,
+  "arrow-right": 61807,
+  "arrow-left": 61808,
+  "arrow-down": 61809,
+  "arrow-curved": 61810,
+  "arrow-analytics": 61811,
+  "applepay": 61812,
+  "amex": 61813,
+  "amazonpay": 61814,
+  "alarm": 61815
+};
 // src/components/ui/icon/styles.ts
-var Icon = dt.i`
+var Icon2 = dt(Icon_default)`
   display: flex;
   justify-content: center;
   align-items: center;
 `;
-var Container = dt.div`
+var IconContainer = dt.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -13678,13 +13754,13 @@ var Container = dt.div`
   ${({ $variant, $colors }) => $variant === "outline" ? lt`
           background-color: transparent;
-          ${Icon} {
+          ${Icon2} {
             color: ${$colors[0]};
           }
         ` : lt`
           background-color: ${$colors[1]};
-          ${Icon} {
+          ${Icon2} {
             color: ${$colors[0]};
           }
         `}
@@ -13715,7 +13791,7 @@ var EmbedButton = dt(Button2)`
   return lt`
       color: ${textColor};
-      ${Icon} {
+      ${Icon2} {
         color: ${textColor};
       }
     `;
@@ -13734,7 +13810,7 @@ var EmbedButton = dt(Button2)`
         border-color: ${color};
         color: ${color};
-        ${Icon} {
+        ${Icon2} {
           color: ${color};
         }
       `;
@@ -13745,7 +13821,7 @@ var EmbedButton = dt(Button2)`
         border-color: #cbcbcb;
         color: ${color};
-        ${Icon} {
+        ${Icon2} {
           color: ${color};
         }
       `;
@@ -13756,7 +13832,7 @@ var EmbedButton = dt(Button2)`
         border-color: transparent;
         color: ${color};
-        ${Icon} {
+        ${Icon2} {
           color: ${color};
         }
       `;
@@ -13790,7 +13866,7 @@ var EmbedButton = dt(Button2)`
           border-color: ${color};
           color: ${textColor};
-          ${Icon} {
+          ${Icon2} {
             color: ${textColor};
           }
         `;
@@ -13883,136 +13959,8 @@ var Flex = dt(Box)`
   display: flex;
 `;
-// src/components/ui/icon/Icon.tsx
-var import_classnames = __toESM(require_classnames());
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Icon2 = ({ name, className, ...props }) => {
-  return /* @__PURE__ */ jsx3(Icon, { className: (0, import_classnames.default)("i", `i-${name}`, className), ...props });
-};
-// src/components/ui/icon/icons.js
-var icons_default = {
-  alarm: 61697,
-  amazonpay: 61698,
-  amex: 61699,
-  applepay: 61700,
-  "arrow-analytics": 61701,
-  "arrow-curved": 61702,
-  "arrow-down": 61703,
-  "arrow-left": 61704,
-  "arrow-right": 61705,
-  "arrow-up": 61706,
-  "arrow-upward": 61707,
-  backspace: 61708,
-  bank: 61709,
-  bell: 61710,
-  board: 61711,
-  bookmark: 61712,
-  "boolean-on": 61713,
-  boolean: 61714,
-  bulb: 61715,
-  burger: 61716,
-  cashapp: 61717,
-  "check-rounded": 61718,
-  check: 61719,
-  "chevron-down": 61720,
-  "chevron-left": 61721,
-  "chevron-right": 61722,
-  "chevron-up": 61723,
-  chip: 61724,
-  chips: 61725,
-  clerk: 61726,
-  "close-rounded-filled": 61727,
-  close: 61728,
-  "cloud-up": 61729,
-  club: 61730,
-  cmd: 61731,
-  code: 61732,
-  coffee: 61733,
-  cog: 61734,
-  "collapse-empty": 61735,
-  collapse: 61736,
-  compass: 61737,
-  connection: 61738,
-  copy: 61739,
-  credit: 61740,
-  cylnder: 61741,
-  diamond: 61742,
-  "dollar-rounded": 61743,
-  "dots-horizontal": 61744,
-  "dots-vertical": 61745,
-  entitlements: 61746,
-  equalizer: 61747,
-  "exclamation-rounded-filled": 61748,
-  eye: 61749,
-  filter: 61750,
-  flask: 61751,
-  "folder-minus": 61752,
-  "folder-plus": 61753,
-  folder: 61754,
-  "generic-payment": 61755,
-  github: 61756,
-  glasses: 61757,
-  globe: 61758,
-  google: 61759,
-  hammer: 61760,
-  hash: 61761,
-  heart: 61762,
-  hubspot: 61763,
-  image: 61764,
-  "info-rounded": 61765,
-  juice: 61766,
-  key: 61767,
-  link: 61768,
-  mastercard: 61769,
-  move: 61770,
-  music: 61771,
-  "node-minus": 61772,
-  "node-plus": 61773,
-  package: 61774,
-  "paper-plane": 61775,
-  paypal: 61776,
-  pencil: 61777,
-  percent: 61778,
-  picker: 61779,
-  plan: 61780,
-  plug: 61781,
-  "plus-minus": 61782,
-  "plus-rounded-outline": 61783,
-  present: 61784,
-  schematic: 61785,
-  search: 61786,
-  segment: 61787,
-  "server-search": 61788,
-  sidebar: 61789,
-  signal: 61790,
-  silence: 61791,
-  spade: 61792,
-  speaker: 61793,
-  stacked: 61794,
-  stacks: 61795,
-  stripe: 61796,
-  text: 61797,
-  thunder: 61798,
-  tornado: 61799,
-  truck: 61800,
-  tube: 61801,
-  unprotected: 61802,
-  unsubscribe: 61803,
-  verified: 61804,
-  "video-camera": 61805,
-  visa: 61806,
-  wallet: 61807,
-  "watch-hand": 61808,
-  "watch-pocket": 61809,
-  "water-drop": 61810,
-  waves: 61811,
-  webhook: 61812,
-  wind: 61813
-};
 // src/components/ui/icon/IconRound.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var IconRound = ({
   name,
   variant = "filled",
@@ -14020,13 +13968,9 @@ var IconRound = ({
   colors = ["white", "#e5e7eb"],
   ...props
 }) => {
-  const iconNamesSet = new Set(
-    Object.keys(icons_default)
-  );
-  const isIconName = (value) => {
-    return iconNamesSet.has(value);
-  };
-  return /* @__PURE__ */ jsx4(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: isIconName(name) ? /* @__PURE__ */ jsx4(Icon2, { name }) : /* @__PURE__ */ jsx4(
+  const iconNamesSet = new Set(Object.keys(iconsList));
+  const isIconName = (value) => iconNamesSet.has(value);
+  return /* @__PURE__ */ jsx3(IconContainer, { $size: size, $variant: variant, $colors: colors, ...props, children: isIconName(name) ? /* @__PURE__ */ jsx3(Icon2, { name }) : /* @__PURE__ */ jsx3(
     "span",
     {
       style: {
@@ -14186,7 +14130,7 @@ var Loader = dt.div`
 // src/components/ui/modal/Modal.tsx
 import { forwardRef as forwardRef2, useCallback as useCallback4, useLayoutEffect as useLayoutEffect2 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Modal = forwardRef2(
   ({ children, contentRef, size = "auto", top = 0, onClose, ...rest }, ref) => {
     const theme = nt();
@@ -14199,7 +14143,7 @@ var Modal = forwardRef2(
     useLayoutEffect2(() => {
       contentRef?.current?.focus({ preventScroll: true });
     }, [contentRef]);
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx4(
       Box,
       {
         ref,
@@ -14228,7 +14172,7 @@ var Modal = forwardRef2(
         $scrollbarColor: `${isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)"} transparent`,
         $scrollbarWidth: "thin",
         $scrollbarGutter: "stable both-edges",
-        children: /* @__PURE__ */ jsx5(Container2, { children: /* @__PURE__ */ jsx5(
+        children: /* @__PURE__ */ jsx4(Container, { children: /* @__PURE__ */ jsx4(
           Flex,
           {
             ref: contentRef,
@@ -14269,7 +14213,7 @@ Modal.displayName = "Modal";
 // src/components/ui/modal/ModalHeader.tsx
 import { useCallback as useCallback5 } from "react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var ModalHeader = ({
   children,
   bordered = false,
@@ -14310,7 +14254,7 @@ var ModalHeader = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx6(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ jsx5(
           Icon2,
           {
             name: "close",
@@ -14326,7 +14270,7 @@ var ModalHeader = ({
 };
 // src/components/ui/progress-bar/ProgressBar.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var progressColorMap = [
   "blue",
   "blue",
@@ -14360,7 +14304,7 @@ var ProgressBar = ({
       $width: "100%",
       ...props,
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           Box,
           {
             $overflow: "hidden",
@@ -14368,7 +14312,7 @@ var ProgressBar = ({
             $height: `${8 / TEXT_BASE_SIZE}rem`,
             $backgroundColor: bgColor,
             $borderRadius: "9999px",
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx6(
               Box,
               {
                 $width: `${Math.min(progress, 100)}%`,
@@ -14589,7 +14533,7 @@ var Content = dt.div.withConfig({
 });
 // src/components/ui/tooltip/Tooltip.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var Tooltip = ({
   trigger,
   content,
@@ -14629,7 +14573,7 @@ var Tooltip = ({
     updateCoords();
   }, [updateCoords, show]);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       Trigger,
       {
         ref,
@@ -14640,7 +14584,7 @@ var Tooltip = ({
       }
     ),
     show && createPortal(
-      /* @__PURE__ */ jsx8(Content, { ...coords2, position: position2, zIndex, children: content }),
+      /* @__PURE__ */ jsx7(Content, { ...coords2, position: position2, zIndex, children: content }),
       document.body
     )
   ] });
@@ -14686,13 +14630,13 @@ var StyledCard = dt.div(({ theme }) => {
 });
 // src/components/layout/card/Card.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var Card = forwardRef3(
   ({ children, className }, ref) => {
     const { isPending } = useEmbed();
     const theme = nt();
     return /* @__PURE__ */ jsxs6(StyledCard, { ref, className, children: [
-      isPending && /* @__PURE__ */ jsx9(
+      isPending && /* @__PURE__ */ jsx8(
         Flex,
         {
           $position: "absolute",
@@ -14706,7 +14650,7 @@ var Card = forwardRef3(
           $backgroundColor: hsla(theme.card.background, 0.8),
           $backdropFilter: "blur(8px)",
           $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
-          children: /* @__PURE__ */ jsx9(Loader, { $color: theme.primary })
+          children: /* @__PURE__ */ jsx8(Loader, { $color: theme.primary })
         }
       ),
       children
@@ -14724,10 +14668,10 @@ var StyledColumn = dt.div`
 `;
 // src/components/layout/column/Column.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Column = forwardRef4(
   ({ children, basis, ...props }, ref) => {
-    return /* @__PURE__ */ jsx10(StyledColumn, { ref, ...props, children: Children2.count(children) > 0 ? /* @__PURE__ */ jsx10(Card, { children }) : children });
+    return /* @__PURE__ */ jsx9(StyledColumn, { ref, ...props, children: Children2.count(children) > 0 ? /* @__PURE__ */ jsx9(Card, { children }) : children });
   }
 );
 Column.displayName = "Column";
@@ -14736,7 +14680,7 @@ Column.displayName = "Column";
 import { forwardRef as forwardRef5 } from "react";
 // src/components/layout/root/styles.ts
-var Container2 = dt.div`
+var Container = dt.div`
   all: initial;
   box-sizing: border-box;
   display: block;
@@ -14767,10 +14711,10 @@ var Container2 = dt.div`
 `;
 // src/components/layout/root/Root.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Root = forwardRef5(
   ({ data, settings, ...props }, ref) => {
-    return /* @__PURE__ */ jsx11(Container2, { ref, ...props });
+    return /* @__PURE__ */ jsx10(Container, { ref, ...props });
   }
 );
 Root.displayName = "Root";
@@ -14797,7 +14741,7 @@ import {
 } from "react";
 // src/components/shared/sidebar/StageButton.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var StageButton = ({
   canTrial,
   canCheckout,
@@ -14815,7 +14759,7 @@ var StageButton = ({
 }) => {
   const { t: t2 } = useTranslation();
   const NoPaymentRequired = () => {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx11(
       EmbedButton,
       {
         type: "button",
@@ -14829,7 +14773,7 @@ var StageButton = ({
   if (checkoutStage === "plan") {
     if (canTrial) {
       if (trialPaymentMethodRequired) {
-        return /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx11(
           EmbedButton,
           {
             type: "button",
@@ -14849,14 +14793,14 @@ var StageButton = ({
                   t2("Next"),
                   ": ",
                   t2("Checkout"),
-                  /* @__PURE__ */ jsx12(Icon2, { name: "arrow-right" })
+                  /* @__PURE__ */ jsx11(Icon2, { name: "arrow-right" })
                 ]
               }
             )
           }
         );
       }
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx11(
         EmbedButton,
         {
           type: "button",
@@ -14874,7 +14818,7 @@ var StageButton = ({
               $padding: "0 1rem",
               children: [
                 t2("Subscribe and close"),
-                /* @__PURE__ */ jsx12(Icon2, { name: "arrow-right" })
+                /* @__PURE__ */ jsx11(Icon2, { name: "arrow-right" })
               ]
             }
           )
@@ -14884,9 +14828,9 @@ var StageButton = ({
     if (!requiresPayment && !checkoutStages?.some(
       (stage) => stage.id === "addons" || stage.id === "usage"
     )) {
-      return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx11(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx11(
       EmbedButton,
       {
         type: "button",
@@ -14909,7 +14853,7 @@ var StageButton = ({
               ":",
               " ",
               hasPayInAdvanceEntitlements ? t2("Usage") : hasAddOns ? t2("Addons") : t2("Checkout"),
-              /* @__PURE__ */ jsx12(Icon2, { name: "arrow-right" })
+              /* @__PURE__ */ jsx11(Icon2, { name: "arrow-right" })
             ]
           }
         )
@@ -14918,9 +14862,9 @@ var StageButton = ({
   }
   if (checkoutStage === "usage") {
     if (!requiresPayment) {
-      return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx11(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx11(
       EmbedButton,
       {
         type: "button",
@@ -14940,7 +14884,7 @@ var StageButton = ({
               t2("Next"),
               ": ",
               hasAddOns ? t2("Addons") : t2("Checkout"),
-              /* @__PURE__ */ jsx12(Icon2, { name: "arrow-right" })
+              /* @__PURE__ */ jsx11(Icon2, { name: "arrow-right" })
             ]
           }
         )
@@ -14949,9 +14893,9 @@ var StageButton = ({
   }
   if (checkoutStage === "addons") {
     if (!requiresPayment) {
-      return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx11(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx11(
       EmbedButton,
       {
         type: "button",
@@ -14971,7 +14915,7 @@ var StageButton = ({
               t2("Next"),
               ": ",
               t2("Checkout"),
-              /* @__PURE__ */ jsx12(Icon2, { name: "arrow-right" })
+              /* @__PURE__ */ jsx11(Icon2, { name: "arrow-right" })
             ]
           }
         )
@@ -14980,9 +14924,9 @@ var StageButton = ({
   }
   if (checkoutStage === "checkout") {
     if (!requiresPayment) {
-      return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx11(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx11(
       EmbedButton,
       {
         type: "button",
@@ -14996,7 +14940,7 @@ var StageButton = ({
 };
 // src/components/shared/sidebar/Sidebar.tsx
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var Sidebar = ({
   planPeriod,
   selectedPlan,
@@ -15284,7 +15228,7 @@ var Sidebar = ({
         }
       },
       children: [
-        showHeader && /* @__PURE__ */ jsx13(
+        showHeader && /* @__PURE__ */ jsx12(
           Flex,
           {
             $position: "relative",
@@ -15296,7 +15240,7 @@ var Sidebar = ({
             $borderBottomWidth: "1px",
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
-            children: /* @__PURE__ */ jsx13(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx13(
+            children: /* @__PURE__ */ jsx12(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx12(
               Text,
               {
                 as: "h3",
@@ -15323,7 +15267,7 @@ var Sidebar = ({
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
             children: [
-              /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -15346,7 +15290,7 @@ var Sidebar = ({
                       $color: theme.typography.heading4.color
                     },
                     children: [
-                      /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
+                      /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
                         Text,
                         {
                           $font: theme.typography.heading4.fontFamily,
@@ -15356,7 +15300,7 @@ var Sidebar = ({
                           children: data.company.plan.name
                         }
                       ) }),
-                      typeof data.company.plan.planPrice === "number" && /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                      typeof data.company.plan.planPrice === "number" && /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -15381,7 +15325,7 @@ var Sidebar = ({
                   }
                 ),
                 willPlanChange && /* @__PURE__ */ jsxs8(Box, { children: [
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx12(
                     Box,
                     {
                       $width: "100%",
@@ -15389,7 +15333,7 @@ var Sidebar = ({
                       $opacity: "50%",
                       $marginBottom: "0.25rem",
                       $marginTop: "-0.25rem",
-                      children: /* @__PURE__ */ jsx13(
+                      children: /* @__PURE__ */ jsx12(
                         Icon2,
                         {
                           name: "arrow-down",
@@ -15408,7 +15352,7 @@ var Sidebar = ({
                       $alignItems: "center",
                       $gap: "1rem",
                       children: [
-                        /* @__PURE__ */ jsx13(Flex, { children: /* @__PURE__ */ jsx13(
+                        /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsx12(
                           Text,
                           {
                             $font: theme.typography.heading4.fontFamily,
@@ -15418,7 +15362,7 @@ var Sidebar = ({
                             children: selectedPlan.name
                           }
                         ) }),
-                        /* @__PURE__ */ jsx13(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                        /* @__PURE__ */ jsx12(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
                           Text,
                           {
                             $font: theme.typography.text.fontFamily,
@@ -15443,7 +15387,7 @@ var Sidebar = ({
                 ] })
               ] }),
               willUsageBasedEntitlementsChange && /* @__PURE__ */ jsxs8(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -15473,7 +15417,7 @@ var Sidebar = ({
                             $textDecoration: "line-through",
                             $color: theme.typography.heading4.color,
                             children: [
-                              /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
+                              /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
                                 Text,
                                 {
                                   $font: theme.typography.heading4.fontFamily,
@@ -15490,7 +15434,7 @@ var Sidebar = ({
                                   ] }) : entitlement.feature.name
                                 }
                               ) }),
-                              /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                              /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
                                 Text,
                                 {
                                   $font: theme.typography.text.fontFamily,
@@ -15552,7 +15496,7 @@ var Sidebar = ({
                               $textDecoration: "line-through",
                               $color: theme.typography.heading4.color,
                               children: [
-                                /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsxs8(
+                                /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsxs8(
                                   Text,
                                   {
                                     $font: theme.typography.heading4.fontFamily,
@@ -15566,7 +15510,7 @@ var Sidebar = ({
                                     ]
                                   }
                                 ) }),
-                                /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                                /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
                                   Text,
                                   {
                                     $font: theme.typography.text.fontFamily,
@@ -15595,7 +15539,7 @@ var Sidebar = ({
                               $alignItems: "center",
                               $gap: "1rem",
                               children: [
-                                /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsxs8(
+                                /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsxs8(
                                   Text,
                                   {
                                     $font: theme.typography.heading4.fontFamily,
@@ -15609,7 +15553,7 @@ var Sidebar = ({
                                     ]
                                   }
                                 ) }),
-                                /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                                /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
                                   Text,
                                   {
                                     $font: theme.typography.text.fontFamily,
@@ -15655,7 +15599,7 @@ var Sidebar = ({
                             $alignItems: "center",
                             $gap: "1rem",
                             children: [
-                              /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
+                              /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
                                 Text,
                                 {
                                   $font: theme.typography.heading4.fontFamily,
@@ -15672,7 +15616,7 @@ var Sidebar = ({
                                   ] }) : entitlement.feature.name
                                 }
                               ) }),
-                              /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                              /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
                                 Text,
                                 {
                                   $font: theme.typography.text.fontFamily,
@@ -15715,7 +15659,7 @@ var Sidebar = ({
                 )
               ] }),
               selectedPlan && isTrialable && /* @__PURE__ */ jsxs8(Box, { children: [
-                /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -15732,7 +15676,7 @@ var Sidebar = ({
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ jsx13(Flex, { children: /* @__PURE__ */ jsx13(
+                      /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsx12(
                         Text,
                         {
                           $font: theme.typography.heading4.fontFamily,
@@ -15742,7 +15686,7 @@ var Sidebar = ({
                           children: t2("Ends on", { date: trialEndsOn.toLocaleDateString() })
                         }
                       ) }),
-                      /* @__PURE__ */ jsx13(Flex, { children: /* @__PURE__ */ jsxs8(
+                      /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsxs8(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -15756,7 +15700,7 @@ var Sidebar = ({
                               selectedPlanBillingPrice?.currency
                             ),
                             "/",
-                            /* @__PURE__ */ jsx13("sub", { children: shortenPeriod(planPeriod) })
+                            /* @__PURE__ */ jsx12("sub", { children: shortenPeriod(planPeriod) })
                           ]
                         }
                       ) })
@@ -15765,7 +15709,7 @@ var Sidebar = ({
                 )
               ] }),
               (willAddOnsChange || selectedAddOns.length > 0) && /* @__PURE__ */ jsxs8(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -15786,7 +15730,7 @@ var Sidebar = ({
                       $textDecoration: "line-through",
                       $color: theme.typography.heading4.color,
                       children: [
-                        /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
+                        /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
                           Text,
                           {
                             $font: theme.typography.heading4.fontFamily,
@@ -15796,7 +15740,7 @@ var Sidebar = ({
                             children: addOn.name
                           }
                         ) }),
-                        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
                           Text,
                           {
                             $font: theme.typography.text.fontFamily,
@@ -15831,7 +15775,7 @@ var Sidebar = ({
                       $alignItems: "center",
                       $gap: "1rem",
                       children: [
-                        /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
+                        /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
                           Text,
                           {
                             $font: theme.typography.heading4.fontFamily,
@@ -15841,7 +15785,7 @@ var Sidebar = ({
                             children: addOn.name
                           }
                         ) }),
-                        /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                        /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
                           Text,
                           {
                             $font: theme.typography.text.fontFamily,
@@ -15864,7 +15808,7 @@ var Sidebar = ({
                 })
               ] }),
               proration !== 0 && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-                /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -15874,14 +15818,14 @@ var Sidebar = ({
                     children: proration > 0 ? t2("Proration") : !selectedPlan?.companyCanTrial && t2("Credits")
                   }
                 ) }),
-                /* @__PURE__ */ jsx13(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ jsxs8(
+                /* @__PURE__ */ jsx12(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ jsxs8(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ jsx13(Flex, { children: /* @__PURE__ */ jsx13(
+                      /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsx12(
                         Text,
                         {
                           $font: theme.typography.heading4.fontFamily,
@@ -15891,7 +15835,7 @@ var Sidebar = ({
                           children: t2("Unused time")
                         }
                       ) }),
-                      /* @__PURE__ */ jsx13(Flex, { children: /* @__PURE__ */ jsx13(
+                      /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsx12(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -15927,7 +15871,7 @@ var Sidebar = ({
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -15947,7 +15891,7 @@ var Sidebar = ({
                         $outlineColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                         $borderRadius: "0.3125rem",
                         children: [
-                          /* @__PURE__ */ jsx13(
+                          /* @__PURE__ */ jsx12(
                             Text,
                             {
                               $font: theme.typography.text.fontFamily,
@@ -15957,14 +15901,14 @@ var Sidebar = ({
                               children: promoCode
                             }
                           ),
-                          /* @__PURE__ */ jsx13(
+                          /* @__PURE__ */ jsx12(
                             Box,
                             {
                               $cursor: "pointer",
                               onClick: () => {
                                 updatePromoCode?.(void 0);
                               },
-                              children: /* @__PURE__ */ jsx13(
+                              children: /* @__PURE__ */ jsx12(
                                 Icon2,
                                 {
                                   name: "close",
@@ -15988,7 +15932,7 @@ var Sidebar = ({
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx12(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -15998,7 +15942,7 @@ var Sidebar = ({
                         children: t2("X% off", { percent: percentOff })
                       }
                     ) }),
-                    /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -16021,7 +15965,7 @@ var Sidebar = ({
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx12(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -16036,7 +15980,7 @@ var Sidebar = ({
                         })
                       }
                     ) }),
-                    /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsxs8(
+                    /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsxs8(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -16062,7 +16006,7 @@ var Sidebar = ({
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs8(
+                    /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs8(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -16075,7 +16019,7 @@ var Sidebar = ({
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                    /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -16101,7 +16045,7 @@ var Sidebar = ({
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs8(
+                    /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs8(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -16114,7 +16058,7 @@ var Sidebar = ({
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -16131,7 +16075,7 @@ var Sidebar = ({
                 }
               ),
               dueNow < 0 && /* @__PURE__ */ jsxs8(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
-                /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsxs8(
+                /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsxs8(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -16144,7 +16088,7 @@ var Sidebar = ({
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -16158,7 +16102,7 @@ var Sidebar = ({
                   }
                 ) })
               ] }),
-              layout === "checkout" && /* @__PURE__ */ jsx13(
+              layout === "checkout" && /* @__PURE__ */ jsx12(
                 StageButton,
                 {
                   canTrial: selectedPlan?.companyCanTrial === true,
@@ -16176,8 +16120,8 @@ var Sidebar = ({
                   trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
                 }
               ),
-              layout === "unsubscribe" && /* @__PURE__ */ jsx13(EmbedButton, { onClick: unsubscribe, isLoading, children: t2("Cancel subscription") }),
-              !isLoading && error && /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
+              layout === "unsubscribe" && /* @__PURE__ */ jsx12(EmbedButton, { onClick: unsubscribe, isLoading, children: t2("Cancel subscription") }),
+              !isLoading && error && /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -16187,7 +16131,7 @@ var Sidebar = ({
                   children: error
                 }
               ) }),
-              layout !== "unsubscribe" && /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(
+              layout !== "unsubscribe" && /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -16208,13 +16152,13 @@ var Sidebar = ({
 };
 // src/components/shared/checkout-dialog/AddOns.tsx
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var AddOns = ({ addOns, toggle, isLoading, period }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
   const periodKey = period === "year" ? "yearlyPrice" : "monthlyPrice";
   const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
-  return /* @__PURE__ */ jsx14(Fragment4, { children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx13(Fragment4, { children: /* @__PURE__ */ jsx13(
     Box,
     {
       $display: "grid",
@@ -16239,7 +16183,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
             ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
             children: [
               /* @__PURE__ */ jsxs9(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-                /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
                   Text,
                   {
                     $font: theme.typography.heading3.fontFamily,
@@ -16249,7 +16193,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                     children: addOn.name
                   }
                 ) }),
-                addOn.description && /* @__PURE__ */ jsx14(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx14(
+                addOn.description && /* @__PURE__ */ jsx13(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx13(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -16260,7 +16204,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   }
                 ) }),
                 addOn[periodKey] && /* @__PURE__ */ jsxs9(Box, { children: [
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx13(
                     Text,
                     {
                       $font: theme.typography.heading2.fontFamily,
@@ -16284,7 +16228,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                     }
                   )
                 ] }),
-                addOn.current && /* @__PURE__ */ jsx14(
+                addOn.current && /* @__PURE__ */ jsx13(
                   Flex,
                   {
                     $position: "absolute",
@@ -16293,7 +16237,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                     $backgroundColor: theme.primary,
                     $borderRadius: "9999px",
                     $padding: "0.125rem 0.85rem",
-                    children: /* @__PURE__ */ jsx14(
+                    children: /* @__PURE__ */ jsx13(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -16306,7 +16250,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx14(Flex, { $flexDirection: "column", $justifyContent: "end", $flexGrow: "1", children: !addOn.isSelected ? /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx13(Flex, { $flexDirection: "column", $justifyContent: "end", $flexGrow: "1", children: !addOn.isSelected ? /* @__PURE__ */ jsx13(
                 EmbedButton,
                 {
                   type: "button",
@@ -16317,7 +16261,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   $variant: "outline",
                   children: t2("Choose add-on")
                 }
-              ) : /* @__PURE__ */ jsx14(
+              ) : /* @__PURE__ */ jsx13(
                 EmbedButton,
                 {
                   type: "button",
@@ -16327,7 +16271,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   $color: addOn.current ? "danger" : "primary",
                   $variant: addOn.current ? "ghost" : "text",
                   children: addOn.current ? t2("Remove add-on") : /* @__PURE__ */ jsxs9(Fragment4, { children: [
-                    /* @__PURE__ */ jsx14(
+                    /* @__PURE__ */ jsx13(
                       Icon2,
                       {
                         name: "check-rounded",
@@ -16352,7 +16296,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 // src/components/shared/checkout-dialog/Checkout.tsx
 import { useState as useState5 } from "react";
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var Checkout = ({
   requiresPayment,
   setPaymentMethodId,
@@ -16366,9 +16310,9 @@ var Checkout = ({
     return null;
   }
   return /* @__PURE__ */ jsxs10(Fragment5, { children: [
-    /* @__PURE__ */ jsx15(PaymentMethodDetails, { setPaymentMethodId }),
+    /* @__PURE__ */ jsx14(PaymentMethodDetails, { setPaymentMethodId }),
     /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx14(
         Text,
         {
           as: Box,
@@ -16387,7 +16331,7 @@ var Checkout = ({
           $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.125)",
           $borderRadius: "9999px",
           children: [
-            /* @__PURE__ */ jsx15(Box, { $flexGrow: 1, children: /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx14(Box, { $flexGrow: 1, children: /* @__PURE__ */ jsx14(
               Input,
               {
                 $size: "full",
@@ -16409,7 +16353,7 @@ var Checkout = ({
                 }
               }
             ) }),
-            /* @__PURE__ */ jsx15(Box, { $flexShrink: 0, $padding: "0.5rem 1rem", children: /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx14(Box, { $flexShrink: 0, $padding: "0.5rem 1rem", children: /* @__PURE__ */ jsx14(
               Text,
               {
                 onClick: () => updatePromoCode(discount),
@@ -16429,7 +16373,7 @@ var Checkout = ({
 };
 // src/components/shared/checkout-dialog/Navigation.tsx
-import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var Navigation = ({
   name,
   index,
@@ -16448,7 +16392,7 @@ var Navigation = ({
         $alignItems: "center",
         ...!showFullContent && { $flexGrow: 1, $minWidth: 0 },
         children: [
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx15(
             Box,
             {
               $display: "none",
@@ -16457,7 +16401,7 @@ var Navigation = ({
                   $display: "block"
                 }
               },
-              children: index >= activeIndex ? /* @__PURE__ */ jsx16(
+              children: index >= activeIndex ? /* @__PURE__ */ jsx15(
                 Box,
                 {
                   $width: `${20 / TEXT_BASE_SIZE}rem`,
@@ -16467,7 +16411,7 @@ var Navigation = ({
                   $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
                   $borderRadius: "9999px"
                 }
-              ) : /* @__PURE__ */ jsx16(
+              ) : /* @__PURE__ */ jsx15(
                 IconRound,
                 {
                   name: "check",
@@ -16517,7 +16461,7 @@ var Navigation = ({
         ]
       }
     ),
-    !isLast && /* @__PURE__ */ jsx16(
+    !isLast && /* @__PURE__ */ jsx15(
       Icon2,
       {
         name: "chevron-right",
@@ -16543,7 +16487,7 @@ var ButtonLink = dt.a`
 `;
 // src/components/shared/checkout-dialog/Plan.tsx
-import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var Plan = ({
   isLoading,
   plans,
@@ -16579,7 +16523,7 @@ var Plan = ({
       };
     });
   };
-  return /* @__PURE__ */ jsx17(Fragment7, { children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16(Fragment7, { children: /* @__PURE__ */ jsx16(
     Box,
     {
       $display: "grid",
@@ -16626,7 +16570,7 @@ var Plan = ({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsx17(Box, { children: /* @__PURE__ */ jsx17(
+                    /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsx16(
                       Text,
                       {
                         $font: theme.typography.heading2.fontFamily,
@@ -16636,7 +16580,7 @@ var Plan = ({
                         children: plan.name
                       }
                     ) }),
-                    /* @__PURE__ */ jsx17(Box, { $marginBottom: "0.5rem", $lineHeight: 1.35, children: /* @__PURE__ */ jsx17(
+                    /* @__PURE__ */ jsx16(Box, { $marginBottom: "0.5rem", $lineHeight: 1.35, children: /* @__PURE__ */ jsx16(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -16647,7 +16591,7 @@ var Plan = ({
                       }
                     ) }),
                     /* @__PURE__ */ jsxs12(Box, { children: [
-                      /* @__PURE__ */ jsx17(
+                      /* @__PURE__ */ jsx16(
                         Text,
                         {
                           $font: headerPriceFontStyle.fontFamily,
@@ -16671,7 +16615,7 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    plan.current && /* @__PURE__ */ jsx17(
+                    plan.current && /* @__PURE__ */ jsx16(
                       Flex,
                       {
                         $position: "absolute",
@@ -16680,7 +16624,7 @@ var Plan = ({
                         $backgroundColor: theme.primary,
                         $borderRadius: "9999px",
                         $padding: "0.125rem 0.85rem",
-                        children: /* @__PURE__ */ jsx17(
+                        children: /* @__PURE__ */ jsx16(
                           Text,
                           {
                             $font: theme.typography.text.fontFamily,
@@ -16735,7 +16679,7 @@ var Plan = ({
                             return acc;
                           }
                           acc.push(
-                            /* @__PURE__ */ jsx17(
+                            /* @__PURE__ */ jsx16(
                               Flex,
                               {
                                 $flexWrap: "wrap",
@@ -16743,7 +16687,7 @@ var Plan = ({
                                 $alignItems: "center",
                                 $gap: "1rem",
                                 children: /* @__PURE__ */ jsxs12(Flex, { $gap: "1rem", children: [
-                                  entitlement.feature?.icon && /* @__PURE__ */ jsx17(
+                                  entitlement.feature?.icon && /* @__PURE__ */ jsx16(
                                     IconRound,
                                     {
                                       name: entitlement.feature.icon,
@@ -16761,7 +16705,7 @@ var Plan = ({
                                       $justifyContent: "center",
                                       $gap: "0.5rem",
                                       children: [
-                                        /* @__PURE__ */ jsx17(
+                                        /* @__PURE__ */ jsx16(
                                           Text,
                                           {
                                             $font: theme.typography.text.fontFamily,
@@ -16858,7 +16802,7 @@ var Plan = ({
                           $justifyContent: "start",
                           $marginTop: "1rem",
                           children: [
-                            /* @__PURE__ */ jsx17(
+                            /* @__PURE__ */ jsx16(
                               Icon2,
                               {
                                 name: isExpanded ? "chevron-up" : "chevron-down",
@@ -16870,7 +16814,7 @@ var Plan = ({
                                 }
                               }
                             ),
-                            /* @__PURE__ */ jsx17(
+                            /* @__PURE__ */ jsx16(
                               Text,
                               {
                                 onClick: () => handleToggleShowAll(plan.id),
@@ -16895,7 +16839,7 @@ var Plan = ({
                         $gap: "0.25rem",
                         $padding: "0.625rem 0",
                         children: [
-                          /* @__PURE__ */ jsx17(
+                          /* @__PURE__ */ jsx16(
                             Icon2,
                             {
                               name: "check-rounded",
@@ -16906,7 +16850,7 @@ var Plan = ({
                               }
                             }
                           ),
-                          /* @__PURE__ */ jsx17(
+                          /* @__PURE__ */ jsx16(
                             Text,
                             {
                               $font: theme.typography.text.fontFamily,
@@ -16919,7 +16863,7 @@ var Plan = ({
                           )
                         ]
                       }
-                    ) : /* @__PURE__ */ jsx17(
+                    ) : /* @__PURE__ */ jsx16(
                       EmbedButton,
                       {
                         type: "button",
@@ -16935,14 +16879,14 @@ var Plan = ({
                         $size: "sm",
                         $color: "primary",
                         $variant: plan.current ? "outline" : "filled",
-                        children: plan.custom ? /* @__PURE__ */ jsx17(
+                        children: plan.custom ? /* @__PURE__ */ jsx16(
                           ButtonLink,
                           {
                             href: plan.customPlanConfig?.ctaWebSite ?? "#",
                             target: "_blank",
                             children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
                           }
-                        ) : !plan.valid ? /* @__PURE__ */ jsx17(
+                        ) : !plan.valid ? /* @__PURE__ */ jsx16(
                           Tooltip,
                           {
                             trigger: t2("Over usage limit"),
@@ -16966,14 +16910,14 @@ var Plan = ({
 };
 // src/components/shared/checkout-dialog/Usage.tsx
-import { Fragment as Fragment8, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var Usage = ({ entitlements, updateQuantity, period }) => {
   const theme = nt();
   const { t: t2 } = useTranslation();
   const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
   const unitPriceFontSize = 0.875 * theme.typography.text.fontSize;
   const unitPriceColor = hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46);
-  return /* @__PURE__ */ jsx18(Fragment8, { children: /* @__PURE__ */ jsx18(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce(
+  return /* @__PURE__ */ jsx17(Fragment8, { children: /* @__PURE__ */ jsx17(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce(
     (acc, entitlement, index) => {
       if (entitlement.priceBehavior === "pay_in_advance" && entitlement.feature) {
         const { price, currency } = getBillingPrice(
@@ -16998,7 +16942,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                     $gap: "0.75rem",
                     $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
                     children: [
-                      /* @__PURE__ */ jsx18(Box, { children: /* @__PURE__ */ jsx18(
+                      /* @__PURE__ */ jsx17(Box, { children: /* @__PURE__ */ jsx17(
                         Text,
                         {
                           $font: theme.typography.heading2.fontFamily,
@@ -17008,7 +16952,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           children: entitlement.feature.name
                         }
                       ) }),
-                      entitlement.feature.description && /* @__PURE__ */ jsx18(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx18(
+                      entitlement.feature.description && /* @__PURE__ */ jsx17(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx17(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -17028,7 +16972,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                     $gap: "0.5rem",
                     $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
                     children: [
-                      /* @__PURE__ */ jsx18(
+                      /* @__PURE__ */ jsx17(
                         Input,
                         {
                           $size: "lg",
@@ -17046,7 +16990,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx18(Box, { children: /* @__PURE__ */ jsxs13(
+                      /* @__PURE__ */ jsx17(Box, { children: /* @__PURE__ */ jsxs13(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -17074,7 +17018,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                     $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
                     $textAlign: "right",
                     children: [
-                      /* @__PURE__ */ jsx18(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs13(
+                      /* @__PURE__ */ jsx17(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs13(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -17093,7 +17037,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           ]
                         }
                       ) }),
-                      /* @__PURE__ */ jsx18(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs13(
+                      /* @__PURE__ */ jsx17(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs13(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -17127,7 +17071,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
 };
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc, entitlement) => {
   if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
     const featureUsage = entitlements.find(
@@ -17419,7 +17363,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       top,
       contentRef,
       children: [
-        /* @__PURE__ */ jsx19(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx18(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx18(
           Flex,
           {
             $flexWrap: "wrap",
@@ -17429,7 +17373,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                 $gap: "1rem"
               }
             },
-            children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ jsx19(
+            children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ jsx18(
               Navigation,
               {
                 name: stage.name,
@@ -17499,7 +17443,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                                 }
                               },
                               children: [
-                                activeCheckoutStage.label && /* @__PURE__ */ jsx19(
+                                activeCheckoutStage.label && /* @__PURE__ */ jsx18(
                                   Text,
                                   {
                                     as: "h3",
@@ -17511,7 +17455,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                                     children: activeCheckoutStage.label
                                   }
                                 ),
-                                activeCheckoutStage.description && /* @__PURE__ */ jsx19(
+                                activeCheckoutStage.description && /* @__PURE__ */ jsx18(
                                   Text,
                                   {
                                     as: "p",
@@ -17525,7 +17469,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                               ]
                             }
                           ),
-                          checkoutStage === "plan" && /* @__PURE__ */ jsx19(
+                          checkoutStage === "plan" && /* @__PURE__ */ jsx18(
                             PeriodToggle,
                             {
                               layerRef: modalRef,
@@ -17538,7 +17482,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                         ]
                       }
                     ),
-                    checkoutStage === "plan" && /* @__PURE__ */ jsx19(
+                    checkoutStage === "plan" && /* @__PURE__ */ jsx18(
                       Plan,
                       {
                         isLoading,
@@ -17548,7 +17492,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                         selectPlan
                       }
                     ),
-                    checkoutStage === "usage" && /* @__PURE__ */ jsx19(
+                    checkoutStage === "usage" && /* @__PURE__ */ jsx18(
                       Usage,
                       {
                         isLoading,
@@ -17558,7 +17502,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                         updateQuantity: updateUsageBasedEntitlementQuantity
                       }
                     ),
-                    checkoutStage === "addons" && /* @__PURE__ */ jsx19(
+                    checkoutStage === "addons" && /* @__PURE__ */ jsx18(
                       AddOns,
                       {
                         isLoading,
@@ -17567,7 +17511,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                         toggle: (id) => toggleAddOn(id)
                       }
                     ),
-                    checkoutStage === "checkout" && /* @__PURE__ */ jsx19(
+                    checkoutStage === "checkout" && /* @__PURE__ */ jsx18(
                       Checkout,
                       {
                         requiresPayment,
@@ -17578,7 +17522,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx18(
                 Sidebar,
                 {
                   planPeriod,
@@ -17609,13 +17553,13 @@ var CheckoutDialog = ({ top = 0 }) => {
 };
 // src/components/shared/payment-dialog/PaymentDialog.tsx
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var PaymentDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { setLayout } = useEmbed();
   return /* @__PURE__ */ jsxs15(Modal, { size: "md", top, onClose: () => setLayout("portal"), children: [
-    /* @__PURE__ */ jsx20(ModalHeader, { bordered: true, onClose: () => setLayout("portal"), children: /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx19(ModalHeader, { bordered: true, onClose: () => setLayout("portal"), children: /* @__PURE__ */ jsx19(
       Text,
       {
         $font: theme.typography.text.fontFamily,
@@ -17625,7 +17569,7 @@ var PaymentDialog = ({ top = 0 }) => {
         children: t2("Edit payment method")
       }
     ) }),
-    /* @__PURE__ */ jsx20(PaymentMethodDetails, {})
+    /* @__PURE__ */ jsx19(PaymentMethodDetails, {})
   ] });
 };
@@ -17636,7 +17580,7 @@ import {
   useStripe
 } from "@stripe/react-stripe-js";
 import { useState as useState8 } from "react";
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var PaymentForm = ({ onConfirm }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
@@ -17688,8 +17632,8 @@ var PaymentForm = ({ onConfirm }) => {
         overflowY: "auto"
       },
       children: [
-        /* @__PURE__ */ jsx21(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx21(PaymentElement, { id: "payment-element" }) }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx20(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx20(PaymentElement, { id: "payment-element" }) }),
+        /* @__PURE__ */ jsx20(
           EmbedButton,
           {
             id: "submit",
@@ -17700,7 +17644,7 @@ var PaymentForm = ({ onConfirm }) => {
             children: isLoading ? t2("Loading") : t2("Save payment method")
           }
         ),
-        message && /* @__PURE__ */ jsx21(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx21(
+        message && /* @__PURE__ */ jsx20(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx20(
           Text,
           {
             id: "payment-message",
@@ -17718,7 +17662,7 @@ var PaymentForm = ({ onConfirm }) => {
 // src/components/shared/period-toggle/PeriodToggle.tsx
 import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo6, useState as useState9 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var PeriodToggle = ({
   options,
   selectedOption,
@@ -17748,7 +17692,7 @@ var PeriodToggle = ({
       setTooltipZIndex(parseInt(value) + 1);
     }
   }, [layerRef]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     Flex,
     {
       $margin: 0,
@@ -17764,7 +17708,7 @@ var PeriodToggle = ({
         }
       },
       children: options.map((option) => {
-        const element = /* @__PURE__ */ jsx22(
+        const element = /* @__PURE__ */ jsx21(
           Flex,
           {
             tabIndex: 0,
@@ -17783,7 +17727,7 @@ var PeriodToggle = ({
                 $padding: "0.375rem 1rem"
               }
             },
-            children: /* @__PURE__ */ jsx22(
+            children: /* @__PURE__ */ jsx21(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -17798,11 +17742,11 @@ var PeriodToggle = ({
           option
         );
         if (option === "year" && savingsPercentage > 0) {
-          return /* @__PURE__ */ jsx22(
+          return /* @__PURE__ */ jsx21(
             Tooltip,
             {
               trigger: element,
-              content: /* @__PURE__ */ jsx22(
+              content: /* @__PURE__ */ jsx21(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -17831,7 +17775,7 @@ var PeriodToggle = ({
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
 import { useCallback as useCallback9, useMemo as useMemo7, useRef as useRef6, useState as useState10 } from "react";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
@@ -17877,7 +17821,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
       top,
       contentRef,
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx22(
           Box,
           {
             $display: "inline-flex",
@@ -17887,7 +17831,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
             $zIndex: 1,
             $cursor: "pointer",
             onClick: handleClose,
-            children: /* @__PURE__ */ jsx23(
+            children: /* @__PURE__ */ jsx22(
               Icon2,
               {
                 name: "close",
@@ -17922,7 +17866,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
                   $padding: "2.5rem",
                   children: [
                     /* @__PURE__ */ jsxs17(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx22(
                         Text,
                         {
                           as: "h2",
@@ -17954,7 +17898,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
                       )
                     ] }),
                     /* @__PURE__ */ jsxs17(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx22(
                         Text,
                         {
                           as: "p",
@@ -17965,7 +17909,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
                           children: t2("Not ready to cancel?")
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx22(
                         EmbedButton,
                         {
                           onClick: () => {
@@ -17987,7 +17931,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx22(
                 Sidebar,
                 {
                   planPeriod,
@@ -18010,7 +17954,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
 };
 // src/components/ui/badge/Badge.tsx
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var Badge = () => {
   const { t: t2 } = useTranslation();
   const theme = nt();
@@ -18042,77 +17986,77 @@ var Badge = () => {
           }
         ),
         /* @__PURE__ */ jsxs18("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M21.2354 6.16227C21.1796 5.95015 21.0494 5.76779 20.8261 5.61893C20.6028 5.46635 20.3423 5.39564 20.0408 5.39564C19.3151 5.39564 18.7941 5.69708 18.7941 6.2367C18.7941 6.49721 18.9095 6.69073 19.1402 6.81726C19.3635 6.94379 19.732 7.07033 20.2344 7.18569C21.0084 7.37177 21.4922 7.51691 21.9686 7.7402C22.203 7.85557 22.3928 7.97465 22.5305 8.10863C22.7948 8.3803 22.9548 8.74501 22.9362 9.20276C22.9176 9.86147 22.6571 10.375 22.1547 10.7397C21.6523 11.1082 20.9563 11.2905 20.0818 11.2905C19.2072 11.2905 18.5597 11.1268 18.0312 10.8067C17.5065 10.4867 17.2013 10.0215 17.1194 9.41116L18.6192 9.27719C18.6974 9.57491 18.8723 9.7982 19.1514 9.94706C19.4305 10.0959 19.7394 10.1778 20.0818 10.1778C20.4614 10.1778 20.7777 10.0996 21.0308 9.9359C21.2838 9.77959 21.4104 9.56002 21.4104 9.28835C21.4104 8.90876 21.0531 8.61104 20.5991 8.43613C20.3683 8.35053 20.0855 8.27238 19.7468 8.19423C19.2705 8.07886 18.8946 7.97094 18.6155 7.87418C18.3364 7.78486 18.0908 7.66205 17.8712 7.51319C17.4358 7.21547 17.2832 6.8247 17.2832 6.2367C17.2832 5.61521 17.5325 5.13141 18.0312 4.79648C18.5262 4.46526 19.2035 4.29407 20.0669 4.29407C21.5853 4.29407 22.5752 4.9044 22.7389 6.05807L21.228 6.16227H21.2354Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M29.4145 8.9796L30.7803 9.55271C30.49 10.0923 30.0621 10.5129 29.5001 10.8217C28.9382 11.1344 28.3167 11.2944 27.6319 11.2944C26.9472 11.2944 26.3629 11.1567 25.8121 10.8701C25.2613 10.5873 24.8147 10.1742 24.4835 9.6383C24.1523 9.09868 23.9811 8.48835 23.9811 7.79987C23.9811 7.11138 24.1486 6.49361 24.4835 5.95771C24.8147 5.41809 25.2613 5.00873 25.8121 4.72589C26.3629 4.44305 26.9732 4.30164 27.6319 4.30164C28.2906 4.30164 28.9382 4.45794 29.5038 4.77427C30.0658 5.08688 30.4938 5.51113 30.7803 6.05075L29.4145 6.62015C29.0535 5.93539 28.3985 5.56323 27.6319 5.56323C27.0327 5.56323 26.5303 5.77536 26.1135 6.19961C25.6967 6.62387 25.492 7.15977 25.492 7.80731C25.492 8.45486 25.6967 8.99076 26.1135 9.40757C26.5303 9.83182 27.0327 10.0439 27.6319 10.0439C28.3985 10.0439 29.0535 9.66807 29.4145 8.98703V8.9796Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M37.4386 11.2049V7.80341C37.4386 6.35945 36.9139 5.59282 35.697 5.59282C35.0978 5.59282 34.614 5.7975 34.2419 6.21059C33.8623 6.61996 33.6725 7.15214 33.6725 7.80713V11.2086H32.1615V1.9234H33.6725V5.47745C34.1004 4.73315 35.001 4.29773 36.1919 4.29773C37.167 4.29773 37.8666 4.59917 38.302 5.19834C38.7375 5.7975 38.9533 6.66834 38.9533 7.80341V11.2049H37.4349H37.4386Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M46.5692 5.38819C47.2167 6.07295 47.5777 7.1187 47.5107 8.30587H41.8242C41.9284 8.83805 42.1741 9.26602 42.5611 9.59352C42.9481 9.92473 43.4022 10.0885 43.9157 10.0885C44.8052 10.0885 45.5234 9.59724 45.8844 8.78222L47.1795 9.40372C46.8818 9.99172 46.4352 10.4495 45.8509 10.7881C45.2629 11.1268 44.6191 11.2943 43.9157 11.2943C42.9295 11.2943 42.0178 10.9444 41.3516 10.3453C40.6855 9.7461 40.2649 8.83432 40.2649 7.79602C40.2649 6.75771 40.6892 5.84222 41.3516 5.23933C42.0178 4.64017 42.9295 4.29034 43.9157 4.29034C44.9801 4.29034 45.9216 4.69971 46.5692 5.38447V5.38819ZM42.5388 6.00224C42.1592 6.32974 41.921 6.75772 41.8205 7.29734H46.0221C45.9179 6.75772 45.6835 6.3223 45.3039 5.99852C44.9243 5.67847 44.4628 5.51473 43.9195 5.51473C43.3761 5.51473 42.9221 5.67847 42.5425 6.00597L42.5388 6.00224Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M59.7699 5.23933C60.1495 5.86827 60.3132 6.68329 60.3132 7.80347V11.2049H58.8023V7.80347C58.8023 6.35952 58.3371 5.59288 57.2318 5.59288C56.6438 5.59288 56.1861 5.79384 55.8586 6.19577C55.5311 6.60141 55.3673 7.13731 55.3673 7.80347V11.2049H53.8489V7.80347C53.8489 6.35952 53.3838 5.59288 52.2785 5.59288C51.6905 5.59288 51.2327 5.79384 50.9052 6.19577C50.574 6.60141 50.4102 7.13731 50.4102 7.80347V11.2049H48.8993V4.39827H50.3433L50.4102 5.47379C50.8196 4.65878 51.5825 4.29407 52.8106 4.29407C53.9606 4.29407 54.7161 4.78531 55.077 5.76407C55.5199 4.81508 56.4428 4.29407 57.7677 4.29407C58.7093 4.29407 59.3829 4.61412 59.7699 5.23562V5.23933Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M67.4264 5.47382L67.4934 4.3983H68.9373V11.205H67.4934L67.4264 10.1294C67.0282 10.9147 66.1797 11.3092 64.8809 11.3017C63.102 11.3427 61.591 9.79823 61.6283 7.8035C61.591 5.8162 63.102 4.2606 64.8809 4.29782C66.0643 4.29782 67.0096 4.7444 67.4264 5.47754V5.47382ZM66.8049 9.37398C67.2217 8.95717 67.4264 8.43243 67.4264 7.79605C67.4264 7.15967 67.2217 6.64238 66.8049 6.21813C66.3881 5.80132 65.8782 5.58919 65.2828 5.58919C64.6874 5.58919 64.1887 5.80132 63.7719 6.21813C63.355 6.64238 63.1504 7.16711 63.1504 7.79605C63.1504 8.42499 63.355 8.95717 63.7719 9.37398C64.1887 9.79823 64.6911 10.0104 65.2828 10.0104C65.8745 10.0104 66.3881 9.79823 66.8049 9.37398Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M71.3891 2.85757H72.8926V4.39828H74.6455V5.58172H72.8926V8.9683C72.8926 9.5898 73.1048 9.90985 73.5923 9.96568C73.89 10.0252 74.2398 10.0141 74.6455 9.9359V11.1863C74.1989 11.257 73.7858 11.2943 73.4062 11.2943C72.6731 11.2943 72.1595 11.1082 71.8543 10.7323C71.5454 10.3639 71.3891 9.79076 71.3891 9.02041V5.58172H70.4215V4.39828H71.3891V2.85757Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M76.1747 3.15526C75.9923 2.98035 75.903 2.76078 75.903 2.50772C75.903 2.25466 75.9923 2.04997 76.1747 1.86762C76.3496 1.69271 76.5691 1.60339 76.8222 1.60339C77.0753 1.60339 77.2874 1.69271 77.4623 1.86762C77.6372 2.04997 77.7265 2.2621 77.7265 2.50772C77.7265 2.75334 77.6372 2.97291 77.4623 3.15526C77.2874 3.33762 77.0678 3.42694 76.8222 3.42694C76.5766 3.42694 76.3496 3.33762 76.1747 3.15526ZM76.0593 4.39826H77.5777V11.2049H76.0593V4.39826Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M84.3023 8.9796L85.6681 9.55271C85.3778 10.0923 84.9498 10.5129 84.3879 10.8217C83.8259 11.1344 83.2044 11.2944 82.5197 11.2944C81.8349 11.2944 81.2506 11.1567 80.6998 10.8701C80.1491 10.5873 79.7025 10.1742 79.3713 9.6383C79.04 9.09868 78.8689 8.48835 78.8689 7.79987C78.8689 7.11138 79.0363 6.49361 79.3713 5.95771C79.7025 5.41809 80.1528 5.00873 80.6998 4.72589C81.2469 4.44305 81.8609 4.30164 82.5197 4.30164C83.1784 4.30164 83.8259 4.45794 84.3916 4.77427C84.9535 5.08688 85.3815 5.51113 85.6681 6.05075L84.3023 6.62015C83.9413 5.93539 83.2863 5.56323 82.5197 5.56323C81.9205 5.56323 81.4181 5.77536 81.0013 6.19961C80.5845 6.62387 80.3798 7.15977 80.3798 7.80731C80.3798 8.45486 80.5845 8.99076 81.0013 9.40757C81.4181 9.83182 81.9205 10.0439 82.5197 10.0439C83.2863 10.0439 83.9413 9.66807 84.3023 8.98703V8.9796Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M5.93091 10.8141L7.2758 9.41753L3.83719 5.84667C2.98568 4.9624 2.98568 3.52157 3.83719 2.63731C4.68871 1.75305 6.07617 1.75305 6.92769 2.63731L10.3663 6.20817L11.7112 4.81156L8.27258 1.24069C6.67975 -0.413401 4.08513 -0.413401 2.4923 1.24069C0.899472 2.89479 0.899472 5.58919 2.4923 7.24328L5.93091 10.8141Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M6.05827 3.54751C5.68761 3.1626 5.08404 3.1626 4.71338 3.54751C4.34272 3.93243 4.34272 4.55921 4.71338 4.94413L9.02103 9.41746L5.93054 12.6268L1.62288 8.15349C1.25223 7.76857 0.648653 7.76857 0.277994 8.15349C-0.0926647 8.5384 -0.0926647 9.16519 0.277994 9.5501L5.93054 15.4201L11.7108 9.41746L6.05827 3.54751Z",
@@ -18126,10 +18070,10 @@ var Badge = () => {
 };
 // src/components/layout/RenderLayout.tsx
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var Disabled = () => {
   const theme = nt();
-  return /* @__PURE__ */ jsx25(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx25(Card, { children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx24(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx24(Card, { children: /* @__PURE__ */ jsxs19(
     Element,
     {
       as: Flex,
@@ -18138,7 +18082,7 @@ var Disabled = () => {
       $alignItems: "center",
       $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ jsx25(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx24(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx24(
           Text,
           {
             as: "h1",
@@ -18149,7 +18093,7 @@ var Disabled = () => {
             children: "Portal not found"
           }
         ) }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx24(
           Text,
           {
             as: "p",
@@ -18168,7 +18112,7 @@ var RenderLayout = ({ children }) => {
   const { layout } = useEmbed();
   switch (layout) {
     case "disabled":
-      return /* @__PURE__ */ jsx25(Disabled, {});
+      return /* @__PURE__ */ jsx24(Disabled, {});
     default:
       return children;
   }
@@ -18194,7 +18138,7 @@ var StyledViewport = dt.div.withConfig({
 `;
 // src/components/layout/viewport/Viewport.tsx
-import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var Viewport = forwardRef6(
   ({ children, portal, ...props }, ref) => {
     const { data, layout, settings } = useEmbed();
@@ -18217,22 +18161,22 @@ var Viewport = forwardRef6(
     }, [portal, layout]);
     return /* @__PURE__ */ jsxs20(Fragment9, { children: [
       /* @__PURE__ */ jsxs20(StyledViewport, { ref, ...props, children: [
-        /* @__PURE__ */ jsx26(RenderLayout, { children }),
-        (!data.capabilities?.badgeVisibility || settings.badge?.visibility !== "hidden") && /* @__PURE__ */ jsx26(Badge, {})
+        /* @__PURE__ */ jsx25(RenderLayout, { children }),
+        (!data.capabilities?.badgeVisibility || settings.badge?.visibility !== "hidden") && /* @__PURE__ */ jsx25(Badge, {})
       ] }),
-      canCheckout && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx26(CheckoutDialog, { top }), portal || document.body),
+      canCheckout && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx25(CheckoutDialog, { top }), portal || document.body),
       layout === "unsubscribe" && createPortal2(
-        /* @__PURE__ */ jsx26(UnsubscribeDialog, { top }),
+        /* @__PURE__ */ jsx25(UnsubscribeDialog, { top }),
         portal || document.body
       ),
-      layout === "payment" && createPortal2(/* @__PURE__ */ jsx26(PaymentDialog, { top }), portal || document.body)
+      layout === "payment" && createPortal2(/* @__PURE__ */ jsx25(PaymentDialog, { top }), portal || document.body)
     ] });
   }
 );
 Viewport.displayName = "Viewport";
 // src/components/elements/button/Button.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var resolveDesignProps = (props) => {
   return {
     button: {
@@ -18263,7 +18207,7 @@ var ButtonElement = forwardRef7(({ children, className, ...rest }, ref) => {
       variant: "text"
     }
   };
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     Element,
     {
       as: Flex,
@@ -18271,7 +18215,7 @@ var ButtonElement = forwardRef7(({ children, className, ...rest }, ref) => {
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsx26(
         EmbedButton,
         {
           as: "a",
@@ -18296,7 +18240,7 @@ import { forwardRef as forwardRef8, useMemo as useMemo9, useRef as useRef7, useS
 // src/components/elements/included-features/Details.tsx
 import { useMemo as useMemo8 } from "react";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var Details = ({
   shouldWrapChildren,
   featureUsage,
@@ -18395,7 +18339,7 @@ var Details = ({
       $flexGrow: "1",
       $textAlign: shouldWrapChildren ? "left" : "right",
       children: [
-        props.entitlement.isVisible && /* @__PURE__ */ jsx28(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx28(
+        props.entitlement.isVisible && /* @__PURE__ */ jsx27(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx27(
           Text,
           {
             $font: theme.typography[props.entitlement.fontStyle].fontFamily,
@@ -18406,7 +18350,7 @@ var Details = ({
             children: text
           }
         ) }),
-        props.usage.isVisible && usageText && /* @__PURE__ */ jsx28(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx28(
+        props.usage.isVisible && usageText && /* @__PURE__ */ jsx27(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx27(
           Text,
           {
             $font: theme.typography[props.usage.fontStyle].fontFamily,
@@ -18423,7 +18367,7 @@ var Details = ({
 };
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 function resolveDesignProps2(props) {
   return {
     header: {
@@ -18497,7 +18441,7 @@ var IncludedFeatures = forwardRef8(({ className, ...rest }, ref) => {
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ jsx29(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx29(
+        props.header.isVisible && /* @__PURE__ */ jsx28(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx28(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -18531,7 +18475,7 @@ var IncludedFeatures = forwardRef8(({ className, ...rest }, ref) => {
                     $flexBasis: "min-content",
                     $gap: "1rem",
                     children: [
-                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx29(
+                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx28(
                         IconRound,
                         {
                           name: feature.icon,
@@ -18542,7 +18486,7 @@ var IncludedFeatures = forwardRef8(({ className, ...rest }, ref) => {
                           ]
                         }
                       ),
-                      feature?.name && /* @__PURE__ */ jsx29(
+                      feature?.name && /* @__PURE__ */ jsx28(
                         Text,
                         {
                           $font: theme.typography[props.icons.fontStyle].fontFamily,
@@ -18572,7 +18516,7 @@ var IncludedFeatures = forwardRef8(({ className, ...rest }, ref) => {
                     ]
                   }
                 ),
-                shouldShowDetails && /* @__PURE__ */ jsx29(
+                shouldShowDetails && /* @__PURE__ */ jsx28(
                   Details,
                   {
                     featureUsage: usage,
@@ -18586,7 +18530,7 @@ var IncludedFeatures = forwardRef8(({ className, ...rest }, ref) => {
           );
         }),
         shouldShowExpand && /* @__PURE__ */ jsxs22(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx28(
             Icon2,
             {
               name: isExpanded ? "chevron-up" : "chevron-down",
@@ -18598,7 +18542,7 @@ var IncludedFeatures = forwardRef8(({ className, ...rest }, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx28(
             Text,
             {
               onClick: handleToggleShowAll,
@@ -18620,7 +18564,7 @@ IncludedFeatures.displayName = "IncludedFeatures";
 // src/components/elements/invoices/Invoices.tsx
 import { forwardRef as forwardRef9, useEffect as useEffect5, useState as useState13 } from "react";
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
     header: {
@@ -18654,7 +18598,7 @@ function formatInvoices(invoices = []) {
 }
 var InvoiceDate = ({ date, fontStyle, url }) => {
   const theme = nt();
-  const dateText = /* @__PURE__ */ jsx30(
+  const dateText = /* @__PURE__ */ jsx29(
     Text,
     {
       ...url && { onClick: () => {
@@ -18667,7 +18611,7 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
     }
   );
   if (url) {
-    return /* @__PURE__ */ jsx30("a", { href: url, target: "_blank", rel: "noreferrer", children: dateText });
+    return /* @__PURE__ */ jsx29("a", { href: url, target: "_blank", rel: "noreferrer", children: dateText });
   }
   return dateText;
 };
@@ -18694,8 +18638,8 @@ var Invoices = forwardRef9(({ className, data, ...rest }, ref) => {
   if (invoices.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx30(Element, { ref, className, children: /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-    props.header.isVisible && /* @__PURE__ */ jsx30(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx29(Element, { ref, className, children: /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+    props.header.isVisible && /* @__PURE__ */ jsx29(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx29(
       Text,
       {
         $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -18705,9 +18649,9 @@ var Invoices = forwardRef9(({ className, data, ...rest }, ref) => {
         children: t2("Invoices")
       }
     ) }),
-    /* @__PURE__ */ jsx30(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+    /* @__PURE__ */ jsx29(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
       return /* @__PURE__ */ jsxs23(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && date && /* @__PURE__ */ jsx30(
+        props.date.isVisible && date && /* @__PURE__ */ jsx29(
           InvoiceDate,
           {
             date,
@@ -18715,7 +18659,7 @@ var Invoices = forwardRef9(({ className, data, ...rest }, ref) => {
             url
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ jsx30(
+        props.amount.isVisible && /* @__PURE__ */ jsx29(
           Text,
           {
             $font: theme.typography[props.amount.fontStyle].fontFamily,
@@ -18728,14 +18672,14 @@ var Invoices = forwardRef9(({ className, data, ...rest }, ref) => {
       ] }, index);
     }) }),
     props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs23(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx29(
         Icon2,
         {
           name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
           style: { color: "#D0D0D0" }
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx29(
         Text,
         {
           onClick: toggleListSize,
@@ -18755,7 +18699,7 @@ Invoices.displayName = "Invoices";
 import { forwardRef as forwardRef10, useMemo as useMemo10, useRef as useRef8 } from "react";
 // src/components/elements/metered-features/styles.ts
-var Container3 = dt.div`
+var Container2 = dt.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -18795,7 +18739,7 @@ var Container3 = dt.div`
 `;
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 function resolveDesignProps4(props) {
   return {
     isVisible: props.isVisible ?? true,
@@ -18851,7 +18795,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ jsx31(Container3, { ref, className, children: featureUsage.map(
+  return /* @__PURE__ */ jsx30(Container2, { ref, className, children: featureUsage.map(
     ({
       feature,
       priceBehavior,
@@ -18890,7 +18834,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
           }
         }
       }
-      const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsx31(
+      const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsx30(
         ProgressBar,
         {
           progress: (isOverage ? softLimit / usage : usage / limit) * 100,
@@ -18915,7 +18859,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
               $borderBottomRightRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`
             },
             children: [
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx30(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -18963,7 +18907,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
           }
         ),
         /* @__PURE__ */ jsxs24(Element, { as: Flex, $gap: "1.5rem", children: [
-          props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx31(
+          props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx30(
             IconRound,
             {
               name: feature.icon,
@@ -18987,7 +18931,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
                 $gap: "1rem",
                 children: [
                   feature?.name && /* @__PURE__ */ jsxs24(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-                    /* @__PURE__ */ jsx31(
+                    /* @__PURE__ */ jsx30(
                       Text,
                       {
                         as: Box,
@@ -19003,7 +18947,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
                         ] }) : feature.name
                       }
                     ),
-                    props.description.isVisible && /* @__PURE__ */ jsx31(
+                    props.description.isVisible && /* @__PURE__ */ jsx30(
                       Text,
                       {
                         as: Box,
@@ -19022,7 +18966,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
                       $flexGrow: 1,
                       $textAlign: shouldWrapChildren ? "left" : "right",
                       children: [
-                        props.usage.isVisible && /* @__PURE__ */ jsx31(
+                        props.usage.isVisible && /* @__PURE__ */ jsx30(
                           Text,
                           {
                             as: Box,
@@ -19046,7 +18990,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
                             ] })
                           }
                         ),
-                        props.allocation.isVisible && priceBehavior !== "overage" && /* @__PURE__ */ jsx31(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx31(
+                        props.allocation.isVisible && priceBehavior !== "overage" && /* @__PURE__ */ jsx30(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx30(
                           Text,
                           {
                             $font: theme.typography[props.allocation.fontStyle].fontFamily,
@@ -19072,11 +19016,11 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
               }
             ),
             props.isVisible && typeof usage === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsxs24(Flex, { $gap: "2rem", children: [
-              typeof allocation === "number" ? /* @__PURE__ */ jsx31(
+              typeof allocation === "number" ? /* @__PURE__ */ jsx30(
                 Tooltip,
                 {
                   trigger: progressBar,
-                  content: /* @__PURE__ */ jsx31(
+                  content: /* @__PURE__ */ jsx30(
                     Text,
                     {
                       $font: theme.typography.text.fontFamily,
@@ -19093,7 +19037,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
                   $flexGrow: 1
                 }
               ) : progressBar,
-              priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsx31(
+              priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsx30(
                 EmbedButton,
                 {
                   onClick: () => {
@@ -19121,7 +19065,7 @@ import { forwardRef as forwardRef11, useMemo as useMemo12 } from "react";
 // src/components/elements/payment-method/PaymentMethodElement.tsx
 import { useMemo as useMemo11 } from "react";
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var PaymentElement2 = ({
   iconName,
   iconTitle,
@@ -19130,17 +19074,17 @@ var PaymentElement2 = ({
   paymentLast4
 }) => {
   const theme = nt();
-  return /* @__PURE__ */ jsx32(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsxs25(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
-    iconName && /* @__PURE__ */ jsx32(Box, { children: /* @__PURE__ */ jsx32(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
+  return /* @__PURE__ */ jsx31(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsxs25(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
+    iconName && /* @__PURE__ */ jsx31(Box, { children: /* @__PURE__ */ jsx31(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
     /* @__PURE__ */ jsxs25(Flex, { $alignItems: "center", children: [
-      /* @__PURE__ */ jsx32(Box, { $lineHeight: "1", $marginRight: "4px", children: t(label) }),
-      paymentLast4 && /* @__PURE__ */ jsx32(Box, { $display: "inline-block", $fontWeight: "bold", children: paymentLast4 })
+      /* @__PURE__ */ jsx31(Box, { $lineHeight: "1", $marginRight: "4px", children: t(label) }),
+      paymentLast4 && /* @__PURE__ */ jsx31(Box, { $display: "inline-block", $fontWeight: "bold", children: paymentLast4 })
     ] })
   ] }) });
 };
 var EmptyPaymentElement = () => {
   const theme = nt();
-  return /* @__PURE__ */ jsx32(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsx32(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx32(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx32(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method selected") }) }) }) });
+  return /* @__PURE__ */ jsx31(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsx31(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx31(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx31(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method selected") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -19231,7 +19175,7 @@ var PaymentMethodElement = ({
   }
   return /* @__PURE__ */ jsxs25(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
     props.header.isVisible && /* @__PURE__ */ jsxs25(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx31(
         Text,
         {
           $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -19241,7 +19185,7 @@ var PaymentMethodElement = ({
           children: t2("Payment Method")
         }
       ),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx32(
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx31(
         Text,
         {
           $font: theme.typography.text.fontFamily,
@@ -19261,15 +19205,15 @@ var PaymentMethodElement = ({
         $padding: `${sizeFactor / 2.2}rem ${sizeFactor}rem`,
         $borderRadius: "9999px",
         children: [
-          paymentMethod && /* @__PURE__ */ jsx32(
+          paymentMethod && /* @__PURE__ */ jsx31(
             PaymentElement2,
             {
               ...getPaymentMethodData(paymentMethod),
               ...getIconStyles({ size, theme })
             }
           ),
-          !paymentMethod && /* @__PURE__ */ jsx32(EmptyPaymentElement, {}),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx32(
+          !paymentMethod && /* @__PURE__ */ jsx31(EmptyPaymentElement, {}),
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx31(
             Text,
             {
               onClick: onEdit,
@@ -19323,8 +19267,8 @@ var PaymentListElement = ({
       $font: theme.typography.text.fontFamily,
       $color: theme.typography.text.color,
       children: [
-        /* @__PURE__ */ jsx32(Box, { $paddingLeft: "0.5rem", $paddingRight: "0.5rem", children: iconName && /* @__PURE__ */ jsx32(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
-        /* @__PURE__ */ jsx32(Box, { $flexGrow: "1", children: /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsx31(Box, { $paddingLeft: "0.5rem", $paddingRight: "0.5rem", children: iconName && /* @__PURE__ */ jsx31(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
+        /* @__PURE__ */ jsx31(Box, { $flexGrow: "1", children: /* @__PURE__ */ jsxs25(
           Text,
           {
             $font: theme.typography.text.fontFamily,
@@ -19338,12 +19282,12 @@ var PaymentListElement = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx31(
           Box,
           {
             $flexGrow: "1",
             $color: isLightBackground ? "hsla(0, 0%, 0%, 0.375)" : "hsla(0, 0%, 100%, 0.375)",
-            children: /* @__PURE__ */ jsx32(
+            children: /* @__PURE__ */ jsx31(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -19355,7 +19299,7 @@ var PaymentListElement = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx32(Box, { children: /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx31(Box, { children: /* @__PURE__ */ jsx31(
           Text,
           {
             onClick: () => {
@@ -19368,7 +19312,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx31(
           Box,
           {
             $cursor: "pointer",
@@ -19376,7 +19320,7 @@ var PaymentListElement = ({
             onClick: () => {
               handleDelete(paymentMethod.id);
             },
-            children: /* @__PURE__ */ jsx32(
+            children: /* @__PURE__ */ jsx31(
               Icon2,
               {
                 name: "close",
@@ -19394,7 +19338,7 @@ var PaymentListElement = ({
 };
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -19426,7 +19370,7 @@ var PaymentMethod = forwardRef11(({ children, className, portal, allowEdit = tru
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  return /* @__PURE__ */ jsx33(Element, { ref, className, children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(Element, { ref, className, children: /* @__PURE__ */ jsx32(
     PaymentMethodElement,
     {
       paymentMethod,
@@ -19595,7 +19539,7 @@ var loadStripe = function loadStripe2() {
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
 import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo13, useState as useState14 } from "react";
-import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
     header: {
@@ -19745,7 +19689,7 @@ var PaymentMethodDetails = ({
     [api, data, setData, t2]
   );
   return /* @__PURE__ */ jsxs26(Flex, { $position: "relative", children: [
-    isLoading && /* @__PURE__ */ jsx34(
+    isLoading && /* @__PURE__ */ jsx33(
       Flex,
       {
         $position: "absolute",
@@ -19757,7 +19701,7 @@ var PaymentMethodDetails = ({
         $zIndex: 1,
         $backgroundColor: "black",
         $opacity: 0.5,
-        children: /* @__PURE__ */ jsx34(Loader, { $color: theme.primary, $size: "2xl" })
+        children: /* @__PURE__ */ jsx33(Loader, { $color: theme.primary, $size: "2xl" })
       }
     ),
     /* @__PURE__ */ jsxs26(
@@ -19770,7 +19714,7 @@ var PaymentMethodDetails = ({
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
         $overflow: "auto",
         children: [
-          showPaymentForm ? /* @__PURE__ */ jsx34(
+          showPaymentForm ? /* @__PURE__ */ jsx33(
             Elements,
             {
               stripe,
@@ -19799,7 +19743,7 @@ var PaymentMethodDetails = ({
                 },
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
-              children: /* @__PURE__ */ jsx34(
+              children: /* @__PURE__ */ jsx33(
                 PaymentForm,
                 {
                   onConfirm: async (paymentMethodId) => {
@@ -19811,7 +19755,7 @@ var PaymentMethodDetails = ({
               )
             }
           ) : /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx33(
               PaymentMethodElement,
               {
                 size: "lg",
@@ -19820,7 +19764,7 @@ var PaymentMethodDetails = ({
                 ...props
               }
             ),
-            (data.company?.paymentMethods || []).length > 0 && /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsxs26(
+            (data.company?.paymentMethods || []).length > 0 && /* @__PURE__ */ jsx33(Box, { children: /* @__PURE__ */ jsxs26(
               Text,
               {
                 onClick: dropDownDifferentPaymentMethods,
@@ -19830,7 +19774,7 @@ var PaymentMethodDetails = ({
                 $color: theme.typography.link.color,
                 children: [
                   t2("Choose different payment method"),
-                  /* @__PURE__ */ jsx34(
+                  /* @__PURE__ */ jsx33(
                     Icon2,
                     {
                       name: "chevron-down",
@@ -19846,9 +19790,9 @@ var PaymentMethodDetails = ({
                 ]
               }
             ) }),
-            showDifferentPaymentMethods && /* @__PURE__ */ jsx34(Flex, { $flexDirection: "column", $overflowY: "hidden", $height: "10rem", children: /* @__PURE__ */ jsx34(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
+            showDifferentPaymentMethods && /* @__PURE__ */ jsx33(Flex, { $flexDirection: "column", $overflowY: "hidden", $height: "10rem", children: /* @__PURE__ */ jsx33(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
               (pm) => pm.id !== paymentMethod?.id
-            ) || []).map((paymentMethod2) => /* @__PURE__ */ jsx34(
+            ) || []).map((paymentMethod2) => /* @__PURE__ */ jsx33(
               PaymentListElement,
               {
                 paymentMethod: paymentMethod2,
@@ -19857,9 +19801,9 @@ var PaymentMethodDetails = ({
               },
               paymentMethod2.id
             )) }) }),
-            (!paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ jsx34(EmbedButton, { onClick: createSetupIntent, size: "lg", children: t2("Add new payment method") })
+            (!paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ jsx33(EmbedButton, { onClick: createSetupIntent, size: "lg", children: t2("Add new payment method") })
           ] }),
-          !isLoading && error && /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsx34(
+          !isLoading && error && /* @__PURE__ */ jsx33(Box, { children: /* @__PURE__ */ jsx33(
             Text,
             {
               $font: theme.typography.text.fontFamily,
@@ -19877,7 +19821,7 @@ var PaymentMethodDetails = ({
 // src/components/elements/plan-manager/PlanManager.tsx
 import { forwardRef as forwardRef12, useMemo as useMemo14 } from "react";
-import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 var resolveDesignProps7 = (props) => {
   return {
     header: {
@@ -19956,8 +19900,8 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ jsx35(Text, { as: "h3", display: "heading3", children: t2("Trial ends in", { days: trialEndDays.toString() }) }),
-          /* @__PURE__ */ jsx35(Text, { as: "p", $size: 0.8125 * theme.typography.text.fontSize, children: data.trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
+          /* @__PURE__ */ jsx34(Text, { as: "h3", display: "heading3", children: t2("Trial ends in", { days: trialEndDays.toString() }) }),
+          /* @__PURE__ */ jsx34(Text, { as: "p", $size: 0.8125 * theme.typography.text.fontSize, children: data.trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
             defaultPlanName: defaultPlan?.name
           }) : t2("After the trial, cancel no default", {
             planName: currentPlan?.name
@@ -19974,8 +19918,8 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ jsx35(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
-          billingSubscription?.cancelAt && /* @__PURE__ */ jsx35(Text, { as: "p", $size: 0.8125 * theme.typography.text.fontSize, children: t2("Access to plan will end on", {
+          /* @__PURE__ */ jsx34(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
+          billingSubscription?.cancelAt && /* @__PURE__ */ jsx34(Text, { as: "p", $size: 0.8125 * theme.typography.text.fontSize, children: t2("Access to plan will end on", {
             date: toPrettyDate(
               new Date(billingSubscription.cancelAt * 1e3),
               {
@@ -20004,15 +19948,15 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
               $gap: "1rem",
               children: [
                 /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ jsx35(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx35(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
+                  /* @__PURE__ */ jsx34(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx34(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
                 ] }),
                 props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs27(Box, { children: [
-                  /* @__PURE__ */ jsx35(Text, { display: headerPriceFontStyle, children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
+                  /* @__PURE__ */ jsx34(Text, { display: headerPriceFontStyle, children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
                     currentPlan.planPrice,
                     subscriptionCurrency
                   ) }),
-                  !isUsageBasedPlan && /* @__PURE__ */ jsx35(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs27("sub", { children: [
+                  !isUsageBasedPlan && /* @__PURE__ */ jsx34(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs27("sub", { children: [
                     "/",
                     shortenPeriod(currentPlan.planPeriod)
                   ] }) })
@@ -20021,7 +19965,7 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
             }
           ),
           props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx35(
+            props.addOns.showLabel && /* @__PURE__ */ jsx34(
               Text,
               {
                 $color: isLightBackground ? darken(theme.card.background, 0.46) : lighten(theme.card.background, 0.46),
@@ -20037,7 +19981,7 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
                 $flexWrap: "wrap",
                 $gap: "1rem",
                 children: [
-                  /* @__PURE__ */ jsx35(Text, { display: props.addOns.fontStyle, children: addOn.name }),
+                  /* @__PURE__ */ jsx34(Text, { display: props.addOns.fontStyle, children: addOn.name }),
                   addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ jsxs27(Text, { children: [
                     formatCurrency(addOn.planPrice, subscriptionCurrency),
                     /* @__PURE__ */ jsxs27("sub", { children: [
@@ -20051,7 +19995,7 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
             ))
           ] }),
           usageBasedEntitlements.length > 0 && /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            /* @__PURE__ */ jsx35(
+            /* @__PURE__ */ jsx34(
               Text,
               {
                 $color: isLightBackground ? darken(theme.card.background, 0.46) : lighten(theme.card.background, 0.46),
@@ -20102,7 +20046,7 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
                             ] })
                           ] }),
                           /* @__PURE__ */ jsxs27(Flex, { $alignItems: "center", $gap: "1rem", children: [
-                            entitlement.priceBehavior === "overage" && currentPlan?.planPeriod ? /* @__PURE__ */ jsx35(
+                            entitlement.priceBehavior === "overage" && currentPlan?.planPeriod ? /* @__PURE__ */ jsx34(
                               Text,
                               {
                                 $size: 0.875 * theme.typography.text.fontSize,
@@ -20168,7 +20112,7 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
               []
             )
           ] }),
-          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx35(
+          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx34(
             EmbedButton,
             {
               type: "button",
@@ -20194,7 +20138,7 @@ PlanManager.displayName = "PlanManager";
 // src/components/elements/pricing-table/PricingTable.tsx
 import { forwardRef as forwardRef13, useState as useState15 } from "react";
-import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
 var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -20297,7 +20241,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                 }
               },
               children: [
-                /* @__PURE__ */ jsx36(
+                /* @__PURE__ */ jsx35(
                   Text,
                   {
                     $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -20307,7 +20251,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                     children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
                   }
                 ),
-                props.showPeriodToggle && /* @__PURE__ */ jsx36(
+                props.showPeriodToggle && /* @__PURE__ */ jsx35(
                   PeriodToggle,
                   {
                     options: periods,
@@ -20318,7 +20262,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
               ]
             }
           ),
-          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx36(
+          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx35(
             Box,
             {
               $display: "grid",
@@ -20360,7 +20304,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                           $borderStyle: "solid",
                           $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
                           children: [
-                            /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(
+                            /* @__PURE__ */ jsx35(Box, { children: /* @__PURE__ */ jsx35(
                               Text,
                               {
                                 $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -20370,7 +20314,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                 children: plan.name
                               }
                             ) }),
-                            props.plans.description.isVisible && /* @__PURE__ */ jsx36(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx36(
+                            props.plans.description.isVisible && /* @__PURE__ */ jsx35(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx35(
                               Text,
                               {
                                 $font: theme.typography[props.plans.description.fontStyle].fontFamily,
@@ -20381,7 +20325,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                               }
                             ) }),
                             /* @__PURE__ */ jsxs28(Box, { children: [
-                              /* @__PURE__ */ jsx36(
+                              /* @__PURE__ */ jsx35(
                                 Text,
                                 {
                                   $font: headerPriceFontStyle.fontFamily,
@@ -20405,7 +20349,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                 }
                               )
                             ] }),
-                            isActivePlan && /* @__PURE__ */ jsx36(
+                            isActivePlan && /* @__PURE__ */ jsx35(
                               Flex,
                               {
                                 $position: "absolute",
@@ -20414,7 +20358,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                 $backgroundColor: theme.primary,
                                 $borderRadius: "9999px",
                                 $padding: "0.125rem 0.85rem",
-                                children: /* @__PURE__ */ jsx36(
+                                children: /* @__PURE__ */ jsx35(
                                   Text,
                                   {
                                     $font: theme.typography.text.fontFamily,
@@ -20439,7 +20383,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                           $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
                           children: [
                             props.plans.showEntitlements && /* @__PURE__ */ jsxs28(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
-                              props.plans.showInclusionText && planIndex > 0 && /* @__PURE__ */ jsx36(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx36(
+                              props.plans.showInclusionText && planIndex > 0 && /* @__PURE__ */ jsx35(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx35(
                                 Text,
                                 {
                                   $font: theme.typography.text.fontFamily,
@@ -20478,7 +20422,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                   }
                                   acc.push(
                                     /* @__PURE__ */ jsxs28(Flex, { $gap: "1rem", children: [
-                                      props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx36(
+                                      props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx35(
                                         IconRound,
                                         {
                                           name: entitlement.feature.icon,
@@ -20496,7 +20440,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                           $justifyContent: "center",
                                           $gap: "0.5rem",
                                           children: [
-                                            /* @__PURE__ */ jsx36(
+                                            /* @__PURE__ */ jsx35(
                                               Text,
                                               {
                                                 $font: theme.typography.text.fontFamily,
@@ -20605,7 +20549,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                   $justifyContent: "start",
                                   $marginTop: "1rem",
                                   children: [
-                                    /* @__PURE__ */ jsx36(
+                                    /* @__PURE__ */ jsx35(
                                       Icon2,
                                       {
                                         name: isExpanded ? "chevron-up" : "chevron-down",
@@ -20617,7 +20561,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                         }
                                       }
                                     ),
-                                    /* @__PURE__ */ jsx36(
+                                    /* @__PURE__ */ jsx35(
                                       Text,
                                       {
                                         onClick: () => handleToggleShowAll(plan.id),
@@ -20642,7 +20586,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                 $gap: "0.25rem",
                                 $padding: "0.625rem 0",
                                 children: [
-                                  /* @__PURE__ */ jsx36(
+                                  /* @__PURE__ */ jsx35(
                                     Icon2,
                                     {
                                       name: "check-rounded",
@@ -20653,7 +20597,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                       }
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx36(
+                                  /* @__PURE__ */ jsx35(
                                     Text,
                                     {
                                       $font: theme.typography.text.fontFamily,
@@ -20666,7 +20610,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                   )
                                 ]
                               }
-                            ) : (props.upgrade.isVisible || props.downgrade.isVisible) && /* @__PURE__ */ jsx36(
+                            ) : (props.upgrade.isVisible || props.downgrade.isVisible) && /* @__PURE__ */ jsx35(
                               EmbedButton,
                               {
                                 type: "button",
@@ -20690,14 +20634,14 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                   $color: props.downgrade.buttonStyle,
                                   $variant: "outline"
                                 },
-                                children: plan.custom ? /* @__PURE__ */ jsx36(
+                                children: plan.custom ? /* @__PURE__ */ jsx35(
                                   ButtonLink,
                                   {
                                     href: plan.customPlanConfig?.ctaWebSite ?? "#",
                                     target: "_blank",
                                     children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
                                   }
-                                ) : !plan.valid ? /* @__PURE__ */ jsx36(
+                                ) : !plan.valid ? /* @__PURE__ */ jsx35(
                                   Tooltip,
                                   {
                                     trigger: t2("Over usage limit"),
@@ -20719,14 +20663,14 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx36(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs28(Fragment12, { children: [
-          props.header.isVisible && /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx35(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs28(Fragment12, { children: [
+          props.header.isVisible && /* @__PURE__ */ jsx35(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               $marginBottom: "1rem",
-              children: /* @__PURE__ */ jsx36(
+              children: /* @__PURE__ */ jsx35(
                 Text,
                 {
                   $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -20738,7 +20682,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
               )
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx35(
             Box,
             {
               $display: "grid",
@@ -20764,7 +20708,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                     ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
                     children: [
                       /* @__PURE__ */ jsxs28(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-                        /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(
+                        /* @__PURE__ */ jsx35(Box, { children: /* @__PURE__ */ jsx35(
                           Text,
                           {
                             $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -20774,7 +20718,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                             children: addOn.name
                           }
                         ) }),
-                        props.addOns.showDescription && /* @__PURE__ */ jsx36(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx36(
+                        props.addOns.showDescription && /* @__PURE__ */ jsx35(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx35(
                           Text,
                           {
                             $font: theme.typography[props.plans.description.fontStyle].fontFamily,
@@ -20785,7 +20729,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                           }
                         ) }),
                         /* @__PURE__ */ jsxs28(Box, { children: [
-                          /* @__PURE__ */ jsx36(
+                          /* @__PURE__ */ jsx35(
                             Text,
                             {
                               $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -20809,7 +20753,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                             }
                           )
                         ] }),
-                        isActiveAddOn && /* @__PURE__ */ jsx36(
+                        isActiveAddOn && /* @__PURE__ */ jsx35(
                           Flex,
                           {
                             $position: "absolute",
@@ -20818,7 +20762,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                             $backgroundColor: theme.primary,
                             $borderRadius: "9999px",
                             $padding: "0.125rem 0.85rem",
-                            children: /* @__PURE__ */ jsx36(
+                            children: /* @__PURE__ */ jsx35(
                               Text,
                               {
                                 $font: theme.typography.text.fontFamily,
@@ -20839,7 +20783,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                           $gap: `${cardPadding}rem`,
                           $flexGrow: 1,
                           children: [
-                            props.addOns.showEntitlements && /* @__PURE__ */ jsx36(
+                            props.addOns.showEntitlements && /* @__PURE__ */ jsx35(
                               Flex,
                               {
                                 $flexDirection: "column",
@@ -20848,7 +20792,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                 $flexGrow: 1,
                                 children: addOn.entitlements.map(
                                   (entitlement, entitlementIndex) => {
-                                    return /* @__PURE__ */ jsx36(
+                                    return /* @__PURE__ */ jsx35(
                                       Flex,
                                       {
                                         $flexWrap: "wrap",
@@ -20856,7 +20800,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                         $alignItems: "center",
                                         $gap: "1rem",
                                         children: /* @__PURE__ */ jsxs28(Flex, { $gap: "1rem", children: [
-                                          props.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx36(
+                                          props.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx35(
                                             IconRound,
                                             {
                                               name: entitlement.feature.icon,
@@ -20867,7 +20811,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                               ]
                                             }
                                           ),
-                                          entitlement.feature?.name && /* @__PURE__ */ jsx36(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx36(
+                                          entitlement.feature?.name && /* @__PURE__ */ jsx35(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx35(
                                             Text,
                                             {
                                               $font: theme.typography.text.fontFamily,
@@ -20911,7 +20855,7 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                                 )
                               }
                             ),
-                            props.upgrade.isVisible && /* @__PURE__ */ jsx36(
+                            props.upgrade.isVisible && /* @__PURE__ */ jsx35(
                               EmbedButton,
                               {
                                 type: "button",
@@ -20949,7 +20893,7 @@ PricingTable.displayName = "PricingTable";
 // src/components/elements/text/Text.tsx
 import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var resolveDesignProps9 = (props) => {
   return {
     text: {
@@ -20962,7 +20906,7 @@ var resolveDesignProps9 = (props) => {
 var TextElement = forwardRef14(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
   const theme = nt();
-  return /* @__PURE__ */ jsx37(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx36(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx36(
     Text,
     {
       $font: theme.typography[props.text.fontStyle].fontFamily,
@@ -20978,7 +20922,7 @@ TextElement.displayName = "Text";
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var resolveDesignProps10 = (props) => {
   return {
     button: {
@@ -21009,7 +20953,7 @@ var UnsubscribeButton = forwardRef15(({ children, className, ...rest }, ref) =>
       variant: "text"
     }
   };
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx37(
     Element,
     {
       as: Flex,
@@ -21017,7 +20961,7 @@ var UnsubscribeButton = forwardRef15(({ children, className, ...rest }, ref) =>
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx37(
         EmbedButton,
         {
           $size: props.button.size,
@@ -21039,7 +20983,7 @@ UnsubscribeButton.displayName = "UnsubscribeButton";
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
 import { forwardRef as forwardRef16, useMemo as useMemo15 } from "react";
-import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
 function resolveDesignProps11(props) {
   return {
     header: {
@@ -21100,7 +21044,7 @@ var UpcomingBill = forwardRef16(({ className, ...rest }, ref) => {
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ jsx39(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsxs29(
+        props.header.isVisible && /* @__PURE__ */ jsx38(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsxs29(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -21115,7 +21059,7 @@ var UpcomingBill = forwardRef16(({ className, ...rest }, ref) => {
           }
         ) }),
         /* @__PURE__ */ jsxs29(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
-          props.price.isVisible && /* @__PURE__ */ jsx39(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx39(
+          props.price.isVisible && /* @__PURE__ */ jsx38(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx38(
             Text,
             {
               $font: theme.typography[props.price.fontStyle].fontFamily,
@@ -21129,7 +21073,7 @@ var UpcomingBill = forwardRef16(({ className, ...rest }, ref) => {
               )
             }
           ) }),
-          /* @__PURE__ */ jsx39(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx38(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx38(
             Text,
             {
               $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
@@ -21142,7 +21086,7 @@ var UpcomingBill = forwardRef16(({ className, ...rest }, ref) => {
           ) })
         ] }),
         discounts.length > 0 && /* @__PURE__ */ jsxs29(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-          /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx38(Box, { children: /* @__PURE__ */ jsx38(
             Text,
             {
               $font: theme.typography.text.fontFamily,
@@ -21152,8 +21096,8 @@ var UpcomingBill = forwardRef16(({ className, ...rest }, ref) => {
               children: t2("Discount")
             }
           ) }),
-          /* @__PURE__ */ jsx39(Box, { children: discounts.map((discount) => /* @__PURE__ */ jsxs29(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-            /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx38(Box, { children: discounts.map((discount) => /* @__PURE__ */ jsxs29(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+            /* @__PURE__ */ jsx38(
               Flex,
               {
                 $alignItems: "center",
@@ -21162,7 +21106,7 @@ var UpcomingBill = forwardRef16(({ className, ...rest }, ref) => {
                 $borderStyle: "solid",
                 $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                 $borderRadius: "0.3125rem",
-                children: /* @__PURE__ */ jsx39(
+                children: /* @__PURE__ */ jsx38(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -21174,7 +21118,7 @@ var UpcomingBill = forwardRef16(({ className, ...rest }, ref) => {
                 )
               }
             ),
-            /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx38(Box, { children: /* @__PURE__ */ jsx38(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -21243,10 +21187,10 @@ function createRenderer(options) {
 }
 // src/components/embed/ComponentTree.tsx
-import { Fragment as Fragment13, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 var Loading = () => {
   const theme = nt();
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx39(
     Flex,
     {
       $width: "100%",
@@ -21254,7 +21198,7 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ jsx40(Loader, { $color: "#194BFB", $size: "2xl" })
+      children: /* @__PURE__ */ jsx39(Loader, { $color: "#194BFB", $size: "2xl" })
     }
   );
 };
@@ -21271,7 +21215,7 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx39(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -21282,7 +21226,7 @@ var Error2 = ({ message }) => {
             children: "Error"
           }
         ),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx39(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -21299,23 +21243,23 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes, isPending } = useEmbed();
-  const [children, setChildren] = useState16(/* @__PURE__ */ jsx40(Loading, {}));
+  const [children, setChildren] = useState16(/* @__PURE__ */ jsx39(Loading, {}));
   useEffect7(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
     console.error(error);
-    return /* @__PURE__ */ jsx40(Error2, { message: error.message });
+    return /* @__PURE__ */ jsx39(Error2, { message: error.message });
   }
   if (isPending) {
-    return /* @__PURE__ */ jsx40(Loading, {});
+    return /* @__PURE__ */ jsx39(Loading, {});
   }
-  return /* @__PURE__ */ jsx40(Fragment13, { children });
+  return /* @__PURE__ */ jsx39(Fragment13, { children });
 };
 // src/components/embed/Embed.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var SchematicEmbed = ({
   id,
   accessToken,
@@ -21323,19 +21267,19 @@ var SchematicEmbed = ({
   debug
 }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ jsx41("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ jsx40("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ jsx41("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ jsx40("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx40(
     EmbedProvider,
     {
       id,
       accessToken,
       apiConfig,
       debug,
-      children: /* @__PURE__ */ jsx41(ComponentTree, {})
+      children: /* @__PURE__ */ jsx40(ComponentTree, {})
     }
   );
 };
@@ -21345,7 +21289,7 @@ export {
   ButtonElement,
   Card,
   Column,
-  Container2 as Container,
+  Container,
   Element,
   EmbedButton,
   EmbedContext,
@@ -21353,6 +21297,7 @@ export {
   Flex,
   FussyChild,
   Icon2 as Icon,
+  IconContainer,
   IconRound,
   IncludedFeatures,
   Input,
@@ -21380,6 +21325,7 @@ export {
   cardBoxShadow,
   defaultSettings,
   defaultTheme,
+  iconsList,
   progressColorMap,
   useAvailablePlans,
   useEmbed,
@@ -21390,13 +21336,6 @@ export {
 };
 /*! Bundled license information:
-classnames/index.js:
-  (*!
-  	Copyright (c) 2018 Jed Watson.
-  	Licensed under the MIT License (MIT), see
-  	http://jedwatson.github.io/classnames
-  *)
 pako/dist/pako.esm.mjs:
   (*! pako 2.1.0 https://github.com/nodeca/pako @license (MIT AND Zlib) *)
 */