@trafilea/afrodita-components 5.0.0-beta.303 → 5.0.0-beta.305
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/build/index.d.ts +2 -0
- package/build/index.esm.js +32 -22
- package/build/index.esm.js.map +1 -1
- package/build/index.js +32 -22
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +2 -0
- package/build/theme/shapermint.theme.d.ts +2 -0
- package/build/theme/thespadr.theme.d.ts +2 -0
- package/build/theme/truekind.theme.d.ts +2 -0
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -1719,10 +1719,12 @@ declare type ThemeComponent = {
|
|
|
1719
1719
|
optionPadding: string;
|
|
1720
1720
|
color: string;
|
|
1721
1721
|
fill: string;
|
|
1722
|
+
borderWidth?: string;
|
|
1722
1723
|
options: {
|
|
1723
1724
|
borderColor: string;
|
|
1724
1725
|
color: string;
|
|
1725
1726
|
borderRadius: string;
|
|
1727
|
+
backgroundColor?: string;
|
|
1726
1728
|
};
|
|
1727
1729
|
};
|
|
1728
1730
|
modal: {
|
package/build/index.esm.js
CHANGED
|
@@ -4623,7 +4623,7 @@ var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
|
4623
4623
|
display: 'flex',
|
|
4624
4624
|
flexDirection: 'column',
|
|
4625
4625
|
alignItems: 'flex-start',
|
|
4626
|
-
border: "0.063rem solid ".concat(theme.component.dropdown.options.borderColor),
|
|
4626
|
+
border: "".concat(theme.component.dropdown.borderWidth || '0.063rem', " solid ").concat(theme.component.dropdown.options.borderColor),
|
|
4627
4627
|
boxSizing: 'border-box',
|
|
4628
4628
|
borderRadius: theme.component.dropdown.options.borderRadius,
|
|
4629
4629
|
background: theme.colors.shades.white.color,
|
|
@@ -4821,11 +4821,13 @@ var CustomOption = newStyled.li(function (_a) {
|
|
|
4821
4821
|
cursor: 'pointer',
|
|
4822
4822
|
padding: theme.component.dropdown.optionPadding,
|
|
4823
4823
|
justifyContent: 'flex-start',
|
|
4824
|
-
borderRadius: 'inherit',
|
|
4824
|
+
borderRadius: theme.component.dropdown.options.borderRadius || 'inherit',
|
|
4825
4825
|
width: '100%',
|
|
4826
4826
|
boxSizing: 'border-box',
|
|
4827
4827
|
fontWeight: selected ? 600 : 'inherit',
|
|
4828
|
-
backgroundColor: active
|
|
4828
|
+
backgroundColor: active
|
|
4829
|
+
? theme.component.dropdown.options.backgroundColor || theme.colors.shades['10'].color
|
|
4830
|
+
: 'inherit',
|
|
4829
4831
|
});
|
|
4830
4832
|
});
|
|
4831
4833
|
function BaseDropdownOption(_a) {
|
|
@@ -4980,7 +4982,7 @@ var TAGS = {
|
|
|
4980
4982
|
heading3: newStyled.h3(templateObject_8$a || (templateObject_8$a = __makeTemplateObject([""], [""]))),
|
|
4981
4983
|
heading4: newStyled.h4(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
4982
4984
|
heading5: newStyled.h5(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject([""], [""]))),
|
|
4983
|
-
heading6: newStyled.h6(templateObject_11$
|
|
4985
|
+
heading6: newStyled.h6(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject([""], [""]))),
|
|
4984
4986
|
heading7: newStyled.h1(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject([""], [""]))),
|
|
4985
4987
|
heading8: newStyled.h1(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""]))),
|
|
4986
4988
|
body: newStyled.p(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -5102,7 +5104,7 @@ var DEFAULTS = {
|
|
|
5102
5104
|
size: 'regular',
|
|
5103
5105
|
},
|
|
5104
5106
|
};
|
|
5105
|
-
var templateObject_1$1y, templateObject_2$11, templateObject_3$Q, templateObject_4$B, templateObject_5$o, templateObject_6$m, templateObject_7$e, templateObject_8$a, templateObject_9$6, templateObject_10$4, templateObject_11$
|
|
5107
|
+
var templateObject_1$1y, templateObject_2$11, templateObject_3$Q, templateObject_4$B, templateObject_5$o, templateObject_6$m, templateObject_7$e, templateObject_8$a, templateObject_9$6, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2;
|
|
5106
5108
|
|
|
5107
5109
|
var ButtonsContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
5108
5110
|
var inline = _a.inline;
|
|
@@ -13265,7 +13267,7 @@ var ReviewerName$1 = newStyled.h2(templateObject_7$a || (templateObject_7$a = __
|
|
|
13265
13267
|
var ReviewTitle$1 = newStyled.h3(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13266
13268
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
13267
13269
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
13268
|
-
var ImagesContainer = newStyled.div(templateObject_11$
|
|
13270
|
+
var ImagesContainer = newStyled.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
13269
13271
|
var Images = newStyled.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
13270
13272
|
var ImageSpace = newStyled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
13271
13273
|
var ImageWrapper$2 = newStyled.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"], ["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"])));
|
|
@@ -13307,7 +13309,7 @@ var Review$1 = function (_a) {
|
|
|
13307
13309
|
: description,
|
|
13308
13310
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
13309
13311
|
};
|
|
13310
|
-
var templateObject_1$P, templateObject_2$z, templateObject_3$w, templateObject_4$n, templateObject_5$g, templateObject_6$f, templateObject_7$a, templateObject_8$8, templateObject_9$5, templateObject_10$3, templateObject_11$
|
|
13312
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$w, templateObject_4$n, templateObject_5$g, templateObject_6$f, templateObject_7$a, templateObject_8$8, templateObject_9$5, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1;
|
|
13311
13313
|
|
|
13312
13314
|
var List = newStyled.ul(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
13313
13315
|
var Item$1 = newStyled.li(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
@@ -18726,7 +18728,7 @@ var VerifiedText = newStyled.h1(templateObject_7$1 || (templateObject_7$1 = __ma
|
|
|
18726
18728
|
var ReviewTitle = newStyled.h2(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
18727
18729
|
var ReviewDescription = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
18728
18730
|
var ImageContainer = newStyled.div(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
18729
|
-
var ImageWrapper = newStyled(Image)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
18731
|
+
var ImageWrapper = newStyled(Image)(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
18730
18732
|
var VideoWrapper = newStyled.video(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
18731
18733
|
var ProductContainer = newStyled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"], ["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"])));
|
|
18732
18734
|
var ProductTitle = newStyled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"], ["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"])));
|
|
@@ -18757,7 +18759,7 @@ var Review = function (_a) {
|
|
|
18757
18759
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$5, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18758
18760
|
(!isVideo ? (jsx$1(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18759
18761
|
};
|
|
18760
|
-
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18762
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18761
18763
|
|
|
18762
18764
|
function _extends() {
|
|
18763
18765
|
_extends = Object.assign || function (target) {
|
|
@@ -19177,15 +19179,21 @@ var SizeDropdown = function (_a) {
|
|
|
19177
19179
|
};
|
|
19178
19180
|
|
|
19179
19181
|
var FlexContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19180
|
-
var
|
|
19181
|
-
var
|
|
19182
|
-
|
|
19183
|
-
|
|
19184
|
-
|
|
19185
|
-
|
|
19186
|
-
var
|
|
19187
|
-
var
|
|
19188
|
-
var
|
|
19182
|
+
var ContainerBase = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: ", ";\n"], ["\n border: ", ";\n"])), function (_a) {
|
|
19183
|
+
var selected = _a.selected;
|
|
19184
|
+
return selected
|
|
19185
|
+
? '2px solid var(--colors-pallete-primary-80-color)'
|
|
19186
|
+
: '2px solid var(--colors-pallete-secondary-soft-color)';
|
|
19187
|
+
});
|
|
19188
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-radius: 8px;\n margin-bottom: 8px;\n\n & input:checked + div {\n border-color: var(--colors-pallete-primary-color);\n }\n\n & label {\n font-weight: 700;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-radius: 8px;\n margin-bottom: 8px;\n\n & input:checked + div {\n border-color: var(--colors-pallete-primary-color);\n }\n\n & label {\n font-weight: 700;\n }\n"])));
|
|
19189
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 16px;\n border-radius: 8px;\n"], ["\n padding: 16px;\n border-radius: 8px;\n"])));
|
|
19190
|
+
var SubscriptionHeader = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--colors-pallete-secondary-20-color);\n padding-bottom: 10px;\n margin-bottom: 8px;\n\n & input:checked + div {\n border-color: var(--colors-pallete-primary-color);\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--colors-pallete-secondary-20-color);\n padding-bottom: 10px;\n margin-bottom: 8px;\n\n & input:checked + div {\n border-color: var(--colors-pallete-primary-color);\n }\n"])));
|
|
19191
|
+
var BenefitsContainer = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19192
|
+
var Benefit = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n"], ["\n display: flex;\n padding: 8px 0px;\n"])));
|
|
19193
|
+
var BenefitText = newStyled(Text$8)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
19194
|
+
var SubscriptionDetails = newStyled(Text$8)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
19195
|
+
var SubscriptionDetailsContainer = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
19196
|
+
var DeliveryFrequencyLabel = newStyled(Text$8)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n"])));
|
|
19189
19197
|
var radioIds = {
|
|
19190
19198
|
oneTime: {
|
|
19191
19199
|
id: 'one-time-purchase',
|
|
@@ -19233,13 +19241,15 @@ var Autoship = function (_a) {
|
|
|
19233
19241
|
}
|
|
19234
19242
|
onChange(__assign$1({}, dataObj));
|
|
19235
19243
|
};
|
|
19236
|
-
return (jsxs$1(Fragment$1, { children: [jsxs$1(SinglePurchaseContainer, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(PriceLabelV2, { finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), color: radioIds.oneTime.id === radioCheck.id
|
|
19244
|
+
return (jsxs$1(Fragment$1, { children: [jsxs$1(SinglePurchaseContainer, __assign$1({ selected: radioIds.oneTime.id === radioCheck.id }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(PriceLabelV2, { finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), color: radioIds.oneTime.id === radioCheck.id
|
|
19237
19245
|
? 'var(--colors-pallete-secondary-color)'
|
|
19238
|
-
: 'var(--colors-shades-400-color)', size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }, void 0), jsxs$1(SubscriptionContainer, { children: [jsxs$1(SubscriptionHeader, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(PriceLabelV2, { finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), color: radioIds.oneTime.id === radioCheck.id
|
|
19246
|
+
: 'var(--colors-shades-400-color)', size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer, __assign$1({ selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(PriceLabelV2, { finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), color: radioIds.oneTime.id === radioCheck.id
|
|
19239
19247
|
? 'var(--colors-shades-400-color)'
|
|
19240
|
-
: 'var(--colors-pallete-secondary-color)', size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill:
|
|
19248
|
+
: 'var(--colors-pallete-secondary-color)', size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
19249
|
+
? 'var(--colors-semantic-positive-color)'
|
|
19250
|
+
: 'var(--colors-pallete-secondary-color)' }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$1, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxs$1(SubscriptionDetailsContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "link", underline: true, weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0) }), void 0)] }, void 0)] }, void 0))] }), void 0)] }, void 0));
|
|
19241
19251
|
};
|
|
19242
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
19252
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
19243
19253
|
|
|
19244
19254
|
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$3 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, HurryUp, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$8 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19245
19255
|
//# sourceMappingURL=index.esm.js.map
|