@ultraviolet/plus 0.14.4 → 0.15.1

package/dist/components/CustomerSatisfaction/assets/5-5.svg.js

@@ -0,0 +1,4 @@
+const rating5 = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2072%2072'%3e%3cg%20data-name='Calque%202'%3e%3cg%20data-name='Calque%201'%3e%3cpath%20fill='%23eef'%20fill-rule='evenodd'%20d='M36.08%200a77.07%2077.07%200%200%200-12.91%201.1C11.48%203.08%204%209.65%201.55%2021.43a69.74%2069.74%200%200%200-.24%2028.05c2.31%2012%209.57%2019.25%2021.61%2021.38a75%2075%200%200%200%2013%201.14%2077.07%2077.07%200%200%200%2012.91-1.1c11.65-2%2019.34-9.2%2021.8-20.9a72%2072%200%200%200%200-27.82c-2.31-12-9.54-18.91-21.58-21A75%2075%200%200%200%2036.08%200'/%3e%3cpath%20fill='%234f0599'%20d='M24.32%2028.58a1.08%201.08%200%200%201-1-1.12A5.3%205.3%200%200%200%2018.19%2022a5.3%205.3%200%200%200-5.09%205.46%201%201%200%201%201-2.09%200%207.46%207.46%200%200%201%207.18-7.7%207.45%207.45%200%200%201%207.17%207.7%201.08%201.08%200%200%201-1.04%201.12zm26.62%200a1.09%201.09%200%200%201-1-1.12%205.1%205.1%200%201%200-10.17%200%201%201%200%201%201-2.09%200%207.46%207.46%200%200%201%207.18-7.7%207.46%207.46%200%200%201%207.14%207.7%201.08%201.08%200%200%201-1.06%201.12z'/%3e%3cpath%20fill='%232e3192'%20fill-rule='evenodd'%20d='M70.66%2022.18c-2.31-12-9.54-18.91-21.58-21C48.46%201%2047.84%201%2047.22.85A39.73%2039.73%200%200%201%2062%2022c.28%201%205.22%2020.18-7%2034-10.87%2012.29-30.91%2015.38-48%206.17%203.73%204.53%209.06%207.47%2016%208.69A75%2075%200%200%200%2036%2072a77.07%2077.07%200%200%200%2012.91-1.1c11.65-2%2019.34-9.2%2021.8-20.9a72%2072%200%200%200-.05-27.82z'%20opacity='.06'/%3e%3cpath%20fill='%23fff'%20d='M46%2032.9v5.47a21.22%2021.22%200%200%201-30%200V32.9a21.22%2021.22%200%200%200%2030%200'/%3e%3cpath%20fill='%23f954a2'%20d='M34.82%2048.44a6.4%206.4%200%200%201%205.63%203.36%2015%2015%200%200%201-18.9%200A6.39%206.39%200%200%201%2031%2049.71a6.31%206.31%200%200%201%203.82-1.27'/%3e%3cpath%20fill='%23971096'%20d='M46%2038.37v1.78a15%2015%200%200%201-4.39%2010.61c-.37.37-.76.71-1.16%201a6.4%206.4%200%200%200-5.63-3.36A6.31%206.31%200%200%200%2031%2049.71a6.39%206.39%200%200%200-9.45%202.09A15%2015%200%200%201%2016%2040.15v-1.78a21.22%2021.22%200%200%200%2030%200'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+export {
+  rating5 as default
+};

package/dist/components/CustomerSatisfaction/assets/5-5NB.svg.js

