@ultraviolet/plus 3.0.0-beta.16 → 3.0.0-beta.18

package/dist/components/EstimateCost/EstimateCostContent.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { CalculatorIcon } from "@ultraviolet/icons";
 import { Stack, Alert, Badge, Text } from "@ultraviolet/ui";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -16,16 +16,27 @@ import { OverlayComponent } from "./OverlayComponent.js";
 import { OverlayContextProvider } from "./OverlayContext.js";
 import { estimateCostTable, estimateCostPriceColumn, estimateCostPriceCellContent, estimateCostPriceCell, estimateCostTimeCell, estimateCostEmptyTable, estimateCostEmptyCell, estimateCostCell, estimateCostTotalPriceCell, estimateCostBadgeBeta, estimateCostText, paddingLeftCell, estimatecostFeesText, estimateCostFeesTable, estimateCostTitle, estimateCostCalculatorIcon } from "./styles.css.js";
 const DEFAULT_UNIT_LIST = ["hours", "days", "months"];
-const DescriptionComponent = memo(({
-  description,
-  locales
-}) => description === void 0 || typeof description === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "body", children: description || locales["estimate.cost.description"] }) : description);
-const TitleComponent = memo(({
-  locales
-}) => /* @__PURE__ */ jsxs("h3", { className: estimateCostTitle, children: [
-  /* @__PURE__ */ jsx(CalculatorIcon, { className: estimateCostCalculatorIcon, sentiment: "primary", size: "medium" }),
-  locales?.["estimate.cost.label"]
-] }));
+const DescriptionComponent = memo(
+  ({
+    description,
+    locales
+  }) => description === void 0 || typeof description === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "body", children: description || locales["estimate.cost.description"] }) : description
+);
+const TitleComponent = memo(
+  ({
+    locales
+  }) => /* @__PURE__ */ jsxs("h3", { className: estimateCostTitle, children: [
+    /* @__PURE__ */ jsx(
+      CalculatorIcon,
+      {
+        className: estimateCostCalculatorIcon,
+        sentiment: "primary",
+        size: "medium"
+      }
+    ),
+    locales?.["estimate.cost.label"]
+  ] })
+);
 const EstimateCostContent = ({
   description,
   alert,
@@ -55,9 +66,7 @@ const EstimateCostContent = ({
   onTotalPriceChange,
   style
 }) => {
-  const {
-    formatNumber
-  } = useEstimateCost();
+  const { formatNumber } = useEstimateCost();
   const [ref, inView] = useInView();
   const [products, setProducts] = useState([]);
   const [totalPrice, setTotalPrice] = useState({
@@ -73,130 +82,265 @@ const EstimateCostContent = ({
     value: 1
   });
   const [isLongFractionDigits, setIsLongFractionDigits] = useState(false);
-  const providerValue = useMemo(() => ({
-    isOverlay: false
-  }), []);
-  const totalValue = useMemo(() => formatNumber(totalPrice.total < 0 ? 0 : totalPrice.total, {
-    maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong[iteration.unit] : maximumFractionDigits[iteration.unit]
-  }), [formatNumber, isLongFractionDigits, iteration.unit, totalPrice.total]);
-  const totalMaxValue = useMemo(() => formatNumber(totalPrice.maxTotal < 0 ? 0 : totalPrice.maxTotal, {
-    maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong[iteration.unit] : maximumFractionDigits[iteration.unit]
-  }), [formatNumber, isLongFractionDigits, iteration.unit, totalPrice.maxTotal]);
-  const productsCallback = useMemo(() => ({
-    add: (newProduct) => {
-      setProducts((total) => {
-        if (total.find((product) => product.id === newProduct.id)) {
-          return total.map((product) => product.id === newProduct.id ? newProduct : product);
-        }
-        return [...total, newProduct];
-      });
-    },
-    remove: ({
-      id
-    }) => {
-      setProducts((total) => total.filter((product) => product.id !== id));
-    }
-  }), [setProducts]);
+  const providerValue = useMemo(() => ({ isOverlay: false }), []);
+  const totalValue = useMemo(
+    () => formatNumber(totalPrice.total < 0 ? 0 : totalPrice.total, {
+      maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong[iteration.unit] : maximumFractionDigits[iteration.unit]
+    }),
+    [formatNumber, isLongFractionDigits, iteration.unit, totalPrice.total]
+  );
+  const totalMaxValue = useMemo(
+    () => formatNumber(totalPrice.maxTotal < 0 ? 0 : totalPrice.maxTotal, {
+      maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong[iteration.unit] : maximumFractionDigits[iteration.unit]
+    }),
+    [formatNumber, isLongFractionDigits, iteration.unit, totalPrice.maxTotal]
+  );
+  const productsCallback = useMemo(
+    () => ({
+      add: (newProduct) => {
+        setProducts((total) => {
+          if (total.find((product) => product.id === newProduct.id)) {
+            return total.map(
+              (product) => product.id === newProduct.id ? newProduct : product
+            );
+          }
+          return [...total, newProduct];
+        });
+      },
+      remove: ({ id }) => {
+        setProducts((total) => total.filter((product) => product.id !== id));
+      }
+    }),
+    [setProducts]
+  );
   useEffect(() => {
     const isMaxAmountInProducts = products.find((product) => product.maxAmount);
-    setIsLongFractionDigits(!!products.find((product) => product.longFractionDigits));
+    setIsLongFractionDigits(
+      !!products.find((product) => product.longFractionDigits)
+    );
     setTotalPrice({
-      hourly: products.reduce((acc, product) => acc + (product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.amount - product.amountFree, 0)), 0),
-      maxHourly: isMaxAmountInProducts ? products.reduce((acc, product) => acc && product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.maxAmount - product.amountFree, 0), 0) : 0,
-      maxOverlayHourly: isMaxAmountInProducts ? products.reduce((acc, product) => acc + (product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.maxAmount - product.amountFree, 0)), 0) : 0,
-      maxTotal: isMaxAmountInProducts ? products.reduce((acc, product) => acc + calculatePrice({
-        amount: product.maxAmount || product.amount,
-        // Not all products have maxAmount, so we need to check both
-        amountFree: product.amountFree,
-        discount: product.discount,
-        price: product.price,
-        timeAmount: product.noIteration ? 1 : iteration.value,
-        timeUnit: product.noIteration ? "hours" : iteration.unit
-      }), 0) : 0,
-      overlayHourly: products.reduce((acc, product) => acc + (product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.amount - product.amountFree, 0)), 0),
-      total: !hideTotal ? products.reduce((acc, product) => acc + calculatePrice({
-        amount: product.amount,
-        amountFree: product.amountFree,
-        discount: product.discount,
-        price: product.price,
-        timeAmount: product.noIteration ? 1 : iteration.value,
-        timeUnit: product.noIteration ? "hours" : iteration.unit
-      }), 0) : 0
+      hourly: products.reduce(
+        (acc, product) => acc + (product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.amount - product.amountFree, 0)),
+        0
+      ),
+      maxHourly: isMaxAmountInProducts ? products.reduce(
+        (acc, product) => acc && product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.maxAmount - product.amountFree, 0),
+        0
+      ) : 0,
+      maxOverlayHourly: isMaxAmountInProducts ? products.reduce(
+        (acc, product) => acc + (product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.maxAmount - product.amountFree, 0)),
+        0
+      ) : 0,
+      maxTotal: isMaxAmountInProducts ? products.reduce(
+        (acc, product) => acc + calculatePrice({
+          amount: product.maxAmount || product.amount,
+          // Not all products have maxAmount, so we need to check both
+          amountFree: product.amountFree,
+          discount: product.discount,
+          price: product.price,
+          timeAmount: product.noIteration ? 1 : iteration.value,
+          timeUnit: product.noIteration ? "hours" : iteration.unit
+        }),
+        0
+      ) : 0,
+      overlayHourly: products.reduce(
+        (acc, product) => acc + (product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.amount - product.amountFree, 0)),
+        0
+      ),
+      total: !hideTotal ? products.reduce(
+        (acc, product) => acc + calculatePrice({
+          amount: product.amount,
+          amountFree: product.amountFree,
+          discount: product.discount,
+          price: product.price,
+          timeAmount: product.noIteration ? 1 : iteration.value,
+          timeUnit: product.noIteration ? "hours" : iteration.unit
+        }),
+        0
+      ) : 0
     });
     onTotalPriceChange?.({
       total: totalPrice.total,
       totalMax: totalPrice.maxTotal > 0 ? totalPrice.maxTotal : void 0
     });
