@ultraviolet/plus 0.4.10 → 0.5.1

package/dist/src/components/EstimateCost/Components/Zone.js

@@ -0,0 +1,50 @@
+import _styled from '@emotion/styled/base';
+import { useEstimateCost } from '../EstimateCostProvider.js';
+import { Item } from './Item.js';
+import { Strong } from './Strong.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const StyledImage = /*#__PURE__*/_styled("img", {
+  target: "e24b3x10"
+})("width:15px;margin-right:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";");
+const Zone = _ref2 => {
+  let {
+    label,
+    image,
+    shouldBeHidden = false,
+    priceText,
+    animated = false,
+    isFirstElement,
+    isLastElement,
+    productsCallback,
+    iteration,
+    discount
+  } = _ref2;
+  const {
+    locales
+  } = useEstimateCost();
+  return jsx(Item, {
+    label: locales['estimate.cost.az.label'],
+    shouldBeHidden: shouldBeHidden,
+    priceText: priceText,
+    animated: animated,
+    isFirstElement: isFirstElement,
+    isLastElement: isLastElement,
+    productsCallback: productsCallback,
+    iteration: iteration,
+    discount: discount,
+    children: jsxs(Strong, {
+      children: [jsx(StyledImage, {
+        alt: label,
+        src: image
+      }), label]
+    })
+  });
+};
+
+export { Zone };

package/dist/src/components/EstimateCost/EstimateCost.js

@@ -0,0 +1,126 @@
+import _styled from '@emotion/styled/base';
+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';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const MaxWidthText = /*#__PURE__*/_styled(Text, {
+  target: "e13v5qur1"
+})("max-width:", _ref => {
+  let {
+    maxWidth
+  } = _ref;
+  return maxWidth;
+}, "px;");
+const DEFAULT_UNIT_LIST = ['hours', 'days', 'months'];
+const EstimateCost = _ref2 => {
+  let {
+    description,
+    alert,
+    alertVariant = 'warning',
+    defaultTimeUnit = 'hours',
+    timeUnits = DEFAULT_UNIT_LIST,
+    hideOverlay = false,
+    disableOverlayLeft = false,
+    disableOverlayRight = false,
+    hideTimeUnit = false,
+    hideTotal = false,
+    discount = 0,
+    OverlayRight,
+    OverlayLeft,
+    isBeta = false,
+    commitmentFees,
+    commitmentFeesContent,
+    monthlyFees,
+    monthlyFeesLabel,
+    monthlyFeesContent,
+    overlayUnit = 'hours',
+    children = null,
+    locales = EstimateCostLocales,
+    numberLocales = 'en-EN',
+    currency = 'EUR'
+  } = _ref2;
+  return jsx(EstimateCostProvider, {
+    locales: locales,
+    currency: currency,
+    numberLocales: numberLocales,
+    children: jsx(EstimateCostContent, {
+      description: description,
+      alert: alert,
+      alertVariant: alertVariant,
+      defaultTimeUnit: defaultTimeUnit,
+      timeUnits: timeUnits,
+      hideOverlay: hideOverlay,
+      disableOverlayLeft: disableOverlayLeft,
+      disableOverlayRight: disableOverlayRight,
+      hideTimeUnit: hideTimeUnit,
+      hideTotal: hideTotal,
+      discount: discount,
+      OverlayRight: OverlayRight,
+      OverlayLeft: OverlayLeft,
+      isBeta: isBeta,
+      commitmentFees: commitmentFees,
+      commitmentFeesContent: commitmentFeesContent,
+      monthlyFees: monthlyFees,
+      monthlyFeesLabel: monthlyFeesLabel,
+      monthlyFeesContent: monthlyFeesContent,
+      overlayUnit: overlayUnit,
+      locales: locales,
+      children: children
+    })
+  });
+};
+EstimateCost.LineThrough = LineThrough;
+EstimateCost.Item = Item;
+EstimateCost.NumberInput = NumberInput;
+EstimateCost.Unit = Unit;
+EstimateCost.Strong = Strong;
+EstimateCost.Regular = Regular;
+EstimateCost.Image = /*#__PURE__*/_styled("img", {
+  target: "e13v5qur0"
+})("width:15px;margin-right:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['1'];
+}, ";");
+EstimateCost.Region = Region;
+EstimateCost.Zone = Zone;
+const Ellipsis = _ref4 => {
+  let {
+    children,
+    maxWidth = 350,
+    'data-testid': dataTestId
+  } = _ref4;
+  const {
+    isOverlay
+  } = useOverlay();
+  const text = Children.toArray(children).join('').toString();
+  return jsx("div", {
+    style: {
+      display: !isOverlay ? 'inline-flex' : undefined
+    },
+    "data-testid": dataTestId,
+    children: jsx(MaxWidthText, {
+      as: "p",
+      oneLine: true,
+      variant: "bodyStrong",
+      maxWidth: isOverlay ? 200 : maxWidth,
+      children: text
+    })
+  });
+};
+EstimateCost.Ellipsis = Ellipsis;
+
+export { EstimateCost };

