autumn-js 0.0.96 → 0.0.98

package/dist/libraries/react/{chunk-IN62REVO.mjs → chunk-ZQ5HNM6O.mjs}

@@ -1,11 +1,11 @@
 "use client";
 
-import {
-  getPricingTableContent
-} from "./chunk-QBBE72EF.mjs";
 import {
   getAttachContent
 } from "./chunk-BCMBFJ7E.mjs";
+import {
+  getPricingTableContent
+} from "./chunk-QBBE72EF.mjs";
 import {
   Button
 } from "./chunk-AL3VJLFU.mjs";
@@ -21,38 +21,249 @@ import {
 import {
   Switch
 } from "./chunk-OAWFFAKA.mjs";
+import {
+  cn
+} from "./chunk-4J6OC4ZQ.mjs";
 import {
   loadingStyles,
   spinnerStyles
 } from "./chunk-WVKYZYFT.mjs";
-import {
-  usePricingTable
-} from "./chunk-CAMHARUX.mjs";
-import {
-  cn
-} from "./chunk-4J6OC4ZQ.mjs";
 import {
   useCustomer
-} from "./chunk-6CJ3FB74.mjs";
+} from "./chunk-7J5WGHDK.mjs";
+import {
+  usePricingTable
+} from "./chunk-FGNNWWBD.mjs";
+
+// src/libraries/react/components/pricing-table/pricing-table-synced.tsx
+import React2 from "react";
 
 // src/libraries/react/components/attach-dialog/attach-dialog-synced.tsx