@@ -0,0 +1,4 @@
+const rating5NS = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2072%2072'%3e%3cg%20data-name='Calque%202'%3e%3cg%20data-name='Calque%201'%3e%3cpath%20fill='%23f0f0f0'%20fill-rule='evenodd'%20d='M36.08%200a77.07%2077.07%200%200%200-12.91%201.1C11.48%203.08%204%209.65%201.55%2021.43a69.74%2069.74%200%200%200-.24%2028.05c2.31%2012%209.57%2019.25%2021.61%2021.38a75%2075%200%200%200%2013%201.14%2077.07%2077.07%200%200%200%2012.91-1.1c11.65-2%2019.34-9.2%2021.8-20.9a72%2072%200%200%200%200-27.82c-2.31-12-9.54-18.91-21.58-21A75%2075%200%200%200%2036.08%200'/%3e%3cpath%20fill='%232b2b2b'%20d='M24.32%2028.58a1.08%201.08%200%200%201-1-1.12A5.3%205.3%200%200%200%2018.19%2022a5.3%205.3%200%200%200-5.09%205.46%201%201%200%201%201-2.09%200%207.46%207.46%200%200%201%207.18-7.7%207.45%207.45%200%200%201%207.17%207.7%201.08%201.08%200%200%201-1.04%201.12zm26.62%200a1.09%201.09%200%200%201-1-1.12%205.1%205.1%200%201%200-10.17%200%201%201%200%201%201-2.09%200%207.46%207.46%200%200%201%207.18-7.7%207.46%207.46%200%200%201%207.14%207.7%201.08%201.08%200%200%201-1.06%201.12z'/%3e%3cpath%20fill='%233b3b3b'%20fill-rule='evenodd'%20d='M70.66%2022.18c-2.31-12-9.54-18.91-21.58-21C48.46%201%2047.84%201%2047.22.85A39.73%2039.73%200%200%201%2062%2022c.28%201%205.22%2020.18-7%2034-10.87%2012.29-30.91%2015.38-48%206.17%203.73%204.53%209.06%207.47%2016%208.69A75%2075%200%200%200%2036%2072a77.07%2077.07%200%200%200%2012.91-1.1c11.65-2%2019.34-9.2%2021.8-20.9a72%2072%200%200%200-.05-27.82z'%20opacity='.06'/%3e%3cpath%20fill='%23fff'%20d='M46%2032.9v5.47a21.22%2021.22%200%200%201-30%200V32.9a21.22%2021.22%200%200%200%2030%200'/%3e%3cpath%20fill='%238e8e8e'%20d='M34.82%2048.44a6.4%206.4%200%200%201%205.63%203.36%2015%2015%200%200%201-18.9%200A6.39%206.39%200%200%201%2031%2049.71a6.31%206.31%200%200%201%203.82-1.27'/%3e%3cpath%20fill='%23474747'%20d='M46%2038.37v1.78a15%2015%200%200%201-4.39%2010.61c-.37.37-.76.71-1.16%201a6.4%206.4%200%200%200-5.63-3.36A6.31%206.31%200%200%200%2031%2049.71a6.39%206.39%200%200%200-9.45%202.09A15%2015%200%200%201%2016%2040.15v-1.78a21.22%2021.22%200%200%200%2030%200'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+export {
+  rating5NS as default
+};

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

