@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/compositions/OrderSummary/styles.css.js

@@ -0,0 +1,32 @@
+/* empty css                      */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/components/compositions/OrderSummary/styles.css.ts
+var orderSummaryContainer = "uv_u4zomp0";
+var orderSummaryHeaderContainer = {
+	hideDetails: "uv_u4zomp2 uv_u4zomp1",
+	showDetails: "uv_u4zomp3 uv_u4zomp1"
+};
+var orderSummaryStackBackground = "uv_u4zomp4";
+var orderSummaryNonScrollableContainer = "uv_u4zomp5";
+var orderSummaryNumberInput = "uv_u4zomp6";
+var orderSummaryScrollableContainer = "uv_u4zomp7";
+var orderSummaryDetails = "uv_u4zomp8";
+var orderSummaryCategory = "uv_u4zomp9";
+var orderSummaryAnchor = "uv_u4zompa";
+var orderSummaryAnchorIcon = createRuntimeFn({
+	defaultClassName: "uv_u4zompb",
+	variantClassNames: { size: {
+		medium: "uv_u4zompc",
+		small: "uv_u4zompd"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+var orderSummaryTotalPrice = {
+	priceInformation: "uv_u4zompe",
+	"default": "uv_u4zompf"
+};
+
+//#endregion
+export { orderSummaryAnchor, orderSummaryAnchorIcon, orderSummaryCategory, orderSummaryContainer, orderSummaryDetails, orderSummaryHeaderContainer, orderSummaryNonScrollableContainer, orderSummaryNumberInput, orderSummaryScrollableContainer, orderSummaryStackBackground, orderSummaryTotalPrice };

package/dist/components/compositions/OrderSummary/types.d.ts

@@ -0,0 +1,125 @@
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
+import type { UnitInput } from '../../UnitInput';
+import type orderSummaryLocales from './locales/en';
+export type TimeUnit = 'seconds' | 'minutes' | 'hours' | 'days' | 'months';
+type PeriodProps = {
+    hideTimeUnit: true;
+    periodOptions?: never;
+    valueUnitInput?: never;
+    unitUnitInput?: TimeUnit;
+    onChangeUnitInput?: never;
+} | {
+    /**
+     * Optional time input allowing the user to estimate their cost on different time horizon.
+     * Pass the options to be displayed in the dropdown.
+     */
+    hideTimeUnit?: false;
+    periodOptions?: TimeUnit[];
+    valueUnitInput?: ComponentProps<typeof UnitInput>['value'];
+    unitUnitInput?: TimeUnit;
+    onChangeUnitInput?: ComponentProps<typeof UnitInput>['onChangeUnitValue'];
+};
+type NumberInputType = {
+    /**
+     * Display a number input instead of the price
+     */
+    numberInput?: boolean;
+    numberInputValue?: number | null;
+    numberInputUnit?: string;
+    numberInputControls?: boolean;
+    onChangeInput?: (value: number | null) => void;
+};
+export type PriceTypeSingle = {
+    maxPrice: number;
+    maxPriceWithDiscount: number;
+    totalPrice: number;
+    totalPriceWithDiscount: number;
+    timeUnit: TimeUnit;
+};
+export type PriceType = Record<string, PriceTypeSingle>;
+export type SubCategoryType = {
+    title?: string;
+    icon?: ReactNode;
+    additionalInfo?: ReactNode;
+    price?: number;
+    /**
+     * List of elements to be displayed in the subcategory
+     */
+    details?: ReactNode[];
+    discount?: number;
+    amount?: number[] | number;
+    amountFree?: number;
+    /**
+     * Set to true if the price does not depend on the time
+     */
+    fixedPrice?: boolean;
+    /**
+     * Suffix to be displayed after the price - this will trigger to not display the overall price taking into account the amount for the subcategory.
+     */
+    priceUnit?: string;
+    /**
+     * Hide the price for the line (it will still be counted in the general price)
+     */
+    hidePrice?: boolean;
+    /**
+     * Custom content to display next to the price
+     */
+    customContent?: ReactNode;
+    anchor?: string;
+} & NumberInputType;
+export type ItemsType = {
+    category: string;
+    additionalInfo?: ReactNode;
+    /** Information to add beneath the catecgory name */
+    subTitle?: ReactNode;
+    subCategories?: SubCategoryType[];
+    discount?: number;
+    /**
+     * Hide the price of the category and display the custom content instead
+     */
+    customContent?: ReactNode;
+    /**
+     * Whether the category price can be < 0 (e.g coupons)
+     */
+    allowNegative?: boolean;
+    anchor?: string;
+} & NumberInputType;
+export type CurrencyType = 'EUR';
+export type LocalesFormatType = Intl.LocalesArgument;
+export type OrderSummaryProps = {
+    items: ItemsType[];
+    header?: string;
+    locales?: Record<keyof typeof orderSummaryLocales, string>;
+    currency?: CurrencyType;
+    /**
+     * Locale to format the numbers (prices)
+     */
+    localeFormat?: LocalesFormatType;
+    /**
+     *Total applied to the final cost (due to commitment, beta...)
+     */
+    discount?: number;
+    footer?: ReactNode;
+    children?: ReactNode;
+    totalPriceInfo?: ReactNode;
+    totalPriceInfoPlacement?: 'left' | 'right';
+    totalPriceDescription?: ReactNode;
+    additionalInfo?: string;
+    priceInformation?: ReactNode;
+    hideBeforePrice?: boolean;
+    /**
+     * Number of fraction digit to display in the price details
+     */
+    fractionDigits?: number;
+    /**
+     * Get the computed price for each category and the totalPrice of all the categories and a global discount (if defined).
+     * `price.category = { before: [total, totalMax], after: [totalWithDiscount, totalMaxWithDiscount]}`
+     */
+    onChange?: (price: PriceType, totalPrice: PriceTypeSingle) => void;
+    hideDetails?: boolean;
+    className?: string;
+    ['data-testid']?: string;
+    style?: CSSProperties;
+} & PeriodProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/compositions/OrderSummary/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OrderSummary/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,KAAK,mBAAmB,MAAM,cAAc,CAAA;AAEnD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE1E,KAAK,WAAW,GACZ;IACE,YAAY,EAAE,IAAI,CAAA;IAClB,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,cAAc,CAAC,EAAE,KAAK,CAAA;IACtB,aAAa,CAAC,EAAE,QAAQ,CAAA;IACxB,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAC1B,GACD;IACE;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAA;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA;IAC1D,aAAa,CAAC,EAAE,QAAQ,CAAA;IACxB,iBAAiB,CAAC,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC,mBAAmB,CAAC,CAAA;CAC1E,CAAA;AACL,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,UAAU,EAAE,MAAM,CAAA;IAClB,sBAAsB,EAAE,MAAM,CAAA;IAC9B,QAAQ,EAAE,QAAQ,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;AAEvD,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,EAAE,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,GAAG,eAAe,CAAA;AAEnB,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,aAAa,CAAC,EAAE,eAAe,EAAE,CAAA;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,GAAG,eAAe,CAAA;AAEnB,MAAM,MAAM,YAAY,GAAG,KAAK,CAAA;AAEhC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAA;AAEpD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,OAAO,mBAAmB,EAAE,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,uBAAuB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1C,qBAAqB,CAAC,EAAE,SAAS,CAAA;IACjC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,eAAe,KAAK,IAAI,CAAA;IAClE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,WAAW,CAAA"}

package/dist/components/compositions/Plans/FeatureHint.d.ts

@@ -0,0 +1,7 @@
+import type { Hint } from './types';
+type FeatureHintProps = {
+    hint?: Hint;
+};
+export declare const FeatureHint: ({ hint }: FeatureHintProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FeatureHint.d.ts.map

package/dist/components/compositions/Plans/FeatureHint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureHint.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/Plans/FeatureHint.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,KAAK,gBAAgB,GAAG;IACtB,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ,CAAA;AAED,eAAO,MAAM,WAAW,yEAsCvB,CAAA"}

package/dist/components/compositions/Plans/FeatureHint.js

@@ -0,0 +1,43 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Tooltip } from "../../Tooltip/index.js";
+import { Popover } from "../../Popover/index.js";
+import { plansIconWrapper } from "./styles.css.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { InformationOutlineIcon } from "@ultraviolet/icons/InformationOutlineIcon";
+
+//#region src/components/compositions/Plans/FeatureHint.tsx
+const FeatureHint = ({ hint }) => {
+	const [visible, setVisible] = useState(false);
+	if (!hint) return /* @__PURE__ */ jsx("div", {});
+	if (hint.type === "tooltip") return /* @__PURE__ */ jsx(Tooltip, {
+		text: hint.text,
+		children: /* @__PURE__ */ jsx(InformationOutlineIcon, {
+			prominence: "weak",
+			sentiment: "neutral"
+		})
+	});
+	return /* @__PURE__ */ jsx(Popover, {
+		content: hint.content,
+		onClose: () => setVisible(false),
+		title: hint.title,
+		visible,
+		children: /* @__PURE__ */ jsx("button", {
+			className: plansIconWrapper,
+			"data-testid": "hint-popover",
+			onClick: () => setVisible(true),
+			onKeyDown: (event) => {
+				if (event.key === "Space" || event.key === "Enter") setVisible(true);
+			},
+			tabIndex: 0,
+			type: "button",
+			children: /* @__PURE__ */ jsx(InformationOutlineIcon, {
+				prominence: "weak",
+				sentiment: "neutral"
+			})
+		})
+	});
+};
+
+//#endregion
+export { FeatureHint };

package/dist/components/compositions/Plans/PlanHeader.d.ts

@@ -0,0 +1,14 @@
+import PlansLocales from './locales/en';
+import type { PlanType } from './types';
+type PlanHeaderProps = {
+    fieldName?: string;
+    setFocusedPlan: (planValue?: string) => void;
+    onChange?: (newPlanValue?: string) => void;
+    currentPlanValue?: string;
+    plan: PlanType<string>;
+    disabled: boolean;
+    locales?: Record<keyof typeof PlansLocales, string>;
+};
+export declare const PlanHeader: ({ fieldName, setFocusedPlan, onChange, currentPlanValue, plan, disabled, locales, }: PlanHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PlanHeader.d.ts.map

package/dist/components/compositions/Plans/PlanHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/Plans/PlanHeader.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,cAAc,CAAA;AAQvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,KAAK,eAAe,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,OAAO,YAAY,EAAE,MAAM,CAAC,CAAA;CACpD,CAAA;AAED,eAAO,MAAM,UAAU,mJAqGtB,CAAA"}

package/dist/components/compositions/Plans/PlanHeader.js

@@ -0,0 +1,103 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../Stack/index.js";
+import { Text } from "../../Text/index.js";
+import { Badge } from "../../Badge/index.js";
+import { plansCurrentWrapper, plansDescription, plansFullSizeSeparator, plansHeaderFullHeight, plansHeaderInput } from "./styles.css.js";
+import locales from "./locales/en.js";
+import { Separator } from "../../Separator/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/compositions/Plans/PlanHeader.tsx
+const PlanHeader = ({ fieldName, setFocusedPlan, onChange, currentPlanValue, plan, disabled, locales: locales$1 = locales }) => {
+	var _plan$sentiment;
+	var _plan$sentiment2;
+	var _plan$sentiment3;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [fieldName && onChange && !disabled ? /* @__PURE__ */ jsx("input", {
+		className: plansHeaderInput,
+		"data-testid": plan.value,
+		id: plan.value,
+		name: fieldName,
+		onBlur: () => {
+			setFocusedPlan(void 0);
+		},
+		onChange: () => onChange(plan.value),
+		onFocus: () => {
+			setFocusedPlan(plan.value);
+		},
+		type: "radio",
+		value: plan.value
+	}) : null, /* @__PURE__ */ jsxs(Stack, {
+		alignItems: "center",
+		className: plansHeaderFullHeight,
+		gap: 2,
+		justifyContent: "space-between",
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			gap: 3,
+			width: "100%",
+			children: [/* @__PURE__ */ jsxs(Stack, {
+				alignItems: "center",
+				gap: 1,
+				children: [
+					/* @__PURE__ */ jsx(Badge, {
+						disabled,
+						sentiment: plan.sentiment && plan.sentiment !== "black" && plan.sentiment !== "white" ? plan.sentiment : "primary",
+						children: /* @__PURE__ */ jsx("label", {
+							htmlFor: plan.value,
+							children: plan.title
+						})
+					}),
+					plan.titleHeader,
+					/* @__PURE__ */ jsxs(Stack, {
+						alignItems: "center",
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "span",
+							disabled,
+							sentiment: (_plan$sentiment = plan.sentiment) !== null && _plan$sentiment !== void 0 ? _plan$sentiment : "primary",
+							variant: "headingSmallStrong",
+							children: plan.header.price
+						}), /* @__PURE__ */ jsx(Stack, {
+							style: { minHeight: "16px" },
+							children: plan.header.priceDescription ? /* @__PURE__ */ jsx(Text, {
+								as: "span",
+								disabled,
+								sentiment: (_plan$sentiment2 = plan.sentiment) !== null && _plan$sentiment2 !== void 0 ? _plan$sentiment2 : "primary",
+								variant: "caption",
+								children: plan.header.priceDescription
+							}) : null
+						})]
+					})
+				]
+			}), plan.header.description ? /* @__PURE__ */ jsx("div", {
+				className: plansDescription,
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "div",
+					disabled,
+					variant: "caption",
+					children: plan.header.description
+				})
+			}) : null]
+		}), /* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			gap: 3,
+			width: "100%",
+			children: [
+				plan.header.cta && currentPlanValue !== plan.value ? plan.header.cta : null,
+				plan.header.cta && currentPlanValue === plan.value ? /* @__PURE__ */ jsx("div", {
+					className: plansCurrentWrapper,
+					children: /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						disabled,
+						sentiment: (_plan$sentiment3 = plan.sentiment) !== null && _plan$sentiment3 !== void 0 ? _plan$sentiment3 : "primary",
+						variant: "bodySmallStrong",
+						children: locales$1["plans.currentPlan"]
+					})
+				}) : null,
+				plan.header.separator ? /* @__PURE__ */ jsx(Separator, { className: plansFullSizeSeparator }) : null
+			]
+		})]
+	})] });
+};
+
+//#endregion
+export { PlanHeader };