package/dist/src/components/EstimateCost/EstimateCostContent.js

@@ -0,0 +1,299 @@
+import _styled from '@emotion/styled/base';
+import { Text, Stack, Alert, Icon } from '@ultraviolet/ui';
+import { useState, useMemo, useEffect, Children, cloneElement } from 'react';
+import flattenChildren from 'react-flatten-children';
+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 { StyledTable, PriceCol, Title, TimeCell, EmptyTable, EmptyCell, TotalPriceCell, BadgeBeta, StyledFeesTable, Cell, PriceCell } from './componentStyle.js';
+import { maximumFractionDigitsLong, maximumFractionDigits } from './constants.js';
+import { calculatePrice } from './helper.js';
+import EstimateCostLocales from './locales/en.js';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const FeesText = /*#__PURE__*/_styled(Text, {
+  target: "excc3v74"
+})("margin-top:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['3'];
+}, ";");
+const StyledText = /*#__PURE__*/_styled(Text, {
+  target: "excc3v73"
+})("text-align:right;", _ref2 => {
+  let {
+    isBeta,
+    theme
+  } = _ref2;
+  return isBeta ? `margin-left: ${theme.space['2']};` : null;
+}, ";");
+const RightAlignedText = /*#__PURE__*/_styled(Text, {
+  target: "excc3v72"
+})(process.env.NODE_ENV === "production" ? {
+  name: "2qga7i",
+  styles: "text-align:right"
+} : {
+  name: "2qga7i",
+  styles: "text-align:right",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledIcon = /*#__PURE__*/_styled(Icon, {
+  target: "excc3v71"
+})("margin-right:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['1'];
+}, ";");
+const StyledPriceCell = /*#__PURE__*/_styled(Cell.withComponent('th', {
+  target: "excc3v75"
+}), {
+  target: "excc3v70"
+})(_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return PriceCell(theme);
+}, ";");
+const DEFAULT_UNIT_LIST = ['hours', 'days', 'months'];
+const EstimateCostContent = _ref5 => {
+  let {
+    description,
+    alert,
+    alertVariant = 'warning',
+    defaultTimeUnit = 'hours',
+    timeUnits = DEFAULT_UNIT_LIST,
+    hideOverlay = false,
+    disableOverlayLeft = false,
+    disableOverlayRight = false,
+    hideTimeUnit = false,
+    hideTotal = false,
+    discount = 0,
+    OverlayRight,
+    OverlayLeft,
+    isBeta = false,
+    commitmentFees,
+    commitmentFeesContent,
+    monthlyFees,
+    monthlyFeesLabel,
+    monthlyFeesContent,
+    overlayUnit = 'hours',
+    children = null,
+    locales = EstimateCostLocales
+  } = _ref5;
+  const {
+    formatNumber
+  } = useEstimateCost();
+  const [ref, inView] = useInView();
+  const [products, setProducts] = useState([]); // product is used to store each items with their price and amount
+  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 list = flattenChildren(children);
+  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: _ref6 => {
+      let {
+        id
+      } = _ref6;
+      setProducts(total => total.filter(product => product.id !== id));
+    }
+  }), [setProducts]);
+  useEffect(() => {
+    // this variable check if there is a maxAmount in each product
+    // if not we do not need to calculate maxTotal, maxHourly, maxOverlayHourly
+    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 jsxs(Stack, {
+    gap: 2,
+    children: [!hideOverlay ? jsx(OverlayComponent, {
+      inView: inView,
+      totalPrice: totalPrice,
+      disableOverlayLeft: disableOverlayLeft,
+      disableOverlayRight: disableOverlayRight,
+      OverlayLeft: OverlayLeft,
+      OverlayRight: OverlayRight,
+      isBeta: isBeta,
+      discount: discount,
+      unit: overlayUnit ?? 'hours',
+      children: children
+    }) : null, typeof description === 'string' || !description ? jsx(Text, {
+      as: "span",
+      variant: "body",
+      children: description || locales['estimate.cost.description']
+    }) : description, alert ? jsx(Alert, {
+      sentiment: alertVariant,
+      children: alert
+    }) : null, jsx(OverlayContextProvider, {
+      value: providerValue,
+      children: jsxs("div", {
+        children: [children ? jsxs(StyledTable, {
+          cellPadding: "0",
+          cellSpacing: "0",
+          ref: ref,
+          "data-testid": "summary",
+          noTotal: hideTotal,
+          children: [jsxs("colgroup", {
+            children: [jsx("col", {}), jsx(PriceCol, {})]
+          }), !hideTimeUnit ? jsx("thead", {
+            children: jsxs("tr", {
+              children: [jsx("th", {
+                children: jsxs(Title, {
+                  children: [jsx(StyledIcon, {
+                    name: "calculator",
+                    color: "primary",
+                    size: 20
+                  }), locales['estimate.cost.label']]
+                })
+              }), jsx(StyledPriceCell, {
+                children: jsx(TimeCell, {
+                  children: jsx(CustomUnitInput, {
+                    defaultTimeUnit: defaultTimeUnit,
+                    setIteration: setIteration,
+                    iteration: iteration,
+                    timeUnits: timeUnits
+                  })
+                })
+              })]
+            })
+          }) : null, jsx("tbody", {
+            children: Children.map(list, (child, index) =>
+            
+            /* @ts-expect-error I'm too dumb to understand this sorcery */
+            cloneElement(child, {
+              isLastElement: index === list.length - 1,
+              productsCallback,
+              iteration,
+              discount: discount && !child.props.discount ? discount : child.props.discount
+            }))
+          })]
+        }) : null, !hideTotal ? jsxs(EmptyTable, {
+          cellPadding: "0",
+          cellSpacing: "0",
+          children: [jsxs("colgroup", {
+            children: [jsx("col", {}), jsx(PriceCol, {})]
+          }), jsx("tbody", {
+            children: jsxs("tr", {
+              children: [jsx(EmptyCell, {
+                "aria-label": "control"
+              }), jsxs(TotalPriceCell, {
+                hasBorder: false,
+                children: [isBeta ? jsx(BadgeBeta, {
+                  prominence: "strong",
+                  long: locales[`estimate.cost.beta.${discount > 0 ? 'discount' : 'free'}`].length > 25,
+                  sentiment: "warning",
+                  children: `${discount * 100}
+                          ${locales[`estimate.cost.beta.${discount > 0 ? 'discount' : 'free'}`]}`
+                }) : null, jsx(StyledText, {
+                  as: "h3",
+                  variant: "heading",
+                  color: "primary",
+                  isBeta: isBeta,
+                  children: 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]
+                  })
+                }), totalPrice.hourly > 0 && totalPrice.hourly !== totalPrice.total && totalPrice.total > 0 ? jsx(RightAlignedText, {
+                  as: "p",
+                  variant: "body",
+                  children: 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 !== undefined || monthlyFees !== undefined ? jsxs(Fragment, {
+          children: [jsx(FeesText, {
+            as: "h3",
+            variant: "headingSmall",
+            children: locales[`estimate.cost.fees.${commitmentFees ? 'oneTime' : 'monthly'}.title`]
+          }), jsx(StyledFeesTable, {
+            children: jsx("tbody", {
+              children: 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/src/components/EstimateCost/EstimateCostProvider.js

@@ -0,0 +1,39 @@
+import { useMemo, useCallback, createContext, useContext } from 'react';
+import EstimateCostLocales from './locales/en.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const EstimateCostContext = /*#__PURE__*/createContext({
+  locales: EstimateCostLocales,
+  formatNumber: () => ''
+});
+const useEstimateCost = () => useContext(EstimateCostContext);
+const EstimateCostProvider = _ref => {
+  let {
+    children,
+    locales,
+    currency,
+    numberLocales
+  } = _ref;
+  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 jsx(EstimateCostContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+export { EstimateCostProvider, useEstimateCost };

package/dist/src/components/EstimateCost/OverlayComponent.js

@@ -0,0 +1,139 @@
+import _styled from '@emotion/styled/base';
+import { Stack, Icon } from '@ultraviolet/ui';
+import { useMemo, Children, isValidElement, cloneElement } from 'react';
+import flattenChildren from 'react-flatten-children';
+import { LineThrough } from './Components/LineThrough.js';
+import { Strong } from './Components/Strong.js';
+import { useEstimateCost } from './EstimateCostProvider.js';
+import { OverlayContextProvider } from './OverlayContext.js';
+import { OverlayRow, ItemResourceName, StyledBadge } from './componentStyle.js';
+import { multiplier, maximumFractionDigits } from './constants.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const OverlayContainer = /*#__PURE__*/_styled("div", {
+  target: "e1p62vjs2"
+})("position:fixed;z-index:999;left:0;right:0;bottom:", _ref => {
+  let {
+    inView
+  } = _ref;
+  return inView ? -120 : 0;
+}, "px;height:120px;background-color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.background;
+}, ";margin:0 0 0 200px;display:flex;justify-content:center;box-shadow:", _ref3 => {
+  let {
+    inView,
+    theme
+  } = _ref3;
+  return inView ? '0' : theme.shadows.defaultShadow;
+}, ";transition:bottom 0.3s,box-shadow 0.3s;");
+const List = /*#__PURE__*/_styled("ul", {
+  target: "e1p62vjs1"
+})("display:flex;flex-direction:row;justify-content:center;list-style:none;margin:0;padding:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.space['3'];
+}, " 0;");
+const SideItem = /*#__PURE__*/_styled("li", {
+  target: "e1p62vjs0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "wpiop9",
+  styles: "display:flex;padding:12px 0;min-width:158px"
+} : {
+  name: "wpiop9",
+  styles: "display:flex;padding:12px 0;min-width:158px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const OverlayComponent = _ref5 => {
+  let {
+    children,
+    inView = false,
+    discount = 1,
+    OverlayRight,
+    disableOverlayRight = false,
+    OverlayLeft,
+    disableOverlayLeft = false,
+    totalPrice,
+    unit = 'hours',
+    isBeta = false
+  } = _ref5;
+  const {
+    locales,
+    formatNumber
+  } = useEstimateCost();
+  const value = useMemo(() => ({
+    isOverlay: true
+  }), []);
+  const list = flattenChildren(children);
+  const totalOverlayPrice = {
+    days: totalPrice.maxOverlayHourly * multiplier.days,
+    hours: totalPrice.maxOverlayHourly,
+    minutes: totalPrice.maxOverlayHourly * multiplier.minutes,
+    seconds: totalPrice.maxOverlayHourly * multiplier.seconds,
+    months: totalPrice.maxOverlayHourly * multiplier.months
+  }[unit];
+  const overlayPrice = {
+    days: totalPrice.overlayHourly * multiplier.days,
+    hours: totalPrice.overlayHourly,
+    minutes: totalPrice.overlayHourly * multiplier.minutes,
+    seconds: totalPrice.overlayHourly * multiplier.seconds,
+    months: totalPrice.overlayHourly * multiplier.months
+  }[unit];
+  return jsx(OverlayContextProvider, {
+    value: value,
+    children: jsx(OverlayContainer, {
+      inView: inView,
+      "data-testid": "summary-overlay",
+      children: jsxs(List, {
+        children: [OverlayLeft ? jsx(SideItem, {
+          children: jsx(OverlayLeft, {
+            disabled: disableOverlayLeft,
+            children: locales['estimate.cost.submit.label']
+          })
+        }) : null, Children.map(list, (child, index) => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+          isFirstElement: index === 0,
+          isLastElement: index === list.length - 1
+        }) : null), jsxs(OverlayRow, {
+          children: [jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            gap: 1,
+            children: [jsx(Icon, {
+              name: "calculator",
+              color: "primary",
+              size: 20
+            }), locales['estimate.cost.label']]
+          }), jsxs(ItemResourceName, {
+            animated: false,
+            children: [jsx(Strong, {
+              variant: "big",
+              children: 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 ? jsx(StyledBadge, {
+              prominence: "strong",
+              sentiment: "warning",
+              children: locales[`estimate.cost.beta.${discount > 0 ? 'discount' : 'free'}`]
+            }) : null]
+          })]
+        }), OverlayRight ? jsx(SideItem, {
+          children: jsx(OverlayRight, {
+            disabled: disableOverlayRight,
+            children: locales['estimate.cost.submit.label']
+          })
+        }) : null]
+      })
+    })
+  });
+};
+
+export { OverlayComponent };

package/dist/src/components/EstimateCost/OverlayContext.js

@@ -0,0 +1,19 @@
+import { useContext, createContext } from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const OverlayContext = /*#__PURE__*/createContext({
+  isOverlay: false
+});
+const useOverlay = () => useContext(OverlayContext);
+const OverlayContextProvider = _ref => {
+  let {
+    children,
+    value
+  } = _ref;
+  return jsx(OverlayContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+export { OverlayContextProvider, useOverlay };