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

package/dist/components/OfferList/components/Row.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { ArrowUpIcon, ArrowDownIcon } from "@ultraviolet/icons";
 import { theme } from "@ultraviolet/themes";
 import { List, Badge, Tooltip, Radio, Checkbox, Button } from "@ultraviolet/ui";
@@ -36,11 +36,7 @@ const Row = ({
     onChangeSelect,
     autoCollapse
   } = useOfferListContext();
-  const {
-    expandedRowIds,
-    collapseRow,
-    expandRow
-  } = List.useListContext();
+  const { expandedRowIds, collapseRow, expandRow } = List.useListContext();
   const [isHovered, setHovered] = useState(false);
   const childrenNumber = Children.count(children) + (selectable ? 1 : 0) + (expandable ? 1 : 0);
   const toggleRowExpand = useCallback(() => {
@@ -55,9 +51,16 @@ const Row = ({
   const computedExpandableContent = useMemo(() => {
     if (expandable && !loading && expandedRowIds[id] && banner) {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: offerListRowExpandable, style: assignInlineVars({
-          [expandablePadding]: theme.space[expandablePadding$1 ?? 2]
-        }), children: expandableContent }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: offerListRowExpandable,
+            style: assignInlineVars({
+              [expandablePadding]: theme.space[expandablePadding$1 ?? 2]
+            }),
+            children: expandableContent
+          }
+        ),
         /* @__PURE__ */ jsx(Banner, { disabled, sentiment: banner.sentiment, children: banner.text })
       ] });
     }
@@ -65,7 +68,16 @@ const Row = ({
       return expandableContent;
     }
     return void 0;
-  }, [expandable, loading, expandedRowIds, banner, expandablePadding$1, id, expandableContent, disabled]);
+  }, [
+    expandable,
+    loading,
+    expandedRowIds,
+    banner,
+    expandablePadding$1,
+    id,
+    expandableContent,
+    disabled
+  ]);
   const isRowSelected = useMemo(() => {
     if (selectable === "radio") {
       return radioSelectedRow === offerName;
@@ -74,38 +86,119 @@ const Row = ({
   }, [offerName, checkboxSelectedRows, radioSelectedRow, selectable]);
   const isSelected = selectable === "radio" ? radioSelectedRow === offerName : checkboxSelectedRows.includes(offerName);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(List.Row, { className: `${className ? `${className} ` : ""}${banner ? offerListRowBanner : ""}${isSelected ? `${" "}${offerListRowSelected}` : ""} ${expandable ? offerListRowSelectedExpandable : offerListRowSelectedNotExpandable}`, "data-dragging": dataDragging, "data-testid": dataTestId, disabled, expandable: computedExpandableContent, expandablePadding: banner ? "0" : void 0, expanded: expanded ?? expandedRowIds[id], highlightAnimation, id, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style, children: [
-      /* @__PURE__ */ jsxs(List.Cell, { className: offerListNoPaddingCell, children: [
-        badge ? /* @__PURE__ */ jsx("div", { className: offerListBadgeContainer, children: /* @__PURE__ */ jsx(Badge, { className: offerListBadge, disabled, prominence: badge.prominence, sentiment: badge.sentiment, size: "small", children: badge.text }) }) : null,
-        /* @__PURE__ */ jsx("div", { className: offerListRowSelectableContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: typeof selectDisabled === "string" ? selectDisabled : void 0, children: selectable === "radio" ? /* @__PURE__ */ jsx(Radio, { checked: isRowSelected, disabled: disabled || loading || !!selectDisabled, id, name: `radio-offer-list-${id}`, onChange: () => {
-          setRadioSelectedRow(offerName);
-          onChangeSelect?.(offerName);
-          if (expandedRowIds[id]) {
-            expandRow(id);
-          } else if (!autoCollapse) {
-            collapseRow(id);
-          }
-        }, value: id }) : /* @__PURE__ */ jsx(Checkbox, { "aria-label": "select", checked: isRowSelected, disabled: disabled || loading || !!selectDisabled, id, name: `checkbox-offer-list-${id}`, onChange: () => {
-          if (isRowSelected) {
-            const newSelectedList = checkboxSelectedRows.filter((element) => element !== offerName);
-            setCheckboxSelectedRows(newSelectedList);
-            onChangeSelect?.(newSelectedList);
-          } else {
-            const newSelectedList = [...checkboxSelectedRows, offerName];
-            setCheckboxSelectedRows(newSelectedList);
-            onChangeSelect?.(newSelectedList);
-          }
-          if (expandedRowIds[id]) {
-            expandRow(id);
-          } else if (!autoCollapse) {
-            collapseRow(id);
-          }
-        }, value: id }) }) })
-      ] }),
-      expandable ? /* @__PURE__ */ jsx(List.Cell, { className: offerListNoPaddingCell, children: /* @__PURE__ */ jsx(Button, { "aria-label": "expand", "data-testid": "list-expand-button", disabled: disabled || !expandable || loading, onClick: toggleRowExpand, sentiment: "neutral", size: "small", variant: "ghost", children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {}) }) }) : null,
-      children
-    ] }),
-    banner && !expandedRowIds[id] ? /* @__PURE__ */ jsx(Banner, { colSpan: childrenNumber, disabled, sentiment: banner.sentiment, shouldHavePrimaryBorder: isHovered || isRowSelected, type: "cell", children: banner.text }) : null
+    /* @__PURE__ */ jsxs(
+      List.Row,
+      {
+        className: `${className ? `${className} ` : ""}${banner ? offerListRowBanner : ""}${isSelected ? `${" "}${offerListRowSelected}` : ""} ${expandable ? offerListRowSelectedExpandable : offerListRowSelectedNotExpandable}`,
+        "data-dragging": dataDragging,
+        "data-testid": dataTestId,
+        disabled,
+        expandable: computedExpandableContent,
+        expandablePadding: banner ? "0" : void 0,
+        expanded: expanded ?? expandedRowIds[id],
+        highlightAnimation,
+        id,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style,
+        children: [
+          /* @__PURE__ */ jsxs(List.Cell, { className: offerListNoPaddingCell, children: [
+            badge ? /* @__PURE__ */ jsx("div", { className: offerListBadgeContainer, children: /* @__PURE__ */ jsx(
+              Badge,
+              {
+                className: offerListBadge,
+                disabled,
+                prominence: badge.prominence,
+                sentiment: badge.sentiment,
+                size: "small",
+                children: badge.text
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsx("div", { className: offerListRowSelectableContainer, children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                text: typeof selectDisabled === "string" ? selectDisabled : void 0,
+                children: selectable === "radio" ? /* @__PURE__ */ jsx(
+                  Radio,
+                  {
+                    checked: isRowSelected,
+                    disabled: disabled || loading || !!selectDisabled,
+                    id,
+                    name: `radio-offer-list-${id}`,
+                    onChange: () => {
+                      setRadioSelectedRow(offerName);
+                      onChangeSelect?.(offerName);
+                      if (expandedRowIds[id]) {
+                        expandRow(id);
+                      } else if (!autoCollapse) {
+                        collapseRow(id);
+                      }
+                    },
+                    value: id
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    "aria-label": "select",
+                    checked: isRowSelected,
+                    disabled: disabled || loading || !!selectDisabled,
+                    id,
+                    name: `checkbox-offer-list-${id}`,
+                    onChange: () => {
+                      if (isRowSelected) {
+                        const newSelectedList = checkboxSelectedRows.filter(
+                          (element) => element !== offerName
+                        );
+                        setCheckboxSelectedRows(newSelectedList);
+                        onChangeSelect?.(newSelectedList);
+                      } else {
+                        const newSelectedList = [
+                          ...checkboxSelectedRows,
+                          offerName
+                        ];
+                        setCheckboxSelectedRows(newSelectedList);
+                        onChangeSelect?.(newSelectedList);
+                      }
+                      if (expandedRowIds[id]) {
+                        expandRow(id);
+                      } else if (!autoCollapse) {
+                        collapseRow(id);
+                      }
+                    },
+                    value: id
+                  }
+                )
+              }
+            ) })
+          ] }),
+          expandable ? /* @__PURE__ */ jsx(List.Cell, { className: offerListNoPaddingCell, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": "expand",
+              "data-testid": "list-expand-button",
+              disabled: disabled || !expandable || loading,
+              onClick: toggleRowExpand,
+              sentiment: "neutral",
+              size: "small",
+              variant: "ghost",
+              children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {})
+            }
+          ) }) : null,
+          children
+        ]
+      }
+    ),
+    banner && !expandedRowIds[id] ? /* @__PURE__ */ jsx(
+      Banner,
+      {
+        colSpan: childrenNumber,
+        disabled,
+        sentiment: banner.sentiment,
+        shouldHavePrimaryBorder: isHovered || isRowSelected,
+        type: "cell",
+        children: banner.text
+      }
+    ) : null
   ] });
 };
 export {

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

@@ -11,5 +11,5 @@ type NonScrollableContentProps = {
     hideDetails: boolean;
     unit: TimeUnit;
 };
-export declare const NonScrollableContent: ({ totalPrice, footer, children, totalPriceInfo, hideDetails, unit, totalPriceDescription, additionalInfo, }: NonScrollableContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const NonScrollableContent: ({ totalPrice, footer, children, totalPriceInfo, hideDetails, unit, totalPriceDescription, additionalInfo, }: NonScrollableContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/OrderSummary/NonScrollableContent.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Stack, Text } from "@ultraviolet/ui";
 import { useContext } from "react";
 import { DisplayPrice } from "./helpers.js";
@@ -14,38 +14,84 @@ const NonScrollableContent = ({
   totalPriceDescription,
   additionalInfo
 }) => {
-  const {
-    locales
-  } = useContext(OrderSummaryContext);
+  const { locales } = useContext(OrderSummaryContext);
   return /* @__PURE__ */ jsxs(Stack, { className: orderSummaryNonScrollableContainer, gap: 3, children: [
     children,
     /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
       totalPriceInfo ? /* @__PURE__ */ jsxs(Stack, { children: [
         /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-          /* @__PURE__ */ jsxs(Text, { as: "span", prominence: "strong", sentiment: "neutral", variant: "bodyStrong", children: [
-            locales["order.summary.total"],
-            ":"
-          ] }),
+          /* @__PURE__ */ jsxs(
+            Text,
+            {
+              as: "span",
+              prominence: "strong",
+              sentiment: "neutral",
+              variant: "bodyStrong",
+              children: [
+                locales["order.summary.total"],
+                ":"
+              ]
+            }
+          ),
           totalPriceDescription
         ] }),
         totalPriceInfo
       ] }) : /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-        /* @__PURE__ */ jsxs(Text, { as: "span", prominence: "strong", sentiment: "neutral", variant: "bodyStrong", children: [
-          locales["order.summary.total"],
-          additionalInfo ? ` ${additionalInfo}` : null,
-          ":"
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            as: "span",
+            prominence: "strong",
+            sentiment: "neutral",
+            variant: "bodyStrong",
+            children: [
+              locales["order.summary.total"],
+              additionalInfo ? ` ${additionalInfo}` : null,
+              ":"
+            ]
+          }
+        ),
         totalPriceDescription
       ] }),
-      totalPrice.totalPrice === totalPrice.totalPriceWithDiscount ? /* @__PURE__ */ jsxs(Text, { as: "span", "data-testid": "total-price", prominence: "strong", sentiment: "neutral", variant: "headingSmallStrong", children: [
-        /* @__PURE__ */ jsx(DisplayPrice, { beforeOrAfter: "after", price: totalPrice }),
-        hideDetails ? `/${unit}` : null
-      ] }) : /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-        /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: "neutral", strikeThrough: true, variant: "bodySmallStrong", children: /* @__PURE__ */ jsx(DisplayPrice, { beforeOrAfter: "before", price: totalPrice }) }),
-        /* @__PURE__ */ jsxs(Text, { as: "span", "data-testid": "total-price", prominence: "strong", sentiment: "neutral", variant: "headingSmallStrong", children: [
-          /* @__PURE__ */ jsx(DisplayPrice, { beforeOrAfter: "after", price: totalPrice }),
-          hideDetails ? `/${unit}` : null
-        ] })
+      totalPrice.totalPrice === totalPrice.totalPriceWithDiscount ? /* @__PURE__ */ jsxs(
+        Text,
+        {
+          as: "span",
+          "data-testid": "total-price",
+          prominence: "strong",
+          sentiment: "neutral",
+          variant: "headingSmallStrong",
+          children: [
+            /* @__PURE__ */ jsx(DisplayPrice, { beforeOrAfter: "after", price: totalPrice }),
+            hideDetails ? `/${unit}` : null
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "span",
+            prominence: "weak",
+            sentiment: "neutral",
+            strikeThrough: true,
+            variant: "bodySmallStrong",
+            children: /* @__PURE__ */ jsx(DisplayPrice, { beforeOrAfter: "before", price: totalPrice })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            as: "span",
+            "data-testid": "total-price",
+            prominence: "strong",
+            sentiment: "neutral",
+            variant: "headingSmallStrong",
+            children: [
+              /* @__PURE__ */ jsx(DisplayPrice, { beforeOrAfter: "after", price: totalPrice }),
+              hideDetails ? `/${unit}` : null
+            ]
+          }
+        )
       ] })
     ] }),
     footer

