@schematichq/schematic-components 0.3.3 → 0.3.5

package/dist/schematic-components.esm.js

@@ -1201,11 +1201,11 @@ var require_pluralize = __commonJS({
 });
 
 // src/components/elements/plan-manager/PaymentForm.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { PaymentElement } from "@stripe/react-stripe-js";
 import { useStripe, useElements } from "@stripe/react-stripe-js";
 
-// src/hooks/embed.ts
+// src/hooks/useEmbed.ts
 import { useContext } from "react";
 
 // src/context/embed.tsx
@@ -8673,7 +8673,7 @@ var EmbedProvider = ({
   useEffect(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.3.3";
+      headers["X-Schematic-Components-Version"] = "0.3.5";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -8723,9 +8723,12 @@ var EmbedProvider = ({
   );
 };
 
-// src/hooks/embed.ts
+// src/hooks/useEmbed.ts
 var useEmbed = () => useContext(EmbedContext);
 
+// src/hooks/useIsLightBackground.ts
+import { useMemo } from "react";
+
 // src/utils/color.ts
 function hexToHSL(color) {
   let r2 = 0;
@@ -8896,6 +8899,43 @@ attr.rem = function propAsRem(key, value) {
     `;
 };
 
+// src/hooks/useIsLightBackground.ts
+function useIsLightBackground() {
+  const theme = nt();
+  const isLightBackground = useMemo(() => {
+    return hexToHSL(theme.card.background).l > 50;
+  }, [theme.card.background]);
+  return isLightBackground;
+}
+
+// src/hooks/useWrapChildren.ts
+import { useLayoutEffect, useState as useState2 } from "react";
+function useWrapChildren(elements) {
+  const [shouldWrap, setShouldWrap] = useState2(
+    new Array(elements.length).fill(false)
+  );
+  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 = [];
@@ -9167,13 +9207,13 @@ var IconRound = ({
 };
 
 // src/components/ui/modal/Modal.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var Modal = ({ children, size = "auto", onClose }) => {
   const theme = nt();
   const { setLayout } = useEmbed();
   const ref = useRef2(null);
-  const isLightBackground = useMemo(() => {
+  const isLightBackground = useMemo2(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
   const handleClose = useCallback2(() => {
@@ -9240,7 +9280,7 @@ var Modal = ({ children, size = "auto", onClose }) => {
 };
 
 // src/components/ui/modal/ModalHeader.tsx
-import { useCallback as useCallback3, useMemo as useMemo2 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var ModalHeader = ({
   children,
@@ -9249,7 +9289,7 @@ var ModalHeader = ({
 }) => {
   const theme = nt();
   const { setLayout } = useEmbed();
-  const isLightBackground = useMemo2(() => {
+  const isLightBackground = useMemo3(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
   const handleClose = useCallback3(() => {
@@ -9490,9 +9530,9 @@ var PaymentForm = ({ onConfirm }) => {
   const stripe = useStripe();
   const elements = useElements();
   const { api } = useEmbed();
-  const [message, setMessage] = useState2(null);
-  const [isLoading, setIsLoading] = useState2(false);
-  const [isConfirmed, setIsConfirmed] = useState2(false);
+  const [message, setMessage] = useState3(null);
+  const [isLoading, setIsLoading] = useState3(false);
+  const [isConfirmed, setIsConfirmed] = useState3(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -9553,7 +9593,7 @@ var PaymentForm = ({ onConfirm }) => {
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { forwardRef as forwardRef6, useMemo as useMemo5 } from "react";
+import { forwardRef as forwardRef6, useMemo as useMemo6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/layout/root/Root.tsx
@@ -9564,6 +9604,7 @@ var Root = forwardRef(
     return /* @__PURE__ */ jsx9("div", { ref, ...props });
   }
 );
+Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
 import { forwardRef as forwardRef2 } from "react";
@@ -9579,7 +9620,7 @@ var StyledViewport = dt.div`
 `;
 
 // src/components/layout/RenderLayout.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var Disabled = () => {
   const theme = nt();
@@ -9621,7 +9662,7 @@ var Disabled = () => {
 var Success = () => {
   const theme = nt();
   const { hydrate, data, api, setLayout, isPending } = useEmbed();
-  const [isOpen, setIsOpen] = useState3(true);
+  const [isOpen, setIsOpen] = useState4(true);
   useEffect3(() => {
     if (api && data.component?.id) {
       hydrate();
@@ -9704,6 +9745,7 @@ var Viewport = forwardRef2(
     );
   }
 );
+Viewport.displayName = "Viewport";
 
 // src/components/layout/column/Column.tsx
 import { forwardRef as forwardRef4 } from "react";
@@ -9778,6 +9820,7 @@ var Card = forwardRef3(
     );
   }
 );
+Card.displayName = "Card";
 
 // src/components/layout/column/styles.ts
 var StyledColumn = dt.div`
@@ -9793,15 +9836,10 @@ var Column = forwardRef4(
     return /* @__PURE__ */ jsx13(StyledColumn, { ref, ...props, children: /* @__PURE__ */ jsx13(Card, { children }) });
   }
 );
+Column.displayName = "Column";
 
 // src/components/elements/plan-manager/CheckoutDialog.tsx
-import {
-  useCallback as useCallback5,
-  useEffect as useEffect5,
-  useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo4,
-  useState as useState5
-} from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo5, useState as useState6 } from "react";
 var import_pluralize = __toESM(require_pluralize());
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
@@ -9836,7 +9874,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "4.6.0",
+    version: "4.7.0",
     startTime
   });
 };
