@telia/teddy 0.7.47 → 0.7.49

package/dist/components/checkbox-card-group/checkbox-card-group-indicator.cjs

@@ -255,10 +255,11 @@ const RadioCardGroup = Object.assign(components_radioCardGroup_radioCardGroupRoo
 });
 const Close = React.forwardRef(
   ({ className, ...props }, forwardedRef) => {
-    const classes = clsx([modal_module.styles[`${components_modal_modalRoot.rootClassName}__close`]], {
-      [modal_module.styles[`${components_modal_modalRoot.rootClassName}__close--floating`]]: props.slot === "floating",
+    const classes = clsx(
+      modal_module.styles[`${components_modal_modalRoot.rootClassName}__close`],
+      { [modal_module.styles[`${components_modal_modalRoot.rootClassName}__close--floating`]]: props.slot === "floating" },
       className
-    });
+    );
     const imageRef = React.useContext(components_modal_modalRoot.RootContext).imageRef;
     const [hasImage, setHasImage] = React.useState(false);
     React.useEffect(() => {

package/dist/components/checkbox-card-group/checkbox-card-group-indicator.js

@@ -234,10 +234,11 @@ const RadioCardGroup = Object.assign(Root$3, {
 });
 const Close = React__default.forwardRef(
   ({ className, ...props }, forwardedRef) => {
-    const classes = clsx([styles$4[`${rootClassName$4}__close`]], {
-      [styles$4[`${rootClassName$4}__close--floating`]]: props.slot === "floating",
+    const classes = clsx(
+      styles$4[`${rootClassName$4}__close`],
+      { [styles$4[`${rootClassName$4}__close--floating`]]: props.slot === "floating" },
       className
-    });
+    );
     const imageRef = React__default.useContext(RootContext$1).imageRef;
     const [hasImage, setHasImage] = React__default.useState(false);
     useEffect(() => {

package/dist/components/shopping-cart/index.d.ts

@@ -5,7 +5,7 @@ import { DisclaimerProps } from './shopping-cart-disclaimer';
 import { ContinueProps } from './shopping-cart-continue';
 
 export declare const ShoppingCart: {
-    ({ heading, children, formatPrice, hasPaid, isAllowedToDelete, className }: RootProps): import("react/jsx-runtime").JSX.Element;
+    ({ heading, children, formatPrice, hasPaid, isAllowedToDelete, readonly, className }: RootProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Items: {
@@ -13,7 +13,7 @@ export declare const ShoppingCart: {
         displayName: string;
     };
     Payment: {
-        ({ delivery, totalPriceUpfront, totalPriceMonthly, totalPriceFirstInvoice, paymentTooltip, monthlyPriceDetails, totalVAT, totalPriceWithoutVAT, className, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
+        ({ delivery, totalPriceUpfront, totalPriceMonthly, totalPriceFirstInvoice, paymentTooltip, monthlyPriceDetails, totalVAT, totalPriceWithoutVAT, highlightedLine, className, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Disclaimer: {

package/dist/components/shopping-cart/shopping-cart-context.cjs

@@ -5,7 +5,8 @@ const components_shoppingCart_utils = require("./utils.cjs");
 const ShoppingCartContext = React.createContext({
   formatPrice: components_shoppingCart_utils.defaultFormatPrice,
   hasPaid: false,
-  isAllowedToDelete: true
+  isAllowedToDelete: true,
+  readonly: false
 });
 const ShoppingCartProvider = ShoppingCartContext.Provider;
 const useShoppingCart = () => React.useContext(ShoppingCartContext);

package/dist/components/shopping-cart/shopping-cart-context.d.ts

@@ -3,6 +3,7 @@ export interface ShoppingCartContextValue {
     formatPrice: (price: string | number) => string;
     hasPaid?: boolean;
     isAllowedToDelete?: boolean;
+    readonly?: boolean;
 }
 export declare const ShoppingCartProvider: import('react').Provider<ShoppingCartContextValue>;
 export declare const useShoppingCart: () => ShoppingCartContextValue;

package/dist/components/shopping-cart/shopping-cart-context.js

@@ -3,7 +3,8 @@ import { defaultFormatPrice } from "./utils.js";
 const ShoppingCartContext = createContext({
   formatPrice: defaultFormatPrice,
   hasPaid: false,
-  isAllowedToDelete: true
+  isAllowedToDelete: true,
+  readonly: false
 });
 const ShoppingCartProvider = ShoppingCartContext.Provider;
 const useShoppingCart = () => useContext(ShoppingCartContext);

package/dist/components/shopping-cart/shopping-cart-continue.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("clsx");
-const shoppingCart_module = require("../../shopping-cart.module-BCoLrcMI.cjs");
+const shoppingCart_module = require("../../shopping-cart.module-C9EOksct.cjs");
 const Continue = ({ children, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: clsx.clsx(className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${shoppingCart_module.styles.sectionInner} ${shoppingCart_module.styles.continueContainer}`, children }) });
 };

package/dist/components/shopping-cart/shopping-cart-continue.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { s as styles } from "../../shopping-cart.module-DA25l2hr.js";
+import { s as styles } from "../../shopping-cart.module-ClaAAxQV.js";
 const Continue = ({ children, className }) => {
   return /* @__PURE__ */ jsx("section", { className: clsx(className), children: /* @__PURE__ */ jsx("div", { className: `${styles.sectionInner} ${styles.continueContainer}`, children }) });
 };

package/dist/components/shopping-cart/shopping-cart-item.cjs

@@ -14,35 +14,35 @@ const components_tooltip_index = require("../tooltip/index.cjs");
 const components_shoppingCart_types = require("./types.cjs");
 const components_shoppingCart_shoppingCartContext = require("./shopping-cart-context.cjs");
 const components_shoppingCart_utils = require("./utils.cjs");
-const item = "_item_16o96_1";
-const breakageFeeInfo = "_breakageFeeInfo_16o96_7";
-const nameWrapper = "_nameWrapper_16o96_26";
-const link = "_link_16o96_33";
-const cartLink = "_cartLink_16o96_51";
-const discountDescription = "_discountDescription_16o96_59";
-const name = "_name_16o96_26";
-const nameContainer = "_nameContainer_16o96_72";
-const subtitle = "_subtitle_16o96_76";
-const quantityPickerWrapper = "_quantityPickerWrapper_16o96_84";
-const pricePer = "_pricePer_16o96_91";
-const quantityPicker = "_quantityPicker_16o96_84";
-const priceContainer = "_priceContainer_16o96_103";
-const priceCost = "_priceCost_16o96_109";
-const priceLabel = "_priceLabel_16o96_117";
-const priceLinethrough = "_priceLinethrough_16o96_122";
-const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_16o96_132";
-const imageContainer = "_imageContainer_16o96_141";
-const noImageContainer = "_noImageContainer_16o96_153";
-const image = "_image_16o96_141";
-const iconImage = "_iconImage_16o96_166";
-const deleteButtonContainer = "_deleteButtonContainer_16o96_172";
-const uniqueDiscount = "_uniqueDiscount_16o96_199";
-const uniqueDiscountLabel = "_uniqueDiscountLabel_16o96_206";
-const uniqueDiscountPrice = "_uniqueDiscountPrice_16o96_212";
-const onlyInShops = "_onlyInShops_16o96_217";
-const onlyInShopsLabel = "_onlyInShopsLabel_16o96_224";
-const tooltipTrigger = "_tooltipTrigger_16o96_243";
-const priceWrapper = "_priceWrapper_16o96_251";
+const item = "_item_1rldv_1";
+const breakageFeeInfo = "_breakageFeeInfo_1rldv_7";
+const nameWrapper = "_nameWrapper_1rldv_26";
+const link = "_link_1rldv_33";
+const cartLink = "_cartLink_1rldv_51";
+const discountDescription = "_discountDescription_1rldv_59";
+const name = "_name_1rldv_26";
+const nameContainer = "_nameContainer_1rldv_72";
+const subtitle = "_subtitle_1rldv_76";
+const quantityPickerWrapper = "_quantityPickerWrapper_1rldv_84";
+const pricePer = "_pricePer_1rldv_91";
+const quantityPicker = "_quantityPicker_1rldv_84";
+const priceContainer = "_priceContainer_1rldv_103";
+const priceCost = "_priceCost_1rldv_110";
+const priceLabel = "_priceLabel_1rldv_118";
+const priceLinethrough = "_priceLinethrough_1rldv_123";
+const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_1rldv_133";
+const imageContainer = "_imageContainer_1rldv_142";
+const noImageContainer = "_noImageContainer_1rldv_154";
+const image = "_image_1rldv_142";
+const iconImage = "_iconImage_1rldv_167";
+const deleteButtonContainer = "_deleteButtonContainer_1rldv_173";
+const uniqueDiscount = "_uniqueDiscount_1rldv_200";
+const uniqueDiscountLabel = "_uniqueDiscountLabel_1rldv_207";
+const uniqueDiscountPrice = "_uniqueDiscountPrice_1rldv_213";
+const onlyInShops = "_onlyInShops_1rldv_218";
+const onlyInShopsLabel = "_onlyInShopsLabel_1rldv_225";
+const tooltipTrigger = "_tooltipTrigger_1rldv_244";
+const priceWrapper = "_priceWrapper_1rldv_252";
 const styles = {
   item,
   breakageFeeInfo,
@@ -141,7 +141,7 @@ const CartItemImage = ({ cartItem }) => {
 };
 const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { formatPrice } = components_shoppingCart_shoppingCartContext.useShoppingCart();
+  const { formatPrice, readonly } = components_shoppingCart_shoppingCartContext.useShoppingCart();
   const quantity = ((_a = cartItem.quantity) == null ? void 0 : _a.value) ?? 1;
   const isQuantityModifiable = !!((_b = cartItem.quantity) == null ? void 0 : _b.modifiable);
   const shouldShowPricePerUnit = (!!cartItem.price.upfront || !!cartItem.price.firstInvoice) && quantity > 1;
@@ -170,7 +170,7 @@ const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
           `${cartItem.bundleId}-${cartItem.id}-${sub}`
         )) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
         quantity > 1 && !shouldShowPricePerUnit && /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${quantity} stk` }),
-        isQuantityModifiable && /* @__PURE__ */ jsxRuntime.jsx(
+        isQuantityModifiable && !readonly && /* @__PURE__ */ jsxRuntime.jsx(
           QuantityPicker,
           {
             quantity,
@@ -252,7 +252,7 @@ const CartItemName = ({ cartItem }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntim
 ] });
 const Item = ({ cartItem, onChangeQuantity, onRemoveItem, className }) => {
   var _a;
-  const { hasPaid, isAllowedToDelete } = components_shoppingCart_shoppingCartContext.useShoppingCart();
+  const { hasPaid, isAllowedToDelete, readonly } = components_shoppingCart_shoppingCartContext.useShoppingCart();
   const isRemovable = !!((_a = cartItem.quantity) == null ? void 0 : _a.removable);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(styles.item, className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nameContainer, children: [
@@ -262,7 +262,7 @@ const Item = ({ cartItem, onChangeQuantity, onRemoveItem, className }) => {
         /* @__PURE__ */ jsxRuntime.jsx(CartItemPriceDisplay, { cartItem, onChangeQuantity, hasPaid })
       ] })
     ] }),
-    isRemovable && isAllowedToDelete && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => onRemoveItem(cartItem), className: styles.deleteButtonContainer, children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "remove" }) })
+    isRemovable && isAllowedToDelete && !readonly && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => onRemoveItem(cartItem), className: styles.deleteButtonContainer, children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "remove" }) })
   ] });
 };
 Item.displayName = "Item";

package/dist/components/shopping-cart/shopping-cart-item.js

@@ -12,35 +12,35 @@ import { Tooltip } from "../tooltip/index.js";
 import { CART_ITEM_TYPE } from "./types.js";
 import { useShoppingCart } from "./shopping-cart-context.js";
 import { getDiscountPrice, getPrice, defaultFormatPrice } from "./utils.js";
-const item = "_item_16o96_1";
-const breakageFeeInfo = "_breakageFeeInfo_16o96_7";
-const nameWrapper = "_nameWrapper_16o96_26";
-const link = "_link_16o96_33";
-const cartLink = "_cartLink_16o96_51";
-const discountDescription = "_discountDescription_16o96_59";
-const name = "_name_16o96_26";
-const nameContainer = "_nameContainer_16o96_72";
-const subtitle = "_subtitle_16o96_76";
-const quantityPickerWrapper = "_quantityPickerWrapper_16o96_84";
-const pricePer = "_pricePer_16o96_91";
-const quantityPicker = "_quantityPicker_16o96_84";
-const priceContainer = "_priceContainer_16o96_103";
-const priceCost = "_priceCost_16o96_109";
-const priceLabel = "_priceLabel_16o96_117";
-const priceLinethrough = "_priceLinethrough_16o96_122";
-const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_16o96_132";
-const imageContainer = "_imageContainer_16o96_141";
-const noImageContainer = "_noImageContainer_16o96_153";
-const image = "_image_16o96_141";
-const iconImage = "_iconImage_16o96_166";
-const deleteButtonContainer = "_deleteButtonContainer_16o96_172";
-const uniqueDiscount = "_uniqueDiscount_16o96_199";
-const uniqueDiscountLabel = "_uniqueDiscountLabel_16o96_206";
-const uniqueDiscountPrice = "_uniqueDiscountPrice_16o96_212";
-const onlyInShops = "_onlyInShops_16o96_217";
-const onlyInShopsLabel = "_onlyInShopsLabel_16o96_224";
-const tooltipTrigger = "_tooltipTrigger_16o96_243";
-const priceWrapper = "_priceWrapper_16o96_251";
+const item = "_item_1rldv_1";
+const breakageFeeInfo = "_breakageFeeInfo_1rldv_7";
+const nameWrapper = "_nameWrapper_1rldv_26";
+const link = "_link_1rldv_33";
+const cartLink = "_cartLink_1rldv_51";
+const discountDescription = "_discountDescription_1rldv_59";
+const name = "_name_1rldv_26";
+const nameContainer = "_nameContainer_1rldv_72";
+const subtitle = "_subtitle_1rldv_76";
+const quantityPickerWrapper = "_quantityPickerWrapper_1rldv_84";
+const pricePer = "_pricePer_1rldv_91";
+const quantityPicker = "_quantityPicker_1rldv_84";
+const priceContainer = "_priceContainer_1rldv_103";
+const priceCost = "_priceCost_1rldv_110";
+const priceLabel = "_priceLabel_1rldv_118";
+const priceLinethrough = "_priceLinethrough_1rldv_123";
+const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_1rldv_133";
+const imageContainer = "_imageContainer_1rldv_142";
+const noImageContainer = "_noImageContainer_1rldv_154";
+const image = "_image_1rldv_142";
+const iconImage = "_iconImage_1rldv_167";
+const deleteButtonContainer = "_deleteButtonContainer_1rldv_173";
+const uniqueDiscount = "_uniqueDiscount_1rldv_200";
+const uniqueDiscountLabel = "_uniqueDiscountLabel_1rldv_207";
+const uniqueDiscountPrice = "_uniqueDiscountPrice_1rldv_213";
+const onlyInShops = "_onlyInShops_1rldv_218";
+const onlyInShopsLabel = "_onlyInShopsLabel_1rldv_225";
+const tooltipTrigger = "_tooltipTrigger_1rldv_244";
+const priceWrapper = "_priceWrapper_1rldv_252";
 const styles = {
   item,
   breakageFeeInfo,
@@ -139,7 +139,7 @@ const CartItemImage = ({ cartItem }) => {
 };
 const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { formatPrice } = useShoppingCart();
+  const { formatPrice, readonly } = useShoppingCart();
   const quantity = ((_a = cartItem.quantity) == null ? void 0 : _a.value) ?? 1;
   const isQuantityModifiable = !!((_b = cartItem.quantity) == null ? void 0 : _b.modifiable);
   const shouldShowPricePerUnit = (!!cartItem.price.upfront || !!cartItem.price.firstInvoice) && quantity > 1;
@@ -168,7 +168,7 @@ const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
           `${cartItem.bundleId}-${cartItem.id}-${sub}`
         )) : /* @__PURE__ */ jsx("span", {}),
         quantity > 1 && !shouldShowPricePerUnit && /* @__PURE__ */ jsx("span", { children: `${quantity} stk` }),
-        isQuantityModifiable && /* @__PURE__ */ jsx(
+        isQuantityModifiable && !readonly && /* @__PURE__ */ jsx(
           QuantityPicker,
           {
             quantity,
@@ -250,7 +250,7 @@ const CartItemName = ({ cartItem }) => /* @__PURE__ */ jsxs(Fragment, { children
 ] });
 const Item = ({ cartItem, onChangeQuantity, onRemoveItem, className }) => {
   var _a;
-  const { hasPaid, isAllowedToDelete } = useShoppingCart();
+  const { hasPaid, isAllowedToDelete, readonly } = useShoppingCart();
   const isRemovable = !!((_a = cartItem.quantity) == null ? void 0 : _a.removable);
   return /* @__PURE__ */ jsxs("div", { className: clsx(styles.item, className), children: [
     /* @__PURE__ */ jsxs("div", { className: styles.nameContainer, children: [
@@ -260,7 +260,7 @@ const Item = ({ cartItem, onChangeQuantity, onRemoveItem, className }) => {
         /* @__PURE__ */ jsx(CartItemPriceDisplay, { cartItem, onChangeQuantity, hasPaid })
       ] })
     ] }),
-    isRemovable && isAllowedToDelete && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onRemoveItem(cartItem), className: styles.deleteButtonContainer, children: /* @__PURE__ */ jsx(Icon, { name: "remove" }) })
+    isRemovable && isAllowedToDelete && !readonly && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onRemoveItem(cartItem), className: styles.deleteButtonContainer, children: /* @__PURE__ */ jsx(Icon, { name: "remove" }) })
   ] });
 };
 Item.displayName = "Item";