package/dist/components/OrderSummary/Provider.js

@@ -4,10 +4,7 @@ const OrderSummaryContext = createContext({
   categoriesPrice: {},
   currency: "EUR",
   hideTimeUnit: false,
-  items: [{
-    category: "",
-    subCategories: []
-  }],
+  items: [{ category: "", subCategories: [] }],
   localeFormat: "en-US",
   locales: orderSummaryLocales,
   timePeriodAmount: 1,

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

@@ -1 +1 @@
-export declare const ScrollableContent: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ScrollableContent: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/OrderSummary/ScrollableContent.js

@@ -1,15 +1,11 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Stack, Text, NumberInput } from "@ultraviolet/ui";
 import { useContext } from "react";
 import { DisplayPrice, calculateSubCategoryPrice, formatNumber } from "./helpers.js";
 import { OrderSummaryContext } from "./Provider.js";
 import { orderSummaryScrollableContainer, orderSummaryCategory, orderSummaryNumberInput, orderSummaryDetails } from "./styles.css.js";
-const CategoryName = ({
-  category
-}) => {
-  const {
-    categoriesPrice
-  } = useContext(OrderSummaryContext);
+const CategoryName = ({ category }) => {
+  const { categoriesPrice } = useContext(OrderSummaryContext);
   const categoryPrice = categoriesPrice[category.category] ?? {
     maxPrice: 0,
     maxPriceWithDiscount: 0,
@@ -19,21 +15,75 @@ const CategoryName = ({
   };
   return category.category ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
     category.additionalInfo ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx(Text, { as: "span", prominence: "strong", sentiment: "neutral", variant: "bodyStrong", children: category.category }),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          prominence: "strong",
+          sentiment: "neutral",
+          variant: "bodyStrong",
+          children: category.category
+        }
+      ),
       /* @__PURE__ */ jsx(Text, { as: "span", italic: true, sentiment: "primary", variant: "bodySmall", children: category.additionalInfo })
-    ] }) : /* @__PURE__ */ jsx(Text, { as: "span", prominence: "strong", sentiment: "neutral", variant: "bodyStrong", children: category.category }),
+    ] }) : /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "span",
+        prominence: "strong",
+        sentiment: "neutral",
+        variant: "bodyStrong",
+        children: category.category
+      }
+    ),
     category.customContent,
-    category.numberInput ? /* @__PURE__ */ jsx(NumberInput, { className: orderSummaryNumberInput, controls: category.numberInputControls, onChange: category.onChangeInput, size: "small", unit: category.numberInputUnit, value: category.numberInputValue }) : null,
-    !category.customContent && !category.numberInput && categoryPrice.totalPrice === categoryPrice.totalPriceWithDiscount ? /* @__PURE__ */ jsx(Text, { as: "span", prominence: "strong", sentiment: "neutral", variant: "bodyStrong", children: /* @__PURE__ */ jsx(DisplayPrice, { beforeOrAfter: "after", price: categoryPrice }) }) : null,
+    category.numberInput ? /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        className: orderSummaryNumberInput,
+        controls: category.numberInputControls,
+        onChange: category.onChangeInput,
+        size: "small",
+        unit: category.numberInputUnit,
+        value: category.numberInputValue
+      }
+    ) : null,
+    !category.customContent && !category.numberInput && categoryPrice.totalPrice === categoryPrice.totalPriceWithDiscount ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "span",
+        prominence: "strong",
+        sentiment: "neutral",
+        variant: "bodyStrong",
+        children: /* @__PURE__ */ jsx(DisplayPrice, { beforeOrAfter: "after", price: categoryPrice })
+      }
+    ) : null,
     !category.customContent && !category.numberInput && categoryPrice.totalPrice !== categoryPrice.totalPriceWithDiscount ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: "neutral", strikeThrough: true, variant: "bodySmallStrong", children: /* @__PURE__ */ jsx(DisplayPrice, { beforeOrAfter: "before", price: categoryPrice }) }),
-      /* @__PURE__ */ jsx(Text, { as: "span", prominence: "strong", sentiment: "neutral", variant: "bodyStrong", children: /* @__PURE__ */ jsx(DisplayPrice, { beforeOrAfter: "after", price: categoryPrice }) })
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          prominence: "weak",
+          sentiment: "neutral",
+          strikeThrough: true,
+          variant: "bodySmallStrong",
+          children: /* @__PURE__ */ jsx(DisplayPrice, { beforeOrAfter: "before", price: categoryPrice })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          prominence: "strong",
+          sentiment: "neutral",
+          variant: "bodyStrong",
+          children: /* @__PURE__ */ jsx(DisplayPrice, { beforeOrAfter: "after", price: categoryPrice })
+        }
+      )
     ] }) : null
   ] }) : null;
 };
-const SubCategory = ({
-  subCategory
-}) => {
+const SubCategory = ({ subCategory }) => {
   const {
     currency,
     localeFormat,
@@ -42,31 +92,122 @@ const SubCategory = ({
     timePeriodUnit,
     fractionDigits
   } = useContext(OrderSummaryContext);
-  const subCategoryPrice = calculateSubCategoryPrice(subCategory, hideTimeUnit, timePeriodAmount, timePeriodUnit);
+  const subCategoryPrice = calculateSubCategoryPrice(
+    subCategory,
+    hideTimeUnit,
+    timePeriodAmount,
+    timePeriodUnit
+  );
   return /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, children: [
     /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
       subCategory.additionalInfo ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-        /* @__PURE__ */ jsx(Text, { as: "span", prominence: "strong", sentiment: "neutral", variant: "bodyStrong", children: subCategory.title }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "span",
+            prominence: "strong",
+            sentiment: "neutral",
+            variant: "bodySmallStrong",
+            children: subCategory.title
+          }
+        ),
         /* @__PURE__ */ jsx(Text, { as: "span", italic: true, sentiment: "primary", variant: "bodySmall", children: subCategory.additionalInfo })
-      ] }) : /* @__PURE__ */ jsx(Text, { as: "span", prominence: "strong", sentiment: "neutral", variant: "bodySmallStrong", children: subCategory.title }),
-      subCategory.customContent ? /* @__PURE__ */ jsx(Text, { as: "span", prominence: "strong", sentiment: "neutral", variant: "bodySmallStrong", children: subCategory.customContent }) : null,
-      subCategory.numberInput ? /* @__PURE__ */ jsx(NumberInput, { className: orderSummaryNumberInput, controls: subCategory.numberInputControls, onChange: subCategory.onChangeInput, size: "small", unit: subCategory.numberInputUnit, value: subCategory.numberInputValue }) : null,
-      subCategory.price !== void 0 && !subCategory.hidePrice ? /* @__PURE__ */ jsxs(Text, { as: "span", prominence: "strong", sentiment: "neutral", variant: "bodySmallStrong", children: [
-        subCategoryPrice[0] === subCategoryPrice[1] || subCategory.priceUnit ? formatNumber(subCategory.priceUnit ? subCategory.price : subCategoryPrice[0], localeFormat, currency, fractionDigits) : `${formatNumber(subCategoryPrice[0], localeFormat, currency, fractionDigits)} - ${formatNumber(subCategoryPrice[1], localeFormat, currency, fractionDigits)}`,
-        subCategory.priceUnit ? ` /${subCategory.priceUnit}` : ""
-      ] }) : null
+      ] }) : /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          prominence: "strong",
+          sentiment: "neutral",
+          variant: "bodySmallStrong",
+          children: subCategory.title
+        }
+      ),
+      subCategory.customContent ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          prominence: "strong",
+          sentiment: "neutral",
+          variant: "bodySmallStrong",
+          children: subCategory.customContent
+        }
+      ) : null,
+      subCategory.numberInput ? /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          className: orderSummaryNumberInput,
+          controls: subCategory.numberInputControls,
+          onChange: subCategory.onChangeInput,
+          size: "small",
+          unit: subCategory.numberInputUnit,
+          value: subCategory.numberInputValue
+        }
+      ) : null,
+      subCategory.price !== void 0 && !subCategory.hidePrice ? /* @__PURE__ */ jsxs(
+        Text,
+        {
+          as: "span",
+          prominence: "strong",
+          sentiment: "neutral",
+          variant: "bodySmallStrong",
+          children: [
+            subCategoryPrice[0] === subCategoryPrice[1] || subCategory.priceUnit ? formatNumber(
+              subCategory.priceUnit ? subCategory.price : subCategoryPrice[0],
+              localeFormat,
+              currency,
+              fractionDigits
+            ) : `${formatNumber(
+              subCategoryPrice[0],
+              localeFormat,
+              currency,
+              fractionDigits
+            )} - ${formatNumber(
+              subCategoryPrice[1],
+              localeFormat,
+              currency,
+              fractionDigits
+            )}`,
+            subCategory.priceUnit ? ` /${subCategory.priceUnit}` : ""
+          ]
+        }
+      ) : null
     ] }),
