@trafilea/afrodita-components 6.57.1 → 6.57.3

package/build/index.d.ts

@@ -175,6 +175,7 @@ declare const HorizontalDivider: _emotion_styled.StyledComponent<{
 declare type StyledIconProps = {
     backgroundColor?: string;
     opacity?: number | string;
+    showTooltipTitle?: boolean;
 };
 
 declare type Actions$1 = 'actions/add' | 'actions/check_box_empty' | 'actions/check_box_light' | 'actions/check_box_solid' | 'actions/check' | 'actions/circle_check' | 'actions/circle_clear' | 'actions/circle_info' | 'actions/circle_minus' | 'actions/circle_plus' | 'actions/circle_question' | 'actions/circle_solid_check' | 'actions/circle_solid_clear' | 'actions/circle_solid_info' | 'actions/circle_solid_minus' | 'actions/circle_solid_plus' | 'actions/circle_solid_question' | 'actions/circle_solid_styled_check' | 'actions/circle_solid_warning' | 'actions/circle_solid_reload' | 'actions/circle_warning' | 'actions/clear_light' | 'actions/close' | 'actions/copy_outlined' | 'actions/copy' | 'actions/edit' | 'actions/light_check' | 'actions/light_exclamation' | 'actions/like_solid' | 'actions/like' | 'actions/like_bold' | 'actions/minus' | 'actions/not_allowed' | 'actions/question' | 'actions/radio_empty' | 'actions/radio_filled' | 'actions/settings_solid' | 'actions/settings' | 'actions/share' | 'actions/signout' | 'actions/signout_light' | 'actions/trash' | 'actions/warning' | 'actions/navigate' | 'actions/camera';
@@ -187,7 +188,7 @@ declare type MyAccount$1 = 'myaccount/birthday_gifts' | 'myaccount/community' |
 declare type Navigation$1 = 'navigation/address_information' | 'navigation/benefits' | 'navigation/club_membership' | 'navigation/ellipsis' | 'navigation/ellipsis_horizontal' | 'navigation/filters' | 'navigation/hamburger' | 'navigation/home' | 'navigation/home_solid' | 'navigation/loading' | 'navigation/lock' | 'navigation/lock_solid' | 'navigation/map_marker' | 'navigation/map_marker_light' | 'navigation/map_solid' | 'navigation/menu_lines' | 'navigation/search' | 'navigation/shaperbox' | 'navigation/shopping_bag' | 'navigation/shopping_bag_v2' | 'navigation/shopping_bag_v3' | 'navigation/shopping_bag_v4' | 'navigation/shopping_cart' | 'navigation/shopping_cart_v2' | 'navigation/slide_dot' | 'navigation/slide_dot_solid' | 'navigation/user' | 'navigation/address_information_light' | 'navigation/user_solid' | 'navigation/user_v2' | 'navigation/filters_v2' | 'navigation/gift';
 declare type Other$1 = 'other/bod_con_label' | 'other/bod_con_mobile_label' | 'other/call_us' | 'other/chat' | 'other/email' | 'other/express_shipping' | 'other/fit_guarantee' | 'other/fit_predictor' | 'other/free_exchange' | 'other/get_discount' | 'other/hassel_free_returns' | 'other/loading' | 'other/mc_afee' | 'other/megafone' | 'other/play' | 'other/qr_code' | 'other/question_with_circle' | 'other/revel_beauty' | 'other/shapermint' | 'other/shapermint_club_icon' | 'other/shapermint_club_icon2' | 'other/shapermint_club_label' | 'other/shapermint_club_mobile_label' | 'other/shapermint_logo' | 'other/shm_club' | 'other/shop_now' | 'other/sign_form' | 'other/sixty_days_tsd' | 'other/the_bod_con' | 'other/the_spa_dr' | 'other/lock' | 'other/help_center' | 'other/arrow_outward' | 'other/coupons' | 'other/flag_usa' | 'other/flag_canada' | 'other/flag_aus' | 'other/flag_uk' | 'other/flag_nz' | 'other/flag_sg';
 declare type Payment$1 = 'payment/amazon' | 'payment/amex' | 'payment/jcb' | 'payment/klarna' | 'payment/master_card' | 'payment/paypal' | 'payment/visa' | 'payment/payment_methods';
-declare type PDP$1 = 'pdp/circle_number' | 'pdp/clock' | 'pdp/drop' | 'pdp/drop_empty' | 'pdp/error_cross' | 'pdp/flag_usa' | 'pdp/hours' | 'pdp/klarna_logo' | 'pdp/light_bulb' | 'pdp/free_returns_v2' | 'pdp/free_shipping_v2' | 'pdp/loading_trafisizy' | 'pdp/minus' | 'pdp/moon' | 'pdp/new_clock' | 'pdp/play_mini' | 'pdp/play_video' | 'pdp/plus' | 'pdp/rule' | 'pdp/shipping' | 'pdp/shipping_empty' | 'pdp/size_empty' | 'pdp/size_empty_v2' | 'pdp/size_with_stars' | 'pdp/star' | 'pdp/stars' | 'pdp/star_empty' | 'pdp/star_half' | 'pdp/stopwatch' | 'pdp/drop_v2' | 'pdp/few_drops' | 'pdp/trust_badge' | 'pdp/verified' | 'pdp/wrinkle_free_face' | 'pdp/skin_appearance' | 'pdp/shine_heart' | 'pdp/cruelty_free' | 'pdp/ph_formula' | 'pdp/box' | 'pdp/afterpay_logo' | 'pdp/trustpilot_star' | 'pdp/trustpilot_half_star';
+declare type PDP$1 = 'pdp/circle_number' | 'pdp/clock' | 'pdp/drop' | 'pdp/drop_empty' | 'pdp/error_cross' | 'pdp/flag_usa' | 'pdp/hours' | 'pdp/klarna_logo' | 'pdp/light_bulb' | 'pdp/free_returns_v2' | 'pdp/free_shipping_v2' | 'pdp/loading_trafisizy' | 'pdp/minus' | 'pdp/moon' | 'pdp/tape_measure' | 'pdp/new_clock' | 'pdp/play_mini' | 'pdp/play_video' | 'pdp/plus' | 'pdp/rule' | 'pdp/shipping' | 'pdp/shipping_empty' | 'pdp/size_empty' | 'pdp/size_empty_v2' | 'pdp/size_with_stars' | 'pdp/star' | 'pdp/stars' | 'pdp/star_empty' | 'pdp/star_half' | 'pdp/stopwatch' | 'pdp/drop_v2' | 'pdp/few_drops' | 'pdp/trust_badge' | 'pdp/verified' | 'pdp/wrinkle_free_face' | 'pdp/skin_appearance' | 'pdp/shine_heart' | 'pdp/cruelty_free' | 'pdp/ph_formula' | 'pdp/box' | 'pdp/afterpay_logo' | 'pdp/trustpilot_star' | 'pdp/trustpilot_half_star';
 declare type SlideDots$1 = 'slidedots/slide_dot';
 declare type SocialMedia$1 = 'socialmedia/facebook' | 'socialmedia/facebook_solid' | 'socialmedia/instagram' | 'socialmedia/instagram_solid' | 'socialmedia/interaction' | 'socialmedia/pinterest' | 'socialmedia/twitter' | 'socialmedia/youtube' | 'socialmedia/spotify' | 'socialmedia/apple_podcast';
 declare type IconName = Actions$1 | Arrows$1 | Custom$1 | Download$1 | Emoji$1 | Messaging$1 | MyAccount$1 | Navigation$1 | Other$1 | Payment$1 | PDP$1 | SlideDots$1 | SocialMedia$1;
@@ -200,6 +201,7 @@ declare type IconProps$1 = {
     name: IconName;
     svgProps?: Omit<SVGProps<SVGElement>, 'ref'>;
     className?: string;
+    showTooltipTitle?: boolean;
 } & StyledIconProps;
 
 declare const Icon$1: react__default.NamedExoticComponent<IconProps$1>;
@@ -1127,6 +1129,8 @@ declare const LightBulb: IconComponent;
 
 declare const LoadingTrafisizy: IconComponent;
 
+declare const TapeMeasure: IconComponent;
+
 declare const Minus: IconComponent;
 
 declare const Moon: IconComponent;
@@ -1184,6 +1188,7 @@ declare const PDP_Hours: typeof Hours;
 declare const PDP_KlarnaLogo: typeof KlarnaLogo;
 declare const PDP_LightBulb: typeof LightBulb;
 declare const PDP_LoadingTrafisizy: typeof LoadingTrafisizy;
+declare const PDP_TapeMeasure: typeof TapeMeasure;
 declare const PDP_Minus: typeof Minus;
 declare const PDP_Moon: typeof Moon;
 declare const PDP_NewClock: typeof NewClock;
@@ -1222,6 +1227,7 @@ declare namespace PDP {
     PDP_KlarnaLogo as KlarnaLogo,
     PDP_LightBulb as LightBulb,
     PDP_LoadingTrafisizy as LoadingTrafisizy,
+    PDP_TapeMeasure as TapeMeasure,
     PDP_Minus as Minus,
     PDP_Moon as Moon,
     PDP_NewClock as NewClock,

package/build/index.esm.js

@@ -3572,7 +3572,7 @@ var getArrowStyles = function (position, borderColor, backgroundColor) {
         case ComponentPosition.BottomLeft:
             return "\n     &::before,&::after\n      {\n      content: '';\n      position: absolute;\n      top: 0%;\n      left: 171px;\n      margin-top: -9px;\n      border: 10px solid transparent;\n      border-top: 0;\n      }\n      \n      &::before {\n        border-bottom: 10px solid ".concat(borderColor, ";\n        margin-top: -10px;\n      }\n      &::after {\n        border-bottom: 10px solid ").concat(backgroundColor, ";\n        z-index: 999;\n      }");
         case ComponentPosition.BottomRight:
-            return "\n     &::before,&::after\n      {\n      content: '';\n      position: absolute;\n      top: 0%;\n      left: 38px;\n      margin-top: -9px;\n      border: 10px solid transparent;\n      border-top: 0;\n      }\n      \n      &::before {\n        border-bottom: 10px solid ".concat(borderColor, ";\n        margin-top: -10px;\n      }\n      &::after {\n        border-bottom: 10px solid ").concat(backgroundColor, ";\n        z-index: 999;\n      }");
+            return "\n     &::before,&::after\n      {\n      content: '';\n      position: absolute;\n      top: 0%;\n      left: 28px;\n      margin-top: -9px;\n      border: 10px solid transparent;\n      border-top: 0;\n      }\n      \n      &::before {\n        border-bottom: 10px solid ".concat(borderColor, ";\n        margin-top: -10px;\n      }\n      &::after {\n        border-bottom: 10px solid ").concat(backgroundColor, ";\n        z-index: 999;\n      }");
         case ComponentPosition.Left:
             return "\n      &::before,&::after\n      {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 100%;\n      margin-top: -10px;\n      border: 10px solid transparent;\n      border-right: 0;s\n      border-left: 10px solid transparent;\n      margin-left: -1px;\n      }\n      \n      &::before {\n        border-left: 10px solid ".concat(borderColor, ";\n       \n      }\n      &::after {\n        border-left: 10px solid ").concat(backgroundColor, ";\n        z-index: 999;\n      }");
         case ComponentPosition.Right:
@@ -3594,6 +3594,24 @@ var getTooltipAlignItems = function (position, align) {
         case ComponentPosition.Right:
             return 'center';
     }
+};
+var getCloseIconRight = function (position, defaultRight) {
+    switch (position) {
+        case ComponentPosition.BottomLeft:
+        case ComponentPosition.BottomRight:
+            return '.55rem';
+        default:
+            return defaultRight;
+    }
+};
+var getTooltipTextMaxWidth = function (position) {
+    switch (position) {
+        case ComponentPosition.BottomLeft:
+        case ComponentPosition.BottomRight:
+            return '203px';
+        default:
+            return undefined;
+    }
 };
 
 var Wrapper$8 = newStyled.div(templateObject_1$2D || (templateObject_1$2D = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: ", ";\n      opacity: ", ";\n      cursor: text;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: ", ";\n      opacity: ", ";\n      cursor: text;\n    }\n  }\n"])), function (_a) {
@@ -3637,10 +3655,10 @@ var getTooltipMargin = function (actual, expected, margin) {
         return "calc(".concat(margin, " - 37px)");
     }
     if (actual === ComponentPosition.BottomRight && expected === ComponentPosition.Right) {
-        return '-40px';
+        return '-30px';
     }
     if (actual === ComponentPosition.BottomLeft && expected === ComponentPosition.Left) {
-        return '-80px';
+        return '-40px';
     }
     return actual === expected ? margin : '0';
 };
@@ -3655,8 +3673,8 @@ var TooltipText = newStyled.div(templateObject_4$17 || (templateObject_4$17 = __
     var theme = _a.theme;
     return theme.component.autoship.tooltip.text.alignment;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.component.autoship.tooltip.text.maxWidth;
+    var theme = _a.theme, maxWidth = _a.maxWidth;
+    return maxWidth !== null && maxWidth !== void 0 ? maxWidth : theme.component.autoship.tooltip.text.maxWidth;
 }, function (_a) {
     var color = _a.color;
     return color;
@@ -3691,12 +3709,12 @@ var Tooltip = function (_a) {
         var ref = tooltipRef.current;
         setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
     }, [tooltipRef]);
-    return (jsxs$1(Wrapper$8, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow, "data-position": position }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper$1, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$6, { children: React__default.createElement(header.Icon, {
+    return (jsxs$1(Wrapper$8, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow, "data-position": position }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ right: getCloseIconRight(position, header === null || header === void 0 ? void 0 : header.iconRight), onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper$1, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$6, { children: React__default.createElement(header.Icon, {
                                             testId: 'HeaderIcon',
                                             fill: (header === null || header === void 0 ? void 0 : header.iconFill)
                                                 ? header === null || header === void 0 ? void 0 : header.iconFill
                                                 : theme.colors.pallete.secondary.color,
-                                        }) }, void 0)), jsx$1(Title$b, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) ? (jsx$1(TooltipText, { color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0)) : (elementContent)] }), void 0)] }), void 0)] }), void 0));
+                                        }) }, void 0)), jsx$1(Title$b, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) ? (jsx$1(TooltipText, { color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text }, maxWidth: getTooltipTextMaxWidth(position) }, void 0)) : (elementContent)] }), void 0)] }), void 0)] }), void 0));
 };
 
 var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2C || (templateObject_1$2C = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
@@ -3758,7 +3776,7 @@ var PriceLabelV2$1 = function (_a) {
                         text: tooltipText,
                     }, position: tooltipPosition !== null && tooltipPosition !== void 0 ? tooltipPosition : (isDiscount && isMobile
                         ? ComponentPosition.BottomLeft
-                        : ComponentPosition.BottomRight), "data-testid": "tooltip" }, { children: jsx$1(Icon$1, { name: tooltipIcon !== null && tooltipIcon !== void 0 ? tooltipIcon : 'actions/circle_info', fill: theme.colors.shades[500].color, testId: "tooltip-icon" }, void 0) }), void 0) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
+                        : ComponentPosition.BottomRight), closeBtnSize: 0.7, "data-testid": "tooltip" }, { children: jsx$1(Icon$1, { name: tooltipIcon !== null && tooltipIcon !== void 0 ? tooltipIcon : 'actions/circle_info', fill: theme.colors.shades[500].color, testId: "tooltip-icon", showTooltipTitle: false }, void 0) }), void 0) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
                         borderRadius: '8px',
                         width: '107px',
                         height: '28px',
