@ultraviolet/plus 3.0.0-beta.9 → 3.1.0

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

@@ -0,0 +1,124 @@
+/* empty css                                                                */
+/* empty css                                                          */
+/* empty css                                                             */
+/* empty css                                                              */
+/* empty css                                                            */
+/* empty css                                                           */
+/* empty css                                                          */
+/* empty css                                                             */
+/* empty css                                                            */
+/* empty css                                                           */
+/* empty css                                                        */
+/* empty css                                                            */
+/* empty css                                                          */
+/* empty css                                                                   */
+/* empty css                                                           */
+/* empty css                                                              */
+/* empty css                                                          */
+/* empty css                                                         */
+/* empty css                                                           */
+/* empty css                                                             */
+/* empty css                                                          */
+/* empty css                                                             */
+/* empty css                                                                           */
+/* empty css                                                                */
+/* empty css                                                           */
+/* empty css                                                         */
+/* empty css                                                             */
+/* empty css                                                             */
+/* empty css                                                                  */
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                        */
+/* empty css                                                           */
+/* empty css                                                                         */
+/* empty css                                                              */
+/* empty css                                                          */
+/* empty css                                                           */
+/* empty css                                                              */
+/* empty css                                                           */
+/* empty css                                                               */
+/* empty css                                                               */
+/* empty css                                                                   */
+/* empty css                                                                */
+/* empty css                                                        */
+/* empty css                                                              */
+/* empty css                                                         */
+/* empty css                                                            */
+/* empty css                                                                     */
+/* empty css                                                             */
+/* empty css                                                         */
+/* empty css                                                                */
+/* empty css                                                          */
+/* empty css                                                           */
+/* empty css                                                                 */
+/* empty css                                                                */
+/* empty css                                                               */
+/* empty css                                                                             */
+/* empty css                                                        */
+/* empty css                                                                              */
+/* empty css                                                                */
+/* empty css                                                                  */
+/* empty css                                                             */
+/* empty css                                                            */
+/* empty css                                                                */
+/* empty css                                                                   */
+/* empty css                                                          */
+/* empty css                                                               */
+/* empty css                                                                   */
+/* empty css                                                                      */
+/* empty css                                                                        */
+/* empty css                                                                              */
+/* empty css                                                           */
+/* empty css                                                            */
+/* empty css                                                           */
+/* empty css                                                             */
+/* empty css                                                            */
+/* empty css                                                                 */
+/* empty css                                                          */
+/* empty css                                                             */
+/* empty css                                                         */
+/* empty css                                                             */
+/* empty css                                                            */
+/* empty css                                                             */
+/* empty css                                                              */
+/* empty css                                                            */
+/* empty css                                                           */
+/* empty css                                                                */
+/* empty css                                                                 */
+/* empty css                                                              */
+/* empty css                                                                     */
+/* empty css                              */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var maxWidthTextVar = "var(--uv_plus_1ko5kn20)";
+var maxWidthText = "uv_plus_1ko5kn21";
+var estimateCostTr = "uv_plus_1ko5kn23";
+var styledDiv = "uv_plus_1ko5kn24";
+var estimateCostLeftSide = "uv_plus_1ko5kn25";
+var estimateCostItemResourceName = createRuntimeFn({ defaultClassName: "uv_plus_1ko5kn26", variantClassNames: { animated: { true: "uv_plus_1ko5kn27" } }, defaultVariants: { animated: false }, compoundVariants: [] });
+var estimateCostResourceName = createRuntimeFn({ defaultClassName: "uv_plus_1ko5kn28", variantClassNames: { isOverlay: { true: "uv_plus_1ko5kn29", false: "uv_plus_1ko5kn2a" }, isAnimated: { true: "uv_plus_1ko5kn2b" } }, defaultVariants: { isAnimated: false, isOverlay: false }, compoundVariants: [] });
+var estimateCostBadgeItem = "uv_plus_1ko5kn2c";
+var estimateCostTextItem = "uv_plus_1ko5kn2d";
+var estimateCostMaxWidthText = "uv_plus_1ko5kn2e";
+var estimateCostTooltip = "uv_plus_1ko5kn2f";
+var estimateCostLineThrough = "uv_plus_1ko5kn2g";
+var estimateCostRegular = createRuntimeFn({ defaultClassName: "uv_plus_1ko5kn2h", variantClassNames: { isOverlay: { true: "uv_plus_1ko5kn2i", false: "uv_plus_1ko5kn2j" }, variant: { normal: "uv_plus_1ko5kn2k", big: "uv_plus_1ko5kn2l", capitalized: "uv_plus_1ko5kn2m", small: "uv_plus_1ko5kn2n" } }, defaultVariants: { isOverlay: false, variant: "normal" }, compoundVariants: [] });
+var estimateCostStrong = createRuntimeFn({ defaultClassName: "uv_plus_1ko5kn2o", variantClassNames: { variant: { normal: "uv_plus_1ko5kn2p", big: "uv_plus_1ko5kn2q", capitalized: "uv_plus_1ko5kn2r", small: "uv_plus_1ko5kn2s" } }, defaultVariants: { variant: "normal" }, compoundVariants: [] });
+var estimateCostNumberInput = "uv_plus_1ko5kn2t";
+export {
+  estimateCostBadgeItem,
+  estimateCostItemResourceName,
+  estimateCostLeftSide,
+  estimateCostLineThrough,
+  estimateCostMaxWidthText,
+  estimateCostNumberInput,
+  estimateCostRegular,
+  estimateCostResourceName,
+  estimateCostStrong,
+  estimateCostTextItem,
+  estimateCostTooltip,
+  estimateCostTr,
+  maxWidthText,
+  maxWidthTextVar,
+  styledDiv
+};

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

