@telia/teddy 0.7.39 → 0.7.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/shopping-cart/index.d.ts +5 -5
- package/dist/components/shopping-cart/shopping-cart-continue.cjs +3 -2
- package/dist/components/shopping-cart/shopping-cart-continue.d.ts +2 -1
- package/dist/components/shopping-cart/shopping-cart-continue.js +3 -2
- package/dist/components/shopping-cart/shopping-cart-disclaimer.cjs +13 -12
- package/dist/components/shopping-cart/shopping-cart-disclaimer.d.ts +2 -1
- package/dist/components/shopping-cart/shopping-cart-disclaimer.js +13 -12
- package/dist/components/shopping-cart/shopping-cart-item.cjs +35 -34
- package/dist/components/shopping-cart/shopping-cart-item.d.ts +2 -1
- package/dist/components/shopping-cart/shopping-cart-item.js +35 -34
- package/dist/components/shopping-cart/shopping-cart-items.cjs +3 -2
- package/dist/components/shopping-cart/shopping-cart-items.d.ts +2 -1
- package/dist/components/shopping-cart/shopping-cart-items.js +3 -2
- package/dist/components/shopping-cart/shopping-cart-payment.cjs +4 -2
- package/dist/components/shopping-cart/shopping-cart-payment.d.ts +2 -1
- package/dist/components/shopping-cart/shopping-cart-payment.js +4 -2
- package/dist/components/shopping-cart/shopping-cart-root.cjs +3 -2
- package/dist/components/shopping-cart/shopping-cart-root.d.ts +2 -1
- package/dist/components/shopping-cart/shopping-cart-root.js +3 -2
- package/dist/style.css +66 -64
- package/package.json +1 -1
|
@@ -5,23 +5,23 @@ import { DisclaimerProps } from './shopping-cart-disclaimer';
|
|
|
5
5
|
import { ContinueProps } from './shopping-cart-continue';
|
|
6
6
|
|
|
7
7
|
export declare const ShoppingCart: {
|
|
8
|
-
({ heading, children, formatPrice, hasPaid, isAllowedToDelete }: RootProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
({ heading, children, formatPrice, hasPaid, isAllowedToDelete, className }: RootProps): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
displayName: string;
|
|
10
10
|
} & {
|
|
11
11
|
Items: {
|
|
12
|
-
({ cartItems, onChangeQuantity, onRemoveItem }: ItemsProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
({ cartItems, onChangeQuantity, onRemoveItem, className }: ItemsProps): import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
displayName: string;
|
|
14
14
|
};
|
|
15
15
|
Payment: {
|
|
16
|
-
({ delivery, totalPriceUpfront, totalPriceMonthly, totalPriceFirstInvoice, paymentTooltip, monthlyPriceDetails, totalVAT, totalPriceWithoutVAT, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
({ delivery, totalPriceUpfront, totalPriceMonthly, totalPriceFirstInvoice, paymentTooltip, monthlyPriceDetails, totalVAT, totalPriceWithoutVAT, className, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
displayName: string;
|
|
18
18
|
};
|
|
19
19
|
Disclaimer: {
|
|
20
|
-
({ disclaimer, onOpenDisclaimer }: DisclaimerProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
({ disclaimer, onOpenDisclaimer, className }: DisclaimerProps): import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
displayName: string;
|
|
22
22
|
};
|
|
23
23
|
Continue: {
|
|
24
|
-
({ children }: ContinueProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
({ children, className }: ContinueProps): import("react/jsx-runtime").JSX.Element;
|
|
25
25
|
displayName: string;
|
|
26
26
|
};
|
|
27
27
|
};
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const clsx = require("clsx");
|
|
4
5
|
const shoppingCart_module = require("../../shopping-cart.module-BCoLrcMI.cjs");
|
|
5
|
-
const Continue = ({ children }) => {
|
|
6
|
-
return /* @__PURE__ */ jsxRuntime.jsx("section", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${shoppingCart_module.styles.sectionInner} ${shoppingCart_module.styles.continueContainer}`, children }) });
|
|
6
|
+
const Continue = ({ children, className }) => {
|
|
7
|
+
return /* @__PURE__ */ jsxRuntime.jsx("section", { className: clsx.clsx(className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${shoppingCart_module.styles.sectionInner} ${shoppingCart_module.styles.continueContainer}`, children }) });
|
|
7
8
|
};
|
|
8
9
|
Continue.displayName = "Continue";
|
|
9
10
|
exports.Continue = Continue;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export interface ContinueProps {
|
|
3
3
|
children: React.ReactNode;
|
|
4
|
+
className?: string;
|
|
4
5
|
}
|
|
5
6
|
export declare const Continue: {
|
|
6
|
-
({ children }: ContinueProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
({ children, className }: ContinueProps): import("react/jsx-runtime").JSX.Element;
|
|
7
8
|
displayName: string;
|
|
8
9
|
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { clsx } from "clsx";
|
|
2
3
|
import { s as styles } from "../../shopping-cart.module-DA25l2hr.js";
|
|
3
|
-
const Continue = ({ children }) => {
|
|
4
|
-
return /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx("div", { className: `${styles.sectionInner} ${styles.continueContainer}`, children }) });
|
|
4
|
+
const Continue = ({ children, className }) => {
|
|
5
|
+
return /* @__PURE__ */ jsx("section", { className: clsx(className), children: /* @__PURE__ */ jsx("div", { className: `${styles.sectionInner} ${styles.continueContainer}`, children }) });
|
|
5
6
|
};
|
|
6
7
|
Continue.displayName = "Continue";
|
|
7
8
|
export {
|
|
@@ -2,18 +2,19 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const React = require("react");
|
|
5
|
+
const clsx = require("clsx");
|
|
5
6
|
require("../../assets/sprite.6511e521-teddy.svg");
|
|
6
7
|
const components_icon_icon = require("../icon/icon.cjs");
|
|
7
8
|
const components_collapsible_index = require("../collapsible/index.cjs");
|
|
8
|
-
const singleDisclaimer = "
|
|
9
|
-
const disclaimer = "
|
|
10
|
-
const disclaimerHeader = "
|
|
11
|
-
const disclaimerHeaderLeft = "
|
|
12
|
-
const disclaimerIcon = "
|
|
13
|
-
const disclaimerItem = "
|
|
14
|
-
const disclaimerItemTotal = "
|
|
15
|
-
const disclaimerItemSubtitle = "
|
|
16
|
-
const disclaimerTotal = "
|
|
9
|
+
const singleDisclaimer = "_singleDisclaimer_1995d_1";
|
|
10
|
+
const disclaimer = "_disclaimer_1995d_6";
|
|
11
|
+
const disclaimerHeader = "_disclaimerHeader_1995d_12";
|
|
12
|
+
const disclaimerHeaderLeft = "_disclaimerHeaderLeft_1995d_17";
|
|
13
|
+
const disclaimerIcon = "_disclaimerIcon_1995d_25";
|
|
14
|
+
const disclaimerItem = "_disclaimerItem_1995d_30";
|
|
15
|
+
const disclaimerItemTotal = "_disclaimerItemTotal_1995d_38";
|
|
16
|
+
const disclaimerItemSubtitle = "_disclaimerItemSubtitle_1995d_42";
|
|
17
|
+
const disclaimerTotal = "_disclaimerTotal_1995d_47";
|
|
17
18
|
const styles = {
|
|
18
19
|
singleDisclaimer,
|
|
19
20
|
disclaimer,
|
|
@@ -25,10 +26,10 @@ const styles = {
|
|
|
25
26
|
disclaimerItemSubtitle,
|
|
26
27
|
disclaimerTotal
|
|
27
28
|
};
|
|
28
|
-
const Disclaimer = ({ disclaimer: disclaimer2, onOpenDisclaimer }) => {
|
|
29
|
+
const Disclaimer = ({ disclaimer: disclaimer2, onOpenDisclaimer, className }) => {
|
|
29
30
|
const [isExpanded, setIsExpanded] = React.useState(false);
|
|
30
31
|
if (typeof disclaimer2 === "string") {
|
|
31
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.singleDisclaimer, children: disclaimer2 });
|
|
32
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(styles.singleDisclaimer, className), children: disclaimer2 });
|
|
32
33
|
}
|
|
33
34
|
const minimumTotalPrice = disclaimer2.reduce((acc, cur) => acc + cur.total, 0);
|
|
34
35
|
const handleOpenChange = (open) => {
|
|
@@ -37,7 +38,7 @@ const Disclaimer = ({ disclaimer: disclaimer2, onOpenDisclaimer }) => {
|
|
|
37
38
|
onOpenDisclaimer();
|
|
38
39
|
}
|
|
39
40
|
};
|
|
40
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(components_collapsible_index.Collapsible, { open: isExpanded, onOpenChange: handleOpenChange, children: [
|
|
41
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(components_collapsible_index.Collapsible, { open: isExpanded, onOpenChange: handleOpenChange, className, children: [
|
|
41
42
|
/* @__PURE__ */ jsxRuntime.jsx(components_collapsible_index.Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.disclaimer, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.disclaimerHeader, children: [
|
|
42
43
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.disclaimerHeaderLeft, children: [
|
|
43
44
|
/* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: isExpanded ? "chevron-up" : "chevron-down", className: styles.disclaimerIcon }),
|
|
@@ -3,8 +3,9 @@ import { DisclaimerItem } from './types';
|
|
|
3
3
|
export interface DisclaimerProps {
|
|
4
4
|
disclaimer: string | DisclaimerItem[];
|
|
5
5
|
onOpenDisclaimer?: () => void;
|
|
6
|
+
className?: string;
|
|
6
7
|
}
|
|
7
8
|
export declare const Disclaimer: {
|
|
8
|
-
({ disclaimer, onOpenDisclaimer }: DisclaimerProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
({ disclaimer, onOpenDisclaimer, className }: DisclaimerProps): import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
displayName: string;
|
|
10
11
|
};
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from "react";
|
|
3
|
+
import { clsx } from "clsx";
|
|
3
4
|
import "../../assets/sprite.6511e521-teddy.svg";
|
|
4
5
|
import { Icon } from "../icon/icon.js";
|
|
5
6
|
import { Collapsible } from "../collapsible/index.js";
|
|
6
|
-
const singleDisclaimer = "
|
|
7
|
-
const disclaimer = "
|
|
8
|
-
const disclaimerHeader = "
|
|
9
|
-
const disclaimerHeaderLeft = "
|
|
10
|
-
const disclaimerIcon = "
|
|
11
|
-
const disclaimerItem = "
|
|
12
|
-
const disclaimerItemTotal = "
|
|
13
|
-
const disclaimerItemSubtitle = "
|
|
14
|
-
const disclaimerTotal = "
|
|
7
|
+
const singleDisclaimer = "_singleDisclaimer_1995d_1";
|
|
8
|
+
const disclaimer = "_disclaimer_1995d_6";
|
|
9
|
+
const disclaimerHeader = "_disclaimerHeader_1995d_12";
|
|
10
|
+
const disclaimerHeaderLeft = "_disclaimerHeaderLeft_1995d_17";
|
|
11
|
+
const disclaimerIcon = "_disclaimerIcon_1995d_25";
|
|
12
|
+
const disclaimerItem = "_disclaimerItem_1995d_30";
|
|
13
|
+
const disclaimerItemTotal = "_disclaimerItemTotal_1995d_38";
|
|
14
|
+
const disclaimerItemSubtitle = "_disclaimerItemSubtitle_1995d_42";
|
|
15
|
+
const disclaimerTotal = "_disclaimerTotal_1995d_47";
|
|
15
16
|
const styles = {
|
|
16
17
|
singleDisclaimer,
|
|
17
18
|
disclaimer,
|
|
@@ -23,10 +24,10 @@ const styles = {
|
|
|
23
24
|
disclaimerItemSubtitle,
|
|
24
25
|
disclaimerTotal
|
|
25
26
|
};
|
|
26
|
-
const Disclaimer = ({ disclaimer: disclaimer2, onOpenDisclaimer }) => {
|
|
27
|
+
const Disclaimer = ({ disclaimer: disclaimer2, onOpenDisclaimer, className }) => {
|
|
27
28
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
28
29
|
if (typeof disclaimer2 === "string") {
|
|
29
|
-
return /* @__PURE__ */ jsx("div", { className: styles.singleDisclaimer, children: disclaimer2 });
|
|
30
|
+
return /* @__PURE__ */ jsx("div", { className: clsx(styles.singleDisclaimer, className), children: disclaimer2 });
|
|
30
31
|
}
|
|
31
32
|
const minimumTotalPrice = disclaimer2.reduce((acc, cur) => acc + cur.total, 0);
|
|
32
33
|
const handleOpenChange = (open) => {
|
|
@@ -35,7 +36,7 @@ const Disclaimer = ({ disclaimer: disclaimer2, onOpenDisclaimer }) => {
|
|
|
35
36
|
onOpenDisclaimer();
|
|
36
37
|
}
|
|
37
38
|
};
|
|
38
|
-
return /* @__PURE__ */ jsxs(Collapsible, { open: isExpanded, onOpenChange: handleOpenChange, children: [
|
|
39
|
+
return /* @__PURE__ */ jsxs(Collapsible, { open: isExpanded, onOpenChange: handleOpenChange, className, children: [
|
|
39
40
|
/* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: styles.disclaimer, children: /* @__PURE__ */ jsxs("div", { className: styles.disclaimerHeader, children: [
|
|
40
41
|
/* @__PURE__ */ jsxs("div", { className: styles.disclaimerHeaderLeft, children: [
|
|
41
42
|
/* @__PURE__ */ jsx(Icon, { name: isExpanded ? "chevron-up" : "chevron-down", className: styles.disclaimerIcon }),
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const clsx = require("clsx");
|
|
4
5
|
require("../../assets/sprite.6511e521-teddy.svg");
|
|
5
6
|
const components_icon_icon = require("../icon/icon.cjs");
|
|
6
7
|
const components_text_text = require("../text/text.cjs");
|
|
@@ -13,40 +14,41 @@ const components_tooltip_index = require("../tooltip/index.cjs");
|
|
|
13
14
|
const components_shoppingCart_types = require("./types.cjs");
|
|
14
15
|
const components_shoppingCart_shoppingCartContext = require("./shopping-cart-context.cjs");
|
|
15
16
|
const components_shoppingCart_utils = require("./utils.cjs");
|
|
16
|
-
const item = "
|
|
17
|
-
const breakageFeeInfo = "
|
|
18
|
-
const nameWrapper = "
|
|
19
|
-
const link = "
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
const
|
|
23
|
-
const
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
const
|
|
37
|
-
const
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
const
|
|
43
|
-
const
|
|
44
|
-
const
|
|
17
|
+
const item = "_item_16o96_1";
|
|
18
|
+
const breakageFeeInfo = "_breakageFeeInfo_16o96_7";
|
|
19
|
+
const nameWrapper = "_nameWrapper_16o96_26";
|
|
20
|
+
const link = "_link_16o96_33";
|
|
21
|
+
const cartLink = "_cartLink_16o96_51";
|
|
22
|
+
const discountDescription = "_discountDescription_16o96_59";
|
|
23
|
+
const name = "_name_16o96_26";
|
|
24
|
+
const nameContainer = "_nameContainer_16o96_72";
|
|
25
|
+
const subtitle = "_subtitle_16o96_76";
|
|
26
|
+
const quantityPickerWrapper = "_quantityPickerWrapper_16o96_84";
|
|
27
|
+
const pricePer = "_pricePer_16o96_91";
|
|
28
|
+
const quantityPicker = "_quantityPicker_16o96_84";
|
|
29
|
+
const priceContainer = "_priceContainer_16o96_103";
|
|
30
|
+
const priceCost = "_priceCost_16o96_109";
|
|
31
|
+
const priceLabel = "_priceLabel_16o96_117";
|
|
32
|
+
const priceLinethrough = "_priceLinethrough_16o96_122";
|
|
33
|
+
const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_16o96_132";
|
|
34
|
+
const imageContainer = "_imageContainer_16o96_141";
|
|
35
|
+
const noImageContainer = "_noImageContainer_16o96_153";
|
|
36
|
+
const image = "_image_16o96_141";
|
|
37
|
+
const iconImage = "_iconImage_16o96_166";
|
|
38
|
+
const deleteButtonContainer = "_deleteButtonContainer_16o96_172";
|
|
39
|
+
const uniqueDiscount = "_uniqueDiscount_16o96_199";
|
|
40
|
+
const uniqueDiscountLabel = "_uniqueDiscountLabel_16o96_206";
|
|
41
|
+
const uniqueDiscountPrice = "_uniqueDiscountPrice_16o96_212";
|
|
42
|
+
const onlyInShops = "_onlyInShops_16o96_217";
|
|
43
|
+
const onlyInShopsLabel = "_onlyInShopsLabel_16o96_224";
|
|
44
|
+
const tooltipTrigger = "_tooltipTrigger_16o96_243";
|
|
45
|
+
const priceWrapper = "_priceWrapper_16o96_251";
|
|
45
46
|
const styles = {
|
|
46
47
|
item,
|
|
47
48
|
breakageFeeInfo,
|
|
48
49
|
nameWrapper,
|
|
49
50
|
link,
|
|
51
|
+
cartLink,
|
|
50
52
|
discountDescription,
|
|
51
53
|
name,
|
|
52
54
|
nameContainer,
|
|
@@ -70,8 +72,7 @@ const styles = {
|
|
|
70
72
|
onlyInShops,
|
|
71
73
|
onlyInShopsLabel,
|
|
72
74
|
tooltipTrigger,
|
|
73
|
-
|
|
74
|
-
cartLink
|
|
75
|
+
priceWrapper
|
|
75
76
|
};
|
|
76
77
|
const QuantityPicker = ({
|
|
77
78
|
quantity,
|
|
@@ -185,7 +186,7 @@ const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
|
|
|
185
186
|
)
|
|
186
187
|
] }),
|
|
187
188
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceCost, children: [
|
|
188
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.
|
|
189
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceWrapper, children: [
|
|
189
190
|
discountPriceText && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { defaultOpen: true, children: [
|
|
190
191
|
/* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, { className: styles.tooltipTrigger }),
|
|
191
192
|
/* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-100", dangerouslySetInnerHTML: { __html: discountPriceText } }) })
|
|
@@ -249,11 +250,11 @@ const CartItemName = ({ cartItem }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntim
|
|
|
249
250
|
cartItem.modelSize ? ", " + cartItem.modelSize : ""
|
|
250
251
|
] })
|
|
251
252
|
] });
|
|
252
|
-
const Item = ({ cartItem, onChangeQuantity, onRemoveItem }) => {
|
|
253
|
+
const Item = ({ cartItem, onChangeQuantity, onRemoveItem, className }) => {
|
|
253
254
|
var _a;
|
|
254
255
|
const { hasPaid, isAllowedToDelete } = components_shoppingCart_shoppingCartContext.useShoppingCart();
|
|
255
256
|
const isRemovable = !!((_a = cartItem.quantity) == null ? void 0 : _a.removable);
|
|
256
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.item, children: [
|
|
257
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(styles.item, className), children: [
|
|
257
258
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nameContainer, children: [
|
|
258
259
|
/* @__PURE__ */ jsxRuntime.jsx(CartItemImage, { cartItem }),
|
|
259
260
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.name, children: [
|
|
@@ -4,8 +4,9 @@ export interface ItemProps {
|
|
|
4
4
|
cartItem: CartItem;
|
|
5
5
|
onChangeQuantity: (cartItem: CartItem, quantity: number) => void;
|
|
6
6
|
onRemoveItem: (cartItem: CartItem) => void;
|
|
7
|
+
className?: string;
|
|
7
8
|
}
|
|
8
9
|
export declare const Item: {
|
|
9
|
-
({ cartItem, onChangeQuantity, onRemoveItem }: ItemProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
({ cartItem, onChangeQuantity, onRemoveItem, className }: ItemProps): import("react/jsx-runtime").JSX.Element;
|
|
10
11
|
displayName: string;
|
|
11
12
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { clsx } from "clsx";
|
|
2
3
|
import "../../assets/sprite.6511e521-teddy.svg";
|
|
3
4
|
import { Icon } from "../icon/icon.js";
|
|
4
5
|
import { Text } from "../text/text.js";
|
|
@@ -11,40 +12,41 @@ import { Tooltip } from "../tooltip/index.js";
|
|
|
11
12
|
import { CART_ITEM_TYPE } from "./types.js";
|
|
12
13
|
import { useShoppingCart } from "./shopping-cart-context.js";
|
|
13
14
|
import { getDiscountPrice, getPrice, defaultFormatPrice } from "./utils.js";
|
|
14
|
-
const item = "
|
|
15
|
-
const breakageFeeInfo = "
|
|
16
|
-
const nameWrapper = "
|
|
17
|
-
const link = "
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
const
|
|
23
|
-
const
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
const
|
|
37
|
-
const
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
const
|
|
15
|
+
const item = "_item_16o96_1";
|
|
16
|
+
const breakageFeeInfo = "_breakageFeeInfo_16o96_7";
|
|
17
|
+
const nameWrapper = "_nameWrapper_16o96_26";
|
|
18
|
+
const link = "_link_16o96_33";
|
|
19
|
+
const cartLink = "_cartLink_16o96_51";
|
|
20
|
+
const discountDescription = "_discountDescription_16o96_59";
|
|
21
|
+
const name = "_name_16o96_26";
|
|
22
|
+
const nameContainer = "_nameContainer_16o96_72";
|
|
23
|
+
const subtitle = "_subtitle_16o96_76";
|
|
24
|
+
const quantityPickerWrapper = "_quantityPickerWrapper_16o96_84";
|
|
25
|
+
const pricePer = "_pricePer_16o96_91";
|
|
26
|
+
const quantityPicker = "_quantityPicker_16o96_84";
|
|
27
|
+
const priceContainer = "_priceContainer_16o96_103";
|
|
28
|
+
const priceCost = "_priceCost_16o96_109";
|
|
29
|
+
const priceLabel = "_priceLabel_16o96_117";
|
|
30
|
+
const priceLinethrough = "_priceLinethrough_16o96_122";
|
|
31
|
+
const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_16o96_132";
|
|
32
|
+
const imageContainer = "_imageContainer_16o96_141";
|
|
33
|
+
const noImageContainer = "_noImageContainer_16o96_153";
|
|
34
|
+
const image = "_image_16o96_141";
|
|
35
|
+
const iconImage = "_iconImage_16o96_166";
|
|
36
|
+
const deleteButtonContainer = "_deleteButtonContainer_16o96_172";
|
|
37
|
+
const uniqueDiscount = "_uniqueDiscount_16o96_199";
|
|
38
|
+
const uniqueDiscountLabel = "_uniqueDiscountLabel_16o96_206";
|
|
39
|
+
const uniqueDiscountPrice = "_uniqueDiscountPrice_16o96_212";
|
|
40
|
+
const onlyInShops = "_onlyInShops_16o96_217";
|
|
41
|
+
const onlyInShopsLabel = "_onlyInShopsLabel_16o96_224";
|
|
42
|
+
const tooltipTrigger = "_tooltipTrigger_16o96_243";
|
|
43
|
+
const priceWrapper = "_priceWrapper_16o96_251";
|
|
43
44
|
const styles = {
|
|
44
45
|
item,
|
|
45
46
|
breakageFeeInfo,
|
|
46
47
|
nameWrapper,
|
|
47
48
|
link,
|
|
49
|
+
cartLink,
|
|
48
50
|
discountDescription,
|
|
49
51
|
name,
|
|
50
52
|
nameContainer,
|
|
@@ -68,8 +70,7 @@ const styles = {
|
|
|
68
70
|
onlyInShops,
|
|
69
71
|
onlyInShopsLabel,
|
|
70
72
|
tooltipTrigger,
|
|
71
|
-
|
|
72
|
-
cartLink
|
|
73
|
+
priceWrapper
|
|
73
74
|
};
|
|
74
75
|
const QuantityPicker = ({
|
|
75
76
|
quantity,
|
|
@@ -183,7 +184,7 @@ const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
|
|
|
183
184
|
)
|
|
184
185
|
] }),
|
|
185
186
|
/* @__PURE__ */ jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxs("span", { className: styles.priceCost, children: [
|
|
186
|
-
/* @__PURE__ */ jsxs("div", { className: styles.
|
|
187
|
+
/* @__PURE__ */ jsxs("div", { className: styles.priceWrapper, children: [
|
|
187
188
|
discountPriceText && /* @__PURE__ */ jsxs(Tooltip, { defaultOpen: true, children: [
|
|
188
189
|
/* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles.tooltipTrigger }),
|
|
189
190
|
/* @__PURE__ */ jsx(Tooltip.Content, { children: /* @__PURE__ */ jsx(Text, { variant: "paragraph-100", dangerouslySetInnerHTML: { __html: discountPriceText } }) })
|
|
@@ -247,11 +248,11 @@ const CartItemName = ({ cartItem }) => /* @__PURE__ */ jsxs(Fragment, { children
|
|
|
247
248
|
cartItem.modelSize ? ", " + cartItem.modelSize : ""
|
|
248
249
|
] })
|
|
249
250
|
] });
|
|
250
|
-
const Item = ({ cartItem, onChangeQuantity, onRemoveItem }) => {
|
|
251
|
+
const Item = ({ cartItem, onChangeQuantity, onRemoveItem, className }) => {
|
|
251
252
|
var _a;
|
|
252
253
|
const { hasPaid, isAllowedToDelete } = useShoppingCart();
|
|
253
254
|
const isRemovable = !!((_a = cartItem.quantity) == null ? void 0 : _a.removable);
|
|
254
|
-
return /* @__PURE__ */ jsxs("div", { className: styles.item, children: [
|
|
255
|
+
return /* @__PURE__ */ jsxs("div", { className: clsx(styles.item, className), children: [
|
|
255
256
|
/* @__PURE__ */ jsxs("div", { className: styles.nameContainer, children: [
|
|
256
257
|
/* @__PURE__ */ jsx(CartItemImage, { cartItem }),
|
|
257
258
|
/* @__PURE__ */ jsxs("div", { className: styles.name, children: [
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const React = require("react");
|
|
5
|
+
const clsx = require("clsx");
|
|
5
6
|
const components_shoppingCart_shoppingCartItem = require("./shopping-cart-item.cjs");
|
|
6
7
|
const shoppingCart_module = require("../../shopping-cart.module-BCoLrcMI.cjs");
|
|
7
8
|
const components_shoppingCart_utils = require("./utils.cjs");
|
|
@@ -12,8 +13,8 @@ const ItemGroup = ({ cartItem, onChangeQuantity, onRemoveItem }) => {
|
|
|
12
13
|
] }, item.id);
|
|
13
14
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: shoppingCart_module.styles.sectionBody, children: renderCartItem(cartItem) });
|
|
14
15
|
};
|
|
15
|
-
const Items = ({ cartItems, onChangeQuantity, onRemoveItem }) => {
|
|
16
|
-
return /* @__PURE__ */ jsxRuntime.jsx("section", { children: components_shoppingCart_utils.sortByType(cartItems).map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ItemGroup, { cartItem: item, onChangeQuantity, onRemoveItem }) }, `${item.id}-${item.bundleId}`)) });
|
|
16
|
+
const Items = ({ cartItems, onChangeQuantity, onRemoveItem, className }) => {
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsx("section", { className: clsx.clsx(className), children: components_shoppingCart_utils.sortByType(cartItems).map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ItemGroup, { cartItem: item, onChangeQuantity, onRemoveItem }) }, `${item.id}-${item.bundleId}`)) });
|
|
17
18
|
};
|
|
18
19
|
Items.displayName = "Items";
|
|
19
20
|
exports.Items = Items;
|
|
@@ -4,8 +4,9 @@ export interface ItemsProps {
|
|
|
4
4
|
cartItems: CartItem[];
|
|
5
5
|
onChangeQuantity: (item: CartItem, quantity: number) => void;
|
|
6
6
|
onRemoveItem: (item: CartItem) => void;
|
|
7
|
+
className?: string;
|
|
7
8
|
}
|
|
8
9
|
export declare const Items: {
|
|
9
|
-
({ cartItems, onChangeQuantity, onRemoveItem }: ItemsProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
({ cartItems, onChangeQuantity, onRemoveItem, className }: ItemsProps): import("react/jsx-runtime").JSX.Element;
|
|
10
11
|
displayName: string;
|
|
11
12
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Fragment } from "react";
|
|
3
|
+
import { clsx } from "clsx";
|
|
3
4
|
import { Item } from "./shopping-cart-item.js";
|
|
4
5
|
import { s as styles } from "../../shopping-cart.module-DA25l2hr.js";
|
|
5
6
|
import { sortByType } from "./utils.js";
|
|
@@ -10,8 +11,8 @@ const ItemGroup = ({ cartItem, onChangeQuantity, onRemoveItem }) => {
|
|
|
10
11
|
] }, item.id);
|
|
11
12
|
return /* @__PURE__ */ jsx("div", { className: styles.sectionBody, children: renderCartItem(cartItem) });
|
|
12
13
|
};
|
|
13
|
-
const Items = ({ cartItems, onChangeQuantity, onRemoveItem }) => {
|
|
14
|
-
return /* @__PURE__ */ jsx("section", { children: sortByType(cartItems).map((item) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ItemGroup, { cartItem: item, onChangeQuantity, onRemoveItem }) }, `${item.id}-${item.bundleId}`)) });
|
|
14
|
+
const Items = ({ cartItems, onChangeQuantity, onRemoveItem, className }) => {
|
|
15
|
+
return /* @__PURE__ */ jsx("section", { className: clsx(className), children: sortByType(cartItems).map((item) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ItemGroup, { cartItem: item, onChangeQuantity, onRemoveItem }) }, `${item.id}-${item.bundleId}`)) });
|
|
15
16
|
};
|
|
16
17
|
Items.displayName = "Items";
|
|
17
18
|
export {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const clsx = require("clsx");
|
|
4
5
|
require("../../assets/sprite.6511e521-teddy.svg");
|
|
5
6
|
const components_icon_icon = require("../icon/icon.cjs");
|
|
6
7
|
const components_tooltip_index = require("../tooltip/index.cjs");
|
|
@@ -34,11 +35,12 @@ const Payment = ({
|
|
|
34
35
|
paymentTooltip,
|
|
35
36
|
monthlyPriceDetails,
|
|
36
37
|
totalVAT,
|
|
37
|
-
totalPriceWithoutVAT
|
|
38
|
+
totalPriceWithoutVAT,
|
|
39
|
+
className
|
|
38
40
|
}) => {
|
|
39
41
|
const { formatPrice, hasPaid } = components_shoppingCart_shoppingCartContext.useShoppingCart();
|
|
40
42
|
const hasDelivery = delivery && Object.keys(delivery).length > 0;
|
|
41
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: shoppingCart_module.styles.section, children: [
|
|
43
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: clsx.clsx(shoppingCart_module.styles.section, className), children: [
|
|
42
44
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.sectionInner, children: [
|
|
43
45
|
hasDelivery && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryContainer, children: [
|
|
44
46
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryLeft, children: [
|
|
@@ -12,8 +12,9 @@ export interface PaymentProps {
|
|
|
12
12
|
totalPriceUpfront?: number;
|
|
13
13
|
totalVAT?: number;
|
|
14
14
|
totalPriceWithoutVAT?: number;
|
|
15
|
+
className?: string;
|
|
15
16
|
}
|
|
16
17
|
export declare const Payment: {
|
|
17
|
-
({ delivery, totalPriceUpfront, totalPriceMonthly, totalPriceFirstInvoice, paymentTooltip, monthlyPriceDetails, totalVAT, totalPriceWithoutVAT, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
({ delivery, totalPriceUpfront, totalPriceMonthly, totalPriceFirstInvoice, paymentTooltip, monthlyPriceDetails, totalVAT, totalPriceWithoutVAT, className, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
displayName: string;
|
|
19
20
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { clsx } from "clsx";
|
|
2
3
|
import "../../assets/sprite.6511e521-teddy.svg";
|
|
3
4
|
import { Icon } from "../icon/icon.js";
|
|
4
5
|
import { Tooltip } from "../tooltip/index.js";
|
|
@@ -32,11 +33,12 @@ const Payment = ({
|
|
|
32
33
|
paymentTooltip,
|
|
33
34
|
monthlyPriceDetails,
|
|
34
35
|
totalVAT,
|
|
35
|
-
totalPriceWithoutVAT
|
|
36
|
+
totalPriceWithoutVAT,
|
|
37
|
+
className
|
|
36
38
|
}) => {
|
|
37
39
|
const { formatPrice, hasPaid } = useShoppingCart();
|
|
38
40
|
const hasDelivery = delivery && Object.keys(delivery).length > 0;
|
|
39
|
-
return /* @__PURE__ */ jsxs("section", { className: styles.section, children: [
|
|
41
|
+
return /* @__PURE__ */ jsxs("section", { className: clsx(styles.section, className), children: [
|
|
40
42
|
/* @__PURE__ */ jsxs("div", { className: styles.sectionInner, children: [
|
|
41
43
|
hasDelivery && /* @__PURE__ */ jsxs("div", { className: styles.deliveryContainer, children: [
|
|
42
44
|
/* @__PURE__ */ jsxs("div", { className: styles.deliveryLeft, children: [
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const clsx = require("clsx");
|
|
4
5
|
const components_heading_heading = require("../heading/heading.cjs");
|
|
5
6
|
const components_shoppingCart_shoppingCartContext = require("./shopping-cart-context.cjs");
|
|
6
7
|
const shoppingCart_module = require("../../shopping-cart.module-BCoLrcMI.cjs");
|
|
7
|
-
const Root = ({ heading, children, formatPrice, hasPaid, isAllowedToDelete }) => {
|
|
8
|
-
return /* @__PURE__ */ jsxRuntime.jsx(components_shoppingCart_shoppingCartContext.ShoppingCartProvider, { value: { formatPrice, hasPaid, isAllowedToDelete }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.shoppingCart, children: [
|
|
8
|
+
const Root = ({ heading, children, formatPrice, hasPaid, isAllowedToDelete, className }) => {
|
|
9
|
+
return /* @__PURE__ */ jsxRuntime.jsx(components_shoppingCart_shoppingCartContext.ShoppingCartProvider, { value: { formatPrice, hasPaid, isAllowedToDelete }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(shoppingCart_module.styles.shoppingCart, className), children: [
|
|
9
10
|
heading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: shoppingCart_module.styles.sectionInner, children: /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { className: shoppingCart_module.styles.heading, as: "h2", variant: "title-100", children: heading }) }),
|
|
10
11
|
children
|
|
11
12
|
] }) });
|
|
@@ -3,8 +3,9 @@ import { ShoppingCartContextValue } from './shopping-cart-context';
|
|
|
3
3
|
export interface RootProps extends ShoppingCartContextValue {
|
|
4
4
|
heading?: string;
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
+
className?: string;
|
|
6
7
|
}
|
|
7
8
|
export declare const Root: {
|
|
8
|
-
({ heading, children, formatPrice, hasPaid, isAllowedToDelete }: RootProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
({ heading, children, formatPrice, hasPaid, isAllowedToDelete, className }: RootProps): import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
displayName: string;
|
|
10
11
|
};
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { clsx } from "clsx";
|
|
2
3
|
import { Heading } from "../heading/heading.js";
|
|
3
4
|
import { ShoppingCartProvider } from "./shopping-cart-context.js";
|
|
4
5
|
import { s as styles } from "../../shopping-cart.module-DA25l2hr.js";
|
|
5
|
-
const Root = ({ heading, children, formatPrice, hasPaid, isAllowedToDelete }) => {
|
|
6
|
-
return /* @__PURE__ */ jsx(ShoppingCartProvider, { value: { formatPrice, hasPaid, isAllowedToDelete }, children: /* @__PURE__ */ jsxs("div", { className: styles.shoppingCart, children: [
|
|
6
|
+
const Root = ({ heading, children, formatPrice, hasPaid, isAllowedToDelete, className }) => {
|
|
7
|
+
return /* @__PURE__ */ jsx(ShoppingCartProvider, { value: { formatPrice, hasPaid, isAllowedToDelete }, children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.shoppingCart, className), children: [
|
|
7
8
|
heading && /* @__PURE__ */ jsx("div", { className: styles.sectionInner, children: /* @__PURE__ */ jsx(Heading, { className: styles.heading, as: "h2", variant: "title-100", children: heading }) }),
|
|
8
9
|
children
|
|
9
10
|
] }) });
|
package/dist/style.css
CHANGED
|
@@ -1034,13 +1034,13 @@
|
|
|
1034
1034
|
opacity: 1;
|
|
1035
1035
|
transform: translateX(0);
|
|
1036
1036
|
}
|
|
1037
|
-
}.
|
|
1037
|
+
}._item_16o96_1 {
|
|
1038
1038
|
position: relative;
|
|
1039
1039
|
background-color: var(--teddy-color-functional-white);
|
|
1040
1040
|
border-radius: var(--teddy-border-radius-md);
|
|
1041
1041
|
}
|
|
1042
1042
|
|
|
1043
|
-
.
|
|
1043
|
+
._breakageFeeInfo_16o96_7 {
|
|
1044
1044
|
position: relative;
|
|
1045
1045
|
font-family: var(--teddy-typography-family-default);
|
|
1046
1046
|
font-weight: var(--teddy-typography-weight-normal);
|
|
@@ -1048,7 +1048,7 @@
|
|
|
1048
1048
|
font-size: var(--teddy-typography-scale-100);
|
|
1049
1049
|
}
|
|
1050
1050
|
|
|
1051
|
-
.
|
|
1051
|
+
._itemIcon_16o96_15 {
|
|
1052
1052
|
display: flex;
|
|
1053
1053
|
height: 2rem;
|
|
1054
1054
|
width: 2rem;
|
|
@@ -1059,14 +1059,14 @@
|
|
|
1059
1059
|
color: var(--teddy-color-purple-700);
|
|
1060
1060
|
}
|
|
1061
1061
|
|
|
1062
|
-
.
|
|
1062
|
+
._nameWrapper_16o96_26 {
|
|
1063
1063
|
max-width: 18rem;
|
|
1064
1064
|
display: flex;
|
|
1065
1065
|
align-items: flex-start;
|
|
1066
1066
|
flex-direction: column;
|
|
1067
1067
|
}
|
|
1068
1068
|
|
|
1069
|
-
.
|
|
1069
|
+
._link_16o96_33 {
|
|
1070
1070
|
display: flex;
|
|
1071
1071
|
align-items: center;
|
|
1072
1072
|
padding-right: var(--teddy-spacing-400);
|
|
@@ -1076,69 +1076,78 @@
|
|
|
1076
1076
|
font-weight: var(--teddy-typography-weight-bold);
|
|
1077
1077
|
}
|
|
1078
1078
|
|
|
1079
|
-
._link_kjt5a_33 span {
|
|
1080
|
-
margin-right: var(--teddy-spacing-100);
|
|
1081
|
-
}
|
|
1082
|
-
|
|
1083
1079
|
@media all and (min-width: 600px) {
|
|
1084
|
-
.
|
|
1080
|
+
._link_16o96_33 {
|
|
1085
1081
|
padding-right: 0;
|
|
1086
1082
|
}
|
|
1087
1083
|
}
|
|
1088
1084
|
|
|
1089
|
-
.
|
|
1085
|
+
._link_16o96_33 span {
|
|
1086
|
+
margin-right: var(--teddy-spacing-100);
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
._cartLink_16o96_51 {
|
|
1090
|
+
font-weight: var(--teddy-typography-weight-bold);
|
|
1091
|
+
color: var(--teddy-color-functional-black);
|
|
1092
|
+
}
|
|
1093
|
+
|
|
1094
|
+
._cartLink_16o96_51:hover, ._cartLink_16o96_51:active, ._cartLink_16o96_51:focus {
|
|
1095
|
+
color: var(--teddy-color-text-interactive-primary);
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
._discountDescription_16o96_59 {
|
|
1090
1099
|
margin-right: var(--teddy-spacing-600);
|
|
1091
1100
|
overflow: visible;
|
|
1092
1101
|
margin-top: var(--teddy-spacing-50);
|
|
1093
1102
|
}
|
|
1094
1103
|
|
|
1095
|
-
.
|
|
1104
|
+
._name_16o96_26 {
|
|
1096
1105
|
box-sizing: border-box;
|
|
1097
1106
|
width: 100%;
|
|
1098
1107
|
padding: var(--teddy-spacing-200) var(--teddy-spacing-200) 0 0;
|
|
1099
1108
|
font-size: var(--teddy-typography-scale-100);
|
|
1100
1109
|
}
|
|
1101
1110
|
|
|
1102
|
-
.
|
|
1111
|
+
._nameContainer_16o96_72 {
|
|
1103
1112
|
display: flex;
|
|
1104
1113
|
}
|
|
1105
1114
|
|
|
1106
|
-
.
|
|
1115
|
+
._subtitle_16o96_76 {
|
|
1107
1116
|
display: flex;
|
|
1108
1117
|
flex-direction: column;
|
|
1109
1118
|
}
|
|
1110
1119
|
|
|
1111
|
-
.
|
|
1120
|
+
._subtitle_16o96_76 p {
|
|
1112
1121
|
margin: 0;
|
|
1113
1122
|
}
|
|
1114
1123
|
|
|
1115
|
-
.
|
|
1124
|
+
._quantityPickerWrapper_16o96_84 {
|
|
1116
1125
|
display: flex;
|
|
1117
1126
|
justify-content: flex-start;
|
|
1118
1127
|
align-items: center;
|
|
1119
1128
|
flex-wrap: wrap;
|
|
1120
1129
|
}
|
|
1121
1130
|
|
|
1122
|
-
.
|
|
1131
|
+
._pricePer_16o96_91 {
|
|
1123
1132
|
margin-left: var(--teddy-spacing-200);
|
|
1124
1133
|
}
|
|
1125
1134
|
|
|
1126
|
-
.
|
|
1135
|
+
._quantityPicker_16o96_84 {
|
|
1127
1136
|
display: flex;
|
|
1128
1137
|
align-items: center;
|
|
1129
1138
|
}
|
|
1130
1139
|
|
|
1131
|
-
.
|
|
1140
|
+
._quantityPicker_16o96_84 p {
|
|
1132
1141
|
margin: 0 var(--teddy-spacing-100);
|
|
1133
1142
|
}
|
|
1134
1143
|
|
|
1135
|
-
.
|
|
1144
|
+
._priceContainer_16o96_103 {
|
|
1136
1145
|
display: flex;
|
|
1137
1146
|
justify-content: space-between;
|
|
1138
1147
|
margin-bottom: var(--teddy-spacing-100);
|
|
1139
1148
|
}
|
|
1140
1149
|
|
|
1141
|
-
.
|
|
1150
|
+
._priceCost_16o96_109 {
|
|
1142
1151
|
display: flex;
|
|
1143
1152
|
flex-direction: column;
|
|
1144
1153
|
font-family: var(--teddy-typography-family-default);
|
|
@@ -1146,12 +1155,12 @@
|
|
|
1146
1155
|
margin-bottom: 0;
|
|
1147
1156
|
}
|
|
1148
1157
|
|
|
1149
|
-
.
|
|
1158
|
+
._priceLabel_16o96_117 {
|
|
1150
1159
|
text-align: right;
|
|
1151
1160
|
margin-bottom: 0;
|
|
1152
1161
|
}
|
|
1153
1162
|
|
|
1154
|
-
.
|
|
1163
|
+
._priceLinethrough_16o96_122 {
|
|
1155
1164
|
font-size: var(--teddy-typography-scale-100);
|
|
1156
1165
|
font-family: var(--teddy-typography-family-default);
|
|
1157
1166
|
font-weight: var(--teddy-typography-weight-normal);
|
|
@@ -1161,7 +1170,7 @@
|
|
|
1161
1170
|
color: var(--teddy-color-gray-500);
|
|
1162
1171
|
}
|
|
1163
1172
|
|
|
1164
|
-
.
|
|
1173
|
+
._priceLinethroughDisclaimer_16o96_132 {
|
|
1165
1174
|
font-size: var(--teddy-typography-scale-100);
|
|
1166
1175
|
font-family: var(--teddy-typography-family-default);
|
|
1167
1176
|
font-weight: var(--teddy-typography-weight-normal);
|
|
@@ -1170,39 +1179,39 @@
|
|
|
1170
1179
|
color: var(--teddy-color-gray-500);
|
|
1171
1180
|
}
|
|
1172
1181
|
|
|
1173
|
-
.
|
|
1182
|
+
._imageContainer_16o96_141 {
|
|
1174
1183
|
max-width: 2.5rem;
|
|
1175
1184
|
width: 2.5rem;
|
|
1176
1185
|
margin: var(--teddy-spacing-200) var(--teddy-spacing-200) 0 var(--teddy-spacing-200);
|
|
1177
1186
|
}
|
|
1178
1187
|
|
|
1179
|
-
.
|
|
1180
|
-
.
|
|
1181
|
-
.
|
|
1182
|
-
.
|
|
1188
|
+
._imageContainer_16o96_141 a:hover,
|
|
1189
|
+
._imageContainer_16o96_141 a:active,
|
|
1190
|
+
._imageContainer_16o96_141 a:focus,
|
|
1191
|
+
._imageContainer_16o96_141 a:focus-within {
|
|
1183
1192
|
color: var(--teddy-color-text-interactive-primary);
|
|
1184
1193
|
}
|
|
1185
1194
|
|
|
1186
|
-
.
|
|
1195
|
+
._noImageContainer_16o96_153 {
|
|
1187
1196
|
max-width: 2.5rem;
|
|
1188
1197
|
width: 2.5rem;
|
|
1189
1198
|
margin: var(--teddy-spacing-200) var(--teddy-spacing-200) 0 var(--teddy-spacing-200);
|
|
1190
1199
|
}
|
|
1191
1200
|
|
|
1192
|
-
.
|
|
1201
|
+
._image_16o96_141 {
|
|
1193
1202
|
display: block;
|
|
1194
1203
|
height: auto;
|
|
1195
1204
|
max-width: 2.5rem;
|
|
1196
1205
|
width: 2.5rem;
|
|
1197
1206
|
}
|
|
1198
1207
|
|
|
1199
|
-
.
|
|
1208
|
+
._iconImage_16o96_166 {
|
|
1200
1209
|
display: block;
|
|
1201
1210
|
width: 2.5rem;
|
|
1202
1211
|
height: 2.5rem;
|
|
1203
1212
|
}
|
|
1204
1213
|
|
|
1205
|
-
.
|
|
1214
|
+
._deleteButtonContainer_16o96_172 {
|
|
1206
1215
|
box-sizing: border-box;
|
|
1207
1216
|
display: flex;
|
|
1208
1217
|
justify-content: center;
|
|
@@ -1220,81 +1229,74 @@
|
|
|
1220
1229
|
padding: var(--teddy-spacing-50) var(--teddy-spacing-100);
|
|
1221
1230
|
}
|
|
1222
1231
|
|
|
1223
|
-
.
|
|
1232
|
+
._deleteButtonContainer_16o96_172:active, ._deleteButtonContainer_16o96_172:hover, ._deleteButtonContainer_16o96_172:focus {
|
|
1224
1233
|
background-color: var(--teddy-color-purple-700);
|
|
1225
1234
|
color: var(--teddy-color-functional-white);
|
|
1226
1235
|
}
|
|
1227
1236
|
|
|
1228
|
-
.
|
|
1237
|
+
._deleteButtonContainer_16o96_172 svg {
|
|
1229
1238
|
width: 1.06rem;
|
|
1230
1239
|
height: 1.1rem;
|
|
1231
1240
|
margin-bottom: 1px;
|
|
1232
1241
|
}
|
|
1233
1242
|
|
|
1234
|
-
.
|
|
1243
|
+
._uniqueDiscount_16o96_199 {
|
|
1235
1244
|
display: flex;
|
|
1236
1245
|
justify-content: space-between;
|
|
1237
1246
|
margin-top: var(--teddy-spacing-100);
|
|
1238
1247
|
margin-bottom: var(--teddy-spacing-100);
|
|
1239
1248
|
}
|
|
1240
1249
|
|
|
1241
|
-
.
|
|
1250
|
+
._uniqueDiscountLabel_16o96_206 {
|
|
1242
1251
|
font-family: var(--teddy-typography-family-default);
|
|
1243
1252
|
font-weight: var(--teddy-typography-weight-normal);
|
|
1244
1253
|
font-style: italic;
|
|
1245
1254
|
}
|
|
1246
1255
|
|
|
1247
|
-
.
|
|
1256
|
+
._uniqueDiscountPrice_16o96_212 {
|
|
1248
1257
|
font-family: var(--teddy-typography-family-default);
|
|
1249
1258
|
font-weight: var(--teddy-typography-weight-bold);
|
|
1250
1259
|
}
|
|
1251
1260
|
|
|
1252
|
-
.
|
|
1261
|
+
._onlyInShops_16o96_217 {
|
|
1253
1262
|
display: flex;
|
|
1254
1263
|
align-items: center;
|
|
1255
1264
|
margin-top: var(--teddy-spacing-100);
|
|
1256
1265
|
margin-bottom: var(--teddy-spacing-100);
|
|
1257
1266
|
}
|
|
1258
1267
|
|
|
1259
|
-
.
|
|
1268
|
+
._onlyInShopsLabel_16o96_224 {
|
|
1260
1269
|
font-style: italic;
|
|
1261
1270
|
font-family: var(--teddy-typography-family-default);
|
|
1262
1271
|
font-weight: var(--teddy-typography-weight-normal);
|
|
1263
1272
|
}
|
|
1264
1273
|
|
|
1265
|
-
.
|
|
1274
|
+
._onlyInShopsTooltipWrapper_16o96_230 {
|
|
1266
1275
|
margin-left: var(--teddy-spacing-100);
|
|
1267
1276
|
display: flex;
|
|
1268
1277
|
align-items: center;
|
|
1269
1278
|
}
|
|
1270
1279
|
|
|
1271
|
-
.
|
|
1280
|
+
._onlyInShopsTooltipIcon_16o96_236 {
|
|
1272
1281
|
cursor: pointer;
|
|
1273
1282
|
width: 1.2rem;
|
|
1274
1283
|
height: 1.2rem;
|
|
1275
1284
|
color: var(--teddy-color-functional-black);
|
|
1276
1285
|
}
|
|
1277
1286
|
|
|
1278
|
-
.
|
|
1287
|
+
._tooltipTrigger_16o96_243 {
|
|
1279
1288
|
padding: var(--teddy-spacing-100);
|
|
1280
1289
|
}
|
|
1281
1290
|
|
|
1282
|
-
.
|
|
1291
|
+
._tooltipTrigger_16o96_243 svg {
|
|
1283
1292
|
width: 1.25rem;
|
|
1284
1293
|
height: 1.25rem;
|
|
1285
1294
|
}
|
|
1286
1295
|
|
|
1287
|
-
.
|
|
1296
|
+
._priceWrapper_16o96_251 {
|
|
1288
1297
|
display: flex;
|
|
1289
1298
|
align-items: center;
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
._cartLink_kjt5a_248 {
|
|
1293
|
-
color: var(--teddy-color-functional-black);
|
|
1294
|
-
}
|
|
1295
|
-
|
|
1296
|
-
._cartLink_kjt5a_248:hover, ._cartLink_kjt5a_248:active, ._cartLink_kjt5a_248:focus {
|
|
1297
|
-
color: var(--teddy-color-text-interactive-primary);
|
|
1299
|
+
justify-content: flex-end;
|
|
1298
1300
|
}._teddy-progress-bar_j1bq2_1 {
|
|
1299
1301
|
background: var(--teddy-color-transparent-black-100);
|
|
1300
1302
|
overflow: hidden;
|
|
@@ -1321,36 +1323,36 @@
|
|
|
1321
1323
|
0% {
|
|
1322
1324
|
transform: translateX(-100%);
|
|
1323
1325
|
}
|
|
1324
|
-
}.
|
|
1326
|
+
}._singleDisclaimer_1995d_1 {
|
|
1325
1327
|
font-size: var(--teddy-typography-scale-75);
|
|
1326
1328
|
padding: var(--teddy-spacing-100) var(--teddy-spacing-200);
|
|
1327
1329
|
}
|
|
1328
1330
|
|
|
1329
|
-
.
|
|
1330
|
-
padding: var(--teddy-spacing-300) var(--teddy-spacing-200)
|
|
1331
|
+
._disclaimer_1995d_6 {
|
|
1332
|
+
padding: var(--teddy-spacing-300) var(--teddy-spacing-200) 0 0;
|
|
1331
1333
|
cursor: pointer;
|
|
1332
1334
|
font-size: var(--teddy-typography-scale-75);
|
|
1333
1335
|
}
|
|
1334
1336
|
|
|
1335
|
-
.
|
|
1337
|
+
._disclaimerHeader_1995d_12 {
|
|
1336
1338
|
display: flex;
|
|
1337
1339
|
justify-content: space-between;
|
|
1338
1340
|
}
|
|
1339
1341
|
|
|
1340
|
-
.
|
|
1342
|
+
._disclaimerHeaderLeft_1995d_17 {
|
|
1341
1343
|
display: flex;
|
|
1342
1344
|
align-items: center;
|
|
1343
1345
|
}
|
|
1344
|
-
.
|
|
1346
|
+
._disclaimerHeaderLeft_1995d_17 > * {
|
|
1345
1347
|
margin-right: var(--teddy-spacing-100);
|
|
1346
1348
|
}
|
|
1347
1349
|
|
|
1348
|
-
.
|
|
1350
|
+
._disclaimerIcon_1995d_25 {
|
|
1349
1351
|
width: 1.5rem;
|
|
1350
1352
|
height: 1.5rem;
|
|
1351
1353
|
}
|
|
1352
1354
|
|
|
1353
|
-
.
|
|
1355
|
+
._disclaimerItem_1995d_30 {
|
|
1354
1356
|
display: grid;
|
|
1355
1357
|
grid-template-columns: auto auto;
|
|
1356
1358
|
margin-top: var(--teddy-spacing-150);
|
|
@@ -1358,16 +1360,16 @@
|
|
|
1358
1360
|
font-size: var(--teddy-typography-scale-75);
|
|
1359
1361
|
}
|
|
1360
1362
|
|
|
1361
|
-
.
|
|
1363
|
+
._disclaimerItemTotal_1995d_38 {
|
|
1362
1364
|
text-align: right;
|
|
1363
1365
|
}
|
|
1364
1366
|
|
|
1365
|
-
.
|
|
1367
|
+
._disclaimerItemSubtitle_1995d_42 {
|
|
1366
1368
|
grid-column: 1/3;
|
|
1367
1369
|
color: var(--teddy-color-transparent-black-600);
|
|
1368
1370
|
}
|
|
1369
1371
|
|
|
1370
|
-
.
|
|
1372
|
+
._disclaimerTotal_1995d_47 {
|
|
1371
1373
|
margin-top: var(--teddy-spacing-200);
|
|
1372
1374
|
font-family: var(--teddy-typography-family-default);
|
|
1373
1375
|
font-weight: var(--teddy-typography-weight-medium);
|