@trafilea/afrodita-components 5.0.0-beta.304 → 5.0.0-beta.306

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.
@@ -4982,7 +4982,7 @@ var TAGS = {
4982
4982
  heading3: newStyled.h3(templateObject_8$a || (templateObject_8$a = __makeTemplateObject([""], [""]))),
4983
4983
  heading4: newStyled.h4(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
4984
4984
  heading5: newStyled.h5(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject([""], [""]))),
4985
- heading6: newStyled.h6(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject([""], [""]))),
4985
+ heading6: newStyled.h6(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject([""], [""]))),
4986
4986
  heading7: newStyled.h1(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject([""], [""]))),
4987
4987
  heading8: newStyled.h1(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""]))),
4988
4988
  body: newStyled.p(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
@@ -5104,7 +5104,7 @@ var DEFAULTS = {
5104
5104
  size: 'regular',
5105
5105
  },
5106
5106
  };
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$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2;
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;
5108
5108
 
5109
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) {
5110
5110
  var inline = _a.inline;
@@ -13267,7 +13267,7 @@ var ReviewerName$1 = newStyled.h2(templateObject_7$a || (templateObject_7$a = __
13267
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"])));
13268
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"])));
13269
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"])));
13270
- var ImagesContainer = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
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"])));
13271
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"])));
13272
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"])));
13273
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"])));
@@ -13309,7 +13309,7 @@ var Review$1 = function (_a) {
13309
13309
  : description,
13310
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));
13311
13311
  };
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$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1;
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;
13313
13313
 
13314
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"])));
13315
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"])));
@@ -18728,7 +18728,7 @@ var VerifiedText = newStyled.h1(templateObject_7$1 || (templateObject_7$1 = __ma
18728
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"])));
18729
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"])));
18730
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"])));
18731
- 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"])));
18732
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"])));
18733
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"])));
18734
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"])));
@@ -18759,7 +18759,7 @@ var Review = function (_a) {
18759
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 &&
18760
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));
18761
18761
  };
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, 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;
18763
18763
 
18764
18764
  function _extends() {
18765
18765
  _extends = Object.assign || function (target) {
@@ -19179,15 +19179,21 @@ var SizeDropdown = function (_a) {
19179
19179
  };
19180
19180
 
19181
19181
  var FlexContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
19182
- var SinglePurchaseContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border: 2px solid var(--colors-pallete-primary-80-color);\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 border: 2px solid var(--colors-pallete-primary-80-color);\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"])));
19183
- var SubscriptionContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 2px solid var(--colors-pallete-secondary-soft-color);\n padding: 16px;\n border-radius: 8px;\n"], ["\n border: 2px solid var(--colors-pallete-secondary-soft-color);\n padding: 16px;\n border-radius: 8px;\n"])));
19184
- var SubscriptionHeader = newStyled.div(templateObject_4 || (templateObject_4 = __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"])));
19185
- var BenefitsContainer = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
19186
- var Benefit = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n"], ["\n display: flex;\n padding: 8px 0px;\n"])));
19187
- var BenefitText = newStyled(Text$8)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
19188
- var SubscriptionDetails = newStyled(Text$8)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
19189
- var SubscriptionDetailsContainer = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
19190
- var DeliveryFrequencyLabel = newStyled(Text$8)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n"])));
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"])));
19191
19197
  var radioIds = {
19192
19198
  oneTime: {
19193
19199
  id: 'one-time-purchase',
@@ -19235,13 +19241,15 @@ var Autoship = function (_a) {
19235
19241
  }
19236
19242
  onChange(__assign$1({}, dataObj));
19237
19243
  };
19238
- 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
19239
19245
  ? 'var(--colors-pallete-secondary-color)'
19240
- : '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
19241
19247
  ? 'var(--colors-shades-400-color)'
19242
- : '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: "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));
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));
19243
19251
  };
19244
- 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;
19245
19253
 
19246
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 };
19247
19255
  //# sourceMappingURL=index.esm.js.map