@@ -9942,14 +9980,7 @@ var loadStripe = function loadStripe2() {
 import { Elements as Elements2 } from "@stripe/react-stripe-js";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-import {
-  forwardRef as forwardRef5,
-  useCallback as useCallback4,
-  useEffect as useEffect4,
-  useLayoutEffect,
-  useMemo as useMemo3,
-  useState as useState4
-} from "react";
+import { forwardRef as forwardRef5, useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo4, useState as useState5 } from "react";
 import { createPortal } from "react-dom";
 import { Elements } from "@stripe/react-stripe-js";
 import { Fragment, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -9973,7 +10004,7 @@ var PaymentMethodElement = ({
   ...props
 }) => {
   const theme = nt();
-  const isLightBackground = useMemo3(() => {
+  const isLightBackground = useMemo4(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
   const sizeFactor = size === "lg" ? 2 : size === "md" ? 1 : 0.5;
@@ -10030,17 +10061,17 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
   const props = resolveDesignProps(rest);
   const theme = nt();
   const { api, data, layout, setLayout } = useEmbed();
-  const [isLoading, setIsLoading] = useState4(false);
-  const [error, setError] = useState4();
-  const [showPaymentForm, setShowPaymentForm] = useState4(
+  const [isLoading, setIsLoading] = useState5(false);
+  const [error, setError] = useState5();
+  const [showPaymentForm, setShowPaymentForm] = useState5(
     () => typeof data.subscription?.paymentMethod === "undefined"
   );
-  const [stripe, setStripe] = useState4(null);
-  const [setupIntent, setSetupIntent] = useState4();
-  const isLightBackground = useMemo3(() => {
+  const [stripe, setStripe] = useState5(null);
+  const [setupIntent, setSetupIntent] = useState5();
+  const isLightBackground = useMemo4(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
-  const paymentMethod = useMemo3(() => {
+  const paymentMethod = useMemo4(() => {
     const { paymentMethodType, cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
     let monthsToExpiration;
     if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
@@ -10103,12 +10134,12 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  useLayoutEffect(() => {
-    document.body.style.overflow = "hidden";
+  useEffect4(() => {
+    document.body.style.overflow = layout === "payment" ? "hidden" : "";
     return () => {
       document.body.style.overflow = "";
     };
-  }, []);
+  }, [layout]);
   if (!paymentMethod.paymentMethodType) {
     return null;
   }
@@ -10220,6 +10251,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
     )
   ] });
 });
+PaymentMethod.displayName = "PaymentMethod";
 
 // src/components/ui/tooltip/styles.ts
 var TooltipWrapper = dt.div`
@@ -10277,6 +10309,7 @@ var FeatureName = ({
     let period;
     if (entitlement.metricPeriod) {
       period = {
+        billing: "billing period",
         current_day: "day",
         current_month: "month",
         current_year: "year"
@@ -10310,23 +10343,23 @@ var FeatureName = ({
 var CheckoutDialog = () => {
   const theme = nt();
   const { api, data, setLayout } = useEmbed();
-  const [checkoutStage, setCheckoutStage] = useState5(
+  const [checkoutStage, setCheckoutStage] = useState6(
     "plan"
   );
-  const [planPeriod, setPlanPeriod] = useState5(
+  const [planPeriod, setPlanPeriod] = useState6(
     () => data.company?.plan?.planPeriod || "month"
   );
-  const [selectedPlan, setSelectedPlan] = useState5();
-  const [charges, setCharges] = useState5();
-  const [paymentMethodId, setPaymentMethodId] = useState5();
-  const [isLoading, setIsLoading] = useState5(false);
-  const [error, setError] = useState5();
-  const [showPaymentForm, setShowPaymentForm] = useState5(
+  const [selectedPlan, setSelectedPlan] = useState6();
+  const [charges, setCharges] = useState6();
+  const [paymentMethodId, setPaymentMethodId] = useState6();
+  const [isLoading, setIsLoading] = useState6(false);
+  const [error, setError] = useState6();
+  const [showPaymentForm, setShowPaymentForm] = useState6(
     () => typeof data.subscription?.paymentMethod === "undefined"
   );
-  const [stripe, setStripe] = useState5(null);
-  const [setupIntent, setSetupIntent] = useState5();
-  const { paymentMethod, currentPlan, availablePlans, planPeriodOptions } = useMemo4(() => {
+  const [stripe, setStripe] = useState6(null);
+  const [setupIntent, setSetupIntent] = useState6();
+  const { paymentMethod, currentPlan, availablePlans, planPeriodOptions } = useMemo5(() => {
     const showMonthlyPriceOption = data.activePlans.some(
       (plan) => typeof plan.yearlyPrice !== "undefined"
     );
@@ -10347,7 +10380,7 @@ var CheckoutDialog = () => {
       planPeriodOptions: planPeriodOptions2
     };
   }, [data.subscription?.paymentMethod, data.company, data.activePlans]);
-  const savingsPercentage = useMemo4(() => {
+  const savingsPercentage = useMemo5(() => {
     if (selectedPlan) {
       const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
       const yearly = selectedPlan?.yearlyPrice?.price || 0;
@@ -10355,7 +10388,7 @@ var CheckoutDialog = () => {
     }
     return 0;
   }, [selectedPlan]);
-  const subscriptionPrice = useMemo4(() => {
+  const subscriptionPrice = useMemo5(() => {
     if (!selectedPlan || !selectedPlan.monthlyPrice || !selectedPlan.yearlyPrice) {
       return;
     }
@@ -10363,7 +10396,7 @@ var CheckoutDialog = () => {
       (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price
     );
   }, [selectedPlan, planPeriod]);
-  const isLightBackground = useMemo4(() => {
+  const isLightBackground = useMemo5(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
   const selectPlan = useCallback5(
@@ -10431,7 +10464,7 @@ var CheckoutDialog = () => {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  useLayoutEffect2(() => {
+  useEffect5(() => {
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = "";
@@ -11284,7 +11317,7 @@ var PlanManager = forwardRef6(({ children, className, portal, ...rest }, ref) =>
   const props = resolveDesignProps2(rest);
   const theme = nt();
   const { data, layout, setLayout } = useEmbed();
-  const { currentPlan, canChangePlan } = useMemo5(() => {
+  const { currentPlan, canChangePlan } = useMemo6(() => {
     return {
       currentPlan: data.company?.plan,
       canChangePlan: data.activePlans.length > 0
@@ -11365,9 +11398,10 @@ var PlanManager = forwardRef6(({ children, className, portal, ...rest }, ref) =>
     }
   );
 });
+PlanManager.displayName = "PlanManager";
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef7, useLayoutEffect as useLayoutEffect3, useMemo as useMemo6, useRef as useRef3 } from "react";
+import { forwardRef as forwardRef7, useRef as useRef3 } from "react";
 var import_pluralize2 = __toESM(require_pluralize());
 import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
@@ -11397,64 +11431,8 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
   const theme = nt();
   const { data } = useEmbed();
   const elements = useRef3([]);
-  const features = useMemo6(() => {
-    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 = useMemo6(() => {
-    return hexToHSL(theme.card.background).l > 50;
-  }, [theme.card.background]);
-  useLayoutEffect3(() => {
-    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 shouldWrapChildren = useWrapChildren(elements.current);
+  const isLightBackground = useIsLightBackground();
   return /* @__PURE__ */ jsxs11(
     Element,
     {
@@ -11474,17 +11452,14 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
             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__ */ jsxs11(
                 Flex,
                 {
-                  ref: (el) => elements.current.push(el),
+                  ref: (el) => el && elements.current.push(el),
                   $flexWrap: "wrap",
                   $justifyContent: "space-between",
                   $alignItems: "center",
@@ -11513,12 +11488,12 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                         }
                       ) })
                     ] }),
-                    (allocationType === "numeric" || allocationType === "unlimited") && feature?.name && /* @__PURE__ */ jsxs11(
+                    (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ jsxs11(
                       Box,
                       {
                         $flexBasis: "min-content",
                         $flexGrow: "1",
-                        $textAlign: "right",
+                        $textAlign: shouldWrapChildren ? "left" : "right",
                         children: [
                           props.entitlement.isVisible && /* @__PURE__ */ jsx18(Box, { children: /* @__PURE__ */ jsx18(
                             Text,
@@ -11557,9 +11532,10 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
     }
   );
 });
+IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef8, useLayoutEffect as useLayoutEffect4, useMemo as useMemo7, useRef as useRef4 } from "react";
+import { forwardRef as forwardRef8, useRef as useRef4 } from "react";
 var import_pluralize3 = __toESM(require_pluralize());
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function resolveDesignProps4(props) {
@@ -11582,186 +11558,129 @@ function resolveDesignProps4(props) {
     usage: {
       isVisible: props.usage?.isVisible ?? true,
       fontStyle: props.usage?.fontStyle ?? "heading5"
-    }
+    },
+    visibleFeatures: props.visibleFeatures ?? []
   };
 }
 var MeteredFeatures = forwardRef8(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
+  const elements = useRef4([]);
+  const shouldWrapChildren = useWrapChildren(elements.current);
   const theme = nt();
   const { data } = useEmbed();
-  const elements = useRef4([]);
-  const features = useMemo7(() => {
-    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 = useMemo7(() => {
-    return hexToHSL(theme.card.background).l > 50;
-  }, [theme.card.background]);
-  useLayoutEffect4(() => {
-    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";
+  const isLightBackground = useIsLightBackground();
+  const features = (data.featureUsage?.features || []).filter(({ feature }) => {
+    return (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.id && props.visibleFeatures?.includes(feature.id);
+  });
+  if (features.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx19(Flex, { ref, className, $flexDirection: "column", children: features.map(({ allocation, feature, usage }, index) => {
+    return /* @__PURE__ */ jsxs12(Element, { as: Flex, $gap: "1.5rem", children: [
+      props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx19(
+        IconRound,
+        {
+          name: feature.icon,
+          size: "sm",
+          colors: [
+            theme.primary,
+            isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
+          ]
         }
-      });
-    };
-    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__ */ jsx19(Flex, { ref, className, $flexDirection: "column", children: features.reduce(
-    (acc, { allocation, allocationType, feature, usage }, index) => {
-      if (allocationType !== "numeric") {
-        return acc;
-      }
-      return [
-        ...acc,
-        /* @__PURE__ */ jsxs12(Element, { as: Flex, $gap: "1.5rem", children: [
-          props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx19(
-            IconRound,
-            {
-              name: feature.icon,
-              size: "sm",
-              colors: [
-                theme.primary,
-                isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs12(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: "1", children: [
-            /* @__PURE__ */ jsxs12(
-              Flex,
-              {
-                ref: (el) => elements.current.push(el),
-                $flexWrap: "wrap",
-                $gap: "1rem",
-                children: [
-                  feature?.name && /* @__PURE__ */ jsxs12(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: [
-                    /* @__PURE__ */ jsx19(
+      ),
+      /* @__PURE__ */ jsxs12(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: "1", children: [
+        /* @__PURE__ */ jsxs12(
+          Flex,
+          {
+            ref: (el) => el && elements.current.push(el),
+            $flexWrap: "wrap",
+            $gap: "1rem",
+            children: [
+              feature?.name && /* @__PURE__ */ jsxs12(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: [
+                /* @__PURE__ */ jsx19(
+                  Text,
+                  {
+                    as: Box,
+                    $font: theme.typography[props.header.fontStyle].fontFamily,
+                    $size: theme.typography[props.header.fontStyle].fontSize,
+                    $weight: theme.typography[props.header.fontStyle].fontWeight,
+                    $color: theme.typography[props.header.fontStyle].color,
+                    children: feature.name
+                  }
+                ),
+                props.description.isVisible && /* @__PURE__ */ jsx19(
+                  Text,
+                  {
+                    as: Box,
+                    $font: theme.typography[props.description.fontStyle].fontFamily,
+                    $size: theme.typography[props.description.fontStyle].fontSize,
+                    $weight: theme.typography[props.description.fontStyle].fontWeight,
+                    $color: theme.typography[props.description.fontStyle].color,
+                    children: feature.description
+                  }
+                )
+              ] }),
+              (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ jsxs12(
+                Box,
+                {
+                  $flexBasis: "min-content",
+                  $flexGrow: "1",
+                  $textAlign: shouldWrapChildren ? "left" : "right",
+                  children: [
+                    props.usage.isVisible && typeof usage === "number" && /* @__PURE__ */ jsxs12(
                       Text,
                       {
                         as: Box,
-                        $font: theme.typography[props.header.fontStyle].fontFamily,
-                        $size: theme.typography[props.header.fontStyle].fontSize,
-                        $weight: theme.typography[props.header.fontStyle].fontWeight,
-                        $color: theme.typography[props.header.fontStyle].color,
-                        children: feature.name
+                        $font: theme.typography[props.usage.fontStyle].fontFamily,
+                        $size: theme.typography[props.usage.fontStyle].fontSize,
+                        $weight: theme.typography[props.usage.fontStyle].fontWeight,
+                        $lineHeight: 1.25,
+                        $color: theme.typography[props.usage.fontStyle].color,
+                        children: [
+                          formatNumber(usage),
+                          " ",
+                          (0, import_pluralize3.default)(feature.name, usage)
+                        ]
                       }
                     ),
-                    props.description.isVisible && /* @__PURE__ */ jsx19(
+                    props.allocation.isVisible && /* @__PURE__ */ jsx19(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx19(
                       Text,
                       {
-                        as: Box,
-                        $font: theme.typography[props.description.fontStyle].fontFamily,
-                        $size: theme.typography[props.description.fontStyle].fontSize,
-                        $weight: theme.typography[props.description.fontStyle].fontWeight,
-                        $color: theme.typography[props.description.fontStyle].color,
-                        children: feature.description
+                        $font: theme.typography[props.allocation.fontStyle].fontFamily,
+                        $size: theme.typography[props.allocation.fontStyle].fontSize,
+                        $weight: theme.typography[props.allocation.fontStyle].fontWeight,
+                        $color: theme.typography[props.allocation.fontStyle].color,
+                        children: typeof allocation === "number" ? `Limit of ${formatNumber(allocation)}` : "No limit"
                       }
-                    )
-                  ] }),
-                  (allocationType === "numeric" || allocationType === "unlimited") && feature?.name && /* @__PURE__ */ jsxs12(
-                    Box,
-                    {
-                      $flexBasis: "min-content",
-                      $flexGrow: "1",
-                      $textAlign: "right",
-                      children: [
-                        props.usage.isVisible && typeof usage === "number" && /* @__PURE__ */ jsxs12(
-                          Text,
-                          {
-                            as: Box,
-                            $font: theme.typography[props.usage.fontStyle].fontFamily,
-                            $size: theme.typography[props.usage.fontStyle].fontSize,
-                            $weight: theme.typography[props.usage.fontStyle].fontWeight,
-                            $lineHeight: 1.25,
-                            $color: theme.typography[props.usage.fontStyle].color,
-                            children: [
-                              formatNumber(usage),
-                              " ",
-                              (0, import_pluralize3.default)(feature.name, usage)
-                            ]
-                          }
-                        ),
-                        props.allocation.isVisible && /* @__PURE__ */ jsx19(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx19(
-                          Text,
-                          {
-                            $font: theme.typography[props.allocation.fontStyle].fontFamily,
-                            $size: theme.typography[props.allocation.fontStyle].fontSize,
-                            $weight: theme.typography[props.allocation.fontStyle].fontWeight,
-                            $color: theme.typography[props.allocation.fontStyle].color,
-                            children: typeof allocation === "number" ? `Limit of ${formatNumber(allocation)}` : "No limit"
-                          }
-                        ) })
-                      ]
-                    }
-                  )
-                ]
-              }
-            ),
-            props.isVisible && typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ jsx19(Box, { children: /* @__PURE__ */ jsx19(
-              ProgressBar,
-              {
-                progress: usage / allocation * 100,
-                value: usage,
-                total: allocation,
-                color: [
-                  "blue",
-                  "blue",
-                  "yellow",
-                  "red"
-                ][Math.floor(usage / allocation * 4)]
-              }
-            ) })
-          ] })
-        ] }, index)
-      ];
-    },
-    []
-  ) });
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        props.isVisible && typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ jsx19(Box, { children: /* @__PURE__ */ jsx19(
+          ProgressBar,
+          {
+            progress: usage / allocation * 100,
+            value: usage,
+            total: allocation,
+            color: [
+              "blue",
+              "blue",
+              "yellow",
+              "red"
+            ][Math.floor(usage / allocation * 4)]
+          }
+        ) })
+      ] })
+    ] }, index);
+  }) });
 });
+MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef9, useMemo as useMemo8 } from "react";
+import { forwardRef as forwardRef9, useMemo as useMemo7 } from "react";
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function resolveDesignProps5(props) {
   return {
@@ -11785,7 +11704,7 @@ var UpcomingBill = forwardRef9(({ className, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const theme = nt();
   const { data } = useEmbed();
-  const { upcomingInvoice } = useMemo8(() => {
+  const { upcomingInvoice } = useMemo7(() => {
     return {
       upcomingInvoice: {
         ...data.upcomingInvoice?.amountDue && {
@@ -11851,9 +11770,10 @@ var UpcomingBill = forwardRef9(({ className, ...rest }, ref) => {
     ] })
   ] });
 });
+UpcomingBill.displayName = "UpcomingBill";
 
 // src/components/elements/invoices/Invoices.tsx
-import { forwardRef as forwardRef10, useEffect as useEffect6, useState as useState6 } from "react";
+import { forwardRef as forwardRef10, useEffect as useEffect6, useState as useState7 } from "react";
 import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function resolveDesignProps6(props) {
   return {
@@ -11889,7 +11809,7 @@ var Invoices = forwardRef10(({ className, ...rest }, ref) => {
   const props = resolveDesignProps6(rest);
   const theme = nt();
   const { api } = useEmbed();
-  const [invoices, setInvoices] = useState6(() => formatInvoices(rest.data));
+  const [invoices, setInvoices] = useState7(() => formatInvoices(rest.data));
   useEffect6(() => {
     api?.listInvoices().then(({ data }) => {
       setInvoices(formatInvoices(data));
@@ -11948,9 +11868,10 @@ var Invoices = forwardRef10(({ className, ...rest }, ref) => {
     ] })
   ] }) });
 });
+Invoices.displayName = "Invoices";
 
 // src/components/embed/ComponentTree.tsx
-import { useEffect as useEffect7, useState as useState7, Children } from "react";
+import { useEffect as useEffect7, useState as useState8, Children } from "react";
 
 // src/components/embed/renderer.ts
 import { createElement } from "react";
@@ -12053,7 +11974,7 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes } = useEmbed();
-  const [children, setChildren] = useState7(/* @__PURE__ */ jsx22(Loading, {}));
+  const [children, setChildren] = useState8(/* @__PURE__ */ jsx22(Loading, {}));
   useEffect7(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
@@ -12106,7 +12027,9 @@ export {
   Viewport,
   defaultSettings,
   defaultTheme,
-  useEmbed
+  useEmbed,
+  useIsLightBackground,
+  useWrapChildren
 };
 /*! Bundled license information: