@trafilea/afrodita-components 6.57.0 → 6.57.2

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.
Files changed (6) hide show
  1. package/build/index.d.ts +2 -0
  2. package/build/index.esm.js +55 -27
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +55 -27
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.d.ts CHANGED
@@ -175,6 +175,7 @@ declare const HorizontalDivider: _emotion_styled.StyledComponent<{
175
175
  declare type StyledIconProps = {
176
176
  backgroundColor?: string;
177
177
  opacity?: number | string;
178
+ showTooltipTitle?: boolean;
178
179
  };
179
180
 
180
181
  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';
@@ -200,6 +201,7 @@ declare type IconProps$1 = {
200
201
  name: IconName;
201
202
  svgProps?: Omit<SVGProps<SVGElement>, 'ref'>;
202
203
  className?: string;
204
+ showTooltipTitle?: boolean;
203
205
  } & StyledIconProps;
204
206
 
205
207
  declare const Icon$1: react__default.NamedExoticComponent<IconProps$1>;
package/build/index.esm.js CHANGED
@@ -3538,9 +3538,9 @@ var getWrapperFlexDirection = function (position) {
3538
3538
  case ComponentPosition.Bottom:
3539
3539
  return 'column-reverse';
3540
3540
  case ComponentPosition.BottomLeft:
3541
- return 'column-reverse';
3541
+ return 'row-reverse';
3542
3542
  case ComponentPosition.BottomRight:
3543
- return 'column-reverse';
3543
+ return 'row';
3544
3544
  case ComponentPosition.Left:
3545
3545
  return 'row-reverse';
3546
3546
  case ComponentPosition.Right:
@@ -3554,9 +3554,9 @@ var getContainerFlexDirection = function (position) {
3554
3554
  case ComponentPosition.Bottom:
3555
3555
  return 'column-reverse';
3556
3556
  case ComponentPosition.BottomLeft:
3557
- return 'column-reverse';
3557
+ return 'row';
3558
3558
  case ComponentPosition.BottomRight:
3559
- return 'column-reverse';
3559
+ return 'row-reverse';
3560
3560
  case ComponentPosition.Left:
3561
3561
  return 'row';
3562
3562
  case ComponentPosition.Right:
@@ -3570,9 +3570,9 @@ var getArrowStyles = function (position, borderColor, backgroundColor) {
3570
3570
  case ComponentPosition.Bottom:
3571
3571
  return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 0%;\n left: 50%;\n margin-left: -10px;\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 }");
3572
3572
  case ComponentPosition.BottomLeft:
3573
- return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 0%;\n left: 65%;\n margin-left: -10px;\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 }");
3573
+ 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 }");
3574
3574
  case ComponentPosition.BottomRight:
3575
- return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 0%;\n left: 15%;\n margin-left: -10px;\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 }");
3575
+ 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 }");
3576
3576
  case ComponentPosition.Left:
3577
3577
  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 }");
3578
3578
  case ComponentPosition.Right:
@@ -3586,14 +3586,32 @@ var getTooltipAlignItems = function (position, align) {
3586
3586
  case ComponentPosition.Bottom:
3587
3587
  return align;
3588
3588
  case ComponentPosition.BottomLeft:
3589
- return align;
3589
+ return 'center';
3590
3590
  case ComponentPosition.BottomRight:
3591
- return align;
3591
+ return 'center';
3592
3592
  case ComponentPosition.Left:
3593
3593
  return 'center';
3594
3594
  case ComponentPosition.Right:
3595
3595
  return 'center';
3596
3596
  }
3597
+ };
3598
+ var getCloseIconRight = function (position, defaultRight) {
3599
+ switch (position) {
3600
+ case ComponentPosition.BottomLeft:
3601
+ case ComponentPosition.BottomRight:
3602
+ return '.55rem';
3603
+ default:
3604
+ return defaultRight;
3605
+ }
3606
+ };
3607
+ var getTooltipTextMaxWidth = function (position) {
3608
+ switch (position) {
3609
+ case ComponentPosition.BottomLeft:
3610
+ case ComponentPosition.BottomRight:
3611
+ return '203px';
3612
+ default:
3613
+ return undefined;
3614
+ }
3597
3615
  };
3598
3616
 
3599
3617
  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) {
@@ -3634,13 +3652,13 @@ var TooltipContainer = newStyled.div(templateObject_2$1T || (templateObject_2$1T
3634
3652
  var getTooltipMargin = function (actual, expected, margin) {
3635
3653
  if ((actual === ComponentPosition.BottomLeft || actual === ComponentPosition.BottomRight) &&
3636
3654
  expected === ComponentPosition.Bottom) {
3637
- return "calc(".concat(margin, " - 10px)");
3655
+ return "calc(".concat(margin, " - 37px)");
3638
3656
  }
3639
- if (actual === ComponentPosition.BottomLeft && expected === ComponentPosition.Right) {
3640
- return '-80px';
3657
+ if (actual === ComponentPosition.BottomRight && expected === ComponentPosition.Right) {
3658
+ return '-30px';
3641
3659
  }
3642
- if (actual === ComponentPosition.BottomRight && expected === ComponentPosition.Left) {
3643
- return '-190px';
3660
+ if (actual === ComponentPosition.BottomLeft && expected === ComponentPosition.Left) {
3661
+ return '-40px';
3644
3662
  }
3645
3663
  return actual === expected ? margin : '0';
3646
3664
  };
@@ -3655,8 +3673,8 @@ var TooltipText = newStyled.div(templateObject_4$17 || (templateObject_4$17 = __
3655
3673
  var theme = _a.theme;
3656
3674
  return theme.component.autoship.tooltip.text.alignment;
3657
3675
  }, function (_a) {
3658
- var theme = _a.theme;
3659
- return theme.component.autoship.tooltip.text.maxWidth;
3676
+ var theme = _a.theme, maxWidth = _a.maxWidth;
3677
+ return maxWidth !== null && maxWidth !== void 0 ? maxWidth : theme.component.autoship.tooltip.text.maxWidth;
3660
3678
  }, function (_a) {
3661
3679
  var color = _a.color;
3662
3680
  return color;
@@ -3691,12 +3709,12 @@ var Tooltip = function (_a) {
3691
3709
  var ref = tooltipRef.current;
3692
3710
  setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
3693
3711
  }, [tooltipRef]);
3694
- 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 }, { 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, {
3712
+ 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, {
3695
3713
  testId: 'HeaderIcon',
3696
3714
  fill: (header === null || header === void 0 ? void 0 : header.iconFill)
3697
3715
  ? header === null || header === void 0 ? void 0 : header.iconFill
3698
3716
  : theme.colors.pallete.secondary.color,
3699
- }) }, 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));
3717
+ }) }, 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));
3700
3718
  };
3701
3719
 
3702
3720
  var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2C || (templateObject_1$2C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
@@ -3756,7 +3774,9 @@ var PriceLabelV2$1 = function (_a) {
3756
3774
  letterSpacing: '-0.05rem',
3757
3775
  }, bordersRounded: bordersRounded, savings: savingsDisplay ? "Save ".concat(currencySymbol).concat(savetoString) : undefined }), void 0)) }), void 0)), tooltipText && (jsx$1(TooltipContainer$1, __assign$1({ "data-testid": "tooltip-container" }, { children: jsx$1(Tooltip, __assign$1({ showCloseIcon: true, withArrow: true, content: {
3758
3776
  text: tooltipText,
3759
- }, position: tooltipPosition !== null && tooltipPosition !== void 0 ? tooltipPosition : (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: {
3777
+ }, position: tooltipPosition !== null && tooltipPosition !== void 0 ? tooltipPosition : (isDiscount && isMobile
3778
+ ? ComponentPosition.BottomLeft
3779
+ : 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: {
3760
3780
  borderRadius: '8px',
3761
3781
  width: '107px',
3762
3782
  height: '28px',
@@ -3983,7 +4003,7 @@ var SkeletonBox = function (_a) {
3983
4003
  };
3984
4004
  var templateObject_1$2v;
3985
4005
 
3986
- 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) {
4006
+ 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) {
3987
4007
  var width = _a.width;
3988
4008
  return width;
3989
4009
  }, function (_a) {
@@ -3998,8 +4018,12 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u
3998
4018
  }, function (_a) {
3999
4019
  var opacity = _a.opacity;
4000
4020
  return opacity && "opacity: ".concat(opacity, ";");
4021
+ }, function (_a) {
4022
+ var showTooltipTitle = _a.showTooltipTitle;
4023
+ return !showTooltipTitle &&
4024
+ "\n use {\n pointer-events: none;\n }\n ";
4001
4025
  });
4002
- 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) {
4026
+ 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) {
4003
4027
  var width = _a.width;
4004
4028
  return width;
4005
4029
  }, function (_a) {
@@ -4011,6 +4035,10 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$
4011
4035
  }, function (_a) {
4012
4036
  var opacity = _a.opacity;
4013
4037
  return opacity && "opacity: ".concat(opacity, ";");
4038
+ }, function (_a) {
4039
+ var showTooltipTitle = _a.showTooltipTitle;
4040
+ return !showTooltipTitle &&
4041
+ "\n use {\n pointer-events: none;\n }\n ";
4014
4042
  });
4015
4043
  var templateObject_1$2u, templateObject_2$1P;
4016
4044
 
@@ -4091,9 +4119,9 @@ var getIconDimension = function (dimension) {
4091
4119
  };
4092
4120
 
4093
4121
  var UnmemoIconFromExtSource = function (_a) {
4094
- 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"]);
4095
- var _b = useState(false), error = _b[0], setError = _b[1];
4096
- var _c = useState(), localSource = _c[0], setLocalSource = _c[1];
4122
+ 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"]);
4123
+ var _c = useState(false), error = _c[0], setError = _c[1];
4124
+ var _d = useState(), localSource = _d[0], setLocalSource = _d[1];
4097
4125
  useEffect(function () {
4098
4126
  var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
4099
4127
  var localSource;
@@ -4127,13 +4155,13 @@ var UnmemoIconFromExtSource = function (_a) {
4127
4155
  if (!fill && !svgProps) {
4128
4156
  return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
4129
4157
  }
4130
- 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));
4158
+ 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));
4131
4159
  };
4132
4160
  var IconFromExtSource = React__default.memo(UnmemoIconFromExtSource);
4133
4161
 
4134
4162
  /* eslint-disable react/forbid-component-props */
4135
4163
  var UnmemoIcon = function (_a) {
4136
- 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"]);
4164
+ 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"]);
4137
4165
  var assets = useTheme().assets;
4138
4166
  var newWidth = width && getIconDimension(width);
4139
4167
  var newHeight = height ? getIconDimension(height) : getIconDimension(width);
@@ -4141,9 +4169,9 @@ var UnmemoIcon = function (_a) {
4141
4169
  var svgSplit = name.split('/');
4142
4170
  var svgId = svgSplit[svgSplit.length - 1];
4143
4171
  if (assets.isSameOriginIcons) {
4144
- 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));
4172
+ 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));
4145
4173
  }
4146
- 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));
4174
+ 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));
4147
4175
  };
4148
4176
  var Icon$1 = React__default.memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
4149
4177