@@ -0,0 +1,30 @@
+declare const ratings: readonly [{
+    readonly value: 1;
+    readonly imgSelected: string;
+    readonly imgNotSelected: string;
+}, {
+    readonly value: 2;
+    readonly imgSelected: string;
+    readonly imgNotSelected: string;
+}, {
+    readonly value: 3;
+    readonly imgSelected: string;
+    readonly imgNotSelected: string;
+}, {
+    readonly value: 4;
+    readonly imgSelected: string;
+    readonly imgNotSelected: string;
+}, {
+    readonly value: 5;
+    readonly imgSelected: string;
+    readonly imgNotSelected: string;
+}];
+type Value = (typeof ratings)[number]['value'];
+type CustomerSatisfactionProps = {
+    value: Value;
+    onChange: (rating: Value) => void;
+    'data-testid'?: string;
+    className?: string;
+};
+export declare const CustomerSatisfaction: ({ value, onChange, "data-testid": dataTestId, className, }: CustomerSatisfactionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CustomerSatisfaction/index.js

@@ -0,0 +1,144 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { keyframes, css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Stack } from "@ultraviolet/ui";
+import { useState, useMemo } from "react";
+import rating1 from "./assets/1-5.svg.js";
+import rating1NS from "./assets/1-5NB.svg.js";
+import rating2 from "./assets/2-5.svg.js";
+import rating2NS from "./assets/2-5NB.svg.js";
+import rating3 from "./assets/3-5.svg.js";
+import rating3NS from "./assets/3-5NB.svg.js";
+import rating4 from "./assets/4-5.svg.js";
+import rating4NS from "./assets/4-5NB.svg.js";
+import rating5 from "./assets/5-5.svg.js";
+import rating5NS from "./assets/5-5NB.svg.js";
+const ratings = [
+  {
+    value: 1,
+    imgSelected: rating1,
+    imgNotSelected: rating1NS
+  },
+  {
+    value: 2,
+    imgSelected: rating2,
+    imgNotSelected: rating2NS
+  },
+  {
+    value: 3,
+    imgSelected: rating3,
+    imgNotSelected: rating3NS
+  },
+  {
+    value: 4,
+    imgSelected: rating4,
+    imgNotSelected: rating4NS
+  },
+  {
+    value: 5,
+    imgSelected: rating5,
+    imgNotSelected: rating5NS
+  }
+];
+const angryAnim = keyframes`
+  from, 10%, 40%, 80%, to {
+    transform: translate3d(0, 0, 0);
+    transform: rotate(0deg);
+  }
+  30% {
+    transform: translate3d(-5px, 0, 0);
+    transform: rotate(5deg);
+  }
+
+  60% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  90% {
+    transform: translate3d(-1px, 0, 0);
+    transform: rotate(-5deg);
+  }
+`;
+const happyAnim = keyframes`
+  from, 10%, 40%, 80%, to {
+    transform: translate3d(0, 0, 0);
+    transform: rotate(0deg);
+  }
+  30% {
+    transform: translate3d(0, 5px, 0);
+    transform: rotate(5deg);
+  }
+
+  60% {
+    transform: translate3d(0, -6px, 0);
+  }
+
+  90% {
+    transform: translate3d(0, -2px, 0);
+  }
+`;
+const scaled = css`
+  transform: scale(1.2);
+`;
+const Image = styled.img`
+  height: 88px;
+  width: 88px;
+  cursor: pointer;
+  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
+
+  &:hover,
+  &:focus {
+    ${scaled};
+  }
+
+  ${({ isHovered, isSelected }) => isHovered && isSelected && scaled}
+  ${({ isSelected, isHappy }) => isSelected && css`
+      animation: ${isHappy ? happyAnim : angryAnim} 1s ease infinite;
+    `}
+`;
+const CustomerSatisfaction = ({
+  value,
+  onChange,
+  "data-testid": dataTestId,
+  className
+}) => {
+  const [hoveredValue, setHoveredValue] = useState(0);
+  const isHappy = useMemo(() => value > ratings.length / 2, [value]);
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      direction: "row",
+      justifyContent: "space-between",
+      className,
+      "data-testid": dataTestId,
+      children: ratings.map((rating) => {
+        const isSelected = rating.value === value;
+        const isHovered = rating.value === hoveredValue;
+        const isOverfly = rating.value <= hoveredValue;
+        return /* @__PURE__ */ jsx(
+          Image,
+          {
+            isHappy,
+            isHovered,
+            isSelected,
+            src: isSelected || isOverfly || rating.value <= value ? rating.imgSelected : rating.imgNotSelected,
+            onClick: () => {
+              onChange(rating.value);
+            },
+            onMouseEnter: () => {
+              setHoveredValue(rating.value);
+            },
+            onMouseLeave: () => {
+              setHoveredValue(0);
+            },
+            "data-testid": `${dataTestId}-${rating.value}`
+          },
+          rating.value
+        );
+      })
+    }
+  );
+};
+export {
+  CustomerSatisfaction
+};

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

@@ -0,0 +1,9 @@
+import type { Iteration, Units } from '../types';
+type CustomUnitInputProps = {
+    defaultTimeUnit?: Units;
+    setIteration: (iteration: Iteration) => void;
+    iteration: Iteration;
+    timeUnits: Units[];
+};
+export declare const CustomUnitInput: ({ defaultTimeUnit, setIteration, iteration, timeUnits, }: CustomUnitInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,48 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useMemo } from "react";
+import { useEstimateCost } from "../EstimateCostProvider.js";
+import { UnitInput } from "./UnitInput.js";
+const CustomUnitInput = ({
+  defaultTimeUnit = "hours",
+  setIteration,
+  iteration,
+  timeUnits
+}) => {
+  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(({ value }) => value === defaultTimeUnit),
+    [defaultTimeUnit, options]
+  );
+  return /* @__PURE__ */ 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
+    }
+  );
+};
+export {
+  CustomUnitInput
+};

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