-  }, [hideTotal, products, iteration, setTotalPrice, onTotalPriceChange, totalPrice.total, totalPrice.maxTotal, totalValue, totalMaxValue]);
+  }, [
+    hideTotal,
+    products,
+    iteration,
+    setTotalPrice,
+    onTotalPriceChange,
+    totalPrice.total,
+    totalPrice.maxTotal,
+    totalValue,
+    totalMaxValue
+  ]);
   useEffect(() => {
     if (hideTimeUnit && (iteration.value > 1 || iteration.unit !== (defaultTimeUnit ?? "hours"))) {
-      setIteration({
-        unit: defaultTimeUnit ?? "hours",
-        value: 1
-      });
+      setIteration({ unit: defaultTimeUnit ?? "hours", value: 1 });
     }
   }, [hideTimeUnit, iteration, defaultTimeUnit]);
   return /* @__PURE__ */ jsxs(Stack, { gap: 2, style, children: [
-    !hideOverlay ? /* @__PURE__ */ jsx(OverlayComponent, { disableOverlayLeft, disableOverlayRight, discount, inView, isBeta, OverlayLeft, OverlayRight, overlayMargin, totalPrice, unit: overlayUnit ?? "hours", children }) : null,
+    !hideOverlay ? /* @__PURE__ */ jsx(
+      OverlayComponent,
+      {
+        disableOverlayLeft,
+        disableOverlayRight,
+        discount,
+        inView,
+        isBeta,
+        OverlayLeft,
+        OverlayRight,
+        overlayMargin,
+        totalPrice,
+        unit: overlayUnit ?? "hours",
+        children
+      }
+    ) : null,
     description === false ? null : /* @__PURE__ */ jsx(DescriptionComponent, { description, locales }),
     alert ? /* @__PURE__ */ jsx(Alert, { sentiment: alertVariant, title: alertTitle, children: alert }) : null,
     /* @__PURE__ */ jsx(OverlayContextProvider, { value: providerValue, children: /* @__PURE__ */ jsxs("div", { children: [
-      children ? /* @__PURE__ */ jsxs("table", { cellPadding: "0", cellSpacing: "0", className: estimateCostTable[hideTotal ? "noTotal" : "total"], "data-testid": "summary", ref, children: [
-        /* @__PURE__ */ jsxs("colgroup", { children: [
-          /* @__PURE__ */ jsx("col", {}),
-          /* @__PURE__ */ jsx("col", { className: estimateCostPriceColumn })
-        ] }),
-        !hideTimeUnit ? /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx(TitleComponent, { locales }) }),
-          /* @__PURE__ */ jsx("th", { className: `${estimateCostPriceCellContent} ${estimateCostPriceCell}`, children: /* @__PURE__ */ jsx("div", { className: estimateCostTimeCell, children: /* @__PURE__ */ jsx(CustomUnitInput, { defaultTimeUnit, iteration, setIteration, timeUnits }) }) })
-        ] }) }) : null,
-        /* @__PURE__ */ jsx("tbody", { children: Children.map(children, (child, index) => isValidElement(child) ? cloneElement(child, {
-          discount: discount && !child.props.discount ? discount : child.props.discount,
-          isLastElement: index === Children.count(children) - 1,
-          iteration,
-          productsCallback
-        }) : child) })
-      ] }) : null,
-      !hideTotal ? /* @__PURE__ */ jsxs("table", { cellPadding: "0", cellSpacing: "0", className: estimateCostEmptyTable, children: [
-        /* @__PURE__ */ jsxs("colgroup", { children: [
-          /* @__PURE__ */ jsx("col", {}),
-          /* @__PURE__ */ jsx("col", { className: estimateCostPriceColumn })
-        ] }),
-        /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("td", { "aria-label": "control", className: estimateCostEmptyCell }),
-          /* @__PURE__ */ jsxs("td", { className: `${estimateCostCell({
-            hasBorder: false,
-            primary: false
-          })} ${estimateCostTotalPriceCell}`, style: assignInlineVars({
-            [paddingLeftCell]: `16px`
-          }), children: [
-            isBeta ? /* @__PURE__ */ jsx(Badge, { className: estimateCostBadgeBeta[locales[`estimate.cost.beta.${discount > 0 ? "discount" : "free"}`].length > 25 ? "long" : "short"], prominence: "strong", sentiment: "warning", children: `${discount > 0 ? discount * 100 : ""}
-                          ${locales[`estimate.cost.beta.${discount > 0 ? "discount" : "free"}`]}` }) : null,
-            /* @__PURE__ */ jsx(Text, { as: "h3", className: estimateCostText[isBeta ? "beta" : "notBeta"], sentiment: "primary", variant: "heading", children: /* @__PURE__ */ jsxs(LineThrough, { isActive: isBeta && (discount === 0 || discount >= 1), children: [
-              totalValue,
-              totalPrice.maxTotal > 0 ? ` - ${totalMaxValue}` : null
-            ] }) }),
-            hideHourlyPriceOnTotal && totalPrice.hourly > 0 && totalPrice.hourly !== totalPrice.total && totalPrice.total > 0 ? /* @__PURE__ */ jsx(Text, { as: "p", placement: "right", variant: "body", children: /* @__PURE__ */ jsxs(LineThrough, { isActive: isBeta && (discount === 0 || discount >= 1), children: [
-              formatNumber(totalPrice.hourly, {
-                maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong.hours : maximumFractionDigits.hours
-              }),
-              totalPrice.maxHourly > 0 ? ` - ${formatNumber(totalPrice.maxHourly, {
-                maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong.hours : maximumFractionDigits.hours
-              })}` : null,
-              "/",
-              locales[`estimate.cost.units.hours.label`].toLowerCase()
-            ] }) }) : null
-          ] })
-        ] }) })
-      ] }) : null,
+      children ? /* @__PURE__ */ jsxs(
+        "table",
+        {
+          cellPadding: "0",
+          cellSpacing: "0",
+          className: estimateCostTable[hideTotal ? "noTotal" : "total"],
+          "data-testid": "summary",
+          ref,
+          children: [
+            /* @__PURE__ */ jsxs("colgroup", { children: [
+              /* @__PURE__ */ jsx("col", {}),
+              /* @__PURE__ */ jsx("col", { className: estimateCostPriceColumn })
+            ] }),
+            !hideTimeUnit ? /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx(TitleComponent, { locales }) }),
+              /* @__PURE__ */ jsx(
+                "th",
+                {
+                  className: `${estimateCostPriceCellContent} ${estimateCostPriceCell}`,
+                  children: /* @__PURE__ */ jsx("div", { className: estimateCostTimeCell, children: /* @__PURE__ */ jsx(
+                    CustomUnitInput,
+                    {
+                      defaultTimeUnit,
+                      iteration,
+                      setIteration,
+                      timeUnits
+                    }
+                  ) })
+                }
+              )
+            ] }) }) : null,
+            /* @__PURE__ */ jsx("tbody", { children: Children.map(
+              children,
+              (child, index) => isValidElement(child) ? cloneElement(child, {
+                discount: discount && !child.props.discount ? discount : child.props.discount,
+                isLastElement: index === Children.count(children) - 1,
+                iteration,
+                productsCallback
+              }) : child
+            ) })
+          ]
+        }
+      ) : null,
+      !hideTotal ? /* @__PURE__ */ jsxs(
+        "table",
+        {
+          cellPadding: "0",
+          cellSpacing: "0",
+          className: estimateCostEmptyTable,
+          children: [
+            /* @__PURE__ */ jsxs("colgroup", { children: [
+              /* @__PURE__ */ jsx("col", {}),
+              /* @__PURE__ */ jsx("col", { className: estimateCostPriceColumn })
+            ] }),
+            /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("td", { "aria-label": "control", className: estimateCostEmptyCell }),
+              /* @__PURE__ */ jsxs(
+                "td",
+                {
+                  className: `${estimateCostCell({ hasBorder: false, primary: false })} ${estimateCostTotalPriceCell}`,
+                  style: assignInlineVars({
+                    [paddingLeftCell]: `16px`
+                  }),
+                  children: [
+                    isBeta ? /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        className: estimateCostBadgeBeta[locales[`estimate.cost.beta.${discount > 0 ? "discount" : "free"}`].length > 25 ? "long" : "short"],
+                        prominence: "strong",
+                        sentiment: "warning",
+                        children: `${discount > 0 ? discount * 100 : ""}
+                          ${locales[`estimate.cost.beta.${discount > 0 ? "discount" : "free"}`]}`
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        as: "h3",
+                        className: estimateCostText[isBeta ? "beta" : "notBeta"],
+                        sentiment: "primary",
+                        variant: "heading",
+                        children: /* @__PURE__ */ jsxs(
+                          LineThrough,
+                          {
+                            isActive: isBeta && (discount === 0 || discount >= 1),
+                            children: [
+                              totalValue,
+                              totalPrice.maxTotal > 0 ? ` - ${totalMaxValue}` : null
+                            ]
+                          }
+                        )
+                      }
+                    ),
+                    hideHourlyPriceOnTotal && totalPrice.hourly > 0 && totalPrice.hourly !== totalPrice.total && totalPrice.total > 0 ? /* @__PURE__ */ jsx(Text, { as: "p", placement: "right", variant: "body", children: /* @__PURE__ */ jsxs(
+                      LineThrough,
+                      {
+                        isActive: isBeta && (discount === 0 || discount >= 1),
+                        children: [
+                          formatNumber(totalPrice.hourly, {
+                            maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong.hours : maximumFractionDigits.hours
+                          }),
+                          totalPrice.maxHourly > 0 ? ` - ${formatNumber(totalPrice.maxHourly, {
+                            maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong.hours : maximumFractionDigits.hours
+                          })}` : null,
+                          "/",
+                          locales[`estimate.cost.units.hours.label`].toLowerCase()
+                        ]
+                      }
+                    ) }) : null
+                  ]
+                }
+              )
+            ] }) })
+          ]
+        }
+      ) : null,
       commitmentFees !== void 0 || monthlyFees !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Text, { as: "h3", className: estimatecostFeesText, variant: "headingSmall", children: locales[`estimate.cost.fees.${commitmentFees ? "oneTime" : "monthly"}.title`] }),
