@schematichq/schematic-components 0.3.2 → 0.3.4

package/dist/schematic-components.cjs.js

@@ -1230,16 +1230,18 @@ __export(src_exports, {
   Viewport: () => Viewport,
   defaultSettings: () => defaultSettings,
   defaultTheme: () => defaultTheme,
-  useEmbed: () => useEmbed
+  useEmbed: () => useEmbed,
+  useIsLightBackground: () => useIsLightBackground,
+  useWrapChildren: () => useWrapChildren
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/components/elements/plan-manager/PaymentForm.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_react_stripe_js = require("@stripe/react-stripe-js");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 
-// src/hooks/embed.ts
+// src/hooks/useEmbed.ts
 var import_react3 = require("react");
 
 // src/context/embed.tsx
@@ -8707,7 +8709,7 @@ var EmbedProvider = ({
   (0, import_react2.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.3.2";
+      headers["X-Schematic-Components-Version"] = "0.3.4";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -8757,9 +8759,12 @@ var EmbedProvider = ({
   );
 };
 
-// src/hooks/embed.ts
+// src/hooks/useEmbed.ts
 var useEmbed = () => (0, import_react3.useContext)(EmbedContext);
 
+// src/hooks/useIsLightBackground.ts
+var import_react4 = require("react");
+
 // src/utils/color.ts
 function hexToHSL(color) {
   let r2 = 0;
@@ -8930,6 +8935,43 @@ attr.rem = function propAsRem(key, value) {
     `;
 };
 
+// src/hooks/useIsLightBackground.ts
+function useIsLightBackground() {
+  const theme = nt();
+  const isLightBackground = (0, import_react4.useMemo)(() => {
+    return hexToHSL(theme.card.background).l > 50;
+  }, [theme.card.background]);
+  return isLightBackground;
+}
+
+// src/hooks/useWrapChildren.ts
+var import_react5 = require("react");
+function useWrapChildren(elements) {
+  const [shouldWrap, setShouldWrap] = (0, import_react5.useState)(
+    new Array(elements.length).fill(false)
+  );
+  (0, import_react5.useLayoutEffect)(() => {
+    const rowShouldWrap = (parent) => [...parent.children].some(
+      (el) => el instanceof HTMLElement && el.previousElementSibling instanceof HTMLElement && el.offsetLeft <= el.previousElementSibling.offsetLeft
+    );
+    elements.forEach((el, idx) => {
+      new ResizeObserver((entries) => {
+        setShouldWrap((prev2) => {
+          const next2 = [...prev2];
+          next2[idx] = entries.some((entry) => rowShouldWrap(entry.target));
+          return next2;
+        });
+      }).observe(el);
+      setShouldWrap((prev2) => {
+        const next2 = [...prev2];
+        next2[idx] = rowShouldWrap(el);
+        return next2;
+      });
+    });
+  }, [elements]);
+  return shouldWrap.some((wrap) => wrap === true);
+}
+
 // src/components/ui/box/styles.ts
 var Box = dt.div((props) => {
   const initialStyles = [];
@@ -9201,20 +9243,20 @@ var IconRound = ({
 };
 
 // src/components/ui/modal/Modal.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Modal = ({ children, size = "auto", onClose }) => {
   const theme = nt();
   const { setLayout } = useEmbed();
-  const ref = (0, import_react4.useRef)(null);
-  const isLightBackground = (0, import_react4.useMemo)(() => {
+  const ref = (0, import_react6.useRef)(null);
+  const isLightBackground = (0, import_react6.useMemo)(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
-  const handleClose = (0, import_react4.useCallback)(() => {
+  const handleClose = (0, import_react6.useCallback)(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     ref.current?.focus();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -9274,7 +9316,7 @@ var Modal = ({ children, size = "auto", onClose }) => {
 };
 
 // src/components/ui/modal/ModalHeader.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var ModalHeader = ({
   children,
@@ -9283,10 +9325,10 @@ var ModalHeader = ({
 }) => {
   const theme = nt();
   const { setLayout } = useEmbed();
-  const isLightBackground = (0, import_react5.useMemo)(() => {
+  const isLightBackground = (0, import_react7.useMemo)(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
-  const handleClose = (0, import_react5.useCallback)(() => {
+  const handleClose = (0, import_react7.useCallback)(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
@@ -9524,9 +9566,9 @@ var PaymentForm = ({ onConfirm }) => {
   const stripe = (0, import_react_stripe_js2.useStripe)();
   const elements = (0, import_react_stripe_js2.useElements)();
   const { api } = useEmbed();
-  const [message, setMessage] = (0, import_react6.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
-  const [isConfirmed, setIsConfirmed] = (0, import_react6.useState)(false);
+  const [message, setMessage] = (0, import_react8.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
+  const [isConfirmed, setIsConfirmed] = (0, import_react8.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -9587,20 +9629,21 @@ var PaymentForm = ({ onConfirm }) => {
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/layout/root/Root.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Root = (0, import_react7.forwardRef)(
+var Root = (0, import_react9.forwardRef)(
   ({ data, settings, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref, ...props });
   }
 );
+Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 
 // src/components/layout/viewport/styles.ts
 var StyledViewport = dt.div`
@@ -9613,7 +9656,7 @@ var StyledViewport = dt.div`
 `;
 
 // src/components/layout/RenderLayout.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Disabled = () => {
   const theme = nt();
@@ -9655,14 +9698,14 @@ var Disabled = () => {
 var Success = () => {
   const theme = nt();
   const { hydrate, data, api, setLayout, isPending } = useEmbed();
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(true);
-  (0, import_react8.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(true);
+  (0, import_react10.useEffect)(() => {
     if (api && data.component?.id) {
       hydrate();
       setTimeout(() => setIsOpen(false), 2e3);
     }
   }, [api, data.component?.id, hydrate]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!isPending && !isOpen) {
       setLayout("portal");
     }
@@ -9724,7 +9767,7 @@ var RenderLayout = ({ children }) => {
 
 // src/components/layout/viewport/Viewport.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Viewport = (0, import_react9.forwardRef)(
+var Viewport = (0, import_react11.forwardRef)(
   ({ children, ...props }, ref) => {
     const theme = nt();
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -9738,12 +9781,13 @@ var Viewport = (0, import_react9.forwardRef)(
     );
   }
 );
+Viewport.displayName = "Viewport";
 
 // src/components/layout/column/Column.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // src/components/layout/card/Card.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 
 // src/components/layout/card/styles.ts
 var Element = dt(Box)``;
@@ -9795,7 +9839,7 @@ var StyledCard = dt.div(
 
 // src/components/layout/card/Card.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var Card = (0, import_react10.forwardRef)(
+var Card = (0, import_react12.forwardRef)(
   ({ children, className }, ref) => {
     const theme = nt();
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -9812,6 +9856,7 @@ var Card = (0, import_react10.forwardRef)(
     );
   }
 );
+Card.displayName = "Card";
 
 // src/components/layout/column/styles.ts
 var StyledColumn = dt.div`
@@ -9822,14 +9867,15 @@ var StyledColumn = dt.div`
 
 // src/components/layout/column/Column.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Column = (0, import_react11.forwardRef)(
+var Column = (0, import_react13.forwardRef)(
   ({ children, basis, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Card, { children }) });
   }
 );
+Column.displayName = "Column";
 
 // src/components/elements/plan-manager/CheckoutDialog.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_pluralize = __toESM(require_pluralize());
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
@@ -9864,7 +9910,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "4.6.0",
+    version: "4.7.0",
     startTime
   });
 };
@@ -9970,7 +10016,7 @@ var loadStripe = function loadStripe2() {
 var import_react_stripe_js4 = require("@stripe/react-stripe-js");
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_react_dom = require("react-dom");
 var import_react_stripe_js3 = require("@stripe/react-stripe-js");
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -9994,7 +10040,7 @@ var PaymentMethodElement = ({
   ...props
 }) => {
   const theme = nt();
-  const isLightBackground = (0, import_react12.useMemo)(() => {
+  const isLightBackground = (0, import_react14.useMemo)(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
   const sizeFactor = size === "lg" ? 2 : size === "md" ? 1 : 0.5;
@@ -10047,21 +10093,21 @@ var PaymentMethodElement = ({
     )
   ] });
 };
-var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PaymentMethod = (0, import_react14.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
   const theme = nt();
   const { api, data, layout, setLayout } = useEmbed();
-  const [isLoading, setIsLoading] = (0, import_react12.useState)(false);
-  const [error, setError] = (0, import_react12.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react12.useState)(
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(false);
+  const [error, setError] = (0, import_react14.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react14.useState)(
     () => typeof data.subscription?.paymentMethod === "undefined"
   );
-  const [stripe, setStripe] = (0, import_react12.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react12.useState)();
-  const isLightBackground = (0, import_react12.useMemo)(() => {
+  const [stripe, setStripe] = (0, import_react14.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react14.useState)();
+  const isLightBackground = (0, import_react14.useMemo)(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
-  const paymentMethod = (0, import_react12.useMemo)(() => {
+  const paymentMethod = (0, import_react14.useMemo)(() => {
     const { paymentMethodType, cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
     let monthsToExpiration;
     if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
@@ -10081,7 +10127,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
       monthsToExpiration
     };
   }, [data.subscription?.paymentMethod]);
-  const createSetupIntent = (0, import_react12.useCallback)(async () => {
+  const createSetupIntent = (0, import_react14.useCallback)(async () => {
     if (!api || !data.component?.id) {
       return;
     }
@@ -10098,7 +10144,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
       setIsLoading(false);
     }
   }, [api, data.component?.id]);
-  const updatePaymentMethod = (0, import_react12.useCallback)(
+  const updatePaymentMethod = (0, import_react14.useCallback)(
     async (id) => {
       if (!api || !id) {
         return;
@@ -10119,17 +10165,17 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
     },
     [api, setLayout]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react12.useLayoutEffect)(() => {
-    document.body.style.overflow = "hidden";
+  (0, import_react14.useEffect)(() => {
+    document.body.style.overflow = layout === "payment" ? "hidden" : "";
     return () => {
       document.body.style.overflow = "";
     };
-  }, []);
+  }, [layout]);
   if (!paymentMethod.paymentMethodType) {
     return null;
   }
@@ -10241,6 +10287,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
     )
   ] });
 });
+PaymentMethod.displayName = "PaymentMethod";
 
 // src/components/ui/tooltip/styles.ts
 var TooltipWrapper = dt.div`
@@ -10298,6 +10345,7 @@ var FeatureName = ({
     let period;
     if (entitlement.metricPeriod) {
       period = {
+        billing: "billing period",
         current_day: "day",
         current_month: "month",
         current_year: "year"
@@ -10331,23 +10379,23 @@ var FeatureName = ({
 var CheckoutDialog = () => {
   const theme = nt();
   const { api, data, setLayout } = useEmbed();
-  const [checkoutStage, setCheckoutStage] = (0, import_react13.useState)(
+  const [checkoutStage, setCheckoutStage] = (0, import_react15.useState)(
     "plan"
   );
-  const [planPeriod, setPlanPeriod] = (0, import_react13.useState)(
+  const [planPeriod, setPlanPeriod] = (0, import_react15.useState)(
     () => data.company?.plan?.planPeriod || "month"
   );
-  const [selectedPlan, setSelectedPlan] = (0, import_react13.useState)();
-  const [charges, setCharges] = (0, import_react13.useState)();
-  const [paymentMethodId, setPaymentMethodId] = (0, import_react13.useState)();
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(false);
-  const [error, setError] = (0, import_react13.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react13.useState)(
+  const [selectedPlan, setSelectedPlan] = (0, import_react15.useState)();
+  const [charges, setCharges] = (0, import_react15.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react15.useState)();
+  const [isLoading, setIsLoading] = (0, import_react15.useState)(false);
+  const [error, setError] = (0, import_react15.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react15.useState)(
     () => typeof data.subscription?.paymentMethod === "undefined"
   );
-  const [stripe, setStripe] = (0, import_react13.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react13.useState)();
-  const { paymentMethod, currentPlan, availablePlans, planPeriodOptions } = (0, import_react13.useMemo)(() => {
+  const [stripe, setStripe] = (0, import_react15.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react15.useState)();
+  const { paymentMethod, currentPlan, availablePlans, planPeriodOptions } = (0, import_react15.useMemo)(() => {
     const showMonthlyPriceOption = data.activePlans.some(
       (plan) => typeof plan.yearlyPrice !== "undefined"
     );
@@ -10368,7 +10416,7 @@ var CheckoutDialog = () => {
       planPeriodOptions: planPeriodOptions2
     };
   }, [data.subscription?.paymentMethod, data.company, data.activePlans]);
-  const savingsPercentage = (0, import_react13.useMemo)(() => {
+  const savingsPercentage = (0, import_react15.useMemo)(() => {
     if (selectedPlan) {
       const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
       const yearly = selectedPlan?.yearlyPrice?.price || 0;
@@ -10376,7 +10424,7 @@ var CheckoutDialog = () => {
     }
     return 0;
   }, [selectedPlan]);
-  const subscriptionPrice = (0, import_react13.useMemo)(() => {
+  const subscriptionPrice = (0, import_react15.useMemo)(() => {
     if (!selectedPlan || !selectedPlan.monthlyPrice || !selectedPlan.yearlyPrice) {
       return;
     }
@@ -10384,10 +10432,10 @@ var CheckoutDialog = () => {
       (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price
     );
   }, [selectedPlan, planPeriod]);
-  const isLightBackground = (0, import_react13.useMemo)(() => {
+  const isLightBackground = (0, import_react15.useMemo)(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
-  const selectPlan = (0, import_react13.useCallback)(
+  const selectPlan = (0, import_react15.useCallback)(
     async (plan, newPeriod) => {
       setSelectedPlan(plan);
       setCharges(void 0);
@@ -10415,7 +10463,7 @@ var CheckoutDialog = () => {
     },
     [api, planPeriod]
   );
-  const changePlanPeriod = (0, import_react13.useCallback)(
+  const changePlanPeriod = (0, import_react15.useCallback)(
     (period) => {
       setPlanPeriod(period);
       if (selectedPlan) {
@@ -10424,7 +10472,7 @@ var CheckoutDialog = () => {
     },
     [selectedPlan, selectPlan]
   );
-  const checkout = (0, import_react13.useCallback)(async () => {
+  const checkout = (0, import_react15.useCallback)(async () => {
     const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
     if (!api || !selectedPlan || !priceId) {
       return;
@@ -10447,12 +10495,12 @@ var CheckoutDialog = () => {
       setIsLoading(false);
     }
   }, [api, paymentMethodId, planPeriod, selectedPlan, setLayout]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react13.useLayoutEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = "";
@@ -11301,11 +11349,11 @@ var resolveDesignProps2 = (props) => {
     }
   };
 };
-var PlanManager = (0, import_react14.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = (0, import_react16.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const theme = nt();
   const { data, layout, setLayout } = useEmbed();
-  const { currentPlan, canChangePlan } = (0, import_react14.useMemo)(() => {
+  const { currentPlan, canChangePlan } = (0, import_react16.useMemo)(() => {
     return {
       currentPlan: data.company?.plan,
       canChangePlan: data.activePlans.length > 0
@@ -11386,9 +11434,10 @@ var PlanManager = (0, import_react14.forwardRef)(({ children, className, portal,
     }
   );
 });
+PlanManager.displayName = "PlanManager";
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_pluralize2 = __toESM(require_pluralize());
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function resolveDesignProps3(props) {
@@ -11413,69 +11462,13 @@ function resolveDesignProps3(props) {
     }
   };
 }
-var IncludedFeatures = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
+var IncludedFeatures = (0, import_react17.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const theme = nt();
   const { data } = useEmbed();
-  const elements = (0, import_react15.useRef)([]);
-  const features = (0, import_react15.useMemo)(() => {
-    return (data.featureUsage?.features || []).map(
-      ({
-        access,
-        allocation,
-        allocationType,
-        feature,
-        period,
-        usage = 0,
-        ...props2
-      }) => {
-        return {
-          access,
-          allocation,
-          allocationType,
-          feature,
-          period,
-          /**
-           * @TODO: resolve feature price
-           */
-          price: void 0,
-          usage,
-          ...props2
-        };
-      }
-    );
-  }, [data.featureUsage]);
-  const isLightBackground = (0, import_react15.useMemo)(() => {
-    return hexToHSL(theme.card.background).l > 50;
-  }, [theme.card.background]);
-  (0, import_react15.useLayoutEffect)(() => {
-    const assignRows = (parent) => {
-      let isWrapped = true;
-      [...parent.children].forEach((el) => {
-        if (!(el instanceof HTMLElement)) {
-          return;
-        }
-        if (!el.previousElementSibling || el.offsetLeft <= el.previousElementSibling.offsetLeft) {
-          isWrapped = !isWrapped;
-        }
-        if (isWrapped) {
-          el.style.textAlign = "left";
-        } else if (el.previousElementSibling) {
-          el.style.textAlign = "right";
-        }
-      });
-    };
-    elements.current.forEach((el) => {
-      if (!el) return;
-      const observer = new ResizeObserver((entries) => {
-        entries.forEach((entry) => {
-          assignRows(entry.target);
-        });
-      });
-      observer.observe(el);
-      assignRows(el);
-    });
-  }, [elements.current.length]);
+  const elements = (0, import_react17.useRef)([]);
+  const shouldWrapChildren = useWrapChildren(elements.current);
+  const isLightBackground = useIsLightBackground();
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     Element,
     {
@@ -11495,17 +11488,14 @@ var IncludedFeatures = (0, import_react15.forwardRef)(({ className, ...rest }, r
             children: props.header.text
           }
         ) }),
-        features.reduce(
-          (acc, { allocation, allocationType, feature, usage }, index) => {
-            if (!allocationType) {
-              return acc;
-            }
+        (data.featureUsage?.features || []).reduce(
+          (acc, { allocation, feature, usage }, index) => {
             return [
               ...acc,
               /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                 Flex,
                 {
-                  ref: (el) => elements.current.push(el),
+                  ref: (el) => el && elements.current.push(el),
                   $flexWrap: "wrap",
                   $justifyContent: "space-between",
                   $alignItems: "center",
@@ -11534,12 +11524,12 @@ var IncludedFeatures = (0, import_react15.forwardRef)(({ className, ...rest }, r
                         }
                       ) })
                     ] }),
-                    (allocationType === "numeric" || allocationType === "unlimited") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                    (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                       Box,
                       {
                         $flexBasis: "min-content",
                         $flexGrow: "1",
-                        $textAlign: "right",
+                        $textAlign: shouldWrapChildren ? "left" : "right",
                         children: [
                           props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                             Text,
@@ -11578,9 +11568,10 @@ var IncludedFeatures = (0, import_react15.forwardRef)(({ className, ...rest }, r
     }
   );
 });
+IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_pluralize3 = __toESM(require_pluralize());
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function resolveDesignProps4(props) {
@@ -11603,75 +11594,20 @@ function resolveDesignProps4(props) {
     usage: {
       isVisible: props.usage?.isVisible ?? true,
       fontStyle: props.usage?.fontStyle ?? "heading5"
-    }
+    },
+    visibleFeatures: props.visibleFeatures ?? []
   };
 }
-var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react18.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
+  const elements = (0, import_react18.useRef)([]);
+  const shouldWrapChildren = useWrapChildren(elements.current);
   const theme = nt();
   const { data } = useEmbed();
-  const elements = (0, import_react16.useRef)([]);
-  const features = (0, import_react16.useMemo)(() => {
-    return (data.featureUsage?.features || []).map(
-      ({
-        access,
-        allocation,
-        allocationType,
-        feature,
-        period,
-        usage,
-        ...props2
-      }) => {
-        return {
-          access,
-          allocation,
-          allocationType,
-          feature,
-          period,
-          /**
-           * @TODO: resolve feature price
-           */
-          price: void 0,
-          usage,
-          ...props2
-        };
-      }
-    );
-  }, [data.featureUsage]);
-  const isLightBackground = (0, import_react16.useMemo)(() => {
-    return hexToHSL(theme.card.background).l > 50;
-  }, [theme.card.background]);
-  (0, import_react16.useLayoutEffect)(() => {
-    const assignRows = (parent) => {
-      let isWrapped = true;
-      [...parent.children].forEach((el) => {
-        if (!(el instanceof HTMLElement)) {
-          return;
-        }
-        if (!el.previousElementSibling || el.offsetLeft <= el.previousElementSibling.offsetLeft) {
-          isWrapped = !isWrapped;
-        }
-        if (isWrapped) {
-          el.style.textAlign = "left";
-        } else if (el.previousElementSibling) {
-          el.style.textAlign = "right";
-        }
-      });
-    };
-    elements.current.forEach((el) => {
-      if (!el) return;
-      const observer = new ResizeObserver((entries) => {
-        entries.forEach((entry) => {
-          assignRows(entry.target);
-        });
-      });
-      observer.observe(el);
-      assignRows(el);
-    });
-  }, [elements.current.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Flex, { ref, className, $flexDirection: "column", children: features.reduce(
-    (acc, { allocation, allocationType, feature, usage }, index) => {
-      if (allocationType !== "numeric") {
+  const isLightBackground = useIsLightBackground();
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Flex, { ref, className, $flexDirection: "column", children: props.visibleFeatures.length > 0 ? (data.featureUsage?.features || []).reduce(
+    (acc, { allocation, feature, usage }, index) => {
+      if (feature?.id && !props.visibleFeatures?.includes(feature.id) || feature?.featureType !== "event" && feature?.featureType !== "trait") {
         return acc;
       }
       return [
@@ -11692,7 +11628,7 @@ var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, re
             /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               Flex,
               {
-                ref: (el) => elements.current.push(el),
+                ref: (el) => el && elements.current.push(el),
                 $flexWrap: "wrap",
                 $gap: "1rem",
                 children: [
@@ -11720,12 +11656,12 @@ var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, re
                       }
                     )
                   ] }),
-                  (allocationType === "numeric" || allocationType === "unlimited") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                  (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                     Box,
                     {
                       $flexBasis: "min-content",
                       $flexGrow: "1",
-                      $textAlign: "right",
+                      $textAlign: shouldWrapChildren ? "left" : "right",
                       children: [
                         props.usage.isVisible && typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                           Text,
@@ -11778,11 +11714,22 @@ var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, re
       ];
     },
     []
-  ) });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Element, { as: Flex, $justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    Text,
+    {
+      $font: theme.typography.heading1.fontFamily,
+      $size: theme.typography.heading1.fontSize,
+      $weight: theme.typography.heading1.fontWeight,
+      $color: theme.typography.heading1.color,
+      $align: "center",
+      children: "No features selected"
+    }
+  ) }) });
 });
+MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function resolveDesignProps5(props) {
   return {
@@ -11802,11 +11749,11 @@ function resolveDesignProps5(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react17.forwardRef)(({ className, ...rest }, ref) => {
+var UpcomingBill = (0, import_react19.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const theme = nt();
   const { data } = useEmbed();
-  const { upcomingInvoice } = (0, import_react17.useMemo)(() => {
+  const { upcomingInvoice } = (0, import_react19.useMemo)(() => {
     return {
       upcomingInvoice: {
         ...data.upcomingInvoice?.amountDue && {
@@ -11872,9 +11819,10 @@ var UpcomingBill = (0, import_react17.forwardRef)(({ className, ...rest }, ref)
     ] })
   ] });
 });
+UpcomingBill.displayName = "UpcomingBill";
 
 // src/components/elements/invoices/Invoices.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function resolveDesignProps6(props) {
   return {
@@ -11906,12 +11854,12 @@ function formatInvoices(invoices) {
     amount: formatCurrency(amountDue)
   }));
 }
-var Invoices = (0, import_react18.forwardRef)(({ className, ...rest }, ref) => {
+var Invoices = (0, import_react20.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps6(rest);
   const theme = nt();
   const { api } = useEmbed();
-  const [invoices, setInvoices] = (0, import_react18.useState)(() => formatInvoices(rest.data));
-  (0, import_react18.useEffect)(() => {
+  const [invoices, setInvoices] = (0, import_react20.useState)(() => formatInvoices(rest.data));
+  (0, import_react20.useEffect)(() => {
     api?.listInvoices().then(({ data }) => {
       setInvoices(formatInvoices(data));
     });
@@ -11969,12 +11917,13 @@ var Invoices = (0, import_react18.forwardRef)(({ className, ...rest }, ref) => {
     ] })
   ] }) });
 });
+Invoices.displayName = "Invoices";
 
 // src/components/embed/ComponentTree.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react19 = require("react");
+var import_react21 = require("react");
 var components = {
   Root,
   Viewport,
@@ -11982,6 +11931,7 @@ var components = {
   Card,
   PlanManager,
   IncludedFeatures,
+  MeteredFeatures,
   UpcomingBill,
   PaymentMethod
 };
@@ -12003,7 +11953,7 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react19.createElement)(
+    return (0, import_react21.createElement)(
       component,
       {
         key: index,
@@ -12073,15 +12023,15 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes } = useEmbed();
-  const [children, setChildren] = (0, import_react20.useState)(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, {}));
-  (0, import_react20.useEffect)(() => {
+  const [children, setChildren] = (0, import_react22.useState)(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, {}));
+  (0, import_react22.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Error2, { message: error.message });
   }
-  if (import_react20.Children.count(children) === 0) {
+  if (import_react22.Children.count(children) === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, {});
   }
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children });