@@ -0,0 +1,115 @@
+import { Text } from '@ultraviolet/ui';
+import type { ComponentProps, ReactNode } from 'react';
+import type { BareEstimateProduct, EstimateProduct, Iteration } from '../types';
+type ItemProps = {
+    amount?: number;
+    /**
+     * Number of items that are free. It will be deducted to price of the item.
+     */
+    amountFree?: number;
+    /**
+     * if true, zoomIn animation is triggered
+     */
+    animated?: boolean;
+    children?: ReactNode;
+    discount?: number;
+    discountText?: string;
+    /**
+     * Hide element from overlay
+     */
+    hideFromOverlay?: boolean;
+    /**
+     * Do not set this prop, it is transferred from parent
+     */
+    isDefined?: boolean;
+    /**
+     * Do not set this prop, it is transferred from parent
+     */
+    isFirstElement?: boolean;
+    /**
+     * Do not set this prop, it is transferred from parent
+     */
+    isLastElement?: boolean;
+    isPrimaryBackground?: boolean;
+    /**
+     * Do not set this prop, it is transferred from parent
+     */
+    iteration?: Iteration;
+    /**
+     * String that is displayed on left part of the item, it defines the item
+     */
+    label?: ReactNode;
+    /**
+     * Changes label typography variant
+     */
+    labelTextVariant?: ComponentProps<typeof Text>['variant'];
+    /**
+     * Changes label typography prominence
+     */
+    labelTextProminence?: ComponentProps<typeof Text>['prominence'];
+    /**
+     * If your price has a lot of number after decimal point (ex: 0.0000076) - up 8 fraction digits
+     */
+    longFractionDigits?: boolean;
+    /**
+     * Create a range price with [amount - maxAmount] values and prices
+     */
+    maxAmount?: number;
+    /**
+     * Price per month
+     */
+    monthlyPrice?: number;
+    /**
+     * Remove border bottom of the item
+     */
+    noBorder?: boolean;
+    /**
+     * If the price of the item is not based on time enable this prop. ex: 5kg of chocolate is same price over 1 month or 1 hour.
+     */
+    noIteration?: boolean;
+    noIterationText?: string;
+    /**
+     * Remove the price on the right section of the table
+     */
+    noPrice?: boolean;
+    /**
+     * Notice to display below the label
+     */
+    notice?: string;
+    onAmountChange?: (amount: number) => void;
+    /**
+     * Hourly price for one unit
+     */
+    price?: number;
+    priceText?: ReactNode;
+    productsCallback?: {
+        add: (product: EstimateProduct) => void;
+        remove: (product: BareEstimateProduct) => void;
+    };
+    /**
+     * Hide item from overlay if screen width is small
+     */
+    shouldBeHidden?: boolean;
+    /**
+     * Display a complementary text on the right of the label
+     */
+    subLabel?: string;
+    /**
+     * Increase left padding of the item like
+     */
+    tabulation?: number;
+    /**
+     * Text to display in case of not defined value
+     */
+    textNotDefined?: string;
+    /**
+     * Display near label, an icon with a tooltip that contains your text
+     */
+    tooltipInfo?: string;
+    /**
+     * Unit of your item, examples: GB, MB, Node, Queries, etc.
+     */
+    unit?: 'mb' | 'gb' | 'tb' | 'seconds' | 'minutes' | 'hours' | 'days' | 'months' | 'years' | (string & {});
+};
+export declare const 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, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,318 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { zoomIn, Badge, Text, Tooltip, Stack, Icon } from "@ultraviolet/ui";
+import { useMemo, useState, useEffect, useCallback, useId, Children, isValidElement, cloneElement } from "react";
+import { useEstimateCost } from "../EstimateCostProvider.js";
+import { useOverlay } from "../OverlayContext.js";
+import { Cell, PriceCell, StyledDiv, OverlayRow, StyledTr, StyledLeftSide } from "../componentStyle.js";
+import { multiplier, maximumFractionDigitsLong, maximumFractionDigits, MAX_CELL_WIDTH } from "../constants.js";
+import { calculatePrice } from "../helper.js";
+const TIME_RELATED_UNIT = [
+  "seconds",
+  "minutes",
+  "hours",
+  "days",
+  "months"
+];
+const StyledResourceName = styled("div", {
+  shouldForwardProp: (prop) => !["isOverlay", "animated"].includes(prop)
+})`
+  text-align: ${({ isOverlay }) => isOverlay ? "initial" : "right"};
+
+  ${({ isOverlay, animated }) => isOverlay ? css`
+          height: 48px;
+          display: flex;
+          flex-direction: column;
+          -webkit-box-pack: center;
+          justify-content: center;
+          animation: ${animated ? css`800ms ${zoomIn}` : ""};
+        ` : null}
+`;
+const StyledBadge = styled(Badge)`
+  margin-left: ${({ theme }) => theme.space["1"]};
+  align-self: center;
+`;
+const StyledText = styled(Text)`
+  margin-left: ${({ theme }) => theme.space["1"]};
+`;
+const MaxWidthText = styled(Text)`
+  max-width: 75%;
+`;
+const TextAlignRight = styled(Text)`
+  text-align: right;
+`;
+const StyledTooltip = styled(Tooltip)`
+  vertical-align: text-top;
+`;
+const StyledPriceCell = styled(Cell)`
+  ${({ theme }) => PriceCell(theme)}
+`;
+const StyleNoPriceItem = styled(Text)`
+  text-align: right;
+`;
+const Item = ({
+  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
+}) => {
+  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 : StyledTr;
+  const Cell$1 = isOverlay ? Cell.withComponent("div") : 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();
+  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 void 0;
+    }
+    return longFractionDigits ? maximumFractionDigitsLong[iteration?.unit] : maximumFractionDigits[iteration?.unit];
+  }, [iteration?.unit, longFractionDigits]);
+  return /* @__PURE__ */ jsxs(
+    Row,
+    {
+      isFirstElement,
+      shouldBeHidden,
+      hideFromOverlay,
+      children: [
+        /* @__PURE__ */ jsx(
+          Cell$1,
+          {
+            width: !isOverlay ? MAX_CELL_WIDTH : "inherit",
+            hasBorder: !isLastElement && !noBorder && !isOverlay,
+            tabulation,
+            children: /* @__PURE__ */ jsxs(LeftSide, { children: [
+              /* @__PURE__ */ jsxs(Stack, { children: [
+                /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      as: "p",
+                      variant: labelTextVariant ?? "body",
+                      prominence: labelTextProminence ?? "default",
+                      children: label
+                    }
+                  ),
+                  tooltipInfo ? /* @__PURE__ */ jsx(StyledDiv, { children: /* @__PURE__ */ jsx(StyledTooltip, { text: tooltipInfo, children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: "help-circle-outline",
+                      size: 20,
+                      variant: "outlined"
+                    }
+                  ) }) }) : null,
+                  subLabel && !isOverlay ? /* @__PURE__ */ jsx(StyledText, { as: "p", variant: "body", color: "primary", italic: true, children: subLabel }) : null,
+                  discount > 0 && discountText ? /* @__PURE__ */ jsx(
+                    StyledBadge,
+                    {
+                      prominence: "strong",
+                      size: "small",
+                      sentiment: "warning",
+                      children: discountText
+                    }
+                  ) : null
+                ] }),
+                notice ? /* @__PURE__ */ jsx(MaxWidthText, { as: "p", variant: "caption", prominence: "weak", children: notice }) : null
+              ] }),
+              /* @__PURE__ */ jsx(StyledResourceName, { isOverlay, animated, children: isDefined ? Children.map(
+                children,
+                (child) => isValidElement(child) ? cloneElement(child, {
+                  itemCallback,
+                  amount,
+                  maxAmount,
+                  unit
+                }) : null
+              ) : textNotDefined || locales["estimate.cost.notDefined"] })
+            ] })
+          }
+        ),
+        !isOverlay ? /* @__PURE__ */ jsx(
+          StyledPriceCell,
+          {
+            hasBorder: !isLastElement && !noBorder,
+            primary: isPrimaryBackground,
+            children: !noPrice ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ 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 ? /* @__PURE__ */ 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 ? /* @__PURE__ */ 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/components/EstimateCost/Components/LineThrough.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type LineThroughProps = {
+    isActive?: boolean;
+};
+export declare const LineThrough: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & LineThroughProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export {};