package/dist/components/shopping-cart/shopping-cart-items.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const components_shoppingCart_shoppingCartItem = require("./shopping-cart-item.cjs");
-const shoppingCart_module = require("../../shopping-cart.module-BCoLrcMI.cjs");
+const shoppingCart_module = require("../../shopping-cart.module-C9EOksct.cjs");
 const components_shoppingCart_utils = require("./utils.cjs");
 const ItemGroup = ({ cartItem, onChangeQuantity, onRemoveItem }) => {
   const renderCartItem = (item) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [

package/dist/components/shopping-cart/shopping-cart-items.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { clsx } from "clsx";
 import { Item } from "./shopping-cart-item.js";
-import { s as styles } from "../../shopping-cart.module-DA25l2hr.js";
+import { s as styles } from "../../shopping-cart.module-ClaAAxQV.js";
 import { sortByType } from "./utils.js";
 const ItemGroup = ({ cartItem, onChangeQuantity, onRemoveItem }) => {
   const renderCartItem = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/shopping-cart/shopping-cart-payment.cjs

@@ -7,8 +7,23 @@ const components_icon_icon = require("../icon/icon.cjs");
 const components_tooltip_index = require("../tooltip/index.cjs");
 const components_progressBar_progressBar = require("../progress-bar/progress-bar.cjs");
 const components_shoppingCart_shoppingCartContext = require("./shopping-cart-context.cjs");
-const shoppingCart_module = require("../../shopping-cart.module-BCoLrcMI.cjs");
-const MonthlyPriceDetailsDisplay = ({ monthlyPriceDetails, totalPriceMonthly }) => {
+const shoppingCart_module = require("../../shopping-cart.module-C9EOksct.cjs");
+const components_box_box = require("../box/box.cjs");
+const HighlightedLine = ({ icon, heading, price, description }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLine, children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLineTop, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLineLeft, children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: icon, className: shoppingCart_module.styles.highlightedLineIcon }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.highlightedLineHeading, children: heading })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.highlightedLinePrice, children: price })
+  ] }),
+  description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: shoppingCart_module.styles.highlightedLineDescription, children: description })
+] });
+const MonthlyPriceDetailsDisplay = ({
+  monthlyPriceDetails,
+  totalPriceMonthly,
+  highlightedLine
+}) => {
   const { formatPrice } = components_shoppingCart_shoppingCartContext.useShoppingCart();
   if (!monthlyPriceDetails || monthlyPriceDetails.length === 0) {
     return null;
@@ -24,6 +39,10 @@ const MonthlyPriceDetailsDisplay = ({ monthlyPriceDetails, totalPriceMonthly })
         formatPrice(totalPriceMonthly || 0),
         "/md."
       ] })
