@ultraviolet/plus 0.14.4 → 0.15.1

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

@@ -0,0 +1,154 @@
+import type { ReactNode } from 'react';
+import type { EstimateCostProps } from './types';
+declare const EstimateCost: {
+    ({ description, alert, alertTitle, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, discount, OverlayRight, OverlayLeft, overlayMargin, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, numberLocales, currency, }: EstimateCostProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    LineThrough: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    } & {
+        isActive?: boolean | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+    Item: ({ discount, priceText, discountText, label, tooltipInfo, subLabel, price: basePrice, monthlyPrice, unit: baseUnit, amount: currentAmount, onAmountChange, amountFree, maxAmount, longFractionDigits, noIteration, noIterationText, noBorder, noPrice, isDefined, children, isFirstElement, isLastElement, isPrimaryBackground, productsCallback, iteration: receivedIteration, shouldBeHidden, hideFromOverlay, textNotDefined, animated, tabulation, labelTextVariant, labelTextProminence, notice, }: {
+        amount?: number | undefined;
+        amountFree?: number | undefined;
+        animated?: boolean | undefined;
+        children?: ReactNode;
+        discount?: number | undefined;
+        discountText?: string | undefined;
+        hideFromOverlay?: boolean | undefined;
+        isDefined?: boolean | undefined;
+        isFirstElement?: boolean | undefined;
+        isLastElement?: boolean | undefined;
+        isPrimaryBackground?: boolean | undefined;
+        iteration?: import("./types").Iteration | undefined;
+        label?: ReactNode;
+        labelTextVariant?: "body" | "caption" | "code" | "heading" | "bodySmall" | "bodySmallStrong" | "bodySmallStronger" | "bodyStrong" | "bodyStronger" | "captionSmall" | "captionSmallStrong" | "captionSmallStronger" | "captionStrong" | "captionStronger" | "codeStrong" | "codeStronger" | "headingLarge" | "headingLargeStrong" | "headingLargeStronger" | "headingSmall" | "headingSmallStrong" | "headingSmallStronger" | "headingStrong" | "headingStronger" | undefined;
+        labelTextProminence?: "strong" | "weak" | "default" | "stronger" | undefined;
+        longFractionDigits?: boolean | undefined;
+        maxAmount?: number | undefined;
+        monthlyPrice?: number | undefined;
+        noBorder?: boolean | undefined;
+        noIteration?: boolean | undefined;
+        noIterationText?: string | undefined;
+        noPrice?: boolean | undefined;
+        notice?: string | undefined;
+        onAmountChange?: ((amount: number) => void) | undefined;
+        price?: number | undefined;
+        priceText?: ReactNode;
+        productsCallback?: {
+            add: (product: import("./types").EstimateProduct) => void;
+            remove: (product: import("./types").BareEstimateProduct) => void;
+        } | undefined;
+        shouldBeHidden?: boolean | undefined;
+        subLabel?: string | undefined;
+        tabulation?: number | undefined;
+        textNotDefined?: string | undefined;
+        tooltipInfo?: string | undefined;
+        unit?: (string & {}) | "seconds" | "minutes" | "hours" | "days" | "months" | "mb" | "gb" | "tb" | "years" | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    NumberInput: ({ amount, minValue, maxValue, getAmountValue, itemCallback, }: {
+        amount?: number | undefined;
+        itemCallback?: ((amount?: number | null | undefined, isVariant?: boolean | undefined) => void) | undefined;
+        getAmountValue?: ((amount?: number | null | undefined) => void) | undefined;
+        minValue?: number | undefined;
+        maxValue?: number | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Unit: ({ amount, itemCallback, getAmountValue, unit, }: {
+        amount?: number | undefined;
+        itemCallback?: ((amount?: number | undefined, isVariant?: boolean | undefined) => void) | undefined;
+        getAmountValue?: ((amount?: number | undefined) => void) | undefined;
+        unit?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Strong: ({ variant, children, isDisabledOnOverlay, }: {
+        variant?: "big" | "small" | "normal" | "capitalized" | undefined;
+        children?: ReactNode;
+        isDisabledOnOverlay?: boolean | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Regular: ({ variant, isDisabledOnOverlay, children, className, }: {
+        variant?: "big" | "small" | "normal" | "capitalized" | undefined;
+        isDisabledOnOverlay?: boolean | undefined;
+        children?: ReactNode;
+        className?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+    Image: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    Region: ({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, hideFromOverlay, }: {
+        shouldBeHidden?: boolean | undefined;
+        priceText?: ReactNode;
+        animated?: boolean | undefined;
+        isFirstElement?: boolean | undefined;
+        isLastElement?: boolean | undefined;
+        productsCallback?: {
+            add: (product: import("./types").EstimateProduct) => void;
+            remove: (product: import("./types").BareEstimateProduct) => void;
+        } | undefined;
+        iteration?: import("./types").Iteration | undefined;
+        discount?: number | undefined;
+        label: string;
+        image: string;
+        noBorder?: boolean | undefined;
+        noPrice?: boolean | undefined;
+    } & Pick<{
+        amount?: number | undefined;
+        amountFree?: number | undefined;
+        animated?: boolean | undefined;
+        children?: ReactNode;
+        discount?: number | undefined;
+        discountText?: string | undefined;
+        hideFromOverlay?: boolean | undefined;
+        isDefined?: boolean | undefined;
+        isFirstElement?: boolean | undefined;
+        isLastElement?: boolean | undefined;
+        isPrimaryBackground?: boolean | undefined;
+        iteration?: import("./types").Iteration | undefined;
+        label?: ReactNode;
+        labelTextVariant?: "body" | "caption" | "code" | "heading" | "bodySmall" | "bodySmallStrong" | "bodySmallStronger" | "bodyStrong" | "bodyStronger" | "captionSmall" | "captionSmallStrong" | "captionSmallStronger" | "captionStrong" | "captionStronger" | "codeStrong" | "codeStronger" | "headingLarge" | "headingLargeStrong" | "headingLargeStronger" | "headingSmall" | "headingSmallStrong" | "headingSmallStronger" | "headingStrong" | "headingStronger" | undefined;
+        labelTextProminence?: "strong" | "weak" | "default" | "stronger" | undefined;
+        longFractionDigits?: boolean | undefined;
+        maxAmount?: number | undefined;
+        monthlyPrice?: number | undefined;
+        noBorder?: boolean | undefined;
+        noIteration?: boolean | undefined;
+        noIterationText?: string | undefined;
+        noPrice?: boolean | undefined;
+        notice?: string | undefined;
+        onAmountChange?: ((amount: number) => void) | undefined;
+        price?: number | undefined;
+        priceText?: ReactNode;
+        productsCallback?: {
+            add: (product: import("./types").EstimateProduct) => void;
+            remove: (product: import("./types").BareEstimateProduct) => void;
+        } | undefined;
+        shouldBeHidden?: boolean | undefined;
+        subLabel?: string | undefined;
+        tabulation?: number | undefined;
+        textNotDefined?: string | undefined;
+        tooltipInfo?: string | undefined;
+        unit?: (string & {}) | "seconds" | "minutes" | "hours" | "days" | "months" | "mb" | "gb" | "tb" | "years" | undefined;
+    }, "hideFromOverlay">) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Zone: ({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, }: {
+        shouldBeHidden?: boolean | undefined;
+        priceText?: string | undefined;
+        animated?: boolean | undefined;
+        isFirstElement?: boolean | undefined;
+        isLastElement?: boolean | undefined;
+        productsCallback?: {
+            add: (product: import("./types").EstimateProduct) => void;
+            remove: (product: import("./types").BareEstimateProduct) => void;
+        } | undefined;
+        iteration?: import("./types").Iteration | undefined;
+        discount?: number | undefined;
+        label: string;
+        image: string;
+        noBorder?: boolean | undefined;
+        noPrice?: boolean | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Ellipsis: ({ children, maxWidth, "data-testid": dataTestId, }: {
+        children: ReactNode;
+        maxWidth?: number;
+        'data-testid'?: string;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export { EstimateCost };

package/dist/components/EstimateCost/EstimateCost.js

@@ -0,0 +1,125 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Text } from "@ultraviolet/ui";
+import { Children } from "react";
+import { Item } from "./Components/Item.js";
+import { LineThrough } from "./Components/LineThrough.js";
+import { NumberInput } from "./Components/NumberInput.js";
+import { Region } from "./Components/Region.js";
+import { Regular } from "./Components/Regular.js";
+import { Strong } from "./Components/Strong.js";
+import { Unit } from "./Components/Unit.js";
+import { Zone } from "./Components/Zone.js";
+import { EstimateCostContent } from "./EstimateCostContent.js";
+import { EstimateCostProvider } from "./EstimateCostProvider.js";
+import { useOverlay } from "./OverlayContext.js";
+import EstimateCostLocales from "./locales/en.js";
+const MaxWidthText = styled(Text)`
+  max-width: ${({ maxWidth }) => maxWidth}px;
+`;
+const DEFAULT_UNIT_LIST = ["hours", "days", "months"];
+const EstimateCost = ({
+  description,
+  alert,
+  alertTitle,
+  alertVariant = "warning",
+  defaultTimeUnit = "hours",
+  timeUnits = DEFAULT_UNIT_LIST,
+  hideOverlay = false,
+  disableOverlayLeft = false,
+  disableOverlayRight = false,
+  hideTimeUnit = false,
+  hideTotal = false,
+  discount = 0,
+  OverlayRight,
+  OverlayLeft,
+  overlayMargin,
+  isBeta = false,
+  commitmentFees,
+  commitmentFeesContent,
+  monthlyFees,
+  monthlyFeesLabel,
+  monthlyFeesContent,
+  overlayUnit = "hours",
+  children = null,
+  locales = EstimateCostLocales,
+  numberLocales = "en-EN",
+  currency = "EUR"
+}) => /* @__PURE__ */ jsx(
+  EstimateCostProvider,
+  {
+    locales,
+    currency,
+    numberLocales,
+    children: /* @__PURE__ */ jsx(
+      EstimateCostContent,
+      {
+        description,
+        alert,
+        alertTitle,
+        alertVariant,
+        defaultTimeUnit,
+        timeUnits,
+        hideOverlay,
+        disableOverlayLeft,
+        disableOverlayRight,
+        hideTimeUnit,
+        hideTotal,
+        discount,
+        OverlayRight,
+        OverlayLeft,
+        isBeta,
+        commitmentFees,
+        commitmentFeesContent,
+        monthlyFees,
+        monthlyFeesLabel,
+        monthlyFeesContent,
+        overlayUnit,
+        locales,
+        overlayMargin,
+        children
+      }
+    )
+  }
+);
+EstimateCost.LineThrough = LineThrough;
+EstimateCost.Item = Item;
+EstimateCost.NumberInput = NumberInput;
+EstimateCost.Unit = Unit;
+EstimateCost.Strong = Strong;
+EstimateCost.Regular = Regular;
+EstimateCost.Image = styled.img`
+  width: 15px;
+  margin-right: ${({ theme }) => theme.space["1"]};
+`;
+EstimateCost.Region = Region;
+EstimateCost.Zone = Zone;
+const Ellipsis = ({
+  children,
+  maxWidth = 350,
+  "data-testid": dataTestId
+}) => {
+  const { isOverlay } = useOverlay();
+  const text = Children.toArray(children).join("").toString();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { display: !isOverlay ? "inline-flex" : void 0 },
+      "data-testid": dataTestId,
+      children: /* @__PURE__ */ jsx(
+        MaxWidthText,
+        {
+          as: "p",
+          oneLine: true,
+          variant: "bodyStrong",
+          maxWidth: isOverlay ? 200 : maxWidth,
+          children: text
+        }
+      )
+    }
+  );
+};
+EstimateCost.Ellipsis = Ellipsis;
+export {
+  EstimateCost
+};

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

@@ -0,0 +1,2 @@
+import type { EstimateCostProps } from './types';
+export declare const EstimateCostContent: ({ description, alert, alertTitle, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, hideHourlyPriceOnTotal, discount, OverlayRight, OverlayLeft, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, overlayMargin, }: EstimateCostProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/EstimateCost/EstimateCostContent.js

@@ -0,0 +1,303 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Text, Icon, Stack, Alert } from "@ultraviolet/ui";
+import { useState, useMemo, useEffect, Children, isValidElement, cloneElement } from "react";
+import { useInView } from "react-intersection-observer";
+import { CustomUnitInput } from "./Components/CustomUnitInput.js";
+import { Item } from "./Components/Item.js";
+import { LineThrough } from "./Components/LineThrough.js";
+import { useEstimateCost } from "./EstimateCostProvider.js";
+import { OverlayComponent } from "./OverlayComponent.js";
+import { OverlayContextProvider } from "./OverlayContext.js";
+import { Cell, PriceCell, StyledTable, PriceCol, Title, TimeCell, EmptyTable, EmptyCell, TotalPriceCell, BadgeBeta, StyledFeesTable } from "./componentStyle.js";
+import { maximumFractionDigitsLong, maximumFractionDigits } from "./constants.js";
+import { calculatePrice } from "./helper.js";
+import EstimateCostLocales from "./locales/en.js";
+const FeesText = styled(Text)`
+  margin-top: ${({ theme }) => theme.space["3"]};
+`;
+const StyledText = styled(Text)`
+  text-align: right;
+  ${({ isBeta, theme }) => isBeta ? `margin-left: ${theme.space["2"]};` : null}
+`;
+const RightAlignedText = styled(Text)`
+  text-align: right;
+`;
+const StyledIcon = styled(Icon)`
+  margin-right: ${({ theme }) => theme.space["1"]};
+`;
+const StyledPriceCell = styled(Cell.withComponent("th"))`
+  ${({ theme }) => PriceCell(theme)}
+  padding: 0;
+`;
+const DEFAULT_UNIT_LIST = ["hours", "days", "months"];
+const DescriptionComponent = ({
+  description,
+  locales
+}) => description === void 0 || typeof description === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "body", children: description || locales["estimate.cost.description"] }) : description;
+const EstimateCostContent = ({
+  description,
+  alert,
+  alertTitle,
+  alertVariant = "warning",
+  defaultTimeUnit = "hours",
+  timeUnits = DEFAULT_UNIT_LIST,
+  hideOverlay = false,
+  disableOverlayLeft = false,
+  disableOverlayRight = false,
+  hideTimeUnit = false,
+  hideTotal = false,
+  hideHourlyPriceOnTotal = false,
+  discount = 0,
+  OverlayRight,
+  OverlayLeft,
+  isBeta = false,
+  commitmentFees,
+  commitmentFeesContent,
+  monthlyFees,
+  monthlyFeesLabel,
+  monthlyFeesContent,
+  overlayUnit = "hours",
+  children = null,
+  locales = EstimateCostLocales,
+  overlayMargin
+}) => {
+  const { formatNumber } = useEstimateCost();
+  const [ref, inView] = useInView();
+  const [products, setProducts] = useState([]);
+  const [totalPrice, setTotalPrice] = useState({
+    overlayHourly: 0,
+    maxOverlayHourly: 0,
+    hourly: 0,
+    maxHourly: 0,
+    total: 0,
+    maxTotal: 0
+  });
+  const [iteration, setIteration] = useState({
+    value: 1,
+    unit: defaultTimeUnit ?? "hours"
+  });
+  const [isLongFractionDigits, setIsLongFractionDigits] = useState(false);
+  const providerValue = useMemo(() => ({ isOverlay: false }), []);
+  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)
+    );
+    setTotalPrice({
+      total: !hideTotal ? products.reduce(
+        (acc, product) => acc + calculatePrice({
+          price: product.price,
+          amount: product.amount,
+          amountFree: product.amountFree,
+          timeUnit: product.noIteration ? "hours" : iteration.unit,
+          timeAmount: product.noIteration ? 1 : iteration.value,
+          discount: product.discount
+        }),
+        0
+      ) : 0,
+      maxTotal: isMaxAmountInProducts ? products.reduce(
+        (acc, product) => acc + calculatePrice({
+          price: product.price,
+          amount: product.maxAmount || product.amount,
+          // Not all products have maxAmount, so we need to check both
+          amountFree: product.amountFree,
+          timeUnit: product.noIteration ? "hours" : iteration.unit,
+          timeAmount: product.noIteration ? 1 : iteration.value,
+          discount: product.discount
+        }),
+        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,
+      overlayHourly: products.reduce(
+        (acc, product) => acc + (product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.amount - product.amountFree, 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
+    });
+  }, [hideTotal, products, iteration, setTotalPrice]);
+  useEffect(() => {
+    if (hideTimeUnit && (iteration.value > 1 || iteration.unit !== (defaultTimeUnit ?? "hours"))) {
+      setIteration({ unit: defaultTimeUnit ?? "hours", value: 1 });
+    }
+  }, [hideTimeUnit, iteration, defaultTimeUnit]);
+  return /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+    !hideOverlay ? /* @__PURE__ */ jsx(
+      OverlayComponent,
+      {
+        inView,
+        totalPrice,
+        disableOverlayLeft,
+        disableOverlayRight,
+        OverlayLeft,
+        OverlayRight,
+        isBeta,
+        discount,
+        unit: overlayUnit ?? "hours",
+        overlayMargin,
+        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(
+        StyledTable,
+        {
+          cellPadding: "0",
+          cellSpacing: "0",
+          ref,
+          "data-testid": "summary",
+          noTotal: hideTotal,
+          children: [
+            /* @__PURE__ */ jsxs("colgroup", { children: [
+              /* @__PURE__ */ jsx("col", {}),
+              /* @__PURE__ */ jsx(PriceCol, {})
+            ] }),
+            !hideTimeUnit ? /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsxs(Title, { children: [
+                /* @__PURE__ */ jsx(
+                  StyledIcon,
+                  {
+                    name: "calculator",
+                    color: "primary",
+                    size: 20
+                  }
+                ),
+                locales["estimate.cost.label"]
+              ] }) }),
+              /* @__PURE__ */ jsx(StyledPriceCell, { children: /* @__PURE__ */ jsx(TimeCell, { children: /* @__PURE__ */ jsx(
+                CustomUnitInput,
+                {
+                  defaultTimeUnit,
+                  setIteration,
+                  iteration,
+                  timeUnits
+                }
+              ) }) })
+            ] }) }) : null,
+            /* @__PURE__ */ jsx("tbody", { children: Children.map(
+              children,
+              (child, index) => isValidElement(child) ? cloneElement(child, {
+                isLastElement: index === Children.count(children) - 1,
+                productsCallback,
+                iteration,
+                discount: discount && !child.props.discount ? discount : child.props.discount
+              }) : child
+            ) })
+          ]
+        }
+      ) : null,
+      !hideTotal ? /* @__PURE__ */ jsxs(EmptyTable, { cellPadding: "0", cellSpacing: "0", children: [
+        /* @__PURE__ */ jsxs("colgroup", { children: [
+          /* @__PURE__ */ jsx("col", {}),
+          /* @__PURE__ */ jsx(PriceCol, {})
+        ] }),
+        /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx(EmptyCell, { "aria-label": "control" }),
+          /* @__PURE__ */ jsxs(TotalPriceCell, { hasBorder: false, children: [
+            isBeta ? /* @__PURE__ */ jsx(
+              BadgeBeta,
+              {
+                prominence: "strong",
+                long: locales[`estimate.cost.beta.${discount > 0 ? "discount" : "free"}`].length > 25,
+                sentiment: "warning",
+                children: `${discount > 0 ? discount * 100 : ""}
+                          ${locales[`estimate.cost.beta.${discount > 0 ? "discount" : "free"}`]}`
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              StyledText,
+              {
+                as: "h3",
+                variant: "heading",
+                color: "primary",
+                isBeta,
+                children: /* @__PURE__ */ jsxs(
+                  LineThrough,
+                  {
+                    isActive: isBeta && (discount === 0 || discount >= 1),
+                    children: [
+                      formatNumber(totalPrice.total, {
+                        maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong[iteration.unit] : maximumFractionDigits[iteration.unit]
+                      }),
+                      totalPrice.maxTotal > 0 ? ` - ${formatNumber(totalPrice.maxTotal, {
+                        maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong[iteration.unit] : maximumFractionDigits[iteration.unit]
+                      })}` : null
+                    ]
+                  }
+                )
+              }
+            ),
+            hideHourlyPriceOnTotal && totalPrice.hourly > 0 && totalPrice.hourly !== totalPrice.total && totalPrice.total > 0 ? /* @__PURE__ */ jsx(RightAlignedText, { as: "p", 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(FeesText, { as: "h3", variant: "headingSmall", children: locales[`estimate.cost.fees.${commitmentFees ? "oneTime" : "monthly"}.title`] }),
+        /* @__PURE__ */ jsx(StyledFeesTable, { children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(
+          Item,
+          {
+            label: commitmentFees ? locales["estimate.cost.fees.commitment"] : monthlyFeesLabel,
+            noIteration: true,
+            isLastElement: true,
+            price: commitmentFees || monthlyFees,
+            productsCallback: {
+              add: () => {
+              },
+              remove: () => {
+              }
+            },
+            children: commitmentFees ? commitmentFeesContent : monthlyFeesContent
+          }
+        ) }) })
+      ] }) : null
+    ] }) })
+  ] });
+};
+export {
+  EstimateCostContent
+};

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import EstimateCostLocales from './locales/en';
+export declare const useEstimateCost: () => {
+    locales: typeof EstimateCostLocales;
+    formatNumber: (number: number, options: FormatNumberOption) => string;
+};
+type EstimateCostProviderProps = {
+    children: ReactNode;
+    locales?: typeof EstimateCostLocales;
+    currency?: string;
+    numberLocales?: string;
+};
+type FormatNumberOption = {
+    currencyDisplay?: 'symbol' | 'code' | 'name';
+    unit?: string;
+    unitDisplay?: 'long' | 'short' | 'narrow';
+    useGrouping?: boolean;
+    minimumIntegerDigits?: number;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    minimumSignificantDigits?: number;
+    maximumSignificantDigits?: number;
+};
+export declare const EstimateCostProvider: ({ children, locales, currency, numberLocales, }: EstimateCostProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EstimateCost/EstimateCostProvider.js

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

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { Units } from './types';
+type OverlayComponentProps = {
+    children: ReactNode;
+    disableOverlayLeft?: boolean;
+    disableOverlayRight?: boolean;
+    discount?: number;
+    inView?: boolean;
+    isBeta?: boolean;
+    unit: Units;
+    OverlayLeft?: (props: {
+        children: ReactNode;
+        disabled?: boolean;
+    }) => JSX.Element;
+    OverlayRight?: (props: {
+        children?: ReactNode;
+        disabled?: boolean;
+    }) => JSX.Element;
+    totalPrice: {
+        maxOverlayHourly: number;
+        overlayHourly: number;
+    };
+    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 {};