@trafilea/afrodita-components 6.17.1 → 6.17.3

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.d.ts CHANGED
@@ -1910,6 +1910,8 @@ declare type ThemeComponent = {
1910
1910
  button: {
1911
1911
  borderRadius: string;
1912
1912
  };
1913
+ width?: string;
1914
+ height?: string;
1913
1915
  };
1914
1916
  copyrightText: {
1915
1917
  fontSize: string;
@@ -2062,6 +2064,13 @@ declare type ThemeComponent = {
2062
2064
  backgroundColor: string;
2063
2065
  borderRadius: string;
2064
2066
  };
2067
+ tooltip: {
2068
+ margin: string;
2069
+ text: {
2070
+ alignment: string;
2071
+ maxWidth: string;
2072
+ };
2073
+ };
2065
2074
  };
2066
2075
  };
2067
2076
  declare type ThemeTypography = {
@@ -2111,6 +2120,41 @@ declare type ThemeAssets = {
2111
2120
  width: string;
2112
2121
  height: string;
2113
2122
  };
2123
+ tyImage?: {
2124
+ url: string;
2125
+ width: string;
2126
+ height: string;
2127
+ };
2128
+ appleImage?: {
2129
+ url: string;
2130
+ width: string;
2131
+ height: string;
2132
+ };
2133
+ spotifyImage?: {
2134
+ url: string;
2135
+ width: string;
2136
+ height: string;
2137
+ };
2138
+ instagramImage?: {
2139
+ url: string;
2140
+ width: string;
2141
+ height: string;
2142
+ };
2143
+ facebookImage?: {
2144
+ url: string;
2145
+ width: string;
2146
+ height: string;
2147
+ };
2148
+ pinterestImage?: {
2149
+ url: string;
2150
+ width: string;
2151
+ height: string;
2152
+ };
2153
+ youtubeImage?: {
2154
+ url: string;
2155
+ width: string;
2156
+ height: string;
2157
+ };
2114
2158
  };
2115
2159
  [key: string]: any;
2116
2160
  };
@@ -4185,7 +4185,7 @@ var TAGS = {
4185
4185
  heading4: newStyled.h4(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject([""], [""]))),
4186
4186
  heading5: newStyled.h5(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject([""], [""]))),
4187
4187
  heading6: newStyled.h6(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject([""], [""]))),
4188
- heading7: newStyled.h1(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""]))),
4188
+ heading7: newStyled.h1(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""]))),
4189
4189
  heading8: newStyled.h1(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
4190
4190
  body: newStyled.p(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([""], [""]))),
4191
4191
  link: newStyled.a(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
@@ -4309,7 +4309,7 @@ var DEFAULTS = {
4309
4309
  size: 'regular',
4310
4310
  },
4311
4311
  };
4312
- var templateObject_1$1Y, templateObject_2$1k, templateObject_3$10, templateObject_4$M, templateObject_5$y, templateObject_6$s, templateObject_7$j, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
4312
+ var templateObject_1$1Y, templateObject_2$1k, templateObject_3$10, templateObject_4$M, templateObject_5$y, templateObject_6$s, templateObject_7$j, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
4313
4313
 
4314
4314
  var Container$1d = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
4315
4315
  var Card$3 = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
@@ -5192,6 +5192,101 @@ var RadioInput = function (_a) {
5192
5192
  };
5193
5193
  var templateObject_1$1L, templateObject_2$1b, templateObject_3$X, templateObject_4$J;
5194
5194
 