+    ] }),
+    (highlightedLine == null ? void 0 : highlightedLine.isMonthly) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: shoppingCart_module.styles.horizontalRule }),
+      /* @__PURE__ */ jsxRuntime.jsx(HighlightedLine, { ...highlightedLine })
     ] })
   ] });
 };
@@ -36,85 +55,90 @@ const Payment = ({
   monthlyPriceDetails,
   totalVAT,
   totalPriceWithoutVAT,
+  highlightedLine,
   className
 }) => {
   const { formatPrice, hasPaid } = components_shoppingCart_shoppingCartContext.useShoppingCart();
   const hasDelivery = delivery && Object.keys(delivery).length > 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: clsx.clsx(shoppingCart_module.styles.section, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.sectionInner, children: [
-      hasDelivery && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryLeft, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: delivery.icon || "delivery", className: shoppingCart_module.styles.deliveryIcon }),
-          delivery.label || "Levering"
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: clsx.clsx(shoppingCart_module.styles.section, className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.sectionInner, children: [
+        hasDelivery && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryLeft, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: delivery.icon || "delivery", className: shoppingCart_module.styles.deliveryIcon }),
+            delivery.label || "Levering"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: delivery.value })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: delivery.value })
-      ] }),
-      hasDelivery && delivery.progressBar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryProgressbar, children: [
-        delivery.progressBar.text || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryProgressbarText, children: [
-          "Du har",
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: shoppingCart_module.styles.labelMedium, children: [
-            Math.ceil(delivery.progressBar.max - delivery.progressBar.progress),
-            ",-"
+        hasDelivery && delivery.progressBar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryProgressbar, children: [
+          delivery.progressBar.text || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryProgressbarText, children: [
+            "Du har",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: shoppingCart_module.styles.labelMedium, children: [
+              Math.ceil(delivery.progressBar.max - delivery.progressBar.progress),
+              ",-"
+            ] }),
+            " ",
+            "igjen til ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "fri frakt" })
           ] }),