package/dist/components/compositions/Plans/index.d.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties } from 'react';
+import PlansLocales from './locales/en';
+import type { Feature, PlanType } from './types';
+type PlansProps<T extends string> = {
+    fieldName?: string;
+    onChange?: (newPlanValue: string | undefined) => void;
+    value?: string;
+    features: Feature<T>[];
+    plans: PlanType<T>[];
+    hideFeatureText?: boolean;
+    hideLabels?: boolean;
+    locales?: Record<keyof typeof PlansLocales, string>;
+    style?: CSSProperties;
+    /** Highlights a plan. Use plan value and define the content of the highlight badge */
+    highlight?: {
+        plan: string;
+        content: string;
+    };
+};
+export declare const Plans: <T extends string>({ fieldName, onChange, value, features, plans, hideFeatureText, hideLabels, locales, style, highlight, }: PlansProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/compositions/Plans/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/Plans/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAM1C,OAAO,YAAY,MAAM,cAAc,CAAA;AASvC,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEhD,KAAK,UAAU,CAAC,CAAC,SAAS,MAAM,IAAI;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IACtB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,OAAO,YAAY,EAAE,MAAM,CAAC,CAAA;IACnD,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,sFAAsF;IACtF,SAAS,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAA;CAC9C,CAAA;AAED,eAAO,MAAM,KAAK,GAAI,CAAC,oLAuOtB,CAAA"}

package/dist/components/compositions/Plans/index.js

@@ -0,0 +1,177 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../Stack/index.js";
+import { Text } from "../../Text/index.js";
+import { Badge } from "../../Badge/index.js";
+import { plans, plansCell, plansOutOfStockBadge, plansRowHidden, plansUppercaseText } from "./styles.css.js";
+import { FeatureHint } from "./FeatureHint.js";
+import locales from "./locales/en.js";
+import { PlanHeader } from "./PlanHeader.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
+import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
+
+//#region src/components/compositions/Plans/index.tsx
+const Plans = ({ fieldName, onChange, value, features, plans: plans$1, hideFeatureText = false, hideLabels = false, locales: locales$1 = locales, style, highlight }) => {
+	const hasCardBehavior = !!(fieldName && onChange);
+	const [focusedPlan, setFocusedPlan] = useState();
+	const [hoveredPlan, setHoveredPlan] = useState();
+	return /* @__PURE__ */ jsxs("table", {
+		className: plans,
+		style,
+		children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", {
+			className: plansCell({ hide: hideLabels }),
+			children: hideFeatureText ? null : /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: "headingSmallStrong",
+				children: locales$1["plans.features"]
+			})
+		}), plans$1.map((plan) => {
+			const computedDisabled = !!(plan.outOfStock || plan.disabled);
+			const selectable = hasCardBehavior && !computedDisabled;
+			const isHighlighted = plan.value === (highlight === null || highlight === void 0 ? void 0 : highlight.plan);
+			const hoverPlan = (newValue) => {
+				if (selectable) setHoveredPlan(newValue);
+			};
+			return /* @__PURE__ */ jsxs("td", {
+				className: plansCell({
+					activeColor: value === plan.value || hoveredPlan === plan.value || isHighlighted && !plan.outOfStock,
+					disabled: computedDisabled,
+					focus: focusedPlan === plan.value,
+					hideLabels,
+					selectable
+				}),
+				onBlur: () => hoverPlan(),
+				onClick: selectable ? () => onChange(plan.value) : void 0,
+				onFocus: () => hoverPlan(plan.value),
+				onKeyDown: (event) => {
+					if ([" ", "Enter"].includes(event.key) && selectable) onChange(plan.value);
+				},
+				onMouseOut: () => hoverPlan(),
+				onMouseOver: () => hoverPlan(plan.value),
+				children: [
+					plan.outOfStock ? /* @__PURE__ */ jsx(Badge, {
+						className: plansOutOfStockBadge,
+						size: "small",
+						children: locales$1["plans.outOfStock"]
+					}) : null,
+					plan.header.quotas && !plan.outOfStock ? /* @__PURE__ */ jsx(Badge, {
+						className: plansOutOfStockBadge,
+						size: "small",
+						children: plan.header.quotas
+					}) : null,
+					isHighlighted && !plan.outOfStock && !plan.header.quotas ? /* @__PURE__ */ jsx(Badge, {
+						className: plansOutOfStockBadge,
+						prominence: "strong",
+						sentiment: "primary",
+						size: "small",
+						children: highlight.content
+					}) : null,
+					/* @__PURE__ */ jsx(PlanHeader, {
+						currentPlanValue: value,
+						disabled: computedDisabled,
+						fieldName,
+						onChange,
+						plan,
+						setFocusedPlan
+					})
+				]
+			}, plan.value);
+		})] }) }), /* @__PURE__ */ jsx("tbody", { children: features.map((feature) => {
+			var _feature$key;
+			if ("group" in feature) return /* @__PURE__ */ jsxs("tr", {
+				className: hideLabels ? plansRowHidden : "",
+				children: [/* @__PURE__ */ jsx("td", {
+					className: plansCell({}),
+					children: /* @__PURE__ */ jsxs(Stack, {
+						alignItems: "center",
+						direction: "row",
+						gap: 1,
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "p",
+							className: plansUppercaseText,
+							sentiment: "neutral",
+							variant: "bodySmallStronger",
+							children: feature.group
+						}), feature.hint ? /* @__PURE__ */ jsx(FeatureHint, { hint: feature.hint }) : null]
+					})
+				}), plans$1.map((plan) => {
+					const isHighlighted = plan.value === (highlight === null || highlight === void 0 ? void 0 : highlight.plan);
+					return /* @__PURE__ */ jsx("td", { className: plansCell({
+						activeColor: value === plan.value || hoveredPlan === plan.value || isHighlighted && !plan.outOfStock,
+						disabled: plan.outOfStock || plan.disabled,
+						focus: focusedPlan === plan.value,
+						hide: hideLabels
+					}) }, plan.value);
+				})]
+			}, feature.group);
+			const featureKey = (_feature$key = feature.key) !== null && _feature$key !== void 0 ? _feature$key : "";
+			return /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", {
+				className: plansCell({ hide: hideLabels }),
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsxs(Stack, {
+					alignItems: "center",
+					direction: "row",
+					gap: 1,
+					children: [/* @__PURE__ */ jsx(Text, {
+						as: "p",
+						variant: "bodyStrong",
+						children: feature.text
+					}), /* @__PURE__ */ jsx(FeatureHint, { hint: feature.hint })]
+				}), feature.description ? /* @__PURE__ */ jsx(Text, {
+					as: "div",
+					placement: "start",
+					prominence: "weak",
+					sentiment: "neutral",
+					variant: "caption",
+					children: feature.description
+				}) : null] })
+			}), plans$1.map((plan) => {
+				const computedDisabled = plan.outOfStock || plan.disabled;
+				const selectable = hasCardBehavior && !computedDisabled;
+				const isHighlighted = plan.value === (highlight === null || highlight === void 0 ? void 0 : highlight.plan);
+				const hoverPlan = (newValue) => {
+					if (selectable) setHoveredPlan(newValue);
+				};
+				return /* @__PURE__ */ jsxs("td", {
+					className: plansCell({
+						activeColor: value === plan.value || hoveredPlan === plan.value || isHighlighted && !plan.outOfStock,
+						disabled: computedDisabled,
+						focus: focusedPlan === plan.value,
+						hideLabels,
+						selectable
+					}),
+					"data-testid": `${plan.value}-${feature.key}`,
+					onBlur: () => {},
+					onClick: selectable ? () => onChange(plan.value) : void 0,
+					onFocus: () => {},
+					onKeyDown: () => {},
+					onMouseOut: () => hoverPlan(),
+					onMouseOver: () => hoverPlan(plan.value),
+					children: [
+						plan.data[featureKey] === false ? /* @__PURE__ */ jsx(CloseIcon, {
+							disabled: computedDisabled,
+							prominence: "weak",
+							sentiment: "neutral",
+							size: "large"
+						}) : null,
+						plan.data[featureKey] === true ? /* @__PURE__ */ jsx(CheckCircleIcon, {
+							disabled: computedDisabled,
+							sentiment: "success",
+							size: "medium"
+						}) : null,
+						typeof plan.data[featureKey] !== "boolean" ? /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							disabled: computedDisabled,
+							sentiment: "neutral",
+							variant: "body",
+							children: plan.data[featureKey]
+						}) : null
+					]
+				}, plan.value);
+			})] }, feature.key);
+		}) })]
+	});
+};
+
+//#endregion
+export { Plans };