5195
+ var useOnClickOutside = function (ref, handler) {
5196
+ useEffect(function () {
5197
+ var listener = function (event) {
5198
+ // Do nothing if clicking ref's element or descendent elements
5199
+ var el = ref === null || ref === void 0 ? void 0 : ref.current;
5200
+ if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
5201
+ return;
5202
+ }
5203
+ handler(event);
5204
+ };
5205
+ document.addEventListener('mousedown', listener);
5206
+ document.addEventListener('touchstart', listener);
5207
+ return function () {
5208
+ document.removeEventListener('mousedown', listener);
5209
+ document.removeEventListener('touchstart', listener);
5210
+ };
5211
+ }, [ref, handler]);
5212
+ };
5213
+
5214
+ function getWindowDimensions() {
5215
+ if (typeof window === 'undefined')
5216
+ return { width: 0, height: 0 };
5217
+ var width = window.innerWidth, height = window.innerHeight;
5218
+ return {
5219
+ width: width,
5220
+ height: height,
5221
+ };
5222
+ }
5223
+ var getViewport = function (breakpoints, width) {
5224
+ if (width <= breakpoints.mobile)
5225
+ return Viewports.mobile;
5226
+ if (width <= breakpoints.tablet)
5227
+ return Viewports.tablet;
5228
+ if (width <= breakpoints.desktop)
5229
+ return Viewports.desktop;
5230
+ return Viewports.desktopLarge;
5231
+ };
5232
+ var useWindowDimensions = function (breakpoints, _a) {
5233
+ if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
5234
+ var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
5235
+ var _c = useState(function () {
5236
+ var dimension = getWindowDimensions();
5237
+ return {
5238
+ windowDimensions: dimension,
5239
+ viewport: getViewport(breakpoints, dimension.width),
5240
+ };
5241
+ }), state = _c[0], setState = _c[1];
5242
+ useEffect(function () {
5243
+ function handleResize() {
5244
+ var newDimension = getWindowDimensions();
5245
+ var newViewport = getViewport(breakpoints, newDimension.width);
5246
+ setState(function (oldState) {
5247
+ if (shouldListenChanges || oldState.viewport !== newViewport) {
5248
+ return {
5249
+ windowDimensions: newDimension,
5250
+ viewport: newViewport,
5251
+ };
5252
+ }
5253
+ return oldState;
5254
+ });
5255
+ }
5256
+ handleResize();
5257
+ window.addEventListener('resize', handleResize);
5258
+ return function () { return window.removeEventListener('resize', handleResize); };
5259
+ // eslint-disable-next-line react-hooks/exhaustive-deps
5260
+ }, [shouldListenChanges]);
5261
+ var isMobile = state.viewport === Viewports.mobile;
5262
+ var isTablet = state.viewport === Viewports.tablet;
5263
+ var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
5264
+ return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
5265
+ };
5266
+
5267
+ var useDeviceType = function () {
5268
+ var mobileBreakpoint = 768;
5269
+ var tabletBreakpoint = 1024;
5270
+ var _a = useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
5271
+ var handleResize = function () {
5272
+ if (window.innerWidth < mobileBreakpoint) {
5273
+ setDeviceType('mobile');
5274
+ }
5275
+ else if (window.innerWidth < tabletBreakpoint) {
5276
+ setDeviceType('tablet');
5277
+ }
5278
+ else {
5279
+ setDeviceType('desktop');
5280
+ }
5281
+ };
5282
+ useLayoutEffect(function () {
5283
+ window.addEventListener('resize', handleResize);
5284
+ handleResize();
5285
+ return function () { return window.removeEventListener('resize', handleResize); };
5286
+ }, []);
5287
+ return deviceType;
5288
+ };
5289
+
5195
5290
  var getWrapperFlexDirection = function (position) {
5196
5291
  switch (position) {
5197
5292
  case ComponentPosition.Top:
@@ -5286,7 +5381,13 @@ var ContentWrapper = newStyled.div(templateObject_3$W || (templateObject_3$W = _
5286
5381
  var backgroundColor = _a.backgroundColor;
5287
5382
  return backgroundColor;
5288
5383
  });
5289
- var TooltipText = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: center;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: center;\n color: ", ";\n"])), function (_a) {
5384
+ var TooltipText = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
5385
+ var theme = _a.theme;
5386
+ return theme.component.autoship.tooltip.text.alignment;
5387
+ }, function (_a) {
5388
+ var theme = _a.theme;
5389
+ return theme.component.autoship.tooltip.text.maxWidth;
5390
+ }, function (_a) {
5290
5391
  var color = _a.color;
5291
5392
  return color;
5292
5393
  });
