@ultraviolet/ui 3.10.2 → 3.11.1

package/dist/components/compositions/EstimateCost/Components/Zone.js

@@ -0,0 +1,37 @@
+'use client';
+import { __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { useEstimateCost } from "../EstimateCostProvider.js";
+import { estimateCostImage } from "../styles.css.js";
+import { Item } from "./Item.js";
+import { Strong } from "./Strong.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/compositions/EstimateCost/Components/Zone.tsx
+const Zone = memo(({ label, image, shouldBeHidden = false, priceText, animated = false, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, style }) => {
+	const { locales } = useEstimateCost();
+	return /* @__PURE__ */ jsx(Item, {
+		animated,
+		discount,
+		isFirstElement,
+		isLastElement,
+		iteration,
+		label: locales["estimate.cost.az.label"],
+		noBorder,
+		noPrice,
+		priceText,
+		productsCallback,
+		shouldBeHidden,
+		style,
+		children: /* @__PURE__ */ jsxs(Strong, { children: [/* @__PURE__ */ jsx("img", {
+			alt: label,
+			className: estimateCostImage,
+			height: "auto",
+			src: image,
+			width: "auto"
+		}), label] })
+	});
+});
+
+//#endregion
+export { Zone };

package/dist/components/compositions/EstimateCost/Components/components.css.d.ts

@@ -0,0 +1,78 @@
+export declare const maxWidthTextVar: `var(--${string})`;
+export declare const maxWidthText: string;
+export declare const estimateCostImage: string;
+export declare const estimateCostTr: string;
+export declare const styledDiv: string;
+export declare const estimateCostLeftSide: string;
+export declare const estimateCostItemResourceName: import("@vanilla-extract/recipes").RuntimeFn<{
+    animated: {
+        true: {
+            animation: `800ms ${string}`;
+        };
+    };
+}>;
+export declare const estimateCostResourceName: import("@vanilla-extract/recipes").RuntimeFn<{
+    isAnimated: {
+        true: {
+            animation: `${string} 800ms`;
+        };
+    };
+    isOverlay: {
+        false: {
+            textAlign: "right";
+        };
+        true: {
+            display: "flex";
+            flexDirection: "column";
+            height: `var(--${string})`;
+            justifyContent: "center";
+            textAlign: "initial";
+            WebkitBoxPack: "center";
+        };
+    };
+}>;
+export declare const estimateCostBadgeItem: string;
+export declare const estimateCostTextItem: string;
+export declare const estimateCostMaxWidthText: string;
+export declare const estimateCostTooltip: string;
+export declare const estimateCostLineThrough: string;
+export declare const estimateCostRegular: import("@vanilla-extract/recipes").RuntimeFn<{
+    isOverlay: {
+        false: {
+            display: "inline-flex";
+        };
+        true: {
+            display: "flex";
+        };
+    };
+    variant: {
+        big: {};
+        capitalized: {};
+        normal: {};
+        small: {
+            color: `var(--${string})`;
+            display: "block";
+            fontSize: number;
+            lineHeight: number;
+        };
+    };
+}>;
+export declare const estimateCostStrong: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        big: {
+            fontSize: number;
+        };
+        capitalized: {
+            fontSize: number;
+            textTransform: "capitalize";
+        };
+        normal: {
+            fontSize: number;
+        };
+        small: {
+            fontSize: number;
+        };
+    };
+}>;
+export declare const estimateCostNumberInput: string;
+//# sourceMappingURL=components.css.d.ts.map

package/dist/components/compositions/EstimateCost/Components/components.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/EstimateCost/Components/components.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,oBAAc,CAAA;AAE1C,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAG5B,CAAA;AAEF,eAAO,MAAM,cAAc,QAAY,CAAA;AAEvC,eAAO,MAAM,SAAS,QAA4C,CAAA;AAElE,eAAO,MAAM,oBAAoB,QAS/B,CAAA;AAEF,eAAO,MAAM,4BAA4B;;;;;;EAkBvC,CAAA;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;EAyBnC,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAGhC,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAE/B,CAAA;AAEF,eAAO,MAAM,wBAAwB,QAEnC,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAAuC,CAAA;AAEvE,eAAO,MAAM,uBAAuB,QAGlC,CAAA;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;EAiC9B,CAAA;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;EA4B7B,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAQlC,CAAA"}

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