-        /* @__PURE__ */ jsx("table", { className: estimateCostFeesTable, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(Item, { isLastElement: true, label: commitmentFees ? locales["estimate.cost.fees.commitment"] : monthlyFeesLabel, noIteration: true, price: commitmentFees || monthlyFees, productsCallback: {
-          add: () => {
-          },
-          remove: () => {
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "h3",
+            className: estimatecostFeesText,
+            variant: "headingSmall",
+            children: locales[`estimate.cost.fees.${commitmentFees ? "oneTime" : "monthly"}.title`]
+          }
+        ),
+        /* @__PURE__ */ jsx("table", { className: estimateCostFeesTable, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(
+          Item,
+          {
+            isLastElement: true,
+            label: commitmentFees ? locales["estimate.cost.fees.commitment"] : monthlyFeesLabel,
+            noIteration: true,
+            price: commitmentFees || monthlyFees,
+            productsCallback: {
+              add: () => {
+              },
+              remove: () => {
+              }
+            },
+            children: commitmentFees ? commitmentFeesContent : monthlyFeesContent
           }
-        }, children: commitmentFees ? commitmentFeesContent : monthlyFeesContent }) }) })
+        ) }) })
       ] }) : null
     ] }) })
   ] });

package/dist/components/EstimateCost/EstimateCostProvider.d.ts

