@ultraviolet/plus 0.14.4 → 0.15.1

package/dist/components/EstimateCost/OverlayComponent.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Stack, Icon } from "@ultraviolet/ui";
+import { useMemo, Children, isValidElement, cloneElement } from "react";
+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";
+const OverlayContainer = styled("div", {
+  shouldForwardProp: (prop) => !["inView", "overlayMargin"].includes(prop)
+})`
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: ${({ inView }) => inView ? -120 : 0}px;
+  height: 120px;
+  background-color: ${({ theme }) => theme.colors.neutral.background};
+  margin: ${({ overlayMargin }) => overlayMargin || "0"};
+  display: flex;
+  justify-content: center;
+  box-shadow: ${({ inView, theme }) => inView ? "0" : theme.shadows.defaultShadow};
+  transition:
+    bottom 0.3s,
+    box-shadow 0.3s;
+`;
+const List = styled.ul`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+  padding: ${({ theme }) => theme.space["3"]} 0;
+`;
+const SideItem = styled.li`
+  display: flex;
+  padding: 12px 0;
+  min-width: 158px;
+`;
+const OverlayComponent = ({
+  children,
+  inView = false,
+  discount = 1,
+  OverlayRight,
+  disableOverlayRight = false,
+  OverlayLeft,
+  disableOverlayLeft = false,
+  totalPrice,
+  unit = "hours",
+  isBeta = false,
+  overlayMargin
+}) => {
+  const { locales, formatNumber } = useEstimateCost();
+  const value = useMemo(() => ({ isOverlay: true }), []);
+  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 /* @__PURE__ */ jsx(OverlayContextProvider, { value, children: /* @__PURE__ */ jsx(
+    OverlayContainer,
+    {
+      inView,
+      "data-testid": "summary-overlay",
+      overlayMargin,
+      children: /* @__PURE__ */ jsxs(List, { children: [
+        OverlayLeft ? /* @__PURE__ */ jsx(SideItem, { 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(OverlayRow, { children: [
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: [
+            /* @__PURE__ */ jsx(Icon, { name: "calculator", color: "primary", size: 20 }),
+            locales["estimate.cost.label"]
+          ] }),
+          /* @__PURE__ */ jsxs(ItemResourceName, { animated: false, 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(StyledBadge, { prominence: "strong", sentiment: "warning", children: [
+              discount > 0 ? discount * 100 : "",
+              locales[`estimate.cost.beta.${discount > 0 ? "discount" : "free"}`]
+            ] }) : null
+          ] })
+        ] }),
+        OverlayRight ? /* @__PURE__ */ jsx(SideItem, { children: /* @__PURE__ */ jsx(OverlayRight, { disabled: disableOverlayRight, children: locales["estimate.cost.submit.label"] }) }) : null
+      ] })
+    }
+  ) });
+};
+export {
+  OverlayComponent
+};

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export declare const useOverlay: () => {
+    isOverlay: boolean;
+};
+type OverlayContextProviderProps = {
+    children: ReactNode;
+    value: {
+        isOverlay: boolean;
+    };
+};
+export declare const OverlayContextProvider: ({ children, value, }: OverlayContextProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EstimateCost/OverlayContext.js

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

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

@@ -0,0 +1,107 @@
+/// <reference types="react" />
+import type { Theme } from '@emotion/react';
+export declare const StyledDiv: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTable: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    noTotal: boolean;
+}, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const StyledFeesTable: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const PriceCol: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, {}>;
+export declare const PriceCell: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const Cell: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    hasBorder?: boolean | undefined;
+    tabulation?: number | undefined;
+    primary?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+export declare const TotalPriceCell: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    hasBorder?: boolean | undefined;
+    tabulation?: number | undefined;
+    primary?: boolean | undefined;
+} & import("react").ClassAttributes<HTMLTableDataCellElement> & import("react").TdHTMLAttributes<HTMLTableDataCellElement> & {
+    theme?: Theme | undefined;
+}, {}, {}>;
+export declare const EmptyTable: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const EmptyCell: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+export declare const TimeCell: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BadgeBeta: import("@emotion/styled").StyledComponent<{
+    sentiment?: import("node_modules/@ultraviolet/ui/dist/theme").Color | undefined;
+    size?: "small" | "large" | "medium" | undefined;
+    prominence?: "strong" | "default" | undefined;
+    icon?: "address" | "search" | "filter" | "view" | "anchor" | "id" | "download" | "alert" | "open-in-new" | "arrow-down" | "arrow-left-bottom" | "arrow-left-double" | "arrow-left" | "arrow-right-bottom" | "arrow-right-double" | "arrow-right" | "arrow-up" | "asterisk" | "attach" | "burger" | "cancel" | "check" | "close" | "close-circle-outline" | "copy-content" | "detach" | "dots-horizontal" | "dots-vertical" | "drag-vertical" | "drag-variant" | "east" | "equal" | "escape" | "expand" | "expand-more" | "github" | "instagram" | "linkedIn" | "logout" | "minus" | "north" | "organization" | "plus" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rss" | "send" | "slack" | "sort" | "south" | "switch_orga" | "x" | "upload" | "west" | "youtube" | "auto-fix" | "book-open-outline" | "bullhorn" | "calculator" | "calendar-range" | "chat" | "checkbox-circle-outline" | "clock-outline" | "console" | "credentials" | "credit-card" | "database" | "delete" | "doc" | "earth" | "email-remove-outline" | "email-outline" | "eye-off" | "eye" | "folder" | "help-circle-outline" | "information-outline" | "lock" | "members" | "moon" | "mosaic" | "pen" | "pencil" | "phone" | "play-circle-outline" | "privacy" | "profile" | "rocket" | "settings" | "sun" | "support" | "unlock" | "weather-night" | "pin" | "unpin" | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+    children: import("react").ReactNode;
+    'data-testid'?: string | undefined;
+} & {
+    theme?: Theme | undefined;
+} & {
+    long: boolean;
+}, {}, {}>;
+export declare const StyledTr: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    isFirstElement?: boolean | undefined;
+    shouldBeHidden?: boolean | undefined;
+    hideFromOverlay?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export declare const OverlayRow: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    isFirstElement?: boolean | undefined;
+    shouldBeHidden?: boolean | undefined;
+    hideFromOverlay?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const StyledLeftSide: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemResourceName: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    animated: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledBadge: import("@emotion/styled").StyledComponent<{
+    sentiment?: import("node_modules/@ultraviolet/ui/dist/theme").Color | undefined;
+    size?: "small" | "large" | "medium" | undefined;
+    prominence?: "strong" | "default" | undefined;
+    icon?: "address" | "search" | "filter" | "view" | "anchor" | "id" | "download" | "alert" | "open-in-new" | "arrow-down" | "arrow-left-bottom" | "arrow-left-double" | "arrow-left" | "arrow-right-bottom" | "arrow-right-double" | "arrow-right" | "arrow-up" | "asterisk" | "attach" | "burger" | "cancel" | "check" | "close" | "close-circle-outline" | "copy-content" | "detach" | "dots-horizontal" | "dots-vertical" | "drag-vertical" | "drag-variant" | "east" | "equal" | "escape" | "expand" | "expand-more" | "github" | "instagram" | "linkedIn" | "logout" | "minus" | "north" | "organization" | "plus" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rss" | "send" | "slack" | "sort" | "south" | "switch_orga" | "x" | "upload" | "west" | "youtube" | "auto-fix" | "book-open-outline" | "bullhorn" | "calculator" | "calendar-range" | "chat" | "checkbox-circle-outline" | "clock-outline" | "console" | "credentials" | "credit-card" | "database" | "delete" | "doc" | "earth" | "email-remove-outline" | "email-outline" | "eye-off" | "eye" | "folder" | "help-circle-outline" | "information-outline" | "lock" | "members" | "moon" | "mosaic" | "pen" | "pencil" | "phone" | "play-circle-outline" | "privacy" | "profile" | "rocket" | "settings" | "sun" | "support" | "unlock" | "weather-night" | "pin" | "unpin" | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+    children: import("react").ReactNode;
+    'data-testid'?: string | undefined;
+} & {
+    theme?: Theme | undefined;
+}, {}, {}>;

package/dist/components/EstimateCost/componentStyle.js

@@ -0,0 +1,170 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Badge, zoomIn } from "@ultraviolet/ui";
+import { MAX_CELL_WIDTH } from "./constants.js";
+const spacedChildren = css`
+  > * {
+    margin-top: 0;
+  }
+
+  > * + * {
+    margin-top: 16px;
+  }
+`;
+const StyledDiv = styled.div`
+  margin-left: 4px;
+`;
+const StyledTable = styled("table", {
+  shouldForwardProp: (prop) => !["noTotal"].includes(prop)
+})`
+  width: 100%;
+  ${spacedChildren};
+  border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  ${({ noTotal }) => noTotal ? "border-radius: 4px;" : "border-radius: 4px 4px 0 4px;"}
+`;
+const StyledFeesTable = styled("table")`
+  width: 100%;
+  ${spacedChildren};
+  border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  border-radius: 4px;
+  margin-top: 16px;
+`;
+const PriceCol = styled.col`
+  background-color: ${({ theme }) => theme.colors.neutral.background};
+`;
+const PriceCell = (theme) => css`
+  border-left: 1px solid ${theme.colors.neutral.border};
+  background-color: ${theme.colors.neutral.backgroundWeak};
+`;
+const Cell = styled("td", {
+  shouldForwardProp: (prop) => !["tabulation", "hasBorder", "primary"].includes(prop)
+})`
+  padding-left: ${({ tabulation }) => (tabulation ?? 0) * 8 + 16}px;
+  padding-right: 16px;
+  position: relative;
+  max-width: ${MAX_CELL_WIDTH};
+
+  ${({ theme, hasBorder }) => hasBorder && 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};
+      }
+    `}
+  ${({ theme, primary }) => primary ? css`
+          background: ${theme.colors.primary.background};
+        ` : null}
+`;
+const TotalPriceCell = styled(Cell)`
+  border-color: ${({ theme }) => 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: ${({ theme }) => theme.colors.primary.background};
+`;
+const EmptyTable = styled.table`
+  margin: 0;
+  width: 100%;
+`;
+const Title = styled.h3`
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  font-size: 18px;
+  color: ${({ theme }) => theme.colors.neutral.text};
+  font-weight: 500;
+  padding: ${({ theme }) => theme.space["2"]};
+`;
+const EmptyCell = styled.td`
+  width: 538px;
+`;
+const TimeCell = styled.div`
+  max-width: 200px;
+  padding: 16px;
+  align-items: start;
+  text-align: left;
+  float: right;
+`;
+const BadgeBeta = styled(Badge, {
+  shouldForwardProp: (prop) => !["long"].includes(prop)
+})`
+  margin-left: ${({ long }) => long ? "-185px" : "-115px"};
+  position: absolute;
+  top: calc(50% - 16px);
+`;
+const StyledTr = styled("tr", {
+  shouldForwardProp: (prop) => !["isFirstElement", "shouldBeHidden", "hideFromOverlay"].includes(prop)
+})``;
+const OverlayRow = styled("li", {
+  shouldForwardProp: (prop) => !["isFirstElement", "shouldBeHidden", "hideFromOverlay"].includes(prop)
+})`
+  min-width: 200px;
+  padding: 0 24px;
+  border-left: 1px solid ${({ theme }) => theme.colors.neutral.border};
+
+  ${({ isFirstElement }) => isFirstElement && `border: 0;`}
+  &:first-of-type,
+  &:last-child {
+    border: 0;
+  }
+
+  @media (max-width: 1420px) {
+    ${({ shouldBeHidden }) => shouldBeHidden && "display: none;"}
+  }
+
+  ${({ hideFromOverlay }) => hideFromOverlay && "display: none;"}
+`;
+const StyledLeftSide = styled.div`
+  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;
+`;
+const ItemResourceName = styled("div", {
+  shouldForwardProp: (prop) => !["animated"].includes(prop)
+})`
+  height: 48px;
+  display: flex;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  justify-content: center;
+  animation: ${({ animated }) => animated ? css`800ms ${zoomIn}` : ""};
+`;
+const StyledBadge = styled(Badge)`
+  display: inline-block;
+  height: 24px;
+  line-height: 18px;
+  font-size: 12px;
+  margin-right: 8px;
+`;
+export {
+  BadgeBeta,
+  Cell,
+  EmptyCell,
+  EmptyTable,
+  ItemResourceName,
+  OverlayRow,
+  PriceCell,
+  PriceCol,
+  StyledBadge,
+  StyledDiv,
+  StyledFeesTable,
+  StyledLeftSide,
+  StyledTable,
+  StyledTr,
+  TimeCell,
+  Title,
+  TotalPriceCell
+};

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

@@ -0,0 +1,6 @@
+import type { Units } from './types';
+export declare const APPROXIMATE_HOURS_IN_MONTH = 730;
+export declare const multiplier: Record<Units, number>;
+export declare const maximumFractionDigits: Record<Units, number>;
+export declare const maximumFractionDigitsLong: Record<Units, number>;
+export declare const MAX_CELL_WIDTH = "530px";

package/dist/{src/components → components}/EstimateCost/constants.js

@@ -1,7 +1,4 @@
 const APPROXIMATE_HOURS_IN_MONTH = 730;
-
-// As we base ou calculation on hours we need to multiply them by a multiplier
-// 1 month = 730 hours
 const multiplier = {
   seconds: 1 / 60 / 60,
   minutes: 1 / 60,
@@ -9,9 +6,6 @@ const multiplier = {
   days: 24,
   months: APPROXIMATE_HOURS_IN_MONTH
 };
-
-// This is used to tell how many decimals depending on time unit
-// "hours": 5 === 5 decimals on hour unit
 const maximumFractionDigits = {
   seconds: 10,
   minutes: 8,
@@ -26,6 +20,11 @@ const maximumFractionDigitsLong = {
   days: 4,
   months: 2
 };
-const MAX_CELL_WIDTH = '530px';
-
-export { APPROXIMATE_HOURS_IN_MONTH, MAX_CELL_WIDTH, maximumFractionDigits, maximumFractionDigitsLong, multiplier };
+const MAX_CELL_WIDTH = "530px";
+export {
+  APPROXIMATE_HOURS_IN_MONTH,
+  MAX_CELL_WIDTH,
+  maximumFractionDigits,
+  maximumFractionDigitsLong,
+  multiplier
+};

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

@@ -0,0 +1,9 @@
+import type { Units } from './types';
+export declare const calculatePrice: ({ price, amount, amountFree, timeUnit, timeAmount, discount, }: {
+    price: number;
+    amount: number;
+    amountFree?: number;
+    timeUnit: Units;
+    timeAmount: number;
+    discount?: number;
+}) => number;

package/dist/{src/components → components}/EstimateCost/helper.js

@@ -1,7 +1,4 @@
-import { multiplier } from './constants.js';
-
-// time unit = hours, days, months
-// timeAmount = number of hours / days / months
+import { multiplier } from "./constants.js";
 const calculatePrice = ({
   price,
   amount,
@@ -12,12 +9,11 @@ const calculatePrice = ({
 }) => {
   const nonNanTimeAmount = Number.isNaN(timeAmount) ? 0 : timeAmount;
   const value = (price - price * discount) * (nonNanTimeAmount * multiplier[`${timeUnit}`]) * Math.max(amount - amountFree, 0);
-
-  // Avoid having negative price in any cases
   if (value < 0) {
     return 0;
   }
   return value;
 };
-
-export { calculatePrice };
+export {
+  calculatePrice
+};

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

@@ -0,0 +1,3 @@
+import estimateCostDefaultLocales from './locales/en';
+export { EstimateCost } from './EstimateCost';
+export { estimateCostDefaultLocales };

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

@@ -0,0 +1,22 @@
+declare const _default: {
+    readonly 'estimate.cost.description': "This summary provides a cost estimation based on your configuration, the amount of time you expect to use the resource for, and the scale of your expected usage. For the purposes of this calculation, we consider that 1 month equals to 730 hours.";
+    readonly 'estimate.cost.label': "Estimated cost";
+    readonly 'estimate.cost.beta.free': "Free During Beta";
+    readonly 'estimate.cost.beta.discount': "% off during Beta";
+    readonly 'estimate.cost.beta.badge': "Beta Version";
+    readonly 'estimate.cost.units.seconds.label': "Second(s)";
+    readonly 'estimate.cost.units.minutes.label': "Minute(s)";
+    readonly 'estimate.cost.units.hours.label': "Hour(s)";
+    readonly 'estimate.cost.units.days.label': "Day(s)";
+    readonly 'estimate.cost.units.months.label': "Month(s)";
+    readonly 'estimate.cost.units.years.label': "Year(s)";
+    readonly 'estimate.cost.fees.oneTime.title': "One time fees";
+    readonly 'estimate.cost.fees.monthly.title': "Each month";
+    readonly 'estimate.cost.fees.commitment': "Commitment Fees";
+    readonly 'estimate.cost.units.gb.label': "GB";
+    readonly 'estimate.cost.notDefined': "Not defined";
+    readonly 'estimate.cost.submit.label': "Create";
+    readonly 'estimate.cost.region.label': "Region";
+    readonly 'estimate.cost.az.label': "Availability Zone";
+};
+export default _default;

package/dist/components/EstimateCost/locales/en.js

@@ -0,0 +1,24 @@
+const EstimateCostLocales = {
+  "estimate.cost.description": "This summary provides a cost estimation based on your configuration, the amount of time you expect to use the resource for, and the scale of your expected usage. For the purposes of this calculation, we consider that 1 month equals to 730 hours.",
+  "estimate.cost.label": "Estimated cost",
+  "estimate.cost.beta.free": "Free During Beta",
+  "estimate.cost.beta.discount": "% off during Beta",
+  "estimate.cost.beta.badge": "Beta Version",
+  "estimate.cost.units.seconds.label": "Second(s)",
+  "estimate.cost.units.minutes.label": "Minute(s)",
+  "estimate.cost.units.hours.label": "Hour(s)",
+  "estimate.cost.units.days.label": "Day(s)",
+  "estimate.cost.units.months.label": "Month(s)",
+  "estimate.cost.units.years.label": "Year(s)",
+  "estimate.cost.fees.oneTime.title": "One time fees",
+  "estimate.cost.fees.monthly.title": "Each month",
+  "estimate.cost.fees.commitment": "Commitment Fees",
+  "estimate.cost.units.gb.label": "GB",
+  "estimate.cost.notDefined": "Not defined",
+  "estimate.cost.submit.label": "Create",
+  "estimate.cost.region.label": "Region",
+  "estimate.cost.az.label": "Availability Zone"
+};
+export {
+  EstimateCostLocales as default
+};