package/dist/components/compositions/Plans/locales/en.d.ts

@@ -0,0 +1,7 @@
+declare const locales: {
+    'plans.currentPlan': string;
+    'plans.features': string;
+    'plans.outOfStock': string;
+};
+export default locales;
+//# sourceMappingURL=en.d.ts.map

package/dist/components/compositions/Plans/locales/en.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Plans/locales/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,OAAO;;;;CAIZ,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/components/compositions/Plans/locales/en.js

@@ -0,0 +1,9 @@
+//#region src/components/compositions/Plans/locales/en.ts
+const locales = {
+	"plans.currentPlan": "Current plan",
+	"plans.features": "Features",
+	"plans.outOfStock": "Out of stock"
+};
+
+//#endregion
+export { locales as default };

package/dist/components/compositions/Plans/styles.css.d.ts

@@ -0,0 +1,67 @@
+export declare const plansIconWrapper: string;
+export declare const plans: string;
+export declare const plansOutOfStockBadge: string;
+export declare const plansCell: import("@vanilla-extract/recipes").RuntimeFn<{
+    activeColor: {
+        true: {
+            selectors: {
+                'thead &:not(:first-child), tbody &:not(:first-child), tbody tr:last-child &:not(:first-child)': {
+                    borderColor: `var(--${string})`;
+                };
+            };
+        };
+    };
+    disabled: {
+        true: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
+    focus: {
+        true: {
+            selectors: {
+                'thead &:not(:first-child), tbody &:not(:first-child), tbody tr:last-child &:not(:first-child)': {
+                    borderColor: "blue";
+                    borderWidth: "2px 2px 0 2px";
+                };
+            };
+        };
+    };
+    hide: {
+        true: {
+            display: "none";
+        };
+    };
+    hideLabels: {
+        true: {
+            paddingLeft: `var(--${string})`;
+            textAlign: "start";
+            selectors: {
+                'thead &': {
+                    paddingLeft: `var(--${string})`;
+                };
+            };
+        };
+    };
+    selectable: {
+        true: {
+            cursor: "pointer";
+        };
+    };
+    spaceAfter: {
+        true: {
+            selectors: {
+                'tbody &': {
+                    paddingBottom: `var(--${string})`;
+                };
+            };
+        };
+    };
+}>;
+export declare const plansRowHidden: string;
+export declare const plansUppercaseText: string;
+export declare const plansHeaderInput: string;
+export declare const plansHeaderFullHeight: string;
+export declare const plansDescription: string;
+export declare const plansFullSizeSeparator: string;
+export declare const plansCurrentWrapper: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/components/compositions/Plans/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/Plans/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,QAA6C,CAAA;AAE1E,eAAO,MAAM,KAAK,QAWhB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAK/B,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0GpB,CAAA;AAEF,eAAO,MAAM,cAAc,QAA6B,CAAA;AAExD,eAAO,MAAM,kBAAkB,QAAwC,CAAA;AAEvE,eAAO,MAAM,gBAAgB,QAK3B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAA4B,CAAA;AAE9D,eAAO,MAAM,gBAAgB,QAG3B,CAAA;AAEF,eAAO,MAAM,sBAAsB,QAA2B,CAAA;AAE9D,eAAO,MAAM,mBAAmB,QAK9B,CAAA"}