@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 +44 -0
- package/build/index.esm.js +113 -105
- package/build/index.esm.js.map +1 -1
- package/build/index.js +113 -105
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +44 -0
- package/build/theme/revel.theme.js +7 -0
- package/build/theme/shapermint.theme.d.ts +44 -0
- package/build/theme/shapermint.theme.js +7 -0
- package/build/theme/thebodcon.theme.d.ts +44 -0
- package/build/theme/thebodcon.theme.js +51 -7
- package/build/theme/thespadr.theme.d.ts +44 -0
- package/build/theme/thespadr.theme.js +7 -0
- package/build/theme/truekind.theme.d.ts +44 -0
- package/build/theme/truekind.theme.js +7 -0
- package/package.json +1 -1
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
|
};
|
package/build/index.esm.js
CHANGED
|
@@ -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$
|
|
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$
|
|
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:
|
|
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,
|
|
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$
|
|
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$
|
|
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
|
|
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(
|
|
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' },
|