@trafilea/afrodita-components 6.14.0 → 6.14.2

package/build/index.d.ts

@@ -1172,6 +1172,7 @@ declare type AutoshipPropsV2 = {
     frequencyValues?: Array<number>;
     frequencyUnit?: string;
     autoshipBenefits: string[];
+    benefits?: string[];
     onChange: (values: {
         subscriptionPeriod: number;
         autoship: boolean;
@@ -1181,6 +1182,7 @@ declare type AutoshipPropsV2 = {
     className?: string;
     closeIcon?: boolean;
     currencySymbol: string;
+    discountLabel?: string;
 };
 declare const AutoshipV2: React.FC<AutoshipPropsV2>;
 
@@ -2013,6 +2015,12 @@ declare type ThemeComponent = {
         };
         aspectRatio?: string;
     };
+    autoship: {
+        discountTag: {
+            backgroundColor: string;
+            borderRadius: string;
+        };
+    };
 };
 declare type ThemeTypography = {
     config: {

package/build/index.esm.js

@@ -5801,12 +5801,23 @@ var Autoship = function (_a) {
 };
 
 var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var DiscountTag = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n  position: absolute;\n  top: -25px;\n  right: 5px;\n  background-color: #c64844;\n  color: white;\n  padding: 5px 10px;\n  font-size: 12px;\n  line-height: 14px;\n  border-radius: 5px;\n  font-weight: 600;\n"], ["\n  position: absolute;\n  top: -25px;\n  right: 5px;\n  background-color: #c64844;\n  color: white;\n  padding: 5px 10px;\n  font-size: 12px;\n  line-height: 14px;\n  border-radius: 5px;\n  font-weight: 600;\n"])));
+var DiscountTag = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n  position: absolute;\n  top: -25px;\n  right: 5px;\n  background-color: ", ";\n  color: white;\n  padding: 5px 10px;\n  font-size: 12px;\n  line-height: 14px;\n  border-radius: ", ";\n  font-weight: 600;\n"], ["\n  position: absolute;\n  top: -25px;\n  right: 5px;\n  background-color: ", ";\n  color: white;\n  padding: 5px 10px;\n  font-size: 12px;\n  line-height: 14px;\n  border-radius: ", ";\n  font-weight: 600;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.autoship.discountTag.backgroundColor;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.autoship.discountTag.borderRadius;
+});
+var getSelectedBorder = function (_a) {
+    var name = _a.name, colors = _a.colors;
+    if (name === 'TheSpaDr') {
+        return "2px solid ".concat(colors.pallete.primary.color);
+    }
+    return "1.5px solid ".concat(colors.shades['700'].color);
+};
 var ContainerBase = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n  border-radius: 8px;\n\n  border: ", ";\n\n  ", "\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n\n  & label {\n    cursor: pointer;\n  }\n"], ["\n  border-radius: 8px;\n\n  border: ", ";\n\n  ", "\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n\n  & label {\n    cursor: pointer;\n  }\n"])), function (_a) {
     var selected = _a.selected, theme = _a.theme;
-    return selected
-        ? "1.5px solid ".concat(theme.colors.shades['700'].color)
-        : "1px solid ".concat(theme.colors.shades[200].color);
+    return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
 }, function (_a) {
     var selected = _a.selected;
     return selected
@@ -5850,7 +5861,7 @@ var radioIds = {
 var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
 var DEFAULT_FREQUENCY_UNIT = 'months';
 var AutoshipV2 = function (_a) {
-    var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c;
+    var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c, discountLabel = _a.discountLabel;
     var theme = useTheme();
     var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
         ? frequencyValues.map(function (value) {
@@ -5866,7 +5877,7 @@ var AutoshipV2 = function (_a) {
     var autoShipSaving = Math.floor(listPrice - autoshipFinalPrice);
     var autoShipPctOverListPrice = (autoShipSaving / listPrice) * 100;
     var autoShipPctOverListPriceRounded = Math.round(autoShipPctOverListPrice / 5) * 5;
-    var updatedAutoshipBenefits = __spreadArray([
+    var updatedAutoshipBenefits = benefits !== null && benefits !== void 0 ? benefits : __spreadArray([
         "Save up to ".concat(autoShipPctOverListPriceRounded, "% always")
     ], autoshipBenefits.slice(0), true);
     var createDataObject = function () {
@@ -5900,7 +5911,7 @@ var AutoshipV2 = function (_a) {
             return (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0));
         }
     }
-    return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, { children: "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }, void 0), jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxs$1(FlexContainer, { 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'); }, style: { marginRight: '10px' }, useV2Style: true }, void 0), jsx$1("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.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
+    return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }, void 0), jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxs$1(FlexContainer, { 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'); }, style: { marginRight: '10px' }, useV2Style: true }, void 0), jsx$1("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.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
                                         ? benefitsColor.selected
                                         : benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsx$1(Fragment$2, { children: jsx$1(FlexContainer, { children: jsx$1(DeliveryFrequencySelector, {}, void 0) }, void 0) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { 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'); }, useV2Style: true }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
 };
@@ -19796,7 +19807,7 @@ var Spinner = function (_a) {
 };
 
 var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
-var SliderContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  overflow: hidden;\n  & .slick-dots li.slick-active button:before {\n    background-color: ", ";\n  }\n\n  .slick-slide {\n    position: relative;\n    aspect-ratio: ", ";\n  }\n\n  .slick-arrow {\n    cursor: pointer;\n    position: absolute;\n    top: 45%;\n    z-index: 1;\n  }\n\n  .slick-arrow::before {\n    content: '' !important;\n  }\n\n  @media only screen and (max-width: 480px) {\n    .slick-arrow {\n      display: block !important;\n    }\n  }\n\n  .slick-arrow.slick-disabled {\n    display: none !important;\n  }\n\n  .slick-prev {\n    left: 0;\n  }\n\n  .slick-next {\n    right: 0;\n  }\n\n  .slick-dots {\n    bottom: 15px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    text-align: center;\n    width: 100%;\n  }\n\n  .slick-dots li {\n    position: relative;\n    display: inline-block;\n    height: 20px;\n    width: 20px;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n  }\n\n  .slick-dots li.slick-active {\n    display: inline-block !important;\n  }\n\n  .slick-dots li:nth-child(n + 10) {\n    display: none;\n  }\n\n  .slick-dots li button {\n    background: transparent;\n    border: 0;\n    color: transparent;\n    cursor: pointer;\n    display: block;\n    height: 20px;\n    line-height: 0;\n    outline: none;\n    padding: 5px;\n    width: 20px;\n  }\n\n  .slick-dots li button:focus:before,\n  .slick-dots li button:hover:before {\n    opacity: 0.5;\n  }\n\n  .slick-dots li button:before {\n    background: rgba(27, 25, 25, 0.5);\n    border-radius: 20px;\n    content: ' ';\n    display: block;\n    height: 8px;\n    left: 0;\n    margin: 5px;\n    position: absolute;\n    top: 0;\n    width: 8px;\n    opacity: 1;\n  }\n\n  .slick-dots li.slick-active button:before {\n    background-color: #fff;\n    opacity: 1;\n    width: 12px;\n    height: 12px;\n    top: -1px;\n  }\n\n  .slick-dots li:not(.slick-active) button:before {\n    border: 1px solid hsla(0, 0%, 100%, 0.6);\n  }\n"], ["\n  ", "\n  position: relative;\n  overflow: hidden;\n  & .slick-dots li.slick-active button:before {\n    background-color: ", ";\n  }\n\n  .slick-slide {\n    position: relative;\n    aspect-ratio: ", ";\n  }\n\n  .slick-arrow {\n    cursor: pointer;\n    position: absolute;\n    top: 45%;\n    z-index: 1;\n  }\n\n  .slick-arrow::before {\n    content: '' !important;\n  }\n\n  @media only screen and (max-width: 480px) {\n    .slick-arrow {\n      display: block !important;\n    }\n  }\n\n  .slick-arrow.slick-disabled {\n    display: none !important;\n  }\n\n  .slick-prev {\n    left: 0;\n  }\n\n  .slick-next {\n    right: 0;\n  }\n\n  .slick-dots {\n    bottom: 15px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    text-align: center;\n    width: 100%;\n  }\n\n  .slick-dots li {\n    position: relative;\n    display: inline-block;\n    height: 20px;\n    width: 20px;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n  }\n\n  .slick-dots li.slick-active {\n    display: inline-block !important;\n  }\n\n  .slick-dots li:nth-child(n + 10) {\n    display: none;\n  }\n\n  .slick-dots li button {\n    background: transparent;\n    border: 0;\n    color: transparent;\n    cursor: pointer;\n    display: block;\n    height: 20px;\n    line-height: 0;\n    outline: none;\n    padding: 5px;\n    width: 20px;\n  }\n\n  .slick-dots li button:focus:before,\n  .slick-dots li button:hover:before {\n    opacity: 0.5;\n  }\n\n  .slick-dots li button:before {\n    background: rgba(27, 25, 25, 0.5);\n    border-radius: 20px;\n    content: ' ';\n    display: block;\n    height: 8px;\n    left: 0;\n    margin: 5px;\n    position: absolute;\n    top: 0;\n    width: 8px;\n    opacity: 1;\n  }\n\n  .slick-dots li.slick-active button:before {\n    background-color: #fff;\n    opacity: 1;\n    width: 12px;\n    height: 12px;\n    top: -1px;\n  }\n\n  .slick-dots li:not(.slick-active) button:before {\n    border: 1px solid hsla(0, 0%, 100%, 0.6);\n  }\n"])), function (_a) {
+var SliderContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  overflow: hidden;\n  & .slick-dots li.slick-active button:before {\n    background-color: ", ";\n  }\n\n  .slick-slide {\n    position: relative;\n    aspect-ratio: ", ";\n  }\n\n  .slick-arrow {\n    cursor: pointer;\n    position: absolute;\n    top: 45%;\n    z-index: 1;\n  }\n\n  .slick-arrow::before {\n    content: '' !important;\n  }\n\n  @media only screen and (max-width: 480px) {\n    .slick-arrow {\n      display: block !important;\n    }\n  }\n\n  .slick-arrow.slick-disabled {\n    display: none !important;\n  }\n\n  .slick-prev {\n    left: 5px;\n  }\n\n  .slick-next {\n    right: 5px;\n  }\n\n  .slick-dots {\n    bottom: 15px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    text-align: center;\n    width: 100%;\n  }\n\n  .slick-dots li {\n    position: relative;\n    display: inline-block;\n    height: 20px;\n    width: 20px;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n  }\n\n  .slick-dots li.slick-active {\n    display: inline-block !important;\n  }\n\n  .slick-dots li:nth-child(n + 10) {\n    display: none;\n  }\n\n  .slick-dots li button {\n    background: transparent;\n    border: 0;\n    color: transparent;\n    cursor: pointer;\n    display: block;\n    height: 20px;\n    line-height: 0;\n    outline: none;\n    padding: 5px;\n    width: 20px;\n  }\n\n  .slick-dots li button:focus:before,\n  .slick-dots li button:hover:before {\n    opacity: 0.5;\n  }\n\n  .slick-dots li button:before {\n    background: rgba(27, 25, 25, 0.5);\n    border-radius: 20px;\n    content: ' ';\n    display: block;\n    height: 8px;\n    left: 0;\n    margin: 5px;\n    position: absolute;\n    top: 0;\n    width: 8px;\n    opacity: 1;\n  }\n\n  .slick-dots li.slick-active button:before {\n    background-color: #fff;\n    opacity: 1;\n    width: 12px;\n    height: 12px;\n    top: -1px;\n  }\n\n  .slick-dots li:not(.slick-active) button:before {\n    border: 1px solid hsla(0, 0%, 100%, 0.6);\n  }\n"], ["\n  ", "\n  position: relative;\n  overflow: hidden;\n  & .slick-dots li.slick-active button:before {\n    background-color: ", ";\n  }\n\n  .slick-slide {\n    position: relative;\n    aspect-ratio: ", ";\n  }\n\n  .slick-arrow {\n    cursor: pointer;\n    position: absolute;\n    top: 45%;\n    z-index: 1;\n  }\n\n  .slick-arrow::before {\n    content: '' !important;\n  }\n\n  @media only screen and (max-width: 480px) {\n    .slick-arrow {\n      display: block !important;\n    }\n  }\n\n  .slick-arrow.slick-disabled {\n    display: none !important;\n  }\n\n  .slick-prev {\n    left: 5px;\n  }\n\n  .slick-next {\n    right: 5px;\n  }\n\n  .slick-dots {\n    bottom: 15px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    text-align: center;\n    width: 100%;\n  }\n\n  .slick-dots li {\n    position: relative;\n    display: inline-block;\n    height: 20px;\n    width: 20px;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n  }\n\n  .slick-dots li.slick-active {\n    display: inline-block !important;\n  }\n\n  .slick-dots li:nth-child(n + 10) {\n    display: none;\n  }\n\n  .slick-dots li button {\n    background: transparent;\n    border: 0;\n    color: transparent;\n    cursor: pointer;\n    display: block;\n    height: 20px;\n    line-height: 0;\n    outline: none;\n    padding: 5px;\n    width: 20px;\n  }\n\n  .slick-dots li button:focus:before,\n  .slick-dots li button:hover:before {\n    opacity: 0.5;\n  }\n\n  .slick-dots li button:before {\n    background: rgba(27, 25, 25, 0.5);\n    border-radius: 20px;\n    content: ' ';\n    display: block;\n    height: 8px;\n    left: 0;\n    margin: 5px;\n    position: absolute;\n    top: 0;\n    width: 8px;\n    opacity: 1;\n  }\n\n  .slick-dots li.slick-active button:before {\n    background-color: #fff;\n    opacity: 1;\n    width: 12px;\n    height: 12px;\n    top: -1px;\n  }\n\n  .slick-dots li:not(.slick-active) button:before {\n    border: 1px solid hsla(0, 0%, 100%, 0.6);\n  }\n"])), function (_a) {
     var borderRadiusVariant = _a.borderRadiusVariant;
     return borderRadiusVariant &&
         "\n    border-radius: 40px;\n  ";
@@ -19818,7 +19829,10 @@ var SliderThumbnail = newStyled(Slider)(templateObject_7 || (templateObject_7 =
     var theme = _a.theme;
     return theme.colors.pallete.primary.color;
 });
-var SlideItem = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding-right: 10px;\n"], ["\n  padding-right: 10px;\n"])));
+var SlideItem = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding-right: 10px;\n  aspect-ratio: ", ";\n"], ["\n  padding-right: 10px;\n  aspect-ratio: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.gallery.aspectRatio;
+});
 var StyledImage = newStyled(Image$3)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  aspect-ratio: ", ";\n"], ["\n  width: 100%;\n  height: 100%;\n  aspect-ratio: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.gallery.aspectRatio;