-    /* @__PURE__ */ jsx(Stack, { className: orderSummaryDetails, direction: "column", gap: 0.5, children: subCategory.details?.map((detail) => detail ? /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "neutral", variant: "bodySmall", children: detail }, detail) : null) })
+    /* @__PURE__ */ jsx(Stack, { className: orderSummaryDetails, direction: "column", gap: 0.5, children: subCategory.details?.map(
+      (detail) => detail ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          sentiment: "neutral",
+          variant: "bodySmall",
+          children: detail
+        },
+        detail
+      ) : null
+    ) })
   ] });
 };
 const ScrollableContent = () => {
-  const {
-    items
-  } = useContext(OrderSummaryContext);
-  return /* @__PURE__ */ jsx(Stack, { className: orderSummaryScrollableContainer, gap: 3, children: items.map((category) => Object.keys(category).length > 0 && category.category ? /* @__PURE__ */ jsxs(Stack, { className: orderSummaryCategory, gap: 1.5, children: [
-    /* @__PURE__ */ jsx(CategoryName, { category }),
-    category.subCategories && Object.keys(category.subCategories).length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 1, children: category.subCategories.map((subCategory, index) => /* @__PURE__ */ jsx(SubCategory, { subCategory }, subCategory.title ?? `${index}`)) }) : null
-  ] }, category.category) : null) });
+  const { items } = useContext(OrderSummaryContext);
+  return /* @__PURE__ */ jsx(Stack, { className: orderSummaryScrollableContainer, gap: 3, children: items.map(
+    (category) => Object.keys(category).length > 0 && category.category ? /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        className: orderSummaryCategory,
+        gap: 1.5,
+        children: [
+          /* @__PURE__ */ jsx(CategoryName, { category }),
+          category.subCategories && Object.keys(category.subCategories).length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 1, children: category.subCategories.map((subCategory, index) => /* @__PURE__ */ jsx(
+            SubCategory,
+            {
+              subCategory
+            },
+            subCategory.title ?? `${index}`
+          )) }) : null
+        ]
+      },
+      category.category
+    ) : null
+  ) });
 };
 export {
   ScrollableContent

package/dist/components/OrderSummary/constants.js

@@ -1,4 +1,10 @@
-const Units = ["seconds", "minutes", "hours", "days", "months"];
+const Units = [
+  "seconds",
+  "minutes",
+  "hours",
+  "days",
+  "months"
+];
 const multiplier = {
   days: 24,
   hours: 1,