@ultraviolet/plus 3.0.0-beta.16 → 3.0.0-beta.18

package/dist/components/OrderSummary/helpers.js

@@ -57,30 +57,48 @@ const calculateSubCategoryPrice = (subCategory, hideTimeUnit, timePeriodAmount,
   return [price, price];
 };
 const calculateCategoryPrice = (category, hideTimeUnit, timePeriodAmount, timePeriodUnit) => {
-  const categoryPrice = category.subCategories?.reduce((acc, subCategory) => {
-    const computedPrices = calculateSubCategoryPrice(subCategory, hideTimeUnit, timePeriodAmount, timePeriodUnit);
-    return [acc[0] + computedPrices[0], acc[1] + computedPrices[1]];
-  }, [0, 0]) || [0, 0];
+  const categoryPrice = category.subCategories?.reduce(
+    (acc, subCategory) => {
+      const computedPrices = calculateSubCategoryPrice(
+        subCategory,
+        hideTimeUnit,
+        timePeriodAmount,
+        timePeriodUnit
+      );
+      return [acc[0] + computedPrices[0], acc[1] + computedPrices[1]];
+    },
+    [0, 0]
+  ) || [0, 0];
   const discountedPriceMin = category.discount && category.discount <= 1 ? categoryPrice[0] * category.discount : categoryPrice[0] - (category.discount ?? 0);
   const discountedPriceMax = category.discount && category.discount <= 1 ? categoryPrice[1] * category.discount : categoryPrice[1] - (category.discount ?? 0);
   const discountedPrice = category.allowNegative ? [discountedPriceMin, discountedPriceMax] : [Math.max(discountedPriceMin, 0), Math.max(discountedPriceMax, 0)];
-  categoryPrice.map((price) => Math.max(category.discount && category.discount <= 1 ? price * category.discount : price - (category.discount ?? 0), 0));
-  return {
-    categoryPrice,
-    discountedPrice
-  };
+  categoryPrice.map(
+    (price) => Math.max(
+      category.discount && category.discount <= 1 ? price * category.discount : price - (category.discount ?? 0),
+      0
+    )
+  );
+  return { categoryPrice, discountedPrice };
 };