-          " ",
-          "igjen til ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "fri frakt" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: shoppingCart_module.styles.progressBarWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+            components_progressBar_progressBar.ProgressBar,
+            {
+              colorTheme: "light",
+              progress: delivery.progressBar.max > delivery.progressBar.min ? (delivery.progressBar.progress - delivery.progressBar.min) / (delivery.progressBar.max - delivery.progressBar.min) * 100 : 0
+            }
+          ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: shoppingCart_module.styles.progressBarWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
-          components_progressBar_progressBar.ProgressBar,
-          {
-            colorTheme: "light",
-            progress: delivery.progressBar.max > delivery.progressBar.min ? (delivery.progressBar.progress - delivery.progressBar.min) / (delivery.progressBar.max - delivery.progressBar.min) * 100 : 0
-          }
-        ) })
-      ] }),
-      hasDelivery && !!totalPriceMonthly && /* @__PURE__ */ jsxRuntime.jsx("hr", { className: shoppingCart_module.styles.horizontalRule }),
-      !!totalPriceMonthly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceMonthlyContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.flexRow, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Betale pr md:" }),
-            paymentTooltip && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, { className: shoppingCart_module.styles.tooltipTrigger }),
-              /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { className: shoppingCart_module.styles.tooltipContent, children: /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: paymentTooltip } }) })
+        hasDelivery && !!totalPriceMonthly && /* @__PURE__ */ jsxRuntime.jsx("hr", { className: shoppingCart_module.styles.horizontalRule }),
+        !!totalPriceMonthly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceMonthlyContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.flexRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Betale pr md:" }),
+              paymentTooltip && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, { className: shoppingCart_module.styles.tooltipTrigger }),
+                /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { className: shoppingCart_module.styles.tooltipContent, children: /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: paymentTooltip } }) })
+              ] })
+            ] }),
+            (!monthlyPriceDetails || monthlyPriceDetails.length === 0) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: shoppingCart_module.styles.labelMedium, children: [
+              formatPrice(totalPriceMonthly),
+              "/md."
             ] })
           ] }),