-import { useEffect, useState as useState2 } from "react";
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AttachDialog(params) {
+  const { attach } = useCustomer();
+  const [loading, setLoading] = useState(false);
+  const [optionsInput, setOptionsInput] = useState(
+    params?.preview?.options || []
+  );
+  const getTotalPrice = () => {
+    let sum = due_today?.price || 0;
+    optionsInput.forEach((option) => {
+      if (option.price && option.quantity) {
+        sum += option.price * (option.quantity / option.billing_units);
+      }
+    });
+    return sum;
+  };
+  useEffect(() => {
+    setOptionsInput(params?.preview?.options || []);
+  }, [params?.preview?.options]);
+  if (!params || !params.preview) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  const { open, setOpen, preview } = params;
+  const { items, due_today } = preview;
+  const { title, message } = getAttachContent(preview);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: cn(
+        "au-p-0 au-pt-4 au-gap-0 au-text-foreground au-overflow-hidden au-text-sm"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: cn("au-px-6 au-mb-1 "), children: title }),
+        /* @__PURE__ */ jsx("div", { className: cn("au-px-6 au-mt-1 au-mb-4 au-text-muted-foreground"), children: message }),
+        (items || optionsInput.length > 0) && /* @__PURE__ */ jsxs("div", { className: "au-mb-6 au-px-6", children: [
+          items?.map((item) => /* @__PURE__ */ jsxs(PriceItem, { children: [
+            /* @__PURE__ */ jsx("span", { className: "au-truncate au-flex-1", children: item.description }),
+            /* @__PURE__ */ jsx("span", { children: item.price })
+          ] }, item.description)),
+          optionsInput?.map((option, index) => {
+            return /* @__PURE__ */ jsx(
+              OptionsInput,
+              {
+                option,
+                optionsInput,
+                setOptionsInput,
+                index
+              },
+              option.feature_name
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "au-flex au-flex-col sm:au-flex-row au-justify-between au-gap-x-4 au-py-2 au-pl-6 au-pr-3 au-bg-secondary au-border-t au-shadow-inner", children: [
+          due_today && /* @__PURE__ */ jsxs(TotalPrice, { children: [
+            /* @__PURE__ */ jsx("span", { children: "Due Today" }),
+            /* @__PURE__ */ jsx("span", { children: new Intl.NumberFormat("en-US", {
+              style: "currency",
+              currency: due_today.currency
+            }).format(getTotalPrice()) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              onClick: async () => {
+                setLoading(true);
+                await attach({
+                  productId: preview.product_id,
+                  options: optionsInput.map((option) => ({
+                    featureId: option.feature_id,
+                    quantity: option.quantity || 0
+                  }))
+                });
+                setOpen(false);
+                setLoading(false);
+              },
+              disabled: loading,
+              className: "au-min-w-16 au-flex au-items-center au-gap-2",
+              children: loading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "au-w-4 au-h-4 au-animate-spin" }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: "au-whitespace-nowrap au-flex au-gap-1", children: "Confirm" }) })
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+var PriceItem = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "au-flex au-flex-col au-pb-4 sm:au-pb-0 au-gap-1 sm:au-flex-row au-justify-between sm:au-h-7 sm:au-gap-2 sm:au-items-center",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var OptionsInput = ({
+  className,
+  option,
+  optionsInput,
+  setOptionsInput,
+  index,
+  ...props
+}) => {
+  const { feature_name, billing_units, quantity, price } = option;
+  return /* @__PURE__ */ jsxs(PriceItem, { children: [
+    /* @__PURE__ */ jsx("span", { children: feature_name }),
+    /* @__PURE__ */ jsx(
+      QuantityInput,
+      {
+        value: quantity ? quantity / billing_units : "",
+        onChange: (e) => {
+          const newOptions = [...optionsInput];
+          newOptions[index].quantity = parseInt(e.target.value) * billing_units;
+          setOptionsInput(newOptions);
+        },
+        children: /* @__PURE__ */ jsxs("span", { className: "", children: [
+          "\xD7 $",
+          price,
+          " per ",
+          billing_units === 1 ? " " : billing_units,
+          " ",
+          feature_name
+        ] })
+      },
+      feature_name
+    )
+  ] }, feature_name);
+};
+var QuantityInput = ({
+  children,
+  onChange,
+  value,
+  className,
+  ...props
+}) => {
+  const currentValue = Number(value) || 0;
+  const handleValueChange = (newValue) => {
+    const syntheticEvent = {
+      target: { value: String(newValue) }
+    };
+    onChange(syntheticEvent);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(className, "au-flex au-flex-row au-items-center au-gap-4"),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "au-flex au-items-center au-gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              onClick: () => currentValue > 0 && handleValueChange(currentValue - 1),
+              disabled: currentValue <= 0,
+              className: "au-h-6 au-w-6 au-pb-0.5",
+              children: "-"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "au-w-8 au-text-center au-text-foreground", children: currentValue }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              onClick: () => handleValueChange(currentValue + 1),
+              className: "au-h-6 au-w-6 au-pb-0.5",
+              children: "+"
+            }
+          )
+        ] }),
+        children
+      ]
+    }
+  );
+};
+var TotalPrice = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "au-w-full au-font-semibold au-flex au-justify-between au-items-center", children });
+};
+var PricingDialogButton = ({
+  children,
+  size,
+  onClick,
+  disabled,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      onClick,
+      disabled,
+      size,
+      className: cn(className, "au-shadow-sm au-shadow-stone-400"),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ArrowRight, { className: "!au-h-3" })
+      ]
+    }
+  );
+};
 
 // src/libraries/react/components/pricing-table/pricing-table-synced.tsx
