@telia/teddy 0.7.48 → 0.7.50

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

@@ -85,7 +85,7 @@ require("../container/container.cjs");
 require("../carousel/carousel-root.cjs");
 require("../slider/slider.cjs");
 require("../textarea/index.cjs");
-const modal_module = require("../../modal.module-BfeNqXoN.cjs");
+const modal_module = require("../../modal.module-DC_f9KzI.cjs");
 const components_modal_modalImage = require("../modal/modal-image.cjs");
 const components_radioCardGroup_radioCardGroupIndicator = require("../radio-card-group/radio-card-group-indicator.cjs");
 const components_radioCardGroup_radioCardGroupItemBody = require("../radio-card-group/radio-card-group-item-body.cjs");

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

@@ -83,7 +83,7 @@ import "../container/container.js";
 import "../carousel/carousel-root.js";
 import "../slider/slider.js";
 import "../textarea/index.js";
-import { s as styles$4 } from "../../modal.module-DuP4in7f.js";
+import { s as styles$4 } from "../../modal.module-1dzCSzkb.js";
 import { Image } from "../modal/modal-image.js";
 import { Indicator as Indicator$2 } from "../radio-card-group/radio-card-group-indicator.js";
 import { Body as Body$1 } from "../radio-card-group/radio-card-group-item-body.js";

package/dist/components/modal/modal-close.cjs

@@ -67,6 +67,6 @@ require("../container/container.cjs");
 require("../carousel/carousel-root.cjs");
 require("../slider/slider.cjs");
 require("../textarea/index.cjs");
-require("../../modal.module-BfeNqXoN.cjs");
+require("../../modal.module-DC_f9KzI.cjs");
 require("./modal-root.cjs");
 exports.Close = components_checkboxCardGroup_checkboxCardGroupIndicator.Close$1;

package/dist/components/modal/modal-close.js

@@ -65,7 +65,7 @@ import "../container/container.js";
 import "../carousel/carousel-root.js";
 import "../slider/slider.js";
 import "../textarea/index.js";