-          (!monthlyPriceDetails || monthlyPriceDetails.length === 0) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: shoppingCart_module.styles.labelMedium, children: [
-            formatPrice(totalPriceMonthly),
-            "/md."
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MonthlyPriceDetailsDisplay,
+            {
+              monthlyPriceDetails,
+              totalPriceMonthly,
+              highlightedLine
+            }
+          )
+        ] })
+      ] }),
+      (!!totalPriceUpfront || !!totalPriceFirstInvoice) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceUpfrontContainer, children: [
+        !!totalPriceWithoutVAT && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Sum:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceWithoutVAT) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MonthlyPriceDetailsDisplay,
-          {
-            monthlyPriceDetails,
-            totalPriceMonthly
-          }
-        )
+        !!totalVAT && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "MVA:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalVAT) })
+        ] }),
+        !!totalPriceUpfront && !hasPaid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Betale nå:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceUpfront) })
+        ] }),
+        !!totalPriceUpfront && hasPaid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Betalt:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceUpfront) })
+        ] }),
+        !!totalPriceFirstInvoice && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Å betale på første faktura:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceFirstInvoice) })
+        ] })
       ] })
     ] }),
-    (!!totalPriceUpfront || !!totalPriceFirstInvoice) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceUpfrontContainer, children: [
-      !!totalPriceWithoutVAT && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Sum:" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceWithoutVAT) })
-      ] }),
-      !!totalVAT && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "MVA:" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalVAT) })
-      ] }),
-      !!totalPriceUpfront && !hasPaid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Betale nå:" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceUpfront) })
-      ] }),
-      !!totalPriceUpfront && hasPaid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Betalt:" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceUpfront) })
-      ] }),
-      !!totalPriceFirstInvoice && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Å betale på første faktura:" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceFirstInvoice) })
-      ] })
-    ] })
+    highlightedLine && !highlightedLine.isMonthly && /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { p: "200", children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedLine, { ...highlightedLine }) })
   ] });
 };
 Payment.displayName = "Payment";

package/dist/components/shopping-cart/shopping-cart-payment.d.ts

@@ -1,5 +1,13 @@
+import { IconName } from '../icon';
 import { CartDelivery } from './types';
 
+export interface HighlightedLineProps {
+    icon?: IconName;
+    heading: string;
+    price: string;
+    description?: string;
+    isMonthly: boolean;
+}
 export interface PaymentProps {
     delivery?: CartDelivery;
     totalPriceFirstInvoice?: number;
@@ -12,9 +20,10 @@ export interface PaymentProps {
     totalPriceUpfront?: number;
     totalVAT?: number;
     totalPriceWithoutVAT?: number;
+    highlightedLine?: HighlightedLineProps;
     className?: string;
 }
 export declare const Payment: {
-    ({ delivery, totalPriceUpfront, totalPriceMonthly, totalPriceFirstInvoice, paymentTooltip, monthlyPriceDetails, totalVAT, totalPriceWithoutVAT, className, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
+    ({ delivery, totalPriceUpfront, totalPriceMonthly, totalPriceFirstInvoice, paymentTooltip, monthlyPriceDetails, totalVAT, totalPriceWithoutVAT, highlightedLine, className, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };