@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.
package/build/index.js CHANGED
@@ -5008,7 +5008,7 @@ var TAGS = {
5008
5008
  heading3: newStyled.h3(templateObject_8$a || (templateObject_8$a = __makeTemplateObject([""], [""]))),
5009
5009
  heading4: newStyled.h4(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
5010
5010
  heading5: newStyled.h5(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject([""], [""]))),
5011
- heading6: newStyled.h6(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject([""], [""]))),
5011
+ heading6: newStyled.h6(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject([""], [""]))),
5012
5012
  heading7: newStyled.h1(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject([""], [""]))),
5013
5013
  heading8: newStyled.h1(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""]))),
5014
5014
  body: newStyled.p(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
@@ -5130,7 +5130,7 @@ var DEFAULTS = {
5130
5130
  size: 'regular',
5131
5131
  },
5132
5132
  };
5133
- 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;
5133
+ 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;
5134
5134
 
5135
5135
  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) {
5136
5136
  var inline = _a.inline;
@@ -13293,7 +13293,7 @@ var ReviewerName$1 = newStyled.h2(templateObject_7$a || (templateObject_7$a = __
13293
13293
  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"])));
13294
13294
  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"])));
13295
13295
  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"])));
13296
- 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"])));
13296
+ 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"])));
13297
13297
  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"])));
13298
13298
  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"])));
13299
13299
  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"])));
@@ -13335,7 +13335,7 @@ var Review$1 = function (_a) {
13335
13335
  : description,
13336
13336
  } }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
13337
13337
  };
13338
- 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;
13338
+ 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;
13339
13339
 
13340
13340
  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"])));
13341
13341
  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"])));
@@ -18754,7 +18754,7 @@ var VerifiedText = newStyled.h1(templateObject_7$1 || (templateObject_7$1 = __ma
18754
18754
  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"])));
18755
18755
  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"])));
18756
18756
  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"])));
18757
- 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"])));
18757
+ 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"])));
18758
18758
  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"])));
18759
18759
  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"])));
18760
18760
  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"])));
@@ -18785,7 +18785,7 @@ var Review = function (_a) {
18785
18785
  return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
18786
18786
  (!isVideo ? (jsxRuntime.jsx(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
18787
18787
  };
18788
- 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;
18788
+ 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;
18789
18789
 
18790
18790
  function _extends() {
18791
18791
  _extends = Object.assign || function (target) {
@@ -19205,15 +19205,21 @@ var SizeDropdown = function (_a) {
19205
19205
  };
19206
19206
 
19207
19207
  var FlexContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
19208
- 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"])));
19209
- 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"])));
19210
- 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"])));
19211
- var BenefitsContainer = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
19212
- 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"])));
19213
- 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"])));
19214
- 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"])));
19215
- 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"])));
19216
- 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"])));
19208
+ var ContainerBase = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: ", ";\n"], ["\n border: ", ";\n"])), function (_a) {
19209
+ var selected = _a.selected;
19210
+ return selected
19211
+ ? '2px solid var(--colors-pallete-primary-80-color)'
19212
+ : '2px solid var(--colors-pallete-secondary-soft-color)';
19213
+ });
19214
+ 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"])));
19215
+ 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"])));
19216
+ 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"])));
19217
+ var BenefitsContainer = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
19218
+ 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"])));
19219
+ 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"])));
19220
+ 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"])));
19221
+ 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"])));
19222
+ 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"])));
19217
19223
  var radioIds = {
19218
19224
  oneTime: {
19219
19225
  id: 'one-time-purchase',
@@ -19261,13 +19267,15 @@ var Autoship = function (_a) {
19261
19267
  }
19262
19268
  onChange(__assign$1({}, dataObj));
19263
19269
  };
19264
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(SinglePurchaseContainer, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(PriceLabelV2, { finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), color: radioIds.oneTime.id === radioCheck.id
19270
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ selected: radioIds.oneTime.id === radioCheck.id }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(PriceLabelV2, { finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), color: radioIds.oneTime.id === radioCheck.id
19265
19271
  ? 'var(--colors-pallete-secondary-color)'
19266
- : 'var(--colors-shades-400-color)', size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }, void 0), jsxRuntime.jsxs(SubscriptionContainer, { children: [jsxRuntime.jsxs(SubscriptionHeader, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(PriceLabelV2, { finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), color: radioIds.oneTime.id === radioCheck.id
19272
+ : 'var(--colors-shades-400-color)', size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(PriceLabelV2, { finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), color: radioIds.oneTime.id === radioCheck.id
19267
19273
  ? 'var(--colors-shades-400-color)'
19268
- : 'var(--colors-pallete-secondary-color)', size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: "var(--colors-pallete-secondary-color)" }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsxs(SubscriptionDetailsContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "link", underline: true, weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0) }), void 0)] }, void 0)] }, void 0))] }, void 0)] }, void 0));
19274
+ : 'var(--colors-pallete-secondary-color)', size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
19275
+ ? 'var(--colors-semantic-positive-color)'
19276
+ : 'var(--colors-pallete-secondary-color)' }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsxs(SubscriptionDetailsContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "link", underline: true, weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0) }), void 0)] }, void 0)] }, void 0))] }), void 0)] }, void 0));
19269
19277
  };
19270
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
19278
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
19271
19279
 
19272
19280
  exports.AbsorbencyLevel = AbsorbencyLevel;
19273
19281
  exports.Accordion = Accordion$1;