-const DisplayPrice = ({
-  price,
-  beforeOrAfter
-}) => {
-  const {
+const DisplayPrice = ({ price, beforeOrAfter }) => {
+  const { localeFormat, currency, fractionDigits } = useContext(OrderSummaryContext);
+  const withDiscount = beforeOrAfter === "after" ? "WithDiscount" : "";
+  return price.totalPrice === price.maxPrice ? formatNumber(
+    price[`totalPrice${withDiscount}`],
     localeFormat,
     currency,
-    fractionDigits
-  } = useContext(OrderSummaryContext);
-  const withDiscount = beforeOrAfter === "after" ? "WithDiscount" : "";
-  return price.totalPrice === price.maxPrice ? formatNumber(price[`totalPrice${withDiscount}`], localeFormat, currency, fractionDigits ?? 2) : `${formatNumber(price[`totalPrice${withDiscount}`], localeFormat, currency, fractionDigits ?? 2)} - ${formatNumber(price[`maxPrice${withDiscount}`], localeFormat, currency, fractionDigits ?? 2)}`;
+    fractionDigits ?? 2
+  ) : `${formatNumber(
+    price[`totalPrice${withDiscount}`],
+    localeFormat,
+    currency,
+    fractionDigits ?? 2
+  )} - ${formatNumber(
+    price[`maxPrice${withDiscount}`],
+    localeFormat,
+    currency,
+    fractionDigits ?? 2
+  )}`;
 };
 export {
   DisplayPrice,

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

@@ -1,2 +1,2 @@
 import type { OrderSummaryProps } from './types';
-export declare const OrderSummary: ({ header, hideTimeUnit, periodOptions, valueUnitInput, unitUnitInput, items, locales, currency, localeFormat, footer, children, discount, totalPriceInfo, fractionDigits, hideDetails, onChange, onChangeUnitInput, totalPriceDescription, additionalInfo, className, "data-testid": dataTestId, style, }: OrderSummaryProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OrderSummary: ({ header, hideTimeUnit, periodOptions, valueUnitInput, unitUnitInput, items, locales, currency, localeFormat, footer, children, discount, totalPriceInfo, fractionDigits, hideDetails, onChange, onChangeUnitInput, totalPriceDescription, additionalInfo, className, "data-testid": dataTestId, style, }: OrderSummaryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/OrderSummary/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Stack, Text, UnitInput } from "@ultraviolet/ui";
 import { useState, useMemo, useEffect } from "react";
 import { Units } from "./constants.js";
@@ -34,68 +34,155 @@ const OrderSummary = ({
 }) => {
   const [timePeriodUnit, setTimePeriodUnit] = useState(unitUnitInput);
   const [timePeriodAmount, setTimePeriodAmount] = useState(valueUnitInput);
-  const categoriesPrice = useMemo(() => items.reduce((acc, category) => {
-    const {
-      categoryPrice,
-      discountedPrice
-    } = calculateCategoryPrice(category, hideTimeUnit, timePeriodAmount, timePeriodUnit);
-    return {
-      ...acc,
-      [category.category]: {
-        maxPrice: categoryPrice[1],
-        maxPriceWithDiscount: discountedPrice[1],
-        timeUnit: unitUnitInput,
-        totalPrice: categoryPrice[0],
-        totalPriceWithDiscount: discountedPrice[0]
-      }
-    };
-  }, {}), [hideTimeUnit, items, timePeriodAmount, timePeriodUnit, unitUnitInput]);
+  const categoriesPrice = useMemo(
+    () => items.reduce((acc, category) => {
+      const { categoryPrice, discountedPrice } = calculateCategoryPrice(
+        category,
+        hideTimeUnit,
+        timePeriodAmount,
+        timePeriodUnit
+      );
+      return {
+        ...acc,
+        [category.category]: {
+          maxPrice: categoryPrice[1],
+          maxPriceWithDiscount: discountedPrice[1],
+          timeUnit: unitUnitInput,
+          totalPrice: categoryPrice[0],
+          totalPriceWithDiscount: discountedPrice[0]
+        }
+      };
+    }, {}),
+    [hideTimeUnit, items, timePeriodAmount, timePeriodUnit, unitUnitInput]
+  );
   const totalPrice = useMemo(() => {
-    const price = Object.values(categoriesPrice).reduce((acc, categoryPrice) => [acc[0] + categoryPrice.totalPriceWithDiscount, acc[1] + categoryPrice.maxPriceWithDiscount], [0, 0]);
+    const price = Object.values(categoriesPrice).reduce(
+      (acc, categoryPrice) => [
+        acc[0] + categoryPrice.totalPriceWithDiscount,
+        acc[1] + categoryPrice.maxPriceWithDiscount
+      ],
+      [0, 0]
+    );
     const computedPrice = {
       maxPrice: Math.max(price[1], 0),
-      maxPriceWithDiscount: Math.max(price[1] * (discount < 1 ? 1 - discount : 1) - (discount >= 1 ? Math.abs(discount) : 0), 0),
+      maxPriceWithDiscount: Math.max(
+        price[1] * (discount < 1 ? 1 - discount : 1) - (discount >= 1 ? Math.abs(discount) : 0),
+        0
+      ),
       timeUnit: unitUnitInput,
       totalPrice: Math.max(price[0], 0),
-      totalPriceWithDiscount: Math.max(price[0] * (discount < 1 ? 1 - discount : 1) - (discount >= 1 ? Math.abs(discount) : 0), 0)
+      totalPriceWithDiscount: Math.max(
+        price[0] * (discount < 1 ? 1 - discount : 1) - (discount >= 1 ? Math.abs(discount) : 0),
+        0
+      )
     };
     return computedPrice;
   }, [categoriesPrice, discount, unitUnitInput]);
-  const valueContext = useMemo(() => ({
-    categoriesPrice,
-    currency,
-    fractionDigits,
-    hideTimeUnit,
-    items,
-    localeFormat,
-    locales,
-    timePeriodAmount,
-    timePeriodUnit
-  }), [currency, localeFormat, items, categoriesPrice, hideTimeUnit, timePeriodUnit, timePeriodAmount, locales, fractionDigits]);
+  const valueContext = useMemo(
+    () => ({
+      categoriesPrice,
+      currency,
+      fractionDigits,
+      hideTimeUnit,
+      items,
+      localeFormat,
+      locales,
+      timePeriodAmount,
+      timePeriodUnit
+    }),
+    [
+      currency,
+      localeFormat,
+      items,
+      categoriesPrice,
+      hideTimeUnit,
+      timePeriodUnit,
+      timePeriodAmount,
+      locales,
+      fractionDigits
+    ]
+  );
   const computePeriodOptions = useMemo(() => {
     const computedPeriodOptions = [];
-    periodOptions.forEach((option) => computedPeriodOptions.push({
-      label: locales[`order.summary.units.${option}.label`],
-      value: option
-    }));
+    periodOptions.forEach(
+      (option) => computedPeriodOptions.push({
+        label: locales[`order.summary.units.${option}.label`],
+        value: option
+      })
+    );
     return computedPeriodOptions;
   }, [periodOptions, locales]);
   useEffect(() => {
     onChange?.(categoriesPrice, totalPrice);
   }, [categoriesPrice, totalPrice, onChange]);
-  return /* @__PURE__ */ jsx(OrderSummaryContext.Provider, { value: valueContext, children: /* @__PURE__ */ jsxs(Stack, { className: `${className ? `${className} ` : ""}${orderSummaryContainer}`, "data-testId": dataTestId, justifyContent: hideDetails ? "flex-start" : "space-between", style, children: [
-    header ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: orderSummaryHeaderContainer[hideDetails ? "hideDetails" : "showDetails"], direction: "row", gap: 2, justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsx(Text, { as: "h3", prominence: "strong", sentiment: "neutral", variant: "headingSmallStrong", children: header }),
-      !hideTimeUnit && !hideDetails ? /* @__PURE__ */ jsx(Stack, { className: orderSummaryStackBackground, children: /* @__PURE__ */ jsx(UnitInput, { dropdownAlign: "center", maxWidth: "200px", onChange: (value) => {
-        setTimePeriodAmount(value);
-      }, onChangeUnitValue: (val) => {
-        setTimePeriodUnit(val);
-        onChangeUnitInput?.(val);
-      }, options: computePeriodOptions, selectInputWidth: "100%", size: "small", templateColumns: "2fr 3fr", unitValue: unitUnitInput, value: valueUnitInput }) }) : null
-    ] }) : null,
-    !hideDetails ? /* @__PURE__ */ jsx(ScrollableContent, {}) : null,
-    /* @__PURE__ */ jsx(NonScrollableContent, { additionalInfo, discount, footer, hideDetails, totalPrice, totalPriceDescription, totalPriceInfo, unit: unitUnitInput, children })
-  ] }) });
+  return /* @__PURE__ */ jsx(OrderSummaryContext.Provider, { value: valueContext, children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: `${className ? `${className} ` : ""}${orderSummaryContainer}`,
+      "data-testId": dataTestId,
+      justifyContent: hideDetails ? "flex-start" : "space-between",
+      style,
+      children: [
+        header ? /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            alignItems: "center",
+            className: orderSummaryHeaderContainer[hideDetails ? "hideDetails" : "showDetails"],
+            direction: "row",
+            gap: 2,
+            justifyContent: "space-between",
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  as: "h3",
+                  prominence: "strong",
+                  sentiment: "neutral",
+                  variant: "headingSmallStrong",
+                  children: header
+                }
+              ),
+              !hideTimeUnit && !hideDetails ? /* @__PURE__ */ jsx(Stack, { className: orderSummaryStackBackground, children: /* @__PURE__ */ jsx(
+                UnitInput,
+                {
+                  dropdownAlign: "center",
+                  maxWidth: "200px",
+                  onChange: (value) => {
+                    setTimePeriodAmount(value);
+                  },
+                  onChangeUnitValue: (val) => {
+                    setTimePeriodUnit(val);
+                    onChangeUnitInput?.(val);
+                  },
+                  options: computePeriodOptions,
+                  selectInputWidth: "100%",
+                  size: "small",
+                  templateColumns: "2fr 3fr",
+                  unitValue: unitUnitInput,
+                  value: valueUnitInput
+                }
+              ) }) : null
+            ]
+          }
+        ) : null,
+        !hideDetails ? /* @__PURE__ */ jsx(ScrollableContent, {}) : null,
+        /* @__PURE__ */ jsx(
+          NonScrollableContent,
+          {
+            additionalInfo,
+            discount,
+            footer,
+            hideDetails,
+            totalPrice,
+            totalPriceDescription,
+            totalPriceInfo,
+            unit: unitUnitInput,
+            children
+          }
+        )
+      ]
+    }
+  ) });
 };
 export {
   OrderSummary

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

@@ -2,5 +2,5 @@ import type { Hint } from './types';
 type FeatureHintProps = {
     hint?: Hint;
 };
-export declare const FeatureHint: ({ hint }: FeatureHintProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const FeatureHint: ({ hint }: FeatureHintProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Plans/FeatureHint.js

@@ -1,11 +1,9 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { InformationOutlineIcon } from "@ultraviolet/icons";
 import { Tooltip, Popover } from "@ultraviolet/ui";
 import { useState } from "react";
 import { plansIconWrapper } from "./styles.css.js";
-const FeatureHint = ({
-  hint
-}) => {
+const FeatureHint = ({ hint }) => {
   const [visible, setVisible] = useState(false);
   if (!hint) {
     return /* @__PURE__ */ jsx("div", {});
@@ -13,11 +11,31 @@ const FeatureHint = ({
   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("div", { className: plansIconWrapper, "data-testid": "hint-popover", onClick: () => setVisible(true), onKeyDown: (event) => {
-    if (event.key === "Space" || event.key === "Enter") {
-      setVisible(true);
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      content: hint.content,
+      onClose: () => setVisible(false),
+      title: hint.title,
+      visible,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: plansIconWrapper,
+          "data-testid": "hint-popover",
+          onClick: () => setVisible(true),
+          onKeyDown: (event) => {
+            if (event.key === "Space" || event.key === "Enter") {
+              setVisible(true);
+            }
+          },
+          role: "button",
+          tabIndex: 0,
+          children: /* @__PURE__ */ jsx(InformationOutlineIcon, { prominence: "weak", sentiment: "neutral" })
+        }
+      )
     }
-  }, role: "button", tabIndex: 0, children: /* @__PURE__ */ jsx(InformationOutlineIcon, { prominence: "weak", sentiment: "neutral" }) }) });
+  );
 };
 export {
   FeatureHint

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

@@ -9,5 +9,5 @@ type PlanHeaderProps = {
     disabled: boolean;
     locales?: Record<keyof typeof PlansLocales, string>;
 };
-export declare const PlanHeader: ({ fieldName, setFocusedPlan, onChange, currentPlanValue, plan, disabled, locales, }: PlanHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const PlanHeader: ({ fieldName, setFocusedPlan, onChange, currentPlanValue, plan, disabled, locales, }: PlanHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Plans/PlanHeader.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Stack, Badge, Text, Separator } from "@ultraviolet/ui";
 import locales from "./locales/en.js";
 import { plansHeaderInput, plansHeaderFullHeight, plansDescription, plansCurrentWrapper, plansFullSizeSeparator } from "./styles.css.js";
@@ -11,31 +11,85 @@ const PlanHeader = ({
   disabled,
   locales: locales$1 = locales
 }) => /* @__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 ?? "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.sentiment ?? "primary", variant: "caption", children: plan.header.priceDescription }) : null })
+  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 ?? "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.sentiment ?? "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.sentiment ?? "primary",
+              variant: "bodySmallStrong",
+              children: locales$1["plans.currentPlan"]
+            }
+          ) }) : null,
+          plan.header.separator ? /* @__PURE__ */ jsx(Separator, { className: plansFullSizeSeparator }) : 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.sentiment ?? "primary", variant: "bodySmallStrong", children: locales$1["plans.currentPlan"] }) }) : null,
-      plan.header.separator ? /* @__PURE__ */ jsx(Separator, { className: plansFullSizeSeparator }) : null
-    ] })
-  ] })
+      ]
+    }
+  )
 ] });
 export {
   PlanHeader

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

@@ -12,5 +12,5 @@ type PlansProps<T extends string> = {
     locales?: Record<keyof typeof PlansLocales, string>;
     style?: CSSProperties;
 };
-export declare const Plans: <T extends string>({ fieldName, onChange, value, features, plans, hideFeatureText, hideLabels, locales, style, }: PlansProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Plans: <T extends string>({ fieldName, onChange, value, features, plans, hideFeatureText, hideLabels, locales, style, }: PlansProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};