-import "../../modal.module-DuP4in7f.js";
+import "../../modal.module-1dzCSzkb.js";
 import "./modal-root.js";
 export {
   g as Close

package/dist/components/modal/modal-content.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
 const components_flex_flex = require("../flex/flex.cjs");
 const clsx = require("clsx");
-const modal_module = require("../../modal.module-BfeNqXoN.cjs");
+const modal_module = require("../../modal.module-DC_f9KzI.cjs");
 const components_modal_modalRoot = require("./modal-root.cjs");
 const components_modal_modalOverlay = require("./modal-overlay.cjs");
 function _interopNamespaceDefault(e) {
@@ -26,7 +26,7 @@ function _interopNamespaceDefault(e) {
 }
 const DrawerPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DrawerPrimitive);
 const InnerContent = React.forwardRef(
-  function InnerContent2({ asChild, children, className, ...props }, forwardedRef) {
+  function InnerContent2({ asChild, children, className, size, ...props }, forwardedRef) {
     const classes = clsx([modal_module.styles[`${components_modal_modalRoot.rootClassName}__scroll`]], className);
     const context = React.useContext(components_modal_modalRoot.RootContext);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -34,7 +34,7 @@ const InnerContent = React.forwardRef(
       {
         ...props,
         ref: forwardedRef,
-        className: clsx([modal_module.styles[`${components_modal_modalRoot.rootClassName}__content`]]),
+        className: clsx([modal_module.styles[`${components_modal_modalRoot.rootClassName}__content`], size && modal_module.styles[`${components_modal_modalRoot.rootClassName}__content--${size}`]]),
         asChild: true,
         children: /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(
           components_flex_flex.Flex,
@@ -42,7 +42,6 @@ const InnerContent = React.forwardRef(
             ...asChild ? { as: void 0, asChild } : {},
             direction: "column",
             align: "start",
-            maxWidth: { md: "600px" },
             className: classes,
             ref: context.scrollRef,
             children
@@ -54,11 +53,11 @@ const InnerContent = React.forwardRef(
 );
 InnerContent.displayName = "InnerContent";
 const Content = React.forwardRef(
-  ({ forceMount, ...contentProps }, forwardedRef) => {
+  ({ forceMount, size, ...contentProps }, forwardedRef) => {
     const hasOverlay = React.useContext(components_modal_modalOverlay.OverlayContext);
     if (!hasOverlay)
-      return /* @__PURE__ */ jsxRuntime.jsx(components_modal_modalOverlay.Overlay, { forceMount, children: /* @__PURE__ */ jsxRuntime.jsx(InnerContent, { ref: forwardedRef, ...contentProps }) });
-    return /* @__PURE__ */ jsxRuntime.jsx(InnerContent, { ref: forwardedRef, ...contentProps });
+      return /* @__PURE__ */ jsxRuntime.jsx(components_modal_modalOverlay.Overlay, { forceMount, children: /* @__PURE__ */ jsxRuntime.jsx(InnerContent, { ref: forwardedRef, size, ...contentProps }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(InnerContent, { ref: forwardedRef, size, ...contentProps });
   }
 );
 Content.displayName = "Content";

package/dist/components/modal/modal-content.d.ts

@@ -1,7 +1,12 @@
 import { default as React } from 'react';
 
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
-declare const Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type Size = 'sm' | 'md' | 'lg';
+type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    size?: Size;
+};
+declare const Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    size?: Size | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export { Content };
 export type { ContentProps };

package/dist/components/modal/modal-content.js

@@ -3,11 +3,11 @@ import React__default from "react";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
 import { Flex } from "../flex/flex.js";
 import clsx from "clsx";
-import { s as styles } from "../../modal.module-DuP4in7f.js";
+import { s as styles } from "../../modal.module-1dzCSzkb.js";
 import { rootClassName, RootContext } from "./modal-root.js";
 import { OverlayContext, Overlay } from "./modal-overlay.js";
 const InnerContent = React__default.forwardRef(
-  function InnerContent2({ asChild, children, className, ...props }, forwardedRef) {
+  function InnerContent2({ asChild, children, className, size, ...props }, forwardedRef) {
     const classes = clsx([styles[`${rootClassName}__scroll`]], className);
     const context = React__default.useContext(RootContext);
     return /* @__PURE__ */ jsx(
@@ -15,7 +15,7 @@ const InnerContent = React__default.forwardRef(
       {
         ...props,
         ref: forwardedRef,
-        className: clsx([styles[`${rootClassName}__content`]]),
+        className: clsx([styles[`${rootClassName}__content`], size && styles[`${rootClassName}__content--${size}`]]),
         asChild: true,
         children: /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
           Flex,
@@ -23,7 +23,6 @@ const InnerContent = React__default.forwardRef(
             ...asChild ? { as: void 0, asChild } : {},
             direction: "column",
             align: "start",
-            maxWidth: { md: "600px" },
             className: classes,
             ref: context.scrollRef,
             children
@@ -35,11 +34,11 @@ const InnerContent = React__default.forwardRef(
 );
 InnerContent.displayName = "InnerContent";
 const Content = React__default.forwardRef(
-  ({ forceMount, ...contentProps }, forwardedRef) => {
+  ({ forceMount, size, ...contentProps }, forwardedRef) => {
     const hasOverlay = React__default.useContext(OverlayContext);
     if (!hasOverlay)
-      return /* @__PURE__ */ jsx(Overlay, { forceMount, children: /* @__PURE__ */ jsx(InnerContent, { ref: forwardedRef, ...contentProps }) });
-    return /* @__PURE__ */ jsx(InnerContent, { ref: forwardedRef, ...contentProps });
+      return /* @__PURE__ */ jsx(Overlay, { forceMount, children: /* @__PURE__ */ jsx(InnerContent, { ref: forwardedRef, size, ...contentProps }) });
+    return /* @__PURE__ */ jsx(InnerContent, { ref: forwardedRef, size, ...contentProps });
   }
 );
 Content.displayName = "Content";

package/dist/components/modal/modal-group.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const components_flex_flex = require("../flex/flex.cjs");
 const clsx = require("clsx");
-const modal_module = require("../../modal.module-BfeNqXoN.cjs");
+const modal_module = require("../../modal.module-DC_f9KzI.cjs");
 const components_modal_modalRoot = require("./modal-root.cjs");
 const GroupContext = React.createContext(false);
 const Group = React.forwardRef(

package/dist/components/modal/modal-group.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default, { useEffect } from "react";
 import { Flex } from "../flex/flex.js";
 import clsx from "clsx";
-import { s as styles } from "../../modal.module-DuP4in7f.js";
+import { s as styles } from "../../modal.module-1dzCSzkb.js";
 import { RootContext, rootClassName } from "./modal-root.js";
 const GroupContext = React__default.createContext(false);
 const Group = React__default.forwardRef(

package/dist/components/modal/modal-image.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
-const modal_module = require("../../modal.module-BfeNqXoN.cjs");
+const modal_module = require("../../modal.module-DC_f9KzI.cjs");
 const reactSlot = require("@radix-ui/react-slot");
 const utils_composeRefs = require("../../utils/composeRefs.cjs");
 const components_modal_modalRoot = require("./modal-root.cjs");

package/dist/components/modal/modal-image.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { s as styles } from "../../modal.module-DuP4in7f.js";
+import { s as styles } from "../../modal.module-1dzCSzkb.js";
 import { Slot } from "@radix-ui/react-slot";
 import { composeRefs } from "../../utils/composeRefs.js";
 import { rootClassName, RootContext } from "./modal-root.js";

package/dist/components/modal/modal-overlay.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
 const clsx = require("clsx");
-const modal_module = require("../../modal.module-BfeNqXoN.cjs");
+const modal_module = require("../../modal.module-DC_f9KzI.cjs");
 const components_modal_modalRoot = require("./modal-root.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/components/modal/modal-overlay.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
 import clsx from "clsx";
-import { s as styles } from "../../modal.module-DuP4in7f.js";
+import { s as styles } from "../../modal.module-1dzCSzkb.js";
 import { rootClassName } from "./modal-root.js";
 const OverlayContext = React__default.createContext(false);
 const Overlay = React__default.forwardRef(

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

@@ -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-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-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;
 };