@ultraviolet/plus 0.5.0 → 0.5.2

package/dist/index.d.ts

@@ -3,6 +3,9 @@ import { ReactNode, MouseEventHandler, ComponentProps } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import CodeMirror from '@uiw/react-codemirror';
+import { Alert } from '@ultraviolet/ui';
+import * as _emotion_styled from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
 
 type ContentCardProps = {
     direction?: 'row' | 'column';
@@ -62,4 +65,261 @@ type CodeEditorProps = {
 };
 declare const CodeEditor: ({ title, value, onChange, extensions, onBlur, height, readOnly, }: CodeEditorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-export { CodeEditor, ContentCard, ContentCardGroup };
+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";
+};
+
+type EstimateCostProps = {
+    /**
+     * Text to display into an alert on the top of the EstimateCost component.
+     */
+    alert?: ReactNode;
+    /**
+     * Type of the alert defined by the Scaleway UI Alert component.
+     */
+    alertVariant?: ComponentProps<typeof Alert>['sentiment'];
+    children: ReactNode;
+    /**
+     * Individual fees to display at the bottom of the EstimateCost component.
+     */
+    commitmentFees?: number;
+    /**
+     * Content to display into the fees part, it can be any component but in order to have a consistent design, it is recommended to use `<EstimateCost.Regular>` and `<EstimateCost.Strong>` components.
+     */
+    commitmentFeesContent?: ReactNode;
+    /**
+     * By default, a description exists but if you need you can customize it with this prop.
+     */
+    description?: ReactNode;
+    /**
+     * Hide the floating estimate cost overlay shown in the bottom of the page.
+     */
+    hideOverlay?: boolean;
+    /**
+     * Disable left button on the overlay.
+     */
+    disableOverlayLeft?: boolean;
+    /**
+     * Disable right button (submit) on the overlay.
+     */
+    disableOverlayRight?: boolean;
+    /**
+     * This is a global discount for all estimate cost, all sub items will be impacted by this discount.
+     * The discount is a percentage, so 0.1 means 10% discount. Discount = 1 means 100% so it means free.
+     * This is usually associate with beta products and prop `isBeta`.
+     */
+    discount?: number;
+    /**
+     * The default time unit to select.
+     */
+    defaultTimeUnit?: Units;
+    /**
+     * List of time unit the price can be calculated with. Can only be an array of `seconds`, `minutes`, `hours`, `days` or `months`.
+     */
+    timeUnits?: Units[];
+    /**
+     * Hide the selectable time unit on the top of the component.
+     */
+    hideTimeUnit?: boolean;
+    /**
+     * Hide the total price at the bottom of the component.
+     */
+    hideTotal?: boolean;
+    /**
+     * Show a badge beta on the total price with how much discount is applied.
+     */
+    isBeta?: boolean;
+    /**
+     * It will display another individual line at the bottom of the component with a monthly price. It can be used when you display hourly price, but you have one or many items that are billed monthly.
+     */
+    monthlyFees?: number;
+    /**
+     * Content to display into monthly fees part, it can be any component but in order to have a consistent design, it is recommended to use `<EstimateCost.Regular>` and `<EstimateCost.Strong>` components.
+     */
+    monthlyFeesContent?: ReactNode;
+    /**
+     * Label of the item, it describes what kind of fees is related to. (ex: "Installation fee")
+     */
+    monthlyFeesLabel?: string;
+    /**
+     * Content that will be shown on the left side of the overlay.
+     */
+    OverlayLeft?: (props: {
+        children: ReactNode;
+        disabled?: boolean;
+    }) => JSX.Element;
+    /**
+     * Content that will be shown on the left side of the overlay.
+     */
+    OverlayRight?: (props: {
+        children?: ReactNode;
+        disabled?: boolean;
+    }) => JSX.Element;
+    /**
+     * Time unit to use on the overlay. It can be different from estimate cost.
+     */
+    overlayUnit?: Units;
+    /**
+     * Locales for the component. By default, it will use the english locales.
+     */
+    locales?: typeof _default;
+    /**
+     * Defines the currency to be shown in the component.
+     * To find out all currencies checkout https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes section "Code" of the table.
+     */
+    currency?: string;
+    /**
+     * Defines the way we display numbers depending on locale (ex: 1,000.00 or 1 000,00).
+     * To understand better please read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#locales
+     */
+    numberLocales?: string;
+};
+type Units = 'seconds' | 'minutes' | 'hours' | 'days' | 'months';
+type Iteration = {
+    unit: Units;
+    value: number;
+};
+type BareEstimateProduct = {
+    id: string;
+};
+type EstimateProduct = BareEstimateProduct & {
+    amount: number;
+    price: number;
+    amountFree: number;
+    isVariant: boolean;
+    maxAmount: number;
+    noIteration: boolean;
+    longFractionDigits: boolean;
+    discount: number;
+};
+
+declare const EstimateCost: {
+    ({ description, alert, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, discount, OverlayRight, OverlayLeft, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, numberLocales, currency, }: EstimateCostProps): _emotion_react_jsx_runtime.JSX.Element;
+    LineThrough: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    } & {
+        isActive?: boolean | undefined;
+    }, react.DetailedHTMLProps<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?: Iteration | undefined;
+        label?: ReactNode;
+        labelTextVariant?: "body" | "caption" | "code" | "heading" | "bodySmall" | "bodySmallStrong" | "bodySmallStronger" | "bodyStrong" | "bodyStronger" | "captionSmall" | "captionSmallStrong" | "captionSmallStronger" | "captionStrong" | "captionStronger" | "headingLarge" | "headingSmall" | undefined;
+        labelTextProminence?: "strong" | "default" | "stronger" | "weak" | 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: EstimateProduct) => void;
+            remove: (product: 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;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    NumberInput: ({ amount, minValue, maxValue, getAmountValue, itemCallback, }: {
+        amount?: number | undefined;
+        itemCallback?: ((amount?: number | undefined, isVariant?: boolean | undefined) => void) | undefined;
+        getAmountValue?: ((amount?: number | undefined) => void) | undefined;
+        minValue?: number | undefined;
+        maxValue?: number | undefined;
+    }) => _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;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    Strong: ({ variant, children, isDisabledOnOverlay, }: {
+        variant?: "big" | "small" | "normal" | "capitalized" | undefined;
+        children?: ReactNode;
+        isDisabledOnOverlay?: boolean | undefined;
+    }) => _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;
+    }) => _emotion_react_jsx_runtime.JSX.Element | null;
+    Image: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    }, react.DetailedHTMLProps<react.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    Region: ({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, }: {
+        shouldBeHidden?: boolean | undefined;
+        priceText?: ReactNode;
+        animated?: boolean | undefined;
+        isFirstElement?: boolean | undefined;
+        isLastElement?: boolean | undefined;
+        productsCallback?: {
+            add: (product: EstimateProduct) => void;
+            remove: (product: BareEstimateProduct) => void;
+        } | undefined;
+        iteration?: Iteration | undefined;
+        discount?: number | undefined;
+        label: string;
+        image: string;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    Zone: ({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, }: {
+        shouldBeHidden?: boolean | undefined;
+        priceText?: string | undefined;
+        animated?: boolean | undefined;
+        isFirstElement?: boolean | undefined;
+        isLastElement?: boolean | undefined;
+        productsCallback?: {
+            add: (product: EstimateProduct) => void;
+            remove: (product: BareEstimateProduct) => void;
+        } | undefined;
+        iteration?: Iteration | undefined;
+        discount?: number | undefined;
+        label: string;
+        image: string;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    Ellipsis: ({ children, maxWidth, "data-testid": dataTestId, }: {
+        children: ReactNode;
+        maxWidth?: number | undefined;
+        'data-testid'?: string | undefined;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+};
+
+export { CodeEditor, ContentCard, ContentCardGroup, EstimateCost, _default as estimateCostDefaultLocales };

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

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { useEstimateCost } from '../EstimateCostProvider.js';
+import { UnitInput } from './UnitInput.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const CustomUnitInput = _ref => {
+  let {
+    defaultTimeUnit = 'hours',
+    setIteration,
+    iteration,
+    timeUnits
+  } = _ref;
+  const {
+    locales
+  } = useEstimateCost();
+  const options = useMemo(() => timeUnits.map(unit => ({
+    value: unit,
+    label: locales[`estimate.cost.units.${unit}.label`]
+  })), [timeUnits, locales]);
+  const defaultOption = useMemo(() => options.find(_ref2 => {
+    let {
+      value
+    } = _ref2;
+    return value === defaultTimeUnit;
+  }), [defaultTimeUnit, options]);
+  return jsx(UnitInput, {
+    name: "iteration",
+    onChange: inputValue => setIteration({
+      unit: iteration.unit,
+      value: inputValue
+    }),
+    onChangeUnitValue: unitValue => {
+      setIteration({
+        unit: unitValue,
+        value: iteration.value
+      });
+    },
+    placeholder: "0",
+    value: iteration.value,
+    unitValue: iteration.unit || defaultOption?.value,
+    minValue: 1,
+    size: "medium",
+    options: options,
+    selectInputWidth: 300
+  });
+};
+
+export { CustomUnitInput };

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

@@ -0,0 +1,327 @@
+import _styled from '@emotion/styled/base';
+import { css } from '@emotion/react';
+import { Text, Tooltip, Stack, Icon, zoomIn, Badge } from '@ultraviolet/ui';
+import { useMemo, useState, useEffect, useCallback, useId, Children, isValidElement, cloneElement } from 'react';
+import flattenChildren from 'react-flatten-children';
+import { useEstimateCost } from '../EstimateCostProvider.js';
+import { useOverlay } from '../OverlayContext.js';
+import { Cell, StyledDiv, PriceCell, OverlayRow, StyledLeftSide } from '../componentStyle.js';
+import { multiplier, maximumFractionDigitsLong, maximumFractionDigits, MAX_CELL_WIDTH } from '../constants.js';
+import { calculatePrice } from '../helper.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 TIME_RELATED_UNIT = ['seconds', 'minutes', 'hours', 'days', 'months'];
+const StyledResourceName = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['isOverlay', 'animated'].includes(prop),
+  target: "e1kzy2rr7"
+})("text-align:", _ref => {
+  let {
+    isOverlay
+  } = _ref;
+  return isOverlay ? 'initial' : 'right';
+}, ";", _ref2 => {
+  let {
+    isOverlay,
+    animated
+  } = _ref2;
+  return isOverlay ? /*#__PURE__*/css("height:48px;display:flex;flex-direction:column;-webkit-box-pack:center;justify-content:center;animation:", animated ? /*#__PURE__*/css("800ms ", zoomIn, ";") : '', ";") : null;
+}, ";");
+const StyledBadge = /*#__PURE__*/_styled(Badge, {
+  target: "e1kzy2rr6"
+})("margin-left:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['1'];
+}, ";align-self:center;");
+const StyledText = /*#__PURE__*/_styled(Text, {
+  target: "e1kzy2rr5"
+})("margin-left:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.space['1'];
+}, ";");
+const MaxWidthText = /*#__PURE__*/_styled(Text, {
+  target: "e1kzy2rr4"
+})(process.env.NODE_ENV === "production" ? {
+  name: "88bww",
+  styles: "max-width:75%"
+} : {
+  name: "88bww",
+  styles: "max-width:75%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const TextAlignRight = /*#__PURE__*/_styled(Text, {
+  target: "e1kzy2rr3"
+})(process.env.NODE_ENV === "production" ? {
+  name: "2qga7i",
+  styles: "text-align:right"
+} : {
+  name: "2qga7i",
+  styles: "text-align:right",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledTooltip = /*#__PURE__*/_styled(Tooltip, {
+  target: "e1kzy2rr2"
+})(process.env.NODE_ENV === "production" ? {
+  name: "uaxjgr",
+  styles: "vertical-align:text-top"
+} : {
+  name: "uaxjgr",
+  styles: "vertical-align:text-top",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledPriceCell = /*#__PURE__*/_styled(Cell, {
+  target: "e1kzy2rr1"
+})(_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return PriceCell(theme);
+}, ";");
+const StyleNoPriceItem = /*#__PURE__*/_styled(Text, {
+  target: "e1kzy2rr0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "2qga7i",
+  styles: "text-align:right"
+} : {
+  name: "2qga7i",
+  styles: "text-align:right",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Item = _ref6 => {
+  let {
+    discount = 0,
+    priceText,
+    discountText,
+    label,
+    tooltipInfo,
+    // Shows an icon with tooltip that contains this text
+    subLabel = '',
+    // Usually used for showing amount that is free
+    price: basePrice = 0,
+    // Hourly price for one unit
+    monthlyPrice = 0,
+    // Price per month
+    unit: baseUnit,
+    // Can be GB, MB, Node, Queries, etc.
+    amount: currentAmount = 1,
+    // Current number of items
+    onAmountChange,
+    amountFree = 0,
+    // Amount that is free - offered by company
+    maxAmount = 0,
+    // Max amount - used for kubernetes for example
+    longFractionDigits = false,
+    // In case price is really long 0.0000076 - up 7 fraction digits
+    noIteration = false,
+    // if item is not based on time (ex: download, upload, transfer)
+    noIterationText,
+    noBorder,
+    // remove the border bottom of the item
+    noPrice,
+    // remove the price on right side of the table
+    isDefined = true,
+    children = null,
+    isFirstElement = false,
+    isLastElement = false,
+    isPrimaryBackground = false,
+    productsCallback,
+    iteration: receivedIteration,
+    // Object from parent that contains time period (hours, days, months)
+    shouldBeHidden = false,
+    // Hide element from overlay if screen width is small
+    hideFromOverlay = false,
+    // Hide element from overlay in any case
+    textNotDefined,
+    // Text to display in case of not defined value
+    animated = false,
+    // if true, zoomIn animation is triggered
+    tabulation,
+    // Increase left padding of the item
+    labelTextVariant,
+    // To change left cell typography variant
+    labelTextProminence,
+    // To change left cell typography prominence
+    notice // To display a gray text below the label
+  } = _ref6;
+  const {
+    locales,
+    formatNumber
+  } = useEstimateCost();
+  let iteration;
+  if (noIteration) {
+    iteration = {
+      ...(receivedIteration ?? {
+        value: 0
+      }),
+      unit: 'hours'
+    };
+  } else {
+    iteration = receivedIteration;
+  }
+  const price = useMemo(() => {
+    if (monthlyPrice > 0 && basePrice === 0) {
+      return monthlyPrice / multiplier.months;
+    }
+    return basePrice;
+  }, [basePrice, monthlyPrice]);
+  const unit = useMemo(() => {
+    if (!baseUnit) {
+      return locales['estimate.cost.units.gb.label'];
+    }
+    return baseUnit;
+  }, [baseUnit, locales]);
+  const {
+    isOverlay
+  } = useOverlay();
+  const Row = isOverlay ? OverlayRow : 'tr';
+  const Cell$1 = isOverlay ? Cell.withComponent('div', {
+    target: "e1kzy2rr8"
+  }) : Cell;
+  const LeftSide = isOverlay ? 'div' : StyledLeftSide;
+  const [amount, setAmount] = useState(currentAmount);
+  const [isVariant, setIsVariant] = useState(false);
+  useEffect(() => setAmount(currentAmount), [setAmount, currentAmount]);
+  useEffect(() => onAmountChange?.(amount), [onAmountChange, amount]);
+  const itemCallback = useCallback((localAmount, localIsVariant) => {
+    setAmount(localAmount);
+    setIsVariant(localIsVariant);
+  }, [setAmount, setIsVariant]);
+  const id = useId();
+
+  // We remove Item from object list when Iem component unmount to avoid duplicates
+  useEffect(() => () => productsCallback?.remove({
+    id
+  }), [id, productsCallback]);
+  useEffect(() => {
+    if (!isOverlay) {
+      productsCallback?.add({
+        id,
+        amount,
+        price,
+        amountFree,
+        isVariant,
+        maxAmount,
+        noIteration,
+        longFractionDigits,
+        discount
+      });
+    }
+  }, [price, discount, amount, id, productsCallback, maxAmount, noIteration, isVariant, amountFree, isOverlay, longFractionDigits]);
+  const computedItemPrice = useMemo(() => calculatePrice({
+    price,
+    amount,
+    amountFree,
+    timeUnit: noIteration ? 'hours' : iteration?.unit ?? 'hours',
+    timeAmount: noIteration ? 1 : iteration?.value ?? 1,
+    discount
+  }), [price, amount, amountFree, iteration, noIteration, discount]);
+  const computedMaxItemPrice = useMemo(() => calculatePrice({
+    price,
+    amount: maxAmount,
+    amountFree,
+    timeUnit: noIteration ? 'hours' : iteration?.unit ?? 'hours',
+    timeAmount: noIteration ? 1 : iteration?.value ?? 1,
+    discount
+  }), [price, maxAmount, amountFree, iteration, noIteration, discount]);
+  const formatMaximumFractionDigits = useMemo(() => {
+    if (!iteration?.unit) {
+      return undefined;
+    }
+    return longFractionDigits ? maximumFractionDigitsLong[iteration?.unit] : maximumFractionDigits[iteration?.unit];
+  }, [iteration?.unit, longFractionDigits]);
+  return jsxs(Row, {
+    isFirstElement: isFirstElement,
+    shouldBeHidden: shouldBeHidden,
+    hideFromOverlay: hideFromOverlay,
+    children: [jsx(Cell$1, {
+      width: !isOverlay ? MAX_CELL_WIDTH : 'inherit',
+      hasBorder: !isLastElement && !noBorder && !isOverlay,
+      tabulation: tabulation,
+      children: jsxs(LeftSide, {
+        children: [jsxs(Stack, {
+          children: [jsxs(Stack, {
+            direction: "row",
+            children: [jsx(Text, {
+              as: "p",
+              variant: labelTextVariant ?? 'body',
+              prominence: labelTextProminence ?? 'default',
+              children: label
+            }), tooltipInfo ? jsx(StyledDiv, {
+              children: jsx(StyledTooltip, {
+                text: tooltipInfo,
+                children: jsx(Icon, {
+                  name: "help-circle-outline",
+                  size: 20
+                })
+              })
+            }) : null, subLabel && !isOverlay ? jsx(StyledText, {
+              as: "p",
+              variant: "body",
+              color: "primary",
+              italic: true,
+              children: subLabel
+            }) : null, discount > 0 && discountText ? jsx(StyledBadge, {
+              prominence: "strong",
+              size: "small",
+              sentiment: "warning",
+              children: discountText
+            }) : null]
+          }), notice ? jsx(MaxWidthText, {
+            as: "p",
+            variant: "caption",
+            prominence: "weak",
+            children: notice
+          }) : null]
+        }), jsx(StyledResourceName, {
+          isOverlay: isOverlay,
+          animated: animated,
+          children: isDefined ? Children.map(flattenChildren(children), child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+            itemCallback,
+            amount,
+            maxAmount,
+            unit
+          }) : null) : textNotDefined || locales['estimate.cost.notDefined']
+        })]
+      })
+    }), !isOverlay ? jsx(StyledPriceCell, {
+      hasBorder: !isLastElement && !noBorder,
+      primary: isPrimaryBackground,
+      children: !noPrice ? jsxs(Fragment, {
+        children: [jsxs(StyleNoPriceItem, {
+          as: "p",
+          variant: noIterationText ? 'headingSmall' : 'bodyStrong',
+          prominence: computedItemPrice === 0 && computedMaxItemPrice === 0 ? 'weak' : 'default',
+          color: computedItemPrice === 0 && computedMaxItemPrice === 0 ? 'neutral' : 'primary',
+          children: [priceText, !priceText ? formatNumber(computedItemPrice, {
+            maximumFractionDigits: formatMaximumFractionDigits
+          }) : null, noIterationText ? jsxs(Text, {
+            sentiment: "primary",
+            as: "span",
+            variant: "bodySmall",
+            children: ["/", noIterationText]
+          }) : null, !priceText && computedMaxItemPrice > 0 ? ` - ${formatNumber(computedMaxItemPrice, {
+            maximumFractionDigits: formatMaximumFractionDigits
+          })}` : null]
+        }), amount - amountFree !== 1 && computedItemPrice > 0 || maxAmount > 0 && computedMaxItemPrice > 0 ? jsxs(TextAlignRight, {
+          as: "p",
+          variant: "body",
+          children: [formatNumber(calculatePrice({
+            price,
+            amount: 1,
+            timeUnit: 'hours',
+            timeAmount: 1,
+            discount
+          }), {
+            maximumFractionDigits: longFractionDigits ? maximumFractionDigitsLong.hours : maximumFractionDigits.hours
+          }), TIME_RELATED_UNIT.includes(unit) ? locales[`estimate.cost.units.${unit}.label`].toLowerCase() : `/${unit}`, !noIteration ? `/${locales['estimate.cost.units.hours.label'].toLowerCase()}` : null]
+        }) : null]
+      }) : null
+    }) : null]
+  });
+};
+
+export { Item };

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

@@ -0,0 +1,15 @@
+import _styled from '@emotion/styled/base';
+import { css } from '@emotion/react';
+
+const LineThrough = /*#__PURE__*/_styled('span', {
+  shouldForwardProp: prop => !['isActive'].includes(prop),
+  target: "e1d1k6i0"
+})(_ref => {
+  let {
+    isActive,
+    theme
+  } = _ref;
+  return isActive ? /*#__PURE__*/css("text-decoration-line:line-through;text-decoration-color:", theme.colors.warning.border, ";") : null;
+}, ";");
+
+export { LineThrough };