@schematichq/schematic-components 0.3.4 → 0.3.6

package/dist/schematic-components.cjs.js

@@ -7643,7 +7643,8 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
     subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
     subtotal: json["subtotal"],
-    updatedAt: new Date(json["updated_at"])
+    updatedAt: new Date(json["updated_at"]),
+    url: json["url"] == null ? void 0 : json["url"]
   };
 }
 
@@ -7656,6 +7657,11 @@ function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    accountLast4: json["account_last4"] == null ? void 0 : json["account_last4"],
+    accountName: json["account_name"] == null ? void 0 : json["account_name"],
+    bankName: json["bank_name"] == null ? void 0 : json["bank_name"],
+    billingEmail: json["billing_email"] == null ? void 0 : json["billing_email"],
+    billingName: json["billing_name"] == null ? void 0 : json["billing_name"],
     cardBrand: json["card_brand"] == null ? void 0 : json["card_brand"],
     cardExpMonth: json["card_exp_month"] == null ? void 0 : json["card_exp_month"],
     cardExpYear: json["card_exp_year"] == null ? void 0 : json["card_exp_year"],
@@ -8709,7 +8715,7 @@ var EmbedProvider = ({
   (0, import_react2.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.3.4";
+      headers["X-Schematic-Components-Version"] = "0.3.6";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -11605,126 +11611,113 @@ var MeteredFeatures = (0, import_react18.forwardRef)(({ className, ...rest }, re
   const theme = nt();
   const { data } = useEmbed();
   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 [
-        ...acc,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
-          props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            IconRound,
-            {
-              name: feature.icon,
-              size: "sm",
-              colors: [
-                theme.primary,
-                isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-              Flex,
-              {
-                ref: (el) => el && elements.current.push(el),
-                $flexWrap: "wrap",
-                $gap: "1rem",
-                children: [
-                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  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__ */ (0, import_jsx_runtime19.jsx)(Flex, { ref, className, $flexDirection: "column", children: features.map(({ allocation, feature, usage }, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
+      props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        IconRound,
+        {
+          name: feature.icon,
+          size: "sm",
+          colors: [
+            theme.primary,
+            isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          Flex,
+          {
+            ref: (el) => el && elements.current.push(el),
+            $flexWrap: "wrap",
+            $gap: "1rem",
+            children: [
+              feature?.name && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  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__ */ (0, import_jsx_runtime19.jsx)(
+                  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__ */ (0, import_jsx_runtime19.jsxs)(
+                Box,
+                {
+                  $flexBasis: "min-content",
+                  $flexGrow: "1",
+                  $textAlign: shouldWrapChildren ? "left" : "right",
+                  children: [
+                    props.usage.isVisible && typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                       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__ */ (0, import_jsx_runtime19.jsx)(
+                    props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       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"
                       }
-                    )
-                  ] }),
-                  (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-                    Box,
-                    {
-                      $flexBasis: "min-content",
-                      $flexGrow: "1",
-                      $textAlign: shouldWrapChildren ? "left" : "right",
-                      children: [
-                        props.usage.isVisible && typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-                          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__ */ (0, import_jsx_runtime19.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                          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__ */ (0, import_jsx_runtime19.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              ProgressBar,
-              {
-                progress: usage / allocation * 100,
-                value: usage,
-                total: allocation,
-                color: [
-                  "blue",
-                  "blue",
-                  "yellow",
-                  "red"
-                ][Math.floor(usage / allocation * 4)]
-              }
-            ) })
-          ] })
-        ] }, index)
-      ];
-    },
-    []
-  ) : /* @__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"
-    }
-  ) }) });
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        props.isVisible && typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          ProgressBar,
+          {
+            progress: usage / allocation * 100,
+            value: usage,
+            total: allocation,
+            color: [
+              "blue",
+              "blue",
+              "yellow",
+              "red"
+            ][Math.floor(usage / allocation * 4)]
+          }
+        ) })
+      ] })
+    ] }, index);
+  }) });
 });
 MeteredFeatures.displayName = "MeteredFeatures";
 
@@ -11849,11 +11842,29 @@ function resolveDesignProps6(props) {
   };
 }
 function formatInvoices(invoices) {
-  return (invoices || []).map(({ amountDue, dueDate }) => ({
+  return (invoices || []).map(({ amountDue, dueDate, url }) => ({
     ...dueDate && { date: toPrettyDate(dueDate) },
-    amount: formatCurrency(amountDue)
+    amount: formatCurrency(amountDue),
+    url
   }));
 }
+var InvoiceDate = ({ date, fontStyle, url }) => {
+  const theme = nt();
+  const dateText = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Text,
+    {
+      $font: theme.typography[fontStyle].fontFamily,
+      $size: theme.typography[fontStyle].fontSize,
+      $weight: theme.typography[fontStyle].fontWeight,
+      $color: theme.typography[fontStyle].color,
+      children: date
+    }
+  );
+  if (url) {
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { href: url, target: "_blank", children: dateText });
+  }
+  return dateText;
+};
 var Invoices = (0, import_react20.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps6(rest);
   const theme = nt();
@@ -11878,16 +11889,14 @@ var Invoices = (0, import_react20.forwardRef)(({ className, ...rest }, ref) => {
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
       0,
       props.limit.isVisible && props.limit.number || invoices.length
-    ).map(({ date, amount }, index) => {
+    ).map(({ date, amount, url }, index) => {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          Text,
+        props.date.isVisible && date && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          InvoiceDate,
           {
-            $font: theme.typography[props.date.fontStyle].fontFamily,
-            $size: theme.typography[props.date.fontStyle].fontSize,
-            $weight: theme.typography[props.date.fontStyle].fontWeight,
-            $color: theme.typography[props.date.fontStyle].color,
-            children: date
+            date,
+            fontStyle: props.date.fontStyle,
+            url
           }
         ),
         props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(

package/dist/schematic-components.d.ts

@@ -2158,6 +2158,12 @@ declare interface InvoiceResponseData {
      * @memberof InvoiceResponseData
      */
     updatedAt: Date;
+    /**
+     *
+     * @type {string}
+     * @memberof InvoiceResponseData
+     */
+    url?: string | null;
 }
 
 export declare const Invoices: ForwardRefExoticComponent<ElementProps & DesignProps_6 & {
@@ -2300,6 +2306,36 @@ export declare type PaymentMethodProps = DesignProps_5;
  * @interface PaymentMethodResponseData
  */
 declare interface PaymentMethodResponseData {
+    /**
+     *
+     * @type {string}
+     * @memberof PaymentMethodResponseData
+     */
+    accountLast4?: string | null;
+    /**
+     *
+     * @type {string}
+     * @memberof PaymentMethodResponseData
+     */
+    accountName?: string | null;
+    /**
+     *
+     * @type {string}
+     * @memberof PaymentMethodResponseData
+     */
+    bankName?: string | null;
+    /**
+     *
+     * @type {string}
+     * @memberof PaymentMethodResponseData
+     */
+    billingEmail?: string | null;
+    /**
+     *
+     * @type {string}
+     * @memberof PaymentMethodResponseData
+     */
+    billingName?: string | null;
     /**
      *
      * @type {string}

package/dist/schematic-components.esm.js

@@ -7607,7 +7607,8 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
     subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
     subtotal: json["subtotal"],
-    updatedAt: new Date(json["updated_at"])
+    updatedAt: new Date(json["updated_at"]),
+    url: json["url"] == null ? void 0 : json["url"]
   };
 }
 
@@ -7620,6 +7621,11 @@ function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    accountLast4: json["account_last4"] == null ? void 0 : json["account_last4"],
+    accountName: json["account_name"] == null ? void 0 : json["account_name"],
+    bankName: json["bank_name"] == null ? void 0 : json["bank_name"],
+    billingEmail: json["billing_email"] == null ? void 0 : json["billing_email"],
+    billingName: json["billing_name"] == null ? void 0 : json["billing_name"],
     cardBrand: json["card_brand"] == null ? void 0 : json["card_brand"],
     cardExpMonth: json["card_exp_month"] == null ? void 0 : json["card_exp_month"],
     cardExpYear: json["card_exp_year"] == null ? void 0 : json["card_exp_year"],
@@ -8673,7 +8679,7 @@ var EmbedProvider = ({
   useEffect(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.3.4";
+      headers["X-Schematic-Components-Version"] = "0.3.6";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -11569,126 +11575,113 @@ var MeteredFeatures = forwardRef8(({ className, ...rest }, ref) => {
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  return /* @__PURE__ */ jsx19(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 [
-        ...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) => 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(
+  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)"
+          ]
+        }
+      ),
+      /* @__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"
                       }
-                    )
-                  ] }),
-                  (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.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)
-      ];
-    },
-    []
-  ) : /* @__PURE__ */ jsx19(Element, { as: Flex, $justifyContent: "center", children: /* @__PURE__ */ jsx19(
-    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"
-    }
-  ) }) });
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        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";
 
@@ -11813,11 +11806,29 @@ function resolveDesignProps6(props) {
   };
 }
 function formatInvoices(invoices) {
-  return (invoices || []).map(({ amountDue, dueDate }) => ({
+  return (invoices || []).map(({ amountDue, dueDate, url }) => ({
     ...dueDate && { date: toPrettyDate(dueDate) },
-    amount: formatCurrency(amountDue)
+    amount: formatCurrency(amountDue),
+    url
   }));
 }
+var InvoiceDate = ({ date, fontStyle, url }) => {
+  const theme = nt();
+  const dateText = /* @__PURE__ */ jsx21(
+    Text,
+    {
+      $font: theme.typography[fontStyle].fontFamily,
+      $size: theme.typography[fontStyle].fontSize,
+      $weight: theme.typography[fontStyle].fontWeight,
+      $color: theme.typography[fontStyle].color,
+      children: date
+    }
+  );
+  if (url) {
+    /* @__PURE__ */ jsx21("a", { href: url, target: "_blank", children: dateText });
+  }
+  return dateText;
+};
 var Invoices = forwardRef10(({ className, ...rest }, ref) => {
   const props = resolveDesignProps6(rest);
   const theme = nt();
@@ -11842,16 +11853,14 @@ var Invoices = forwardRef10(({ className, ...rest }, ref) => {
     /* @__PURE__ */ jsx21(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
       0,
       props.limit.isVisible && props.limit.number || invoices.length
-    ).map(({ date, amount }, index) => {
+    ).map(({ date, amount, url }, index) => {
       return /* @__PURE__ */ jsxs14(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && /* @__PURE__ */ jsx21(
-          Text,
+        props.date.isVisible && date && /* @__PURE__ */ jsx21(
+          InvoiceDate,
           {
-            $font: theme.typography[props.date.fontStyle].fontFamily,
-            $size: theme.typography[props.date.fontStyle].fontSize,
-            $weight: theme.typography[props.date.fontStyle].fontWeight,
-            $color: theme.typography[props.date.fontStyle].color,
-            children: date
+            date,
+            fontStyle: props.date.fontStyle,
+            url
           }
         ),
         props.amount.isVisible && /* @__PURE__ */ jsx21(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",