-import React from "react";
-import { createContext, useContext, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState as useState2 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function PricingTable({
   productDetails
 }) {
   const { attach } = useCustomer();
-  const [isAnnual, setIsAnnual] = useState(false);
+  const [isAnnual, setIsAnnual] = useState2(false);
   const { products, isLoading, error } = usePricingTable({ productDetails });
   if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { style: loadingStyles, children: /* @__PURE__ */ jsx(LoaderCircle, { style: spinnerStyles }) });
+    return /* @__PURE__ */ jsx2("div", { style: loadingStyles, children: /* @__PURE__ */ jsx2(LoaderCircle, { style: spinnerStyles }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx("div", { children: " Something went wrong..." });
+    return /* @__PURE__ */ jsx2("div", { children: " Something went wrong..." });
   }
   const intervals = Array.from(
     new Set(
@@ -73,14 +284,14 @@ function PricingTable({
     }
     return true;
   };
-  return /* @__PURE__ */ jsx("div", { className: cn("au-root"), children: products && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2("div", { className: cn("au-root"), children: products && /* @__PURE__ */ jsx2(
     PricingTableContainer,
     {
       products,
       isAnnualToggle: isAnnual,
       setIsAnnualToggle: setIsAnnual,
       multiInterval,
-      children: products.filter(intervalFilter).map((product, index) => /* @__PURE__ */ jsx(
+      children: products.filter(intervalFilter).map((product, index) => /* @__PURE__ */ jsx2(
         PricingCard,
         {
           productId: product.id,
@@ -130,14 +341,14 @@ var PricingTableContainer = ({
     throw new Error("products is required in <PricingTable />");
   }
   if (products.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, {});
+    return /* @__PURE__ */ jsx2(Fragment2, {});
   }
   const hasRecommended = products?.some((p) => p.display?.recommend_text);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     PricingTableContext.Provider,
     {
       value: { isAnnualToggle, setIsAnnualToggle, products, showFeatures },
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs2(
         "div",
         {
           className: cn(
@@ -145,13 +356,13 @@ var PricingTableContainer = ({
             hasRecommended && "!au-py-10"
           ),
           children: [
-            multiInterval && /* @__PURE__ */ jsx(
+            multiInterval && /* @__PURE__ */ jsx2(
               "div",
               {
                 className: cn(
                   products.some((p) => p.display?.recommend_text) && "au-mb-8"
                 ),
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx2(
                   AnnualSwitch,
                   {
                     isAnnualToggle,
@@ -160,7 +371,7 @@ var PricingTableContainer = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "div",
               {
                 className: cn(
@@ -193,7 +404,7 @@ var PricingCard = ({
     primary_text: "Free"
   } : product.items[0].display;
   const featureItems = product.properties?.is_free ? product.items : product.items.slice(1);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cn(
@@ -202,8 +413,8 @@ var PricingCard = ({
         className
       ),
       children: [
-        productDisplay?.recommend_text && /* @__PURE__ */ jsx(RecommendedBadge, { recommended: productDisplay?.recommend_text }),
-        /* @__PURE__ */ jsxs(
+        productDisplay?.recommend_text && /* @__PURE__ */ jsx2(RecommendedBadge, { recommended: productDisplay?.recommend_text }),
+        /* @__PURE__ */ jsxs2(
           "div",
           {
             className: cn(
@@ -211,19 +422,19 @@ var PricingCard = ({
               isRecommended && "lg:au-translate-y-6"
             ),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "au-h-full", children: [
-                /* @__PURE__ */ jsxs("div", { className: "au-flex au-flex-col", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "au-pb-4", children: [
-                    /* @__PURE__ */ jsx("h2", { className: "au-text-2xl au-font-semibold au-px-6 au-truncate", children: productDisplay?.name || name }),
-                    productDisplay?.description && /* @__PURE__ */ jsx("div", { className: "au-text-sm au-text-muted-foreground au-px-6 au-h-8", children: /* @__PURE__ */ jsx("p", { className: "au-line-clamp-2", children: productDisplay?.description }) })
+              /* @__PURE__ */ jsxs2("div", { className: "au-h-full", children: [
+                /* @__PURE__ */ jsxs2("div", { className: "au-flex au-flex-col", children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "au-pb-4", children: [
+                    /* @__PURE__ */ jsx2("h2", { className: "au-text-2xl au-font-semibold au-px-6 au-truncate", children: productDisplay?.name || name }),
+                    productDisplay?.description && /* @__PURE__ */ jsx2("div", { className: "au-text-sm au-text-muted-foreground au-px-6 au-h-8", children: /* @__PURE__ */ jsx2("p", { className: "au-line-clamp-2", children: productDisplay?.description }) })
                   ] }),
-                  /* @__PURE__ */ jsx("div", { className: "au-mb-2", children: /* @__PURE__ */ jsx("h3", { className: "au-font-semibold au-h-16 au-flex au-px-6 au-items-center au-border-y au-mb-4 au-bg-secondary/40", children: /* @__PURE__ */ jsxs("div", { className: "au-line-clamp-2", children: [
+                  /* @__PURE__ */ jsx2("div", { className: "au-mb-2", children: /* @__PURE__ */ jsx2("h3", { className: "au-font-semibold au-h-16 au-flex au-px-6 au-items-center au-border-y au-mb-4 au-bg-secondary/40", children: /* @__PURE__ */ jsxs2("div", { className: "au-line-clamp-2", children: [
                     mainPriceDisplay?.primary_text,
                     " ",
-                    mainPriceDisplay?.secondary_text && /* @__PURE__ */ jsx("span", { className: "au-font-normal au-text-muted-foreground au-mt-1", children: mainPriceDisplay?.secondary_text })
+                    mainPriceDisplay?.secondary_text && /* @__PURE__ */ jsx2("span", { className: "au-font-normal au-text-muted-foreground au-mt-1", children: mainPriceDisplay?.secondary_text })
                   ] }) }) })
                 ] }),
-                showFeatures && featureItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "au-flex-grow au-px-6 au-mb-6", children: /* @__PURE__ */ jsx(
+                showFeatures && featureItems.length > 0 && /* @__PURE__ */ jsx2("div", { className: "au-flex-grow au-px-6 au-mb-6", children: /* @__PURE__ */ jsx2(
                   PricingFeatureList,
                   {
                     items: featureItems,
@@ -232,11 +443,11 @@ var PricingCard = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 "div",
                 {
                   className: cn(" au-px-6 ", isRecommended && "lg:au--translate-y-12"),
-                  children: /* @__PURE__ */ jsx(
+                  children: /* @__PURE__ */ jsx2(
                     PricingCardButton,
                     {
                       recommended: productDisplay?.recommend_text ? true : false,
@@ -259,21 +470,21 @@ var PricingFeatureList = ({
   everythingFrom,
   className
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cn("au-flex-grow", className), children: [
-    everythingFrom && /* @__PURE__ */ jsxs("p", { className: "au-text-sm au-mb-4", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: cn("au-flex-grow", className), children: [
+    everythingFrom && /* @__PURE__ */ jsxs2("p", { className: "au-text-sm au-mb-4", children: [
       "Everything from ",
       everythingFrom,
       ", plus:"
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "au-space-y-3", children: items.map((item, index) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx2("div", { className: "au-space-y-3", children: items.map((item, index) => /* @__PURE__ */ jsxs2(
       "div",
       {
         className: "au-flex au-items-start au-gap-2 au-text-sm",
         children: [
-          showIcon && /* @__PURE__ */ jsx(Check, { className: "au-h-4 au-w-4 au-text-primary au-flex-shrink-0 au-mt-0.5" }),
-          /* @__PURE__ */ jsxs("div", { className: "au-flex au-flex-col", children: [
-            /* @__PURE__ */ jsx("span", { children: item.display?.primary_text }),
-            item.display?.secondary_text && /* @__PURE__ */ jsx("span", { className: "au-text-sm au-text-muted-foreground", children: item.display?.secondary_text })
+          showIcon && /* @__PURE__ */ jsx2(Check, { className: "au-h-4 au-w-4 au-text-primary au-flex-shrink-0 au-mt-0.5" }),
+          /* @__PURE__ */ jsxs2("div", { className: "au-flex au-flex-col", children: [
+            /* @__PURE__ */ jsx2("span", { children: item.display?.primary_text }),
+            item.display?.secondary_text && /* @__PURE__ */ jsx2("span", { className: "au-text-sm au-text-muted-foreground", children: item.display?.secondary_text })
           ] })
         ]
       },
@@ -281,8 +492,8 @@ var PricingFeatureList = ({
     )) })
   ] });
 };
-var PricingCardButton = React.forwardRef(({ recommended, children, className, onClick, ...props }, ref) => {
-  const [loading, setLoading] = useState(false);
+var PricingCardButton = React2.forwardRef(({ recommended, children, className, onClick, ...props }, ref) => {
+  const [loading, setLoading] = useState2(false);
   const handleClick = async (e) => {
     setLoading(true);
     try {
@@ -293,7 +504,7 @@ var PricingCardButton = React.forwardRef(({ recommended, children, className, on
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Button,
     {
       className: cn(
@@ -305,14 +516,14 @@ var PricingCardButton = React.forwardRef(({ recommended, children, className, on
       ref,
       disabled: loading || props.disabled,
       onClick: handleClick,
-      children: loading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "au-h-4 au-w-4 au-animate-spin" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "au-flex au-items-center au-justify-between au-w-full au-transition-transform au-duration-300 group-hover:au-translate-y-[-130%]", children: [
-          /* @__PURE__ */ jsx("span", { children }),
-          /* @__PURE__ */ jsx("span", { className: "au-text-sm", children: "\u2192" })
+      children: loading ? /* @__PURE__ */ jsx2(LoaderCircle, { className: "au-h-4 au-w-4 au-animate-spin" }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsxs2("div", { className: "au-flex au-items-center au-justify-between au-w-full au-transition-transform au-duration-300 group-hover:au-translate-y-[-130%]", children: [
+          /* @__PURE__ */ jsx2("span", { children }),
+          /* @__PURE__ */ jsx2("span", { className: "au-text-sm", children: "\u2192" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "au-flex au-items-center au-justify-between au-w-full au-absolute au-px-4 au-translate-y-[130%] au-transition-transform au-duration-300 group-hover:au-translate-y-0 au-mt-2 group-hover:au-mt-0", children: [
-          /* @__PURE__ */ jsx("span", { children }),
-          /* @__PURE__ */ jsx("span", { className: "au-text-sm", children: "\u2192" })
+        /* @__PURE__ */ jsxs2("div", { className: "au-flex au-items-center au-justify-between au-w-full au-absolute au-px-4 au-translate-y-[130%] au-transition-transform au-duration-300 group-hover:au-translate-y-0 au-mt-2 group-hover:au-mt-0", children: [
+          /* @__PURE__ */ jsx2("span", { children }),
+          /* @__PURE__ */ jsx2("span", { className: "au-text-sm", children: "\u2192" })
         ] })
       ] })
     }
@@ -323,9 +534,9 @@ var AnnualSwitch = ({
   isAnnualToggle,
   setIsAnnualToggle
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "au-flex au-items-center au-space-x-2 au-mb-4", children: [
-    /* @__PURE__ */ jsx("span", { className: "au-text-sm au-text-muted-foreground", children: "Monthly" }),
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("div", { className: "au-flex au-items-center au-space-x-2 au-mb-4", children: [
+    /* @__PURE__ */ jsx2("span", { className: "au-text-sm au-text-muted-foreground", children: "Monthly" }),
+    /* @__PURE__ */ jsx2(
       Switch,
       {
         id: "annual-billing",
@@ -333,231 +544,14 @@ var AnnualSwitch = ({
         onCheckedChange: setIsAnnualToggle
       }
     ),
-    /* @__PURE__ */ jsx("span", { className: "au-text-sm au-text-muted-foreground", children: "Annual" })
+    /* @__PURE__ */ jsx2("span", { className: "au-text-sm au-text-muted-foreground", children: "Annual" })
   ] });
 };
 var RecommendedBadge = ({ recommended }) => {
-  return /* @__PURE__ */ jsx("div", { className: "au-bg-secondary au-absolute au-border au-text-muted-foreground au-text-sm au-font-medium lg:au-rounded-full au-px-3 lg:au-py-0.5 lg:au-top-4 lg:au-right-4 au-top-[-1px] au-right-[-1px] au-rounded-bl-lg", children: recommended });
-};
-
-// src/libraries/react/components/attach-dialog/attach-dialog-synced.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function AttachDialog(params) {
-  const { attach } = useCustomer();
-  const [loading, setLoading] = useState2(false);
-  const [optionsInput, setOptionsInput] = useState2(
-    params?.preview?.options || []
-  );
-  const getTotalPrice = () => {
-    let sum = due_today?.price || 0;
-    optionsInput.forEach((option) => {
-      if (option.price && option.quantity) {
-        sum += option.price * (option.quantity / option.billing_units);
-      }
-    });
-    return sum;
-  };
-  useEffect(() => {
-    setOptionsInput(params?.preview?.options || []);
-  }, [params?.preview?.options]);
-  if (!params || !params.preview) {
-    return /* @__PURE__ */ jsx2(Fragment2, {});
-  }
-  const { open, setOpen, preview } = params;
-  const { items, due_today } = preview;
-  const { title, message } = getAttachContent(preview);
-  return /* @__PURE__ */ jsx2(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs2(
-    DialogContent,
-    {
-      className: cn(
-        "au-p-0 au-pt-4 au-gap-0 au-text-foreground au-overflow-hidden au-text-sm"
-      ),
-      children: [
-        /* @__PURE__ */ jsx2(DialogTitle, { className: cn("au-px-6 au-mb-1 "), children: title }),
-        /* @__PURE__ */ jsx2("div", { className: cn("au-px-6 au-mt-1 au-mb-4 au-text-muted-foreground"), children: message }),
-        (items || optionsInput.length > 0) && /* @__PURE__ */ jsxs2("div", { className: "au-mb-6 au-px-6", children: [
-          items?.map((item) => /* @__PURE__ */ jsxs2(PriceItem, { children: [
-            /* @__PURE__ */ jsx2("span", { className: "au-truncate au-flex-1", children: item.description }),
-            /* @__PURE__ */ jsx2("span", { children: item.price })
-          ] }, item.description)),
-          optionsInput?.map((option, index) => {
-            return /* @__PURE__ */ jsx2(
-              OptionsInput,
-              {
-                option,
-                optionsInput,
-                setOptionsInput,
-                index
-              },
-              option.feature_name
-            );
-          })
-        ] }),
-        /* @__PURE__ */ jsxs2(DialogFooter, { className: "au-flex au-flex-col sm:au-flex-row au-justify-between au-gap-x-4 au-py-2 au-pl-6 au-pr-3 au-bg-secondary au-border-t au-shadow-inner", children: [
-          due_today && /* @__PURE__ */ jsxs2(TotalPrice, { children: [
-            /* @__PURE__ */ jsx2("span", { children: "Due Today" }),
-            /* @__PURE__ */ jsx2("span", { children: new Intl.NumberFormat("en-US", {
-              style: "currency",
-              currency: due_today.currency
-            }).format(getTotalPrice()) })
-          ] }),
-          /* @__PURE__ */ jsx2(
-            Button,
-            {
-              size: "sm",
-              onClick: async () => {
-                setLoading(true);
-                await attach({
-                  productId: preview.product_id,
-                  options: optionsInput.map((option) => ({
-                    featureId: option.feature_id,
-                    quantity: option.quantity || 0
-                  }))
-                });
-                setOpen(false);
-                setLoading(false);
-              },
-              disabled: loading,
-              className: "au-min-w-16 au-flex au-items-center au-gap-2",
-              children: loading ? /* @__PURE__ */ jsx2(LoaderCircle, { className: "au-w-4 au-h-4 au-animate-spin" }) : /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("span", { className: "au-whitespace-nowrap au-flex au-gap-1", children: "Confirm" }) })
-            }
-          )
-        ] })
-      ]
-    }
-  ) });
-}
-var PriceItem = ({
-  children,
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: cn(
-        "au-flex au-flex-col au-pb-4 sm:au-pb-0 au-gap-1 sm:au-flex-row au-justify-between sm:au-h-7 sm:au-gap-2 sm:au-items-center",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-};
-var OptionsInput = ({
-  className,
-  option,
-  optionsInput,
-  setOptionsInput,
-  index,
-  ...props
-}) => {
-  const { feature_name, billing_units, quantity, price } = option;
-  return /* @__PURE__ */ jsxs2(PriceItem, { children: [
-    /* @__PURE__ */ jsx2("span", { children: feature_name }),
-    /* @__PURE__ */ jsx2(
-      QuantityInput,
-      {
-        value: quantity ? quantity / billing_units : "",
-        onChange: (e) => {
-          const newOptions = [...optionsInput];
-          newOptions[index].quantity = parseInt(e.target.value) * billing_units;
-          setOptionsInput(newOptions);
-        },
-        children: /* @__PURE__ */ jsxs2("span", { className: "", children: [
-          "\xD7 $",
-          price,
-          " per ",
-          billing_units === 1 ? " " : billing_units,
-          " ",
-          feature_name
-        ] })
-      },
-      feature_name
-    )
-  ] }, feature_name);
-};
-var QuantityInput = ({
-  children,
-  onChange,
-  value,
-  className,
-  ...props
-}) => {
-  const currentValue = Number(value) || 0;
-  const handleValueChange = (newValue) => {
-    const syntheticEvent = {
-      target: { value: String(newValue) }
-    };
-    onChange(syntheticEvent);
-  };
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className: cn(className, "au-flex au-flex-row au-items-center au-gap-4"),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs2("div", { className: "au-flex au-items-center au-gap-1", children: [
-          /* @__PURE__ */ jsx2(
-            Button,
-            {
-              variant: "outline",
-              size: "icon",
-              onClick: () => currentValue > 0 && handleValueChange(currentValue - 1),
-              disabled: currentValue <= 0,
-              className: "au-h-6 au-w-6 au-pb-0.5",
-              children: "-"
-            }
-          ),
-          /* @__PURE__ */ jsx2("span", { className: "au-w-8 au-text-center au-text-foreground", children: currentValue }),
-          /* @__PURE__ */ jsx2(
-            Button,
-            {
-              variant: "outline",
-              size: "icon",
-              onClick: () => handleValueChange(currentValue + 1),
-              className: "au-h-6 au-w-6 au-pb-0.5",
-              children: "+"
-            }
-          )
-        ] }),
-        children
-      ]
-    }
-  );
-};
-var TotalPrice = ({ children }) => {
-  return /* @__PURE__ */ jsx2("div", { className: "au-w-full au-font-semibold au-flex au-justify-between au-items-center", children });
-};
-var PricingDialogButton = ({
-  children,
-  size,
-  onClick,
-  disabled,
-  className
-}) => {
-  return /* @__PURE__ */ jsxs2(
-    Button,
-    {
-      onClick,
-      disabled,
-      size,
-      className: cn(className, "au-shadow-sm au-shadow-stone-400"),
-      children: [
-        children,
-        /* @__PURE__ */ jsx2(ArrowRight, { className: "!au-h-3" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsx2("div", { className: "au-bg-secondary au-absolute au-border au-text-muted-foreground au-text-sm au-font-medium lg:au-rounded-full au-px-3 lg:au-py-0.5 lg:au-top-4 lg:au-right-4 au-top-[-1px] au-right-[-1px] au-rounded-bl-lg", children: recommended });
 };
 
 export {
-  AttachDialog,
-  PriceItem,
-  OptionsInput,
-  QuantityInput,
-  TotalPrice,
-  PricingDialogButton,
   PricingTable,
   usePricingTableContext,
   PricingTableContainer,
@@ -565,5 +559,11 @@ export {
   PricingFeatureList,
   PricingCardButton,
   AnnualSwitch,
-  RecommendedBadge
+  RecommendedBadge,
+  AttachDialog,
+  PriceItem,
+  OptionsInput,
+  QuantityInput,
+  TotalPrice,
+  PricingDialogButton
 };