@@ -3985,7 +4003,7 @@ var SkeletonBox = function (_a) {
 };
 var templateObject_1$2v;
 
-var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"])), function (_a) {
+var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var width = _a.width;
     return width;
 }, function (_a) {
@@ -4000,8 +4018,12 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u
 }, function (_a) {
     var opacity = _a.opacity;
     return opacity && "opacity: ".concat(opacity, ";");
+}, function (_a) {
+    var showTooltipTitle = _a.showTooltipTitle;
+    return !showTooltipTitle &&
+        "\n    use {\n      pointer-events: none;\n    }\n  ";
 });
-var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$1P = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"])), function (_a) {
+var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$1P = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var width = _a.width;
     return width;
 }, function (_a) {
@@ -4013,6 +4035,10 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$
 }, function (_a) {
     var opacity = _a.opacity;
     return opacity && "opacity: ".concat(opacity, ";");
+}, function (_a) {
+    var showTooltipTitle = _a.showTooltipTitle;
+    return !showTooltipTitle &&
+        "\n    use {\n      pointer-events: none;\n    }\n  ";
 });
 var templateObject_1$2u, templateObject_2$1P;
 
@@ -4093,9 +4119,9 @@ var getIconDimension = function (dimension) {
 };
 
 var UnmemoIconFromExtSource = function (_a) {
-    var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId"]);
-    var _b = useState(false), error = _b[0], setError = _b[1];
-    var _c = useState(), localSource = _c[0], setLocalSource = _c[1];
+    var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, _b = _a.showTooltipTitle, showTooltipTitle = _b === void 0 ? true : _b, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId", "showTooltipTitle"]);
+    var _c = useState(false), error = _c[0], setError = _c[1];
+    var _d = useState(), localSource = _d[0], setLocalSource = _d[1];
     useEffect(function () {
         var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
             var localSource;
@@ -4129,13 +4155,13 @@ var UnmemoIconFromExtSource = function (_a) {
     if (!fill && !svgProps) {
         return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
     }
-    return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
+    return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { showTooltipTitle: showTooltipTitle }, { children: [showTooltipTitle && jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
 };
 var IconFromExtSource = React__default.memo(UnmemoIconFromExtSource);
 
 /* eslint-disable react/forbid-component-props */
 var UnmemoIcon = function (_a) {
-    var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps"]);
+    var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, _c = _a.showTooltipTitle, showTooltipTitle = _c === void 0 ? true : _c, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "showTooltipTitle"]);
     var assets = useTheme().assets;
     var newWidth = width && getIconDimension(width);
     var newHeight = height ? getIconDimension(height) : getIconDimension(width);
@@ -4143,9 +4169,9 @@ var UnmemoIcon = function (_a) {
     var svgSplit = name.split('/');
     var svgId = svgSplit[svgSplit.length - 1];
     if (assets.isSameOriginIcons) {
-        return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
+        return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { showTooltipTitle: showTooltipTitle }, { children: [showTooltipTitle && jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
     }
-    return (jsx$1(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
+    return (jsx$1(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title, showTooltipTitle: showTooltipTitle }, rest), void 0));
 };
 var Icon$1 = React__default.memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
 
@@ -4916,6 +4942,8 @@ var LightBulb = function (props) { return jsx$1(Icon$1, __assign$1({}, props, {
 
 var LoadingTrafisizy = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/loading_trafisizy" }), void 0); };
 
+var TapeMeasure = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/tape_measure" }), void 0)); };
+
 var Minus = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/minus" }), void 0); };
 
 var Moon = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/moon" }), void 0); };
@@ -4975,6 +5003,7 @@ var PDP = /*#__PURE__*/Object.freeze({
     KlarnaLogo: KlarnaLogo,
     LightBulb: LightBulb,
     LoadingTrafisizy: LoadingTrafisizy,
+    TapeMeasure: TapeMeasure,
     Minus: Minus,
     Moon: Moon,
     NewClock: NewClock,