@@ -21,5 +21,5 @@ type FormatNumberOption = {
     minimumSignificantDigits?: number;
     maximumSignificantDigits?: number;
 };
-export declare const EstimateCostProvider: ({ children, locales, currency, numberLocales, }: EstimateCostProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const EstimateCostProvider: ({ children, locales, currency, numberLocales, }: EstimateCostProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/EstimateCost/EstimateCostProvider.js

@@ -1,11 +1,8 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo, useCallback, createContext, useContext } from "react";
 import EstimateCostLocales from "./locales/en.js";
-const EstimateCostContext = createContext({
-  formatNumber: () => "",
-  locales: EstimateCostLocales
-});
+const EstimateCostContext = createContext({ formatNumber: () => "", locales: EstimateCostLocales });
 const useEstimateCost = () => useContext(EstimateCostContext);
 const EstimateCostProvider = ({
   children,
@@ -13,22 +10,28 @@ const EstimateCostProvider = ({
   currency,
   numberLocales
 }) => {
-  const newLocales = useMemo(() => locales ? {
-    ...EstimateCostLocales,
-    ...locales
-  } : EstimateCostLocales, [locales]);
-  const formatNumber = useCallback((number, options) => {
-    const numberFormat = new Intl.NumberFormat(numberLocales, {
-      currency,
-      style: "currency",
-      ...options
-    });
-    return numberFormat.format(number);
-  }, [currency, numberLocales]);
-  const value = useMemo(() => ({
-    formatNumber,
-    locales: newLocales
-  }), [formatNumber, newLocales]);
+  const newLocales = useMemo(
+    () => locales ? { ...EstimateCostLocales, ...locales } : EstimateCostLocales,
+    [locales]
+  );
+  const formatNumber = useCallback(
+    (number, options) => {
+      const numberFormat = new Intl.NumberFormat(numberLocales, {
+        currency,
+        style: "currency",
+        ...options
+      });
+      return numberFormat.format(number);
+    },
+    [currency, numberLocales]
+  );
+  const value = useMemo(
+    () => ({
+      formatNumber,
+      locales: newLocales
+    }),
+    [formatNumber, newLocales]
+  );
   return /* @__PURE__ */ jsx(EstimateCostContext.Provider, { value, children });
 };
 export {

package/dist/components/EstimateCost/OverlayComponent.d.ts

@@ -22,5 +22,5 @@ type OverlayComponentProps = {
     };
     overlayMargin?: string;
 };
-export declare const OverlayComponent: ({ children, inView, discount, OverlayRight, disableOverlayRight, OverlayLeft, disableOverlayLeft, totalPrice, unit, isBeta, overlayMargin, }: OverlayComponentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OverlayComponent: ({ children, inView, discount, OverlayRight, disableOverlayRight, OverlayLeft, disableOverlayLeft, totalPrice, unit, isBeta, overlayMargin, }: OverlayComponentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/EstimateCost/OverlayComponent.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CalculatorIcon } from "@ultraviolet/icons";
 import { Stack, Badge } from "@ultraviolet/ui";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -24,13 +24,8 @@ const OverlayComponent = ({
   isBeta = false,
   overlayMargin
 }) => {
-  const {
-    locales,
-    formatNumber
-  } = useEstimateCost();
-  const value = useMemo(() => ({
-    isOverlay: true
-  }), []);
+  const { locales, formatNumber } = useEstimateCost();
+  const value = useMemo(() => ({ isOverlay: true }), []);
   const totalOverlayPrice = {
     days: totalPrice.maxOverlayHourly * multiplier.days,
     hours: totalPrice.maxOverlayHourly,
@@ -45,40 +40,57 @@ const OverlayComponent = ({
     months: totalPrice.overlayHourly * multiplier.months,
     seconds: totalPrice.overlayHourly * multiplier.seconds
   }[unit];
-  return /* @__PURE__ */ jsx(OverlayContextProvider, { value, children: /* @__PURE__ */ jsx("div", { className: estimateCostOverlayContainer({
-    inView
-  }), "data-testid": "summary-overlay", style: assignInlineVars({
-    [overlayMarginVar]: overlayMargin ?? "0"
-  }), children: /* @__PURE__ */ jsxs("ul", { className: estimateCostList, children: [
-    OverlayLeft ? /* @__PURE__ */ jsx("li", { className: estimateCostSideItem, children: /* @__PURE__ */ jsx(OverlayLeft, { disabled: disableOverlayLeft, children: locales["estimate.cost.submit.label"] }) }) : null,
-    Children.map(children, (child, index) => isValidElement(child) ? cloneElement(child, {
-      isFirstElement: index === 0,
-      isLastElement: index === Children.count(children) - 1
-    }) : null),
-    /* @__PURE__ */ jsxs("li", { className: estimateCostOverlayRow(), children: [
-      /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-        /* @__PURE__ */ jsx(CalculatorIcon, { sentiment: "primary", size: "medium" }),
-        locales["estimate.cost.label"]
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: estimateCostResourceName(), children: [
-        /* @__PURE__ */ jsx(Strong, { variant: "big", children: /* @__PURE__ */ jsxs(LineThrough, { isActive: isBeta && discount === 0, children: [
-          formatNumber(overlayPrice, {
-            maximumFractionDigits: maximumFractionDigits[unit]
-          }),
-          totalOverlayPrice > 0 ? ` - ${formatNumber(totalOverlayPrice, {
-            maximumFractionDigits: maximumFractionDigits[unit]
-          })}` : null,
-          "/",
-          locales[`estimate.cost.units.${unit}.label`]
-        ] }) }),
-        isBeta ? /* @__PURE__ */ jsxs(Badge, { className: estimateCostBadge, prominence: "strong", sentiment: "warning", children: [
-          discount > 0 ? discount * 100 : "",
-          locales[`estimate.cost.beta.${discount > 0 ? "discount" : "free"}`]
-        ] }) : null
+  return /* @__PURE__ */ jsx(OverlayContextProvider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: estimateCostOverlayContainer({ inView }),
+      "data-testid": "summary-overlay",
+      style: assignInlineVars({
+        [overlayMarginVar]: overlayMargin ?? "0"
+      }),
+      children: /* @__PURE__ */ jsxs("ul", { className: estimateCostList, children: [
+        OverlayLeft ? /* @__PURE__ */ jsx("li", { className: estimateCostSideItem, children: /* @__PURE__ */ jsx(OverlayLeft, { disabled: disableOverlayLeft, children: locales["estimate.cost.submit.label"] }) }) : null,
+        Children.map(
+          children,
+          (child, index) => isValidElement(child) ? cloneElement(child, {
+            isFirstElement: index === 0,
+            isLastElement: index === Children.count(children) - 1
+          }) : null
+        ),
+        /* @__PURE__ */ jsxs("li", { className: estimateCostOverlayRow(), children: [
+          /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
+            /* @__PURE__ */ jsx(CalculatorIcon, { sentiment: "primary", size: "medium" }),
+            locales["estimate.cost.label"]
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: estimateCostResourceName(), children: [
+            /* @__PURE__ */ jsx(Strong, { variant: "big", children: /* @__PURE__ */ jsxs(LineThrough, { isActive: isBeta && discount === 0, children: [
+              formatNumber(overlayPrice, {
+                maximumFractionDigits: maximumFractionDigits[unit]
+              }),
+              totalOverlayPrice > 0 ? ` - ${formatNumber(totalOverlayPrice, {
+                maximumFractionDigits: maximumFractionDigits[unit]
+              })}` : null,
+              "/",
+              locales[`estimate.cost.units.${unit}.label`]
+            ] }) }),
+            isBeta ? /* @__PURE__ */ jsxs(
+              Badge,
+              {
+                className: estimateCostBadge,
+                prominence: "strong",
+                sentiment: "warning",
+                children: [
+                  discount > 0 ? discount * 100 : "",
+                  locales[`estimate.cost.beta.${discount > 0 ? "discount" : "free"}`]
+                ]
+              }
+            ) : null
+          ] })
+        ] }),
+        OverlayRight ? /* @__PURE__ */ jsx("li", { className: estimateCostSideItem, children: /* @__PURE__ */ jsx(OverlayRight, { disabled: disableOverlayRight, children: locales["estimate.cost.submit.label"] }) }) : null
       ] })
-    ] }),
-    OverlayRight ? /* @__PURE__ */ jsx("li", { className: estimateCostSideItem, children: /* @__PURE__ */ jsx(OverlayRight, { disabled: disableOverlayRight, children: locales["estimate.cost.submit.label"] }) }) : null
-  ] }) }) });
+    }
+  ) });
 };
 export {
   OverlayComponent

package/dist/components/EstimateCost/OverlayContext.d.ts

@@ -8,5 +8,5 @@ type OverlayContextProviderProps = {
         isOverlay: boolean;
     };
 };
-export declare const OverlayContextProvider: ({ children, value, }: OverlayContextProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OverlayContextProvider: ({ children, value, }: OverlayContextProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};