@@ -0,0 +1,72 @@
+/* empty css                                                       */
+/* empty css                                                    */
+/* empty css                          */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/components/compositions/EstimateCost/Components/components.css.ts
+var maxWidthTextVar = "var(--uv_pk0duk0)";
+var maxWidthText = "uv_pk0duk1";
+var estimateCostTr = "uv_pk0duk3";
+var styledDiv = "uv_pk0duk4";
+var estimateCostLeftSide = "uv_pk0duk5";
+var estimateCostItemResourceName = createRuntimeFn({
+	defaultClassName: "uv_pk0duk6",
+	variantClassNames: { animated: { true: "uv_pk0duk7" } },
+	defaultVariants: { animated: false },
+	compoundVariants: []
+});
+var estimateCostResourceName = createRuntimeFn({
+	defaultClassName: "uv_pk0duk8",
+	variantClassNames: {
+		isAnimated: { true: "uv_pk0duk9" },
+		isOverlay: {
+			false: "uv_pk0duka",
+			true: "uv_pk0dukb"
+		}
+	},
+	defaultVariants: {
+		isAnimated: false,
+		isOverlay: false
+	},
+	compoundVariants: []
+});
+var estimateCostBadgeItem = "uv_pk0dukc";
+var estimateCostTextItem = "uv_pk0dukd";
+var estimateCostMaxWidthText = "uv_pk0duke";
+var estimateCostTooltip = "uv_pk0dukf";
+var estimateCostLineThrough = "uv_pk0dukg";
+var estimateCostRegular = createRuntimeFn({
+	defaultClassName: "uv_pk0dukh",
+	variantClassNames: {
+		isOverlay: {
+			false: "uv_pk0duki",
+			true: "uv_pk0dukj"
+		},
+		variant: {
+			big: "uv_pk0dukk",
+			capitalized: "uv_pk0dukl",
+			normal: "uv_pk0dukm",
+			small: "uv_pk0dukn"
+		}
+	},
+	defaultVariants: {
+		isOverlay: false,
+		variant: "normal"
+	},
+	compoundVariants: []
+});
+var estimateCostStrong = createRuntimeFn({
+	defaultClassName: "uv_pk0duko",
+	variantClassNames: { variant: {
+		big: "uv_pk0dukp",
+		capitalized: "uv_pk0dukq",
+		normal: "uv_pk0dukr",
+		small: "uv_pk0duks"
+	} },
+	defaultVariants: { variant: "normal" },
+	compoundVariants: []
+});
+var estimateCostNumberInput = "uv_pk0dukt";
+
+//#endregion
+export { estimateCostBadgeItem, estimateCostItemResourceName, estimateCostLeftSide, estimateCostLineThrough, estimateCostMaxWidthText, estimateCostNumberInput, estimateCostRegular, estimateCostResourceName, estimateCostStrong, estimateCostTextItem, estimateCostTooltip, estimateCostTr, maxWidthText, maxWidthTextVar, styledDiv };

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

@@ -0,0 +1,3 @@
+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, style, compact, }: EstimateCostProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EstimateCostContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EstimateCostContent.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/EstimateCost/EstimateCostContent.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAEV,iBAAiB,EAIlB,MAAM,SAAS,CAAA;AAIhB,eAAO,MAAM,mBAAmB,gdAiT/B,CAAA"}

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