@@ -5302,101 +5403,6 @@ var CloseToolTip = newStyled.button(templateObject_8$g || (templateObject_8$g =
5302
5403
  });
5303
5404
  var templateObject_1$1K, templateObject_2$1a, templateObject_3$W, templateObject_4$I, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$g;
5304
5405
 
5305
- var useOnClickOutside = function (ref, handler) {
5306
- useEffect(function () {
5307
- var listener = function (event) {
5308
- // Do nothing if clicking ref's element or descendent elements
5309
- var el = ref === null || ref === void 0 ? void 0 : ref.current;
5310
- if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
5311
- return;
5312
- }
5313
- handler(event);
5314
- };
5315
- document.addEventListener('mousedown', listener);
5316
- document.addEventListener('touchstart', listener);
5317
- return function () {
5318
- document.removeEventListener('mousedown', listener);
5319
- document.removeEventListener('touchstart', listener);
5320
- };
5321
- }, [ref, handler]);
5322
- };
5323
-
5324
- function getWindowDimensions() {
5325
- if (typeof window === 'undefined')
5326
- return { width: 0, height: 0 };
5327
- var width = window.innerWidth, height = window.innerHeight;
5328
- return {
5329
- width: width,
5330
- height: height,
5331
- };
5332
- }
5333
- var getViewport = function (breakpoints, width) {
5334
- if (width <= breakpoints.mobile)
5335
- return Viewports.mobile;
5336
- if (width <= breakpoints.tablet)
5337
- return Viewports.tablet;
5338
- if (width <= breakpoints.desktop)
5339
- return Viewports.desktop;
5340
- return Viewports.desktopLarge;
5341
- };
5342
- var useWindowDimensions = function (breakpoints, _a) {
5343
- if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
5344
- var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
5345
- var _c = useState(function () {
5346
- var dimension = getWindowDimensions();
5347
- return {
5348
- windowDimensions: dimension,
5349
- viewport: getViewport(breakpoints, dimension.width),
5350
- };
5351
- }), state = _c[0], setState = _c[1];
5352
- useEffect(function () {
5353
- function handleResize() {
5354
- var newDimension = getWindowDimensions();
5355
- var newViewport = getViewport(breakpoints, newDimension.width);
5356
- setState(function (oldState) {
5357
- if (shouldListenChanges || oldState.viewport !== newViewport) {
5358
- return {
5359
- windowDimensions: newDimension,
5360
- viewport: newViewport,
5361
- };
5362
- }
5363
- return oldState;
5364
- });
5365
- }
5366
- handleResize();
5367
- window.addEventListener('resize', handleResize);
5368
- return function () { return window.removeEventListener('resize', handleResize); };
5369
- // eslint-disable-next-line react-hooks/exhaustive-deps
5370
- }, [shouldListenChanges]);
5371
- var isMobile = state.viewport === Viewports.mobile;
5372
- var isTablet = state.viewport === Viewports.tablet;
5373
- var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
5374
- return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
5375
- };
5376
-
5377
- var useDeviceType = function () {
5378
- var mobileBreakpoint = 768;
5379
- var tabletBreakpoint = 1024;
5380
- var _a = useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
5381
- var handleResize = function () {
5382
- if (window.innerWidth < mobileBreakpoint) {
5383
- setDeviceType('mobile');
5384
- }
5385
- else if (window.innerWidth < tabletBreakpoint) {
5386
- setDeviceType('tablet');
5387
- }
5388
- else {
5389
- setDeviceType('desktop');
5390
- }
5391
- };
5392
- useLayoutEffect(function () {
5393
- window.addEventListener('resize', handleResize);
5394
- handleResize();
5395
- return function () { return window.removeEventListener('resize', handleResize); };
5396
- }, []);
5397
- return deviceType;
5398
- };
5399
-
5400
5406
  var Tooltip = function (_a) {
5401
5407
  var _b;
5402
5408
  var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, showCloseIcon = _a.showCloseIcon, _c = _a.align, align = _c === void 0 ? 'center' : _c, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.closeBtnSize, closeBtnSize = _e === void 0 ? 0.5 : _e;
@@ -5420,7 +5426,7 @@ var Tooltip = function (_a) {
5420
5426
  fill: (header === null || header === void 0 ? void 0 : header.iconFill)
5421
5427
  ? header === null || header === void 0 ? void 0 : header.iconFill
5422
5428
  : theme.colors.pallete.secondary.color,
5423
- }) }, void 0)), jsx$1(Title$7, __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, style: { textAlign: 'left', maxWidth: '243px' }, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0))] }), void 0)] }), void 0)] }), void 0));
5429
+ }) }, void 0)), jsx$1(Title$7, __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))] }), void 0)] }), void 0)] }), void 0));
5424
5430
  };