@@ -1,15 +1,12 @@
 import { Text } from '@ultraviolet/ui';
-import type { ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import type { EstimateCostProps } from './types';
 declare const EstimateCost: {
-    ({ description, alert, alertTitle, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, discount, OverlayRight, OverlayLeft, overlayMargin, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, numberLocales, currency, onTotalPriceChange, }: EstimateCostProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    LineThrough: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme;
-        as?: React.ElementType;
-    } & {
+    ({ description, alert, alertTitle, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, discount, OverlayRight, OverlayLeft, overlayMargin, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, numberLocales, currency, style, onTotalPriceChange, }: EstimateCostProps): import("react/jsx-runtime").JSX.Element;
+    LineThrough: ({ isActive, className, ...props }: import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
         isActive?: boolean;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-    Item: import("react").MemoExoticComponent<({ 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, strikeThrough, }: {
+    }) => import("react/jsx-runtime").JSX.Element;
+    Item: import("react").MemoExoticComponent<({ 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, strikeThrough, style, }: {
         amount?: number;
         amountFree?: number;
         animated?: boolean;
@@ -23,8 +20,8 @@ declare const EstimateCost: {
         isPrimaryBackground?: boolean;
         iteration?: import("./types").Iteration;
         label?: ReactNode;
-        labelTextVariant?: import("react").ComponentProps<typeof Text>["variant"];
-        labelTextProminence?: import("react").ComponentProps<typeof Text>["prominence"];
+        labelTextVariant?: ComponentProps<typeof Text>["variant"];
+        labelTextProminence?: ComponentProps<typeof Text>["prominence"];
         longFractionDigits?: boolean;
         maxAmount?: number;
         monthlyPrice?: number;
@@ -47,7 +44,8 @@ declare const EstimateCost: {
         tooltipInfo?: string;
         unit?: "mb" | "gb" | "tb" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | (string & NonNullable<unknown>);
         strikeThrough?: boolean;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element>;
+        style?: import("react").CSSProperties;
+    }) => import("react/jsx-runtime").JSX.Element>;
     NumberInput: ({ amount, minValue, maxValue, getAmountValue, itemCallback, controls, }: {
         amount?: number;
         itemCallback?: (amount?: number | null, isVariant?: boolean) => void;
@@ -55,29 +53,29 @@ declare const EstimateCost: {
         minValue?: number;
         maxValue?: number;
         controls?: boolean;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Unit: ({ amount, itemCallback, getAmountValue, unit, }: {
+    }) => import("react/jsx-runtime").JSX.Element;
+    Unit: ({ amount, itemCallback, getAmountValue, unit, style, }: {
         amount?: number;
         itemCallback?: (amount?: number, isVariant?: boolean) => void;
         getAmountValue?: (amount?: number) => void;
         unit?: string;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Strong: import("react").MemoExoticComponent<({ variant, children, isDisabledOnOverlay, }: {
+        style?: import("react").CSSProperties;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Strong: import("react").MemoExoticComponent<({ variant, children, style }: {
         variant?: "normal" | "small" | "big" | "capitalized";
         children?: ReactNode;
         isDisabledOnOverlay?: boolean;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element>;
-    Regular: import("react").MemoExoticComponent<({ variant, isDisabledOnOverlay, children, className, }: {
+        style?: import("react").CSSProperties;
+    }) => import("react/jsx-runtime").JSX.Element>;
+    Regular: import("react").MemoExoticComponent<({ variant, isDisabledOnOverlay, children, className, style, }: {
         variant?: "normal" | "small" | "big" | "capitalized";
         isDisabledOnOverlay?: boolean;
         children?: ReactNode;
+        style?: import("react").CSSProperties;
         className?: string;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element | null>;
-    Image: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme;
-        as?: React.ElementType;
-    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-    Region: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, hideFromOverlay, }: {
+    }) => import("react/jsx-runtime").JSX.Element | null>;
+    Image: (props: ComponentProps<"img">) => import("react/jsx-runtime").JSX.Element;
+    Region: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, hideFromOverlay, style, }: {
         shouldBeHidden?: boolean;
         priceText?: ReactNode;
         animated?: boolean;
@@ -107,8 +105,8 @@ declare const EstimateCost: {
         isPrimaryBackground?: boolean;
         iteration?: import("./types").Iteration;
         label?: ReactNode;
-        labelTextVariant?: import("react").ComponentProps<typeof Text>["variant"];
-        labelTextProminence?: import("react").ComponentProps<typeof Text>["prominence"];
+        labelTextVariant?: ComponentProps<typeof Text>["variant"];
+        labelTextProminence?: ComponentProps<typeof Text>["prominence"];
         longFractionDigits?: boolean;
         maxAmount?: number;
         monthlyPrice?: number;
@@ -131,8 +129,9 @@ declare const EstimateCost: {
         tooltipInfo?: string;
         unit?: "mb" | "gb" | "tb" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | (string & NonNullable<unknown>);
         strikeThrough?: boolean;
-    }, "hideFromOverlay">) => import("@emotion/react/jsx-runtime").JSX.Element>;
-    Zone: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, }: {
+        style?: import("react").CSSProperties;
+    }, "style" | "hideFromOverlay">) => import("react/jsx-runtime").JSX.Element>;
+    Zone: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, style, }: {
         shouldBeHidden?: boolean;
         priceText?: string;
         animated?: boolean;
@@ -148,11 +147,12 @@ declare const EstimateCost: {
         image: string;
         noBorder?: boolean;
         noPrice?: boolean;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element>;
+        style?: import("react").CSSProperties;
+    }) => import("react/jsx-runtime").JSX.Element>;
     Ellipsis: ({ children, maxWidth, "data-testid": dataTestId, }: {
         children: ReactNode;
         maxWidth?: number;
         "data-testid"?: string;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export { EstimateCost };

package/dist/components/EstimateCost/EstimateCost.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx } from "react/jsx-runtime";
 import { Text } from "@ultraviolet/ui";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Children } from "react";
+import { maxWidthText, maxWidthTextVar } from "./Components/components.css.js";
 import { Item } from "./Components/Item.js";
 import { LineThrough } from "./Components/LineThrough.js";
 import { NumberInput } from "./Components/NumberInput.js";
@@ -15,15 +16,16 @@ import { EstimateCostContent } from "./EstimateCostContent.js";
 import { EstimateCostProvider } from "./EstimateCostProvider.js";
 import EstimateCostLocales from "./locales/en.js";
 import { useOverlay } from "./OverlayContext.js";
-const MaxWidthText = /* @__PURE__ */ _styled(Text, process.env.NODE_ENV === "production" ? {
-  target: "e13v5qur1"
-} : {
-  target: "e13v5qur1",
-  label: "MaxWidthText"
-})("max-width:", ({
-  maxWidth
-}) => maxWidth, "px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvRXN0aW1hdGVDb3N0L0VzdGltYXRlQ29zdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0J3RCIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy9wbHVzL3NyYy9jb21wb25lbnRzL0VzdGltYXRlQ29zdC9Fc3RpbWF0ZUNvc3QudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJ0B1bHRyYXZpb2xldC91aSdcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBDaGlsZHJlbiB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgSXRlbSB9IGZyb20gJy4vQ29tcG9uZW50cy9JdGVtJ1xuaW1wb3J0IHsgTGluZVRocm91Z2ggfSBmcm9tICcuL0NvbXBvbmVudHMvTGluZVRocm91Z2gnXG5pbXBvcnQgeyBOdW1iZXJJbnB1dCB9IGZyb20gJy4vQ29tcG9uZW50cy9OdW1iZXJJbnB1dCdcbmltcG9ydCB7IFJlZ2lvbiB9IGZyb20gJy4vQ29tcG9uZW50cy9SZWdpb24nXG5pbXBvcnQgeyBSZWd1bGFyIH0gZnJvbSAnLi9Db21wb25lbnRzL1JlZ3VsYXInXG5pbXBvcnQgeyBTdHJvbmcgfSBmcm9tICcuL0NvbXBvbmVudHMvU3Ryb25nJ1xuaW1wb3J0IHsgVW5pdCB9IGZyb20gJy4vQ29tcG9uZW50cy9Vbml0J1xuaW1wb3J0IHsgWm9uZSB9IGZyb20gJy4vQ29tcG9uZW50cy9ab25lJ1xuaW1wb3J0IHsgRXN0aW1hdGVDb3N0Q29udGVudCB9IGZyb20gJy4vRXN0aW1hdGVDb3N0Q29udGVudCdcbmltcG9ydCB7IEVzdGltYXRlQ29zdFByb3ZpZGVyIH0gZnJvbSAnLi9Fc3RpbWF0ZUNvc3RQcm92aWRlcidcbmltcG9ydCBFc3RpbWF0ZUNvc3RMb2NhbGVzIGZyb20gJy4vbG9jYWxlcy9lbidcbmltcG9ydCB7IHVzZU92ZXJsYXkgfSBmcm9tICcuL092ZXJsYXlDb250ZXh0J1xuaW1wb3J0IHR5cGUgeyBFc3RpbWF0ZUNvc3RQcm9wcywgVW5pdHMgfSBmcm9tICcuL3R5cGVzJ1xuXG5jb25zdCBNYXhXaWR0aFRleHQgPSBzdHlsZWQoVGV4dCk8eyBtYXhXaWR0aD86IG51bWJlciB9PmBcbiAgbWF4LXdpZHRoOiAkeyh7IG1heFdpZHRoIH0pID0+IG1heFdpZHRofXB4O1xuYFxuXG5jb25zdCBERUZBVUxUX1VOSVRfTElTVDogVW5pdHNbXSA9IFsnaG91cnMnLCAnZGF5cycsICdtb250aHMnXVxuXG5jb25zdCBFc3RpbWF0ZUNvc3QgPSAoe1xuICBkZXNjcmlwdGlvbixcbiAgYWxlcnQsXG4gIGFsZXJ0VGl0bGUsXG4gIGFsZXJ0VmFyaWFudCA9ICd3YXJuaW5nJyxcbiAgZGVmYXVsdFRpbWVVbml0ID0gJ2hvdXJzJyxcbiAgdGltZVVuaXRzID0gREVGQVVMVF9VTklUX0xJU1QsXG4gIGhpZGVPdmVybGF5ID0gZmFsc2UsXG4gIGRpc2FibGVPdmVybGF5TGVmdCA9IGZhbHNlLFxuICBkaXNhYmxlT3ZlcmxheVJpZ2h0ID0gZmFsc2UsXG4gIGhpZGVUaW1lVW5pdCA9IGZhbHNlLFxuICBoaWRlVG90YWwgPSBmYWxzZSxcbiAgZGlzY291bnQgPSAwLFxuICBPdmVybGF5UmlnaHQsXG4gIE92ZXJsYXlMZWZ0LFxuICBvdmVybGF5TWFyZ2luLFxuICBpc0JldGEgPSBmYWxzZSxcbiAgY29tbWl0bWVudEZlZXMsXG4gIGNvbW1pdG1lbnRGZWVzQ29udGVudCxcbiAgbW9udGhseUZlZXMsXG4gIG1vbnRobHlGZWVzTGFiZWwsXG4gIG1vbnRobHlGZWVzQ29udGVudCxcbiAgb3ZlcmxheVVuaXQgPSAnaG91cnMnLFxuICBjaGlsZHJlbiA9IG51bGwsXG4gIGxvY2FsZXMgPSBFc3RpbWF0ZUNvc3RMb2NhbGVzLFxuICBudW1iZXJMb2NhbGVzID0gJ2VuLUVOJyxcbiAgY3VycmVuY3kgPSAnRVVSJyxcbiAgb25Ub3RhbFByaWNlQ2hhbmdlLFxufTogRXN0aW1hdGVDb3N0UHJvcHMpID0+IChcbiAgPEVzdGltYXRlQ29zdFByb3ZpZGVyXG4gICAgY3VycmVuY3k9e2N1cnJlbmN5fVxuICAgIGxvY2FsZXM9e2xvY2FsZXN9XG4gICAgbnVtYmVyTG9jYWxlcz17bnVtYmVyTG9jYWxlc31cbiAgPlxuICAgIDxFc3RpbWF0ZUNvc3RDb250ZW50XG4gICAgICBhbGVydD17YWxlcnR9XG4gICAgICBhbGVydFRpdGxlPXthbGVydFRpdGxlfVxuICAgICAgYWxlcnRWYXJpYW50PXthbGVydFZhcmlhbnR9XG4gICAgICBjb21taXRtZW50RmVlcz17Y29tbWl0bWVudEZlZXN9XG4gICAgICBjb21taXRtZW50RmVlc0NvbnRlbnQ9e2NvbW1pdG1lbnRGZWVzQ29udGVudH1cbiAgICAgIGRlZmF1bHRUaW1lVW5pdD17ZGVmYXVsdFRpbWVVbml0fVxuICAgICAgZGVzY3JpcHRpb249e2Rlc2NyaXB0aW9ufVxuICAgICAgZGlzYWJsZU92ZXJsYXlMZWZ0PXtkaXNhYmxlT3ZlcmxheUxlZnR9XG4gICAgICBkaXNhYmxlT3ZlcmxheVJpZ2h0PXtkaXNhYmxlT3ZlcmxheVJpZ2h0fVxuICAgICAgZGlzY291bnQ9e2Rpc2NvdW50fVxuICAgICAgaGlkZU92ZXJsYXk9e2hpZGVPdmVybGF5fVxuICAgICAgaGlkZVRpbWVVbml0PXtoaWRlVGltZVVuaXR9XG4gICAgICBoaWRlVG90YWw9e2hpZGVUb3RhbH1cbiAgICAgIGlzQmV0YT17aXNCZXRhfVxuICAgICAgbG9jYWxlcz17bG9jYWxlc31cbiAgICAgIG1vbnRobHlGZWVzPXttb250aGx5RmVlc31cbiAgICAgIG1vbnRobHlGZWVzQ29udGVudD17bW9udGhseUZlZXNDb250ZW50fVxuICAgICAgbW9udGhseUZlZXNMYWJlbD17bW9udGhseUZlZXNMYWJlbH1cbiAgICAgIE92ZXJsYXlMZWZ0PXtPdmVybGF5TGVmdH1cbiAgICAgIE92ZXJsYXlSaWdodD17T3ZlcmxheVJpZ2h0fVxuICAgICAgb25Ub3RhbFByaWNlQ2hhbmdlPXtvblRvdGFsUHJpY2VDaGFuZ2V9XG4gICAgICBvdmVybGF5TWFyZ2luPXtvdmVybGF5TWFyZ2lufVxuICAgICAgb3ZlcmxheVVuaXQ9e292ZXJsYXlVbml0fVxuICAgICAgdGltZVVuaXRzPXt0aW1lVW5pdHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvRXN0aW1hdGVDb3N0Q29udGVudD5cbiAgPC9Fc3RpbWF0ZUNvc3RQcm92aWRlcj5cbilcblxuRXN0aW1hdGVDb3N0LkxpbmVUaHJvdWdoID0gTGluZVRocm91Z2hcblxuRXN0aW1hdGVDb3N0Lkl0ZW0gPSBJdGVtXG5cbkVzdGltYXRlQ29zdC5OdW1iZXJJbnB1dCA9IE51bWJlcklucHV0XG5cbkVzdGltYXRlQ29zdC5Vbml0ID0gVW5pdFxuXG5Fc3RpbWF0ZUNvc3QuU3Ryb25nID0gU3Ryb25nXG5cbkVzdGltYXRlQ29zdC5SZWd1bGFyID0gUmVndWxhclxuXG5Fc3RpbWF0ZUNvc3QuSW1hZ2UgPSBzdHlsZWQuaW1nYFxuICB3aWR0aDogMTVweDtcbiAgbWFyZ2luLXJpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuYFxuXG5Fc3RpbWF0ZUNvc3QuUmVnaW9uID0gUmVnaW9uXG5Fc3RpbWF0ZUNvc3QuWm9uZSA9IFpvbmVcblxuY29uc3QgRWxsaXBzaXMgPSAoe1xuICBjaGlsZHJlbixcbiAgbWF4V2lkdGggPSAzNTAsXG4gICdkYXRhLXRlc3RpZCc6IGRhdGFUZXN0SWQsXG59OiB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbiAgbWF4V2lkdGg/OiBudW1iZXJcbiAgJ2RhdGEtdGVzdGlkJz86IHN0cmluZ1xufSkgPT4ge1xuICBjb25zdCB7IGlzT3ZlcmxheSB9ID0gdXNlT3ZlcmxheSgpXG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tYmFzZS10by1zdHJpbmdcbiAgY29uc3QgdGV4dCA9IENoaWxkcmVuLnRvQXJyYXkoY2hpbGRyZW4pLmpvaW4oJycpLnRvU3RyaW5nKClcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfVxuICAgICAgc3R5bGU9e3sgZGlzcGxheTogIWlzT3ZlcmxheSA/ICdpbmxpbmUtZmxleCcgOiB1bmRlZmluZWQgfX1cbiAgICA+XG4gICAgICA8TWF4V2lkdGhUZXh0XG4gICAgICAgIGFzPVwicFwiXG4gICAgICAgIG1heFdpZHRoPXtpc092ZXJsYXkgPyAyMDAgOiBtYXhXaWR0aH1cbiAgICAgICAgb25lTGluZVxuICAgICAgICB2YXJpYW50PVwiYm9keVN0cm9uZ1wiXG4gICAgICA+XG4gICAgICAgIHt0ZXh0fVxuICAgICAgPC9NYXhXaWR0aFRleHQ+XG4gICAgPC9kaXY+XG4gIClcbn1cblxuRXN0aW1hdGVDb3N0LkVsbGlwc2lzID0gRWxsaXBzaXNcblxuZXhwb3J0IHsgRXN0aW1hdGVDb3N0IH1cbiJdfQ== */"));
+import { estimateCostImage } from "./styles.css.js";
 const DEFAULT_UNIT_LIST = ["hours", "days", "months"];
+const Image = (props) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    alt: props.alt,
+    ...props,
+    className: `${props.className ? `${props.className} ` : ""}${estimateCostImage}`
+  }
+);
 const EstimateCost = ({
   description,
   alert,
@@ -51,22 +53,54 @@ const EstimateCost = ({
   locales = EstimateCostLocales,
   numberLocales = "en-EN",
   currency = "EUR",
+  style,
   onTotalPriceChange
-}) => /* @__PURE__ */ jsx(EstimateCostProvider, { currency, locales, numberLocales, children: /* @__PURE__ */ jsx(EstimateCostContent, { alert, alertTitle, alertVariant, commitmentFees, commitmentFeesContent, defaultTimeUnit, description, disableOverlayLeft, disableOverlayRight, discount, hideOverlay, hideTimeUnit, hideTotal, isBeta, locales, monthlyFees, monthlyFeesContent, monthlyFeesLabel, OverlayLeft, OverlayRight, onTotalPriceChange, overlayMargin, overlayUnit, timeUnits, children }) });
+}) => /* @__PURE__ */ jsx(
+  EstimateCostProvider,
+  {
+    currency,
+    locales,
+    numberLocales,
+    children: /* @__PURE__ */ jsx(
+      EstimateCostContent,
+      {
+        alert,
+        alertTitle,
+        alertVariant,
+        commitmentFees,
+        commitmentFeesContent,
+        defaultTimeUnit,
+        description,
+        disableOverlayLeft,
+        disableOverlayRight,
+        discount,
+        hideOverlay,
+        hideTimeUnit,
+        hideTotal,
+        isBeta,
+        locales,
+        monthlyFees,
+        monthlyFeesContent,
+        monthlyFeesLabel,
+        OverlayLeft,
+        OverlayRight,
+        onTotalPriceChange,
+        overlayMargin,
+        overlayUnit,
+        style,
+        timeUnits,
+        children
+      }
+    )
+  }
+);
 EstimateCost.LineThrough = LineThrough;
 EstimateCost.Item = Item;
 EstimateCost.NumberInput = NumberInput;
 EstimateCost.Unit = Unit;
 EstimateCost.Strong = Strong;
 EstimateCost.Regular = Regular;
-EstimateCost.Image = /* @__PURE__ */ _styled("img", process.env.NODE_ENV === "production" ? {
-  target: "e13v5qur0"
-} : {
-  target: "e13v5qur0",
-  label: "EstimateCost-Image"
-})("width:15px;margin-right:", ({
-  theme
-}) => theme.space["1"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvRXN0aW1hdGVDb3N0L0VzdGltYXRlQ29zdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUcrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy9wbHVzL3NyYy9jb21wb25lbnRzL0VzdGltYXRlQ29zdC9Fc3RpbWF0ZUNvc3QudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJ0B1bHRyYXZpb2xldC91aSdcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBDaGlsZHJlbiB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgSXRlbSB9IGZyb20gJy4vQ29tcG9uZW50cy9JdGVtJ1xuaW1wb3J0IHsgTGluZVRocm91Z2ggfSBmcm9tICcuL0NvbXBvbmVudHMvTGluZVRocm91Z2gnXG5pbXBvcnQgeyBOdW1iZXJJbnB1dCB9IGZyb20gJy4vQ29tcG9uZW50cy9OdW1iZXJJbnB1dCdcbmltcG9ydCB7IFJlZ2lvbiB9IGZyb20gJy4vQ29tcG9uZW50cy9SZWdpb24nXG5pbXBvcnQgeyBSZWd1bGFyIH0gZnJvbSAnLi9Db21wb25lbnRzL1JlZ3VsYXInXG5pbXBvcnQgeyBTdHJvbmcgfSBmcm9tICcuL0NvbXBvbmVudHMvU3Ryb25nJ1xuaW1wb3J0IHsgVW5pdCB9IGZyb20gJy4vQ29tcG9uZW50cy9Vbml0J1xuaW1wb3J0IHsgWm9uZSB9IGZyb20gJy4vQ29tcG9uZW50cy9ab25lJ1xuaW1wb3J0IHsgRXN0aW1hdGVDb3N0Q29udGVudCB9IGZyb20gJy4vRXN0aW1hdGVDb3N0Q29udGVudCdcbmltcG9ydCB7IEVzdGltYXRlQ29zdFByb3ZpZGVyIH0gZnJvbSAnLi9Fc3RpbWF0ZUNvc3RQcm92aWRlcidcbmltcG9ydCBFc3RpbWF0ZUNvc3RMb2NhbGVzIGZyb20gJy4vbG9jYWxlcy9lbidcbmltcG9ydCB7IHVzZU92ZXJsYXkgfSBmcm9tICcuL092ZXJsYXlDb250ZXh0J1xuaW1wb3J0IHR5cGUgeyBFc3RpbWF0ZUNvc3RQcm9wcywgVW5pdHMgfSBmcm9tICcuL3R5cGVzJ1xuXG5jb25zdCBNYXhXaWR0aFRleHQgPSBzdHlsZWQoVGV4dCk8eyBtYXhXaWR0aD86IG51bWJlciB9PmBcbiAgbWF4LXdpZHRoOiAkeyh7IG1heFdpZHRoIH0pID0+IG1heFdpZHRofXB4O1xuYFxuXG5jb25zdCBERUZBVUxUX1VOSVRfTElTVDogVW5pdHNbXSA9IFsnaG91cnMnLCAnZGF5cycsICdtb250aHMnXVxuXG5jb25zdCBFc3RpbWF0ZUNvc3QgPSAoe1xuICBkZXNjcmlwdGlvbixcbiAgYWxlcnQsXG4gIGFsZXJ0VGl0bGUsXG4gIGFsZXJ0VmFyaWFudCA9ICd3YXJuaW5nJyxcbiAgZGVmYXVsdFRpbWVVbml0ID0gJ2hvdXJzJyxcbiAgdGltZVVuaXRzID0gREVGQVVMVF9VTklUX0xJU1QsXG4gIGhpZGVPdmVybGF5ID0gZmFsc2UsXG4gIGRpc2FibGVPdmVybGF5TGVmdCA9IGZhbHNlLFxuICBkaXNhYmxlT3ZlcmxheVJpZ2h0ID0gZmFsc2UsXG4gIGhpZGVUaW1lVW5pdCA9IGZhbHNlLFxuICBoaWRlVG90YWwgPSBmYWxzZSxcbiAgZGlzY291bnQgPSAwLFxuICBPdmVybGF5UmlnaHQsXG4gIE92ZXJsYXlMZWZ0LFxuICBvdmVybGF5TWFyZ2luLFxuICBpc0JldGEgPSBmYWxzZSxcbiAgY29tbWl0bWVudEZlZXMsXG4gIGNvbW1pdG1lbnRGZWVzQ29udGVudCxcbiAgbW9udGhseUZlZXMsXG4gIG1vbnRobHlGZWVzTGFiZWwsXG4gIG1vbnRobHlGZWVzQ29udGVudCxcbiAgb3ZlcmxheVVuaXQgPSAnaG91cnMnLFxuICBjaGlsZHJlbiA9IG51bGwsXG4gIGxvY2FsZXMgPSBFc3RpbWF0ZUNvc3RMb2NhbGVzLFxuICBudW1iZXJMb2NhbGVzID0gJ2VuLUVOJyxcbiAgY3VycmVuY3kgPSAnRVVSJyxcbiAgb25Ub3RhbFByaWNlQ2hhbmdlLFxufTogRXN0aW1hdGVDb3N0UHJvcHMpID0+IChcbiAgPEVzdGltYXRlQ29zdFByb3ZpZGVyXG4gICAgY3VycmVuY3k9e2N1cnJlbmN5fVxuICAgIGxvY2FsZXM9e2xvY2FsZXN9XG4gICAgbnVtYmVyTG9jYWxlcz17bnVtYmVyTG9jYWxlc31cbiAgPlxuICAgIDxFc3RpbWF0ZUNvc3RDb250ZW50XG4gICAgICBhbGVydD17YWxlcnR9XG4gICAgICBhbGVydFRpdGxlPXthbGVydFRpdGxlfVxuICAgICAgYWxlcnRWYXJpYW50PXthbGVydFZhcmlhbnR9XG4gICAgICBjb21taXRtZW50RmVlcz17Y29tbWl0bWVudEZlZXN9XG4gICAgICBjb21taXRtZW50RmVlc0NvbnRlbnQ9e2NvbW1pdG1lbnRGZWVzQ29udGVudH1cbiAgICAgIGRlZmF1bHRUaW1lVW5pdD17ZGVmYXVsdFRpbWVVbml0fVxuICAgICAgZGVzY3JpcHRpb249e2Rlc2NyaXB0aW9ufVxuICAgICAgZGlzYWJsZU92ZXJsYXlMZWZ0PXtkaXNhYmxlT3ZlcmxheUxlZnR9XG4gICAgICBkaXNhYmxlT3ZlcmxheVJpZ2h0PXtkaXNhYmxlT3ZlcmxheVJpZ2h0fVxuICAgICAgZGlzY291bnQ9e2Rpc2NvdW50fVxuICAgICAgaGlkZU92ZXJsYXk9e2hpZGVPdmVybGF5fVxuICAgICAgaGlkZVRpbWVVbml0PXtoaWRlVGltZVVuaXR9XG4gICAgICBoaWRlVG90YWw9e2hpZGVUb3RhbH1cbiAgICAgIGlzQmV0YT17aXNCZXRhfVxuICAgICAgbG9jYWxlcz17bG9jYWxlc31cbiAgICAgIG1vbnRobHlGZWVzPXttb250aGx5RmVlc31cbiAgICAgIG1vbnRobHlGZWVzQ29udGVudD17bW9udGhseUZlZXNDb250ZW50fVxuICAgICAgbW9udGhseUZlZXNMYWJlbD17bW9udGhseUZlZXNMYWJlbH1cbiAgICAgIE92ZXJsYXlMZWZ0PXtPdmVybGF5TGVmdH1cbiAgICAgIE92ZXJsYXlSaWdodD17T3ZlcmxheVJpZ2h0fVxuICAgICAgb25Ub3RhbFByaWNlQ2hhbmdlPXtvblRvdGFsUHJpY2VDaGFuZ2V9XG4gICAgICBvdmVybGF5TWFyZ2luPXtvdmVybGF5TWFyZ2lufVxuICAgICAgb3ZlcmxheVVuaXQ9e292ZXJsYXlVbml0fVxuICAgICAgdGltZVVuaXRzPXt0aW1lVW5pdHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvRXN0aW1hdGVDb3N0Q29udGVudD5cbiAgPC9Fc3RpbWF0ZUNvc3RQcm92aWRlcj5cbilcblxuRXN0aW1hdGVDb3N0LkxpbmVUaHJvdWdoID0gTGluZVRocm91Z2hcblxuRXN0aW1hdGVDb3N0Lkl0ZW0gPSBJdGVtXG5cbkVzdGltYXRlQ29zdC5OdW1iZXJJbnB1dCA9IE51bWJlcklucHV0XG5cbkVzdGltYXRlQ29zdC5Vbml0ID0gVW5pdFxuXG5Fc3RpbWF0ZUNvc3QuU3Ryb25nID0gU3Ryb25nXG5cbkVzdGltYXRlQ29zdC5SZWd1bGFyID0gUmVndWxhclxuXG5Fc3RpbWF0ZUNvc3QuSW1hZ2UgPSBzdHlsZWQuaW1nYFxuICB3aWR0aDogMTVweDtcbiAgbWFyZ2luLXJpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuYFxuXG5Fc3RpbWF0ZUNvc3QuUmVnaW9uID0gUmVnaW9uXG5Fc3RpbWF0ZUNvc3QuWm9uZSA9IFpvbmVcblxuY29uc3QgRWxsaXBzaXMgPSAoe1xuICBjaGlsZHJlbixcbiAgbWF4V2lkdGggPSAzNTAsXG4gICdkYXRhLXRlc3RpZCc6IGRhdGFUZXN0SWQsXG59OiB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbiAgbWF4V2lkdGg/OiBudW1iZXJcbiAgJ2RhdGEtdGVzdGlkJz86IHN0cmluZ1xufSkgPT4ge1xuICBjb25zdCB7IGlzT3ZlcmxheSB9ID0gdXNlT3ZlcmxheSgpXG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tYmFzZS10by1zdHJpbmdcbiAgY29uc3QgdGV4dCA9IENoaWxkcmVuLnRvQXJyYXkoY2hpbGRyZW4pLmpvaW4oJycpLnRvU3RyaW5nKClcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfVxuICAgICAgc3R5bGU9e3sgZGlzcGxheTogIWlzT3ZlcmxheSA/ICdpbmxpbmUtZmxleCcgOiB1bmRlZmluZWQgfX1cbiAgICA+XG4gICAgICA8TWF4V2lkdGhUZXh0XG4gICAgICAgIGFzPVwicFwiXG4gICAgICAgIG1heFdpZHRoPXtpc092ZXJsYXkgPyAyMDAgOiBtYXhXaWR0aH1cbiAgICAgICAgb25lTGluZVxuICAgICAgICB2YXJpYW50PVwiYm9keVN0cm9uZ1wiXG4gICAgICA+XG4gICAgICAgIHt0ZXh0fVxuICAgICAgPC9NYXhXaWR0aFRleHQ+XG4gICAgPC9kaXY+XG4gIClcbn1cblxuRXN0aW1hdGVDb3N0LkVsbGlwc2lzID0gRWxsaXBzaXNcblxuZXhwb3J0IHsgRXN0aW1hdGVDb3N0IH1cbiJdfQ== */"));
+EstimateCost.Image = Image;
 EstimateCost.Region = Region;
 EstimateCost.Zone = Zone;
 const Ellipsis = ({
@@ -74,13 +108,28 @@ const Ellipsis = ({
   maxWidth = 350,
   "data-testid": dataTestId
 }) => {
-  const {
-    isOverlay
-  } = useOverlay();
+  const { isOverlay } = useOverlay();
   const text = Children.toArray(children).join("").toString();
-  return /* @__PURE__ */ jsx("div", { "data-testid": dataTestId, style: {
-    display: !isOverlay ? "inline-flex" : void 0
-  }, children: /* @__PURE__ */ jsx(MaxWidthText, { as: "p", maxWidth: isOverlay ? 200 : maxWidth, oneLine: true, variant: "bodyStrong", children: text }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": dataTestId,
+      style: { display: !isOverlay ? "inline-flex" : void 0 },
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "p",
+          className: maxWidthText,
+          oneLine: true,
+          style: assignInlineVars({
+            [maxWidthTextVar]: isOverlay ? "200px" : `${maxWidth}px`
+          }),
+          variant: "bodyStrong",
+          children: text
+        }
+      )
+    }
+  );
 };
 EstimateCost.Ellipsis = Ellipsis;
 export {

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

@@ -1,2 +1,2 @@
 import type { EstimateCostProps } from './types';
-export declare const EstimateCostContent: ({ description, alert, alertTitle, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, hideHourlyPriceOnTotal, discount, OverlayRight, OverlayLeft, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, overlayMargin, onTotalPriceChange, }: EstimateCostProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const EstimateCostContent: ({ description, alert, alertTitle, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, hideHourlyPriceOnTotal, discount, OverlayRight, OverlayLeft, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, overlayMargin, onTotalPriceChange, style, }: EstimateCostProps) => import("react/jsx-runtime").JSX.Element;