@@ -0,0 +1,198 @@
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../Stack/index.js";
+import { Text } from "../../Text/index.js";
+import { maximumFractionDigits, maximumFractionDigitsLong } from "./constants.js";
+import en_default from "./locales/en.js";
+import { useEstimateCost } from "./EstimateCostProvider.js";
+import { calculatePrice } from "./helper.js";
+import { OverlayContextProvider } from "./OverlayContext.js";
+import { estimateCostContent, estimateCostFeesTable, estimatecostFeesText } from "./styles.css.js";
+import { Item } from "./Components/Item.js";
+import { Alert } from "../../Alert/index.js";
+import { CompactEstimateCost } from "./CompactEstimateCost.js";
+import { ChildrenComponent, DescriptionComponent, TotalComponent } from "./Components/ContentComponents.js";
+import { OverlayComponent } from "./OverlayComponent.js";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useInView } from "react-intersection-observer";
+
+//#region src/components/compositions/EstimateCost/EstimateCostContent.tsx
+const DEFAULT_UNIT_LIST = [
+	"hours",
+	"days",
+	"months"
+];
+const EstimateCostContent = ({ description, alert, alertTitle, alertVariant = "warning", defaultTimeUnit = "hours", timeUnits = DEFAULT_UNIT_LIST, hideOverlay = false, disableOverlayLeft = false, disableOverlayRight = false, hideTimeUnit = false, hideTotal = false, hideHourlyPriceOnTotal = false, discount = 0, OverlayRight, OverlayLeft, isBeta = false, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit = "hours", children = null, locales = en_default, overlayMargin, onTotalPriceChange, style, compact }) => {
+	const [ref, inView] = useInView();
+	const { formatNumber } = useEstimateCost();
+	const [products, setProducts] = useState([]);
+	const [totalPrice, setTotalPrice] = useState({
+		hourly: 0,
+		maxHourly: 0,
+		maxOverlayHourly: 0,
+		maxTotal: 0,
+		overlayHourly: 0,
+		total: 0
+	});
+	const [iteration, setIteration] = useState({
+		unit: defaultTimeUnit !== null && defaultTimeUnit !== void 0 ? defaultTimeUnit : "hours",
+		value: 1
+	});
+	const [isLongFractionDigits, setIsLongFractionDigits] = useState(false);
+	const providerValue = useMemo(() => ({ isOverlay: false }), []);
+	const totalValue = useMemo(() => formatNumber(totalPrice.total < 0 ? 0 : totalPrice.total, { maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong[iteration.unit] : maximumFractionDigits[iteration.unit] }), [
+		formatNumber,
+		isLongFractionDigits,
+		iteration.unit,
+		totalPrice.total
+	]);
+	const totalMaxValue = useMemo(() => formatNumber(totalPrice.maxTotal < 0 ? 0 : totalPrice.maxTotal, { maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong[iteration.unit] : maximumFractionDigits[iteration.unit] }), [
+		formatNumber,
+		isLongFractionDigits,
+		iteration.unit,
+		totalPrice.maxTotal
+	]);
+	const productsCallback = useMemo(() => ({
+		add: (newProduct) => {
+			setProducts((total) => {
+				if (total.find((product) => product.id === newProduct.id)) return total.map((product) => product.id === newProduct.id ? newProduct : product);
+				return [...total, newProduct];
+			});
+		},
+		remove: ({ id }) => {
+			setProducts((total) => total.filter((product) => product.id !== id));
+		}
+	}), [setProducts]);
+	useEffect(() => {
+		const isMaxAmountInProducts = products.find((product) => product.maxAmount);
+		setIsLongFractionDigits(!!products.find((product) => product.longFractionDigits));
+		setTotalPrice({
+			hourly: products.reduce((acc, product) => acc + (product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.amount - product.amountFree, 0)), 0),
+			maxHourly: isMaxAmountInProducts ? products.reduce((acc, product) => acc && product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.maxAmount - product.amountFree, 0), 0) : 0,
+			maxOverlayHourly: isMaxAmountInProducts ? products.reduce((acc, product) => acc + (product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.maxAmount - product.amountFree, 0)), 0) : 0,
+			maxTotal: isMaxAmountInProducts ? products.reduce((acc, product) => acc + calculatePrice({
+				amount: product.maxAmount || product.amount,
+				amountFree: product.amountFree,
+				discount: product.discount,
+				price: product.price,
+				timeAmount: product.noIteration ? 1 : iteration.value,
+				timeUnit: product.noIteration ? "hours" : iteration.unit
+			}), 0) : 0,
+			overlayHourly: products.reduce((acc, product) => acc + (product.noIteration ? 0 : (product.price - product.price * product.discount) * Math.max(product.amount - product.amountFree, 0)), 0),
+			total: hideTotal ? 0 : products.reduce((acc, product) => acc + calculatePrice({
+				amount: product.amount,
+				amountFree: product.amountFree,
+				discount: product.discount,
+				price: product.price,
+				timeAmount: product.noIteration ? 1 : iteration.value,
+				timeUnit: product.noIteration ? "hours" : iteration.unit
+			}), 0)
+		});
+		onTotalPriceChange === null || onTotalPriceChange === void 0 || onTotalPriceChange({
+			total: totalPrice.total,
+			totalMax: totalPrice.maxTotal > 0 ? totalPrice.maxTotal : void 0
+		});
+	}, [
+		hideTotal,
+		products,
+		iteration,
+		setTotalPrice,
+		onTotalPriceChange,
+		totalPrice.total,
+		totalPrice.maxTotal,
+		totalValue,
+		totalMaxValue
+	]);
+	useEffect(() => {
+		if (hideTimeUnit && (iteration.value > 1 || iteration.unit !== (defaultTimeUnit !== null && defaultTimeUnit !== void 0 ? defaultTimeUnit : "hours"))) setIteration({
+			unit: defaultTimeUnit !== null && defaultTimeUnit !== void 0 ? defaultTimeUnit : "hours",
+			value: 1
+		});
+	}, [
+		hideTimeUnit,
+		iteration,
+		defaultTimeUnit
+	]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [compact ? /* @__PURE__ */ jsx(CompactEstimateCost, {
+		iteration,
+		label: locales["estimate.cost.label"],
+		totalPrice
+	}) : null, /* @__PURE__ */ jsxs(Stack, {
+		className: estimateCostContent[compact ? "compact" : "default"],
+		gap: 2,
+		style,
+		children: [
+			hideOverlay ? null : /* @__PURE__ */ jsx(OverlayComponent, {
+				disableOverlayLeft,
+				disableOverlayRight,
+				discount,
+				inView,
+				isBeta,
+				OverlayLeft,
+				OverlayRight,
+				overlayMargin,
+				totalPrice,
+				unit: overlayUnit,
+				children
+			}),
+			description === false ? null : /* @__PURE__ */ jsx(DescriptionComponent, {
+				description,
+				locales
+			}),
+			alert ? /* @__PURE__ */ jsx(Alert, {
+				sentiment: alertVariant,
+				title: alertTitle,
+				children: alert
+			}) : null,
+			/* @__PURE__ */ jsx(OverlayContextProvider, {
+				value: providerValue,
+				children: /* @__PURE__ */ jsxs("div", { children: [
+					children ? /* @__PURE__ */ jsx(ChildrenComponent, {
+						defaultTimeUnit,
+						discount,
+						hideTimeUnit,
+						hideTotal,
+						iteration,
+						productsCallback,
+						ref,
+						setIteration,
+						timeUnits,
+						children
+					}) : null,
+					hideTotal ? null : /* @__PURE__ */ jsx(TotalComponent, {
+						discount,
+						hideHourlyPriceOnTotal,
+						isBeta,
+						isLongFractionDigits,
+						totalMaxValue,
+						totalPrice,
+						totalValue
+					}),
+					commitmentFees !== void 0 || monthlyFees !== void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, {
+						as: "h3",
+						className: estimatecostFeesText,
+						variant: "headingSmall",
+						children: locales[`estimate.cost.fees.${commitmentFees ? "oneTime" : "monthly"}.title`]
+					}), /* @__PURE__ */ jsx("table", {
+						className: estimateCostFeesTable,
+						children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(Item, {
+							isLastElement: true,
+							label: commitmentFees ? locales["estimate.cost.fees.commitment"] : monthlyFeesLabel,
+							noIteration: true,
+							price: commitmentFees || monthlyFees,
+							productsCallback: {
+								add: () => {},
+								remove: () => {}
+							},
+							children: commitmentFees ? commitmentFeesContent : monthlyFeesContent
+						}) })
+					})] }) : null
+				] })
+			})
+		]
+	})] });
+};
+
+//#endregion
+export { EstimateCostContent };

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import EstimateCostLocales from './locales/en';
+export declare const useEstimateCost: () => {
+    locales: Record<"estimate.cost.az.label" | "estimate.cost.beta.badge" | "estimate.cost.beta.discount" | "estimate.cost.beta.free" | "estimate.cost.description" | "estimate.cost.fees.commitment" | "estimate.cost.fees.monthly.title" | "estimate.cost.fees.oneTime.title" | "estimate.cost.label" | "estimate.cost.notDefined" | "estimate.cost.region.label" | "estimate.cost.submit.label" | "estimate.cost.units.days.label" | "estimate.cost.units.gb.label" | "estimate.cost.units.hours.label" | "estimate.cost.units.minutes.label" | "estimate.cost.units.months.label" | "estimate.cost.units.seconds.label" | "estimate.cost.units.years.label", string>;
+    formatNumber: (number: number, options: FormatNumberOption) => string;
+};
+type EstimateCostProviderProps = {
+    children: ReactNode;
+    locales?: Record<keyof typeof EstimateCostLocales, string>;
+    currency?: string;
+    numberLocales?: string;
+};
+type FormatNumberOption = {
+    currencyDisplay?: 'symbol' | 'code' | 'name';
+    unit?: string;
+    unitDisplay?: 'long' | 'short' | 'narrow';
+    useGrouping?: boolean;
+    minimumIntegerDigits?: number;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    minimumSignificantDigits?: number;
+    maximumSignificantDigits?: number;
+};
+export declare const EstimateCostProvider: ({ children, locales, currency, numberLocales, }: EstimateCostProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EstimateCostProvider.d.ts.map

package/dist/components/compositions/EstimateCost/EstimateCostProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EstimateCostProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/EstimateCost/EstimateCostProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,mBAAmB,MAAM,cAAc,CAAA;AAQ9C,eAAO,MAAM,eAAe;;;CAAwC,CAAA;AAEpE,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,OAAO,mBAAmB,EAAE,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IACzC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,wBAAwB,CAAC,EAAE,MAAM,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,oBAAoB,yHAsChC,CAAA"}

package/dist/components/compositions/EstimateCost/EstimateCostProvider.js

@@ -0,0 +1,33 @@
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
+import en_default from "./locales/en.js";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/compositions/EstimateCost/EstimateCostProvider.tsx
+const EstimateCostContext = createContext({
+	formatNumber: () => "",
+	locales: en_default
+});
+const useEstimateCost = () => useContext(EstimateCostContext);
+const EstimateCostProvider = ({ children, locales, currency, numberLocales }) => {
+	const newLocales = useMemo(() => locales ? _objectSpread2(_objectSpread2({}, en_default), locales) : en_default, [locales]);
+	const formatNumber = useCallback((number, options) => {
+		return new Intl.NumberFormat(numberLocales, _objectSpread2({
+			currency,
+			style: "currency"
+		}, options)).format(number);
+	}, [currency, numberLocales]);
+	const value = useMemo(() => ({
+		formatNumber,
+		locales: newLocales
+	}), [formatNumber, newLocales]);
+	return /* @__PURE__ */ jsx(EstimateCostContext.Provider, {
+		value,
+		children
+	});
+};
+
+//#endregion
+export { EstimateCostProvider, useEstimateCost };

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

@@ -0,0 +1,27 @@
+import type { JSX, ReactNode } from 'react';
+import type { Units } from './types';
+type OverlayComponentProps = {
+    children: ReactNode;
+    disableOverlayLeft?: boolean;
+    disableOverlayRight?: boolean;
+    discount?: number;
+    inView?: boolean;
+    isBeta?: boolean;
+    unit: Units;
+    OverlayLeft?: (props: {
+        children: ReactNode;
+        disabled?: boolean;
+    }) => JSX.Element;
+    OverlayRight?: (props: {
+        children?: ReactNode;
+        disabled?: boolean;
+    }) => JSX.Element;
+    totalPrice: {
+        maxOverlayHourly: number;
+        overlayHourly: number;
+    };
+    overlayMargin?: string;
+};
+export declare const OverlayComponent: ({ children, inView, discount, OverlayRight, disableOverlayRight, OverlayLeft, disableOverlayLeft, totalPrice, unit, isBeta, overlayMargin, }: OverlayComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OverlayComponent.d.ts.map

package/dist/components/compositions/EstimateCost/OverlayComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/EstimateCost/OverlayComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAkB3C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,SAAS,CAAA;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,KAAK,CAAA;IACX,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QACpB,QAAQ,EAAE,SAAS,CAAA;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,KAAK,GAAG,CAAC,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;QACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,KAAK,GAAG,CAAC,OAAO,CAAA;IACjB,UAAU,EAAE;QACV,gBAAgB,EAAE,MAAM,CAAA;QACxB,aAAa,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,gBAAgB,kNAwG5B,CAAA"}

package/dist/components/compositions/EstimateCost/OverlayComponent.js

@@ -0,0 +1,100 @@
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../Stack/index.js";
+import { Badge } from "../../Badge/index.js";
+import { estimateCostResourceName } from "./Components/components.css.js";
+import { maximumFractionDigits, multiplier } from "./constants.js";
+import { useEstimateCost } from "./EstimateCostProvider.js";
+import { OverlayContextProvider } from "./OverlayContext.js";
+import { estimateCostBadge, estimateCostList, estimateCostOverlayContainer, estimateCostOverlayRow, estimateCostSideItem, overlayMarginVar } from "./styles.css.js";
+import { LineThrough } from "./Components/LineThrough.js";
+import { Strong } from "./Components/Strong.js";
+import { Children, cloneElement, isValidElement, useMemo } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalculatorIcon } from "@ultraviolet/icons/CalculatorIcon";
+
+//#region src/components/compositions/EstimateCost/OverlayComponent.tsx
+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,
+		months: totalPrice.maxOverlayHourly * multiplier.months,
+		seconds: totalPrice.maxOverlayHourly * multiplier.seconds
+	}[unit];
+	const overlayPrice = {
+		days: totalPrice.overlayHourly * multiplier.days,
+		hours: totalPrice.overlayHourly,
+		minutes: totalPrice.overlayHourly * multiplier.minutes,
+		months: totalPrice.overlayHourly * multiplier.months,
+		seconds: totalPrice.overlayHourly * multiplier.seconds
+	}[unit];
+	return /* @__PURE__ */ jsx(OverlayContextProvider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			className: estimateCostOverlayContainer({ inView }),
+			"data-testid": "summary-overlay",
+			style: assignInlineVars({ [overlayMarginVar]: overlayMargin !== null && overlayMargin !== void 0 ? overlayMargin : "0" }),
+			children: /* @__PURE__ */ jsxs("ul", {
+				className: estimateCostList,
+				children: [
+					OverlayLeft ? /* @__PURE__ */ jsx("li", {
+						className: estimateCostSideItem,
+						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("li", {
+						className: estimateCostOverlayRow(),
+						children: [/* @__PURE__ */ jsxs(Stack, {
+							alignItems: "center",
+							direction: "row",
+							gap: 1,
+							children: [/* @__PURE__ */ jsx(CalculatorIcon, {
+								sentiment: "primary",
+								size: "medium"
+							}), locales["estimate.cost.label"]]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: estimateCostResourceName(),
+							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(Badge, {
+								className: estimateCostBadge,
+								prominence: "strong",
+								sentiment: "warning",
+								children: [discount > 0 ? discount * 100 : "", locales[`estimate.cost.beta.${discount > 0 ? "discount" : "free"}`]]
+							}) : null]
+						})]
+					}),
+					OverlayRight ? /* @__PURE__ */ jsx("li", {
+						className: estimateCostSideItem,
+						children: /* @__PURE__ */ jsx(OverlayRight, {
+							disabled: disableOverlayRight,
+							children: locales["estimate.cost.submit.label"]
+						})
+					}) : null
+				]
+			})
+		})
+	});
+};
+
+//#endregion
+export { OverlayComponent };

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