5425
5431
 
5426
5432
  var colorsMapper = function (colors) { return ({
@@ -5862,8 +5868,8 @@ var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObje
5862
5868
  var selected = _a.selected, theme = _a.theme;
5863
5869
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
5864
5870
  });
5865
- var Container$12 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
5866
- var templateObject_1$1E, templateObject_2$15, templateObject_3$T, templateObject_4$H, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$f, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$3, templateObject_13$2;
5871
+ var Container$12 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
5872
+ var templateObject_1$1E, templateObject_2$15, templateObject_3$T, templateObject_4$H, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$f, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$3, templateObject_13$3;
5867
5873
 
5868
5874
  var radioIds$1 = {
5869
5875
  oneTime: {
@@ -5972,7 +5978,11 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$3 || (templateObject
5972
5978
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
5973
5979
  });
5974
5980
  var Container$11 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
5975
- var templateObject_1$1D, templateObject_2$14, templateObject_3$S, templateObject_4$G, templateObject_5$t, templateObject_6$o, templateObject_7$g, templateObject_8$e, templateObject_9$7, templateObject_10$6, templateObject_11$3, templateObject_12$2;
5981
+ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
5982
+ var theme = _a.theme;
5983
+ return theme.component.autoship.tooltip.margin;
5984
+ });
5985
+ var templateObject_1$1D, templateObject_2$14, templateObject_3$S, templateObject_4$G, templateObject_5$t, templateObject_6$o, templateObject_7$g, templateObject_8$e, templateObject_9$7, templateObject_10$6, templateObject_11$3, templateObject_12$2, templateObject_13$2;
5976
5986
 
5977
5987
  var radioIds = {
5978
5988
  oneTime: {
@@ -6032,7 +6042,7 @@ var AutoshipV2 = function (_a) {
6032
6042
  onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
6033
6043
  };
6034
6044
  var benefitsColor = benefitsColorMapper(theme);
6035
- return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, { 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, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, 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: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { 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
6045
+ return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, { 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, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, void 0), jsx$1(TooltipWrapper, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { 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
6036
6046
  ? benefitsColor.selected
6037
6047
  : benefitsColor.base }, void 0), jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), 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 () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, 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));
6038
6048
  };
@@ -13545,8 +13555,6 @@ var ImageProductSlide$1 = function (_a) {
13545
13555
  var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom;
13546
13556
  var source = content === null || content === void 0 ? void 0 : content.url;
13547
13557
  var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
13548
- console.log(ctaText);
13549
- console.log(hideCTA);
13550
13558
  return (jsxs$1(Container$J, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
13551
13559
  alt: content.alt,
13552
13560
  style: { objectFit: 'cover', objectPosition: 'center' },