@trafilea/afrodita-components 6.37.4 → 6.38.0

package/build/index.js

@@ -3164,6 +3164,7 @@ exports.ComponentSize = void 0;
     ComponentSize["Medium"] = "medium";
     ComponentSize["Small"] = "small";
     ComponentSize["XSmall"] = "xsmall";
+    ComponentSize["XXSmall"] = "xxsmall";
 })(exports.ComponentSize || (exports.ComponentSize = {}));
 exports.ComponentPosition = void 0;
 (function (ComponentPosition) {
@@ -4827,7 +4828,7 @@ var Text$7 = function (_a) {
     var variant = _a.variant, children = _a.children, testId = _a.testId, asSpan = _a.asSpan, allProps = __rest(_a, ["variant", "children", "testId", "asSpan"]);
     var theme = useTheme();
     var Tag = asSpan ? 'span' : TAGS[variant] || 'p';
-    var _c = __assign$1(__assign$1({}, ((_b = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _b !== void 0 ? _b : {})), allProps), size = _c.size, weight = _c.weight, color = _c.color, props = __rest(_c, ["size", "weight", "color"]);
+    var _c = __assign$1(__assign$1({}, ((_b = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _b !== void 0 ? _b : {})), allProps), size = _c.size, weight = _c.weight, color = _c.color, inline = _c.inline, props = __rest(_c, ["size", "weight", "color", "inline"]);
     var commonCSS = React$2.useMemo(function () {
         var _a, _b;
         // These are the common style inside a `variant`.
@@ -4844,17 +4845,21 @@ var Text$7 = function (_a) {
         var variantName = [variant, size].filter(Boolean).join('-');
         // These are styles specific to `variation-size`.
         var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
-        var style = __assign$1(__assign$1(__assign$1({ margin: 0, color: color || theme.colors.text.color }, variantstyle), variantSizeStyle), { fontFamily: theme.fonts.config[0].family });
-        if (weight) {
-            style.fontWeight = theme.typography.config.weight[weight];
-        }
-        if (props.disabled) {
-            style.opacity = 0.5;
-            style.cursor = 'not-allowed';
-            style.color = theme.colors.text.disabled;
-        }
+        var style = __assign$1(__assign$1(__assign$1(__assign$1(__assign$1(__assign$1(__assign$1({ margin: 0, color: props.disabled ? theme.colors.text.disabled : color !== null && color !== void 0 ? color : theme.colors.text.color }, variantstyle), variantSizeStyle), { fontFamily: theme.fonts.config[0].family }), (weight ? { fontWeight: theme.typography.config.weight[weight] } : {})), (props.disabled ? { opacity: 0.5 } : {})), (props.disabled ? { cursor: 'not-allowed' } : {})), (inline ? { display: 'inline-block' } : {}));
         return style;
-    }, [theme, variant, weight, size, color, props.disabled]);
+    }, [
+        theme.typography.variants,
+        theme.typography.config.weight,
+        theme.fonts.config,
+        theme.colors.text.disabled,
+        theme.colors.text.color,
+        variant,
+        size,
+        props.disabled,
+        color,
+        weight,
+        inline,
+    ]);
     // This is to make TS happy, because `href` doesn't exists on other `variants`
     var propsHref = props.href;
     var href = React$2.useMemo(function () {
@@ -5319,6 +5324,89 @@ var CancellationFlowAccordionContentPerPartner = {
     TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
 };
 
+var isDangerouslySetInnerHTML = function (content) {
+    return content && typeof content === 'object' && '__html' in content;
+};
+
+var title = (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", size: "small", color: "#D4605B", weight: "demi", inline: true }, { children: "Save 50% OFF" }), void 0), ' ', jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "demi", inline: true }, { children: ["on this best-seller Panty!", ' '] }), void 0), ' ', jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", inline: true }, { children: ["Pay only", ' '] }), void 0), ' ', jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "demi", inline: true }, { children: ["$8,99 each", ' '] }), void 0), ' ', jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", inline: true }, { children: "with autoship:" }), void 0)] }, void 0));
+var commonIconProps = {
+    fill: 'var(--shapermint-semantic-urgent-salered-140-c-64844, #C64844);',
+    width: '24px',
+    height: '24px',
+};
+var benefits = function (size) { return [
+    {
+        icon: __assign$1({ name: 'custom/gift_thin' }, commonIconProps),
+        text: (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: size, weight: "regular", inline: true }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", size: size, weight: "demi", inline: true, asSpan: true }, { children: "Free mystery gift" }), void 0), ' ', "in this order"] }), "first-benefit")),
+    },
+    {
+        icon: __assign$1({ name: 'custom/savings' }, commonIconProps),
+        text: (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: size, weight: "regular", inline: true }, { children: ["Lock-in this", ' ', jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", size: size, weight: "demi", inline: true, asSpan: true }, { children: "Guaranteed lowest price" }), void 0)] }), "second-benefit")),
+    },
+    {
+        icon: __assign$1({ name: 'custom/returns' }, commonIconProps),
+        text: (jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", size: size, weight: "regular", inline: true }, { children: "Receive it every 3 months. Cancel anytime" }), "third-benefit")),
+    },
+]; };
+var benefitsRawHtml = [
+    {
+        icon: __assign$1({ name: 'custom/gift_thin' }, commonIconProps),
+        text: '<span style="font-weight: 600;">Free mystery gift</span> in this order',
+    },
+    {
+        icon: __assign$1({ name: 'custom/savings' }, commonIconProps),
+        text: 'Lock-in this <span style="font-weight: 600;">Guaranteed lowest price</span>',
+    },
+    {
+        icon: __assign$1({ name: 'custom/returns' }, commonIconProps),
+        text: 'Receive it every 3 months. Cancel anytime',
+    },
+];
+var sizeOptions = [
+    {
+        key: 'S',
+        label: 'S',
+        value: 'S',
+        disabled: false,
+    },
+    {
+        key: 'M',
+        label: 'M',
+        value: 'M',
+        disabled: false,
+    },
+    {
+        key: 'L',
+        label: 'L',
+        value: 'L',
+        disabled: false,
+    },
+    {
+        key: 'XL',
+        label: 'XL',
+        value: 'XL',
+        disabled: false,
+    },
+    {
+        key: '2XL',
+        label: '2XL',
+        value: '2XL',
+        disabled: false,
+    },
+    {
+        key: '3XL',
+        label: '3XL',
+        value: '3XL',
+        disabled: false,
+    },
+    {
+        key: '4XL',
+        label: '4XL',
+        value: '4XL',
+        disabled: false,
+    },
+];
+
 var ErrorText = newStyled.h3(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"], ["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"])), function (props) { return props.color; });
 var ErrorContainer = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 12px;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 12px;\n"])));
 var Error$1 = function (_a) {
@@ -6218,6 +6306,7 @@ exports.BeforeAfterVariant = void 0;
     BeforeAfterVariant["ResultFeedback"] = "ResultFeedback";
 })(exports.BeforeAfterVariant || (exports.BeforeAfterVariant = {}));
 var componentSizeMapper = (_a$2 = {},
+    _a$2[exports.ComponentSize.XXSmall] = exports.ComponentSize.Small,
     _a$2[exports.ComponentSize.XSmall] = exports.ComponentSize.Small,
     _a$2[exports.ComponentSize.Small] = exports.ComponentSize.Small,
     _a$2[exports.ComponentSize.Medium] = exports.ComponentSize.Medium,
@@ -6619,6 +6708,13 @@ var LabelStyles = {
             fontWeight: theme.component.rating.fontWeight,
         });
     },
+    xxsmall: function (theme) {
+        return css({
+            fontSize: theme.component.rating.size.xxsmall.fontSize,
+            lineHeight: theme.component.rating.size.xxsmall.lineHeight,
+            marginLeft: '0.1rem',
+        });
+    },
     xsmall: function (theme) {
         return css({
             fontSize: theme.component.rating.size.xsmall.fontSize,
@@ -6766,7 +6862,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
 var ImageHoverContainer$3 = newStyled.img(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n"], ["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n"])));
 var Container$12 = newStyled.a(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  text-decoration: none;\n\n  &:hover .hover__image {\n    opacity: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  text-decoration: none;\n\n  &:hover .hover__image {\n    opacity: 1;\n  }\n"])));
 var ProdCardContainer$4 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"])));
-var Title$7 = newStyled.p(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n\n  ", "\n\n  ", "\n\n  @media (max-width: ", "px) {\n    font-size: ", ";\n  }\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n\n  ", "\n\n  ", "\n\n  @media (max-width: ", "px) {\n    font-size: ", ";\n  }\n"])), function (_a) {
+var Title$7 = newStyled.h2(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n\n  ", "\n\n  ", "\n\n  @media (max-width: ", "px) {\n    font-size: ", ";\n  }\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n\n  ", "\n\n  ", "\n\n  @media (max-width: ", "px) {\n    font-size: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return STYLES_BY_THEME[theme.name].title.fontSize;
 }, function (_a) {
@@ -7198,6 +7294,7 @@ var sizeMapper = (_a = {},
     _a[exports.ComponentSize.Medium] = 'medium',
     _a[exports.ComponentSize.Large] = 'large',
     _a[exports.ComponentSize.XSmall] = 'small',
+    _a[exports.ComponentSize.XXSmall] = 'small',
     _a);
 var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n  width: ", ";\n  font-size: ", ";\n  padding: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n  svg {\n    color: inherit;\n  }\n"], ["\n  width: ", ";\n  font-size: ", ";\n  padding: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n  svg {\n    color: inherit;\n  }\n"])), function (_a) {
     var wide = _a.wide;
@@ -21588,6 +21685,7 @@ var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __ma
     return (size ? size : '100%');
 });
 var borderSize = {
+    xxsmall: '0.5px',
     xsmall: '1px',
     small: '1.5px',
     medium: '2px',
@@ -21889,6 +21987,8 @@ exports.Totals = Totals;
 exports.TrackingProgress = TrackingProgress;
 exports.TrackingProgressV2 = TrackingProgressV2;
 exports.Video = Video$1;
+exports.benefits = benefits;
+exports.benefitsRawHtml = benefitsRawHtml;
 exports.buildImageUrl = buildImageUrl;
 exports.componentSizeMapper = componentSizeMapper;
 exports.createCache = createCache;
@@ -21896,6 +21996,7 @@ exports.css = css;
 exports.decimalFormat = decimalFormat;
 exports.formatPrice = formatPrice;
 exports.getSrcSet = getSrcSet;
+exports.isDangerouslySetInnerHTML = isDangerouslySetInnerHTML;
 exports.isEmail = isEmail;
 exports.isEmpty = isEmpty;
 exports.isNumber = isNumber$1;
@@ -21905,8 +22006,10 @@ exports.mediaQueries = mediaQueries;
 exports.modalEvent = modalEvent;
 exports.seasonOfferRoundedTag = SeasonOfferRoundedTag;
 exports.simulateMouseClick = simulateMouseClick;
+exports.sizeOptions = sizeOptions;
 exports.sliceString = sliceString;
 exports.styled = newStyled;
+exports.title = title;
 exports.useDeviceType = useDeviceType;
 exports.useModal = useModal;
 exports.useModalEvent = useModalEvent;