@@ -0,0 +1,13 @@
+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("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OverlayContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayContext.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/EstimateCost/OverlayContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,eAAO,MAAM,UAAU;;CAAmC,CAAA;AAE1D,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,sBAAsB,gGAKlC,CAAA"}

package/dist/components/compositions/EstimateCost/OverlayContext.js

@@ -0,0 +1,15 @@
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/compositions/EstimateCost/OverlayContext.tsx
+const OverlayContext = createContext({ isOverlay: false });
+const useOverlay = () => useContext(OverlayContext);
+const OverlayContextProvider = ({ children, value }) => /* @__PURE__ */ jsx(OverlayContext.Provider, {
+	value,
+	children
+});
+
+//#endregion
+export { OverlayContextProvider, useOverlay };

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

@@ -0,0 +1,8 @@
+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 = "70%";
+export declare const PRICE_MAX_CELL_WIDTH = "30%";
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/EstimateCost/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,eAAO,MAAM,0BAA0B,MAAM,CAAA;AAI7C,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAMnC,CAAA;AAIV,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAM9C,CAAA;AAEV,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAMlD,CAAA;AAEV,eAAO,MAAM,cAAc,QAAQ,CAAA;AACnC,eAAO,MAAM,oBAAoB,QAAQ,CAAA"}