@ultraviolet/plus 0.5.0 → 0.5.2

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

@@ -0,0 +1,296 @@
+import _styled from '@emotion/styled/base';
+import { Text, Stack, Alert, Icon } from '@ultraviolet/ui';
+import { useState, useMemo, useEffect, Children, isValidElement, 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);
+}, " padding:0;");
+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) => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+              isLastElement: index === list.length - 1,
+              productsCallback,
+              iteration,
+              discount: discount && !child.props.discount ? discount : child.props.discount
+            }) : child)
+          })]
+        }) : 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 260px;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 };

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

@@ -0,0 +1,196 @@
+import _styled from '@emotion/styled/base';
+import { css } from '@emotion/react';
+import { Badge, zoomIn } from '@ultraviolet/ui';
+import { MAX_CELL_WIDTH } from './constants.js';
+
+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 spacedChildren = process.env.NODE_ENV === "production" ? {
+  name: "14bpf6g",
+  styles: ">*{margin-top:0;}>*+*{margin-top:16px;}"
+} : {
+  name: "14bpf6g",
+  styles: ">*{margin-top:0;}>*+*{margin-top:16px;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const StyledDiv = /*#__PURE__*/_styled("div", {
+  target: "e1xb5k8j14"
+})(process.env.NODE_ENV === "production" ? {
+  name: "158icaa",
+  styles: "margin-left:4px"
+} : {
+  name: "158icaa",
+  styles: "margin-left:4px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledTable = /*#__PURE__*/_styled('table', {
+  shouldForwardProp: prop => !['noTotal'].includes(prop),
+  target: "e1xb5k8j13"
+})("width:100%;", spacedChildren, ";border:1px solid ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.border;
+}, ";", _ref2 => {
+  let {
+    noTotal
+  } = _ref2;
+  return noTotal ? 'border-radius: 4px;' : 'border-radius: 4px 4px 0 4px;';
+}, ";");
+const StyledFeesTable = /*#__PURE__*/_styled('table', {
+  target: "e1xb5k8j12"
+})("width:100%;", spacedChildren, ";border:1px solid ", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.border;
+}, ";border-radius:4px;margin-top:16px;");
+const PriceCol = /*#__PURE__*/_styled("td", {
+  target: "e1xb5k8j11"
+})("background-color:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral.background;
+}, ";");
+const PriceCell = theme => /*#__PURE__*/css("border-left:1px solid ", theme.colors.neutral.border, ";background-color:", theme.colors.neutral.backgroundWeak, ";");
+const Cell = /*#__PURE__*/_styled('td', {
+  shouldForwardProp: prop => !['tabulation', 'hasBorder', 'primary'].includes(prop),
+  target: "e1xb5k8j10"
+})("padding-left:", _ref5 => {
+  let {
+    tabulation
+  } = _ref5;
+  return (tabulation ?? 0) * 8 + 16;
+}, "px;padding-right:16px;position:relative;max-width:", MAX_CELL_WIDTH, ";", _ref6 => {
+  let {
+    theme,
+    hasBorder
+  } = _ref6;
+  return hasBorder && /*#__PURE__*/css("&:before{content:'';position:absolute;left:0;bottom:0;height:1px;width:calc(100% - 32px);margin-left:16px;border-bottom:1px solid ", theme.colors.neutral.border, ";}");
+}, " ", _ref7 => {
+  let {
+    theme,
+    primary
+  } = _ref7;
+  return primary ? /*#__PURE__*/css("background:", theme.colors.primary.background, ";") : null;
+}, ";");
+const TotalPriceCell = /*#__PURE__*/_styled(Cell, {
+  target: "e1xb5k8j9"
+})("border-color:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.neutral.border;
+}, ";border-style:solid;border-width:0 1px 1px 1px;border-radius:0 0 4px 4px;min-width:202px;height:56px;background-color:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.primary.background;
+}, ";");
+const EmptyTable = /*#__PURE__*/_styled("table", {
+  target: "e1xb5k8j8"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1bmvmcg",
+  styles: "margin:0;width:100%"
+} : {
+  name: "1bmvmcg",
+  styles: "margin:0;width:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Title = /*#__PURE__*/_styled("h3", {
+  target: "e1xb5k8j7"
+})("display:flex;align-items:center;padding:0;margin:0;font-size:18px;color:", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral.text;
+}, ";font-weight:500;padding:", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space['2'];
+}, ";");
+const EmptyCell = /*#__PURE__*/_styled("td", {
+  target: "e1xb5k8j6"
+})(process.env.NODE_ENV === "production" ? {
+  name: "22sgtr",
+  styles: "width:538px"
+} : {
+  name: "22sgtr",
+  styles: "width:538px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const TimeCell = /*#__PURE__*/_styled("div", {
+  target: "e1xb5k8j5"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1dh7njz",
+  styles: "max-width:200px;padding:16px;align-items:start;text-align:left;float:right"
+} : {
+  name: "1dh7njz",
+  styles: "max-width:200px;padding:16px;align-items:start;text-align:left;float:right",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const BadgeBeta = /*#__PURE__*/_styled(Badge, {
+  shouldForwardProp: prop => !['long'].includes(prop),
+  target: "e1xb5k8j4"
+})("margin-left:", _ref12 => {
+  let {
+    long
+  } = _ref12;
+  return long ? '-185px' : '-115px';
+}, ";position:absolute;top:calc(50% - 16px);");
+const OverlayRow = /*#__PURE__*/_styled('li', {
+  shouldForwardProp: prop => !['isFirstElement', 'shouldBeHidden', 'hideFromOverlay'].includes(prop),
+  target: "e1xb5k8j3"
+})("min-width:200px;padding:0 24px;border-left:1px solid ", _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.neutral.border;
+}, ";", _ref14 => {
+  let {
+    isFirstElement
+  } = _ref14;
+  return isFirstElement && `border: 0;`;
+}, " &:first-of-type,&:last-child{border:0;}@media (max-width: 1420px){", _ref15 => {
+  let {
+    shouldBeHidden
+  } = _ref15;
+  return shouldBeHidden && 'display: none;';
+}, ";}", _ref16 => {
+  let {
+    hideFromOverlay
+  } = _ref16;
+  return hideFromOverlay && 'display: none;';
+}, ";");
+const StyledLeftSide = /*#__PURE__*/_styled("div", {
+  target: "e1xb5k8j2"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1x1yonv",
+  styles: "display:flex;flex-direction:row;-webkit-box-pack:justify;justify-content:space-between;align-items:center;min-height:56px;padding-top:8px;padding-bottom:8px"
+} : {
+  name: "1x1yonv",
+  styles: "display:flex;flex-direction:row;-webkit-box-pack:justify;justify-content:space-between;align-items:center;min-height:56px;padding-top:8px;padding-bottom:8px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const ItemResourceName = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['animated'].includes(prop),
+  target: "e1xb5k8j1"
+})("height:48px;display:flex;flex-direction:column;-webkit-box-pack:center;justify-content:center;animation:", _ref17 => {
+  let {
+    animated
+  } = _ref17;
+  return animated ? /*#__PURE__*/css("800ms ", zoomIn, ";") : '';
+}, ";");
+const StyledBadge = /*#__PURE__*/_styled(Badge, {
+  target: "e1xb5k8j0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "72s22w",
+  styles: "display:inline-block;height:24px;line-height:18px;font-size:12px;margin-right:8px"
+} : {
+  name: "72s22w",
+  styles: "display:inline-block;height:24px;line-height:18px;font-size:12px;margin-right:8px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+export { BadgeBeta, Cell, EmptyCell, EmptyTable, ItemResourceName, OverlayRow, PriceCell, PriceCol, StyledBadge, StyledDiv, StyledFeesTable, StyledLeftSide, StyledTable, TimeCell, Title, TotalPriceCell };