@trafilea/afrodita-components 6.56.5 → 6.57.1
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 +11 -6
- package/build/index.esm.js +309 -275
- package/build/index.esm.js.map +1 -1
- package/build/index.js +308 -274
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +2 -0
- package/build/theme/shapermint.theme.js +2 -0
- package/build/theme/thebodcon.theme.js +2 -0
- package/build/theme/thespadr.theme.js +2 -0
- package/build/theme/truekind.theme.js +2 -0
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as jsx$1, jsxs as jsxs$1, Fragment as Fragment$2 } from 'react/jsx-runtime';
|
|
2
2
|
import * as React$2 from 'react';
|
|
3
|
-
import React__default, { useContext, createContext, forwardRef, createElement, Fragment as Fragment$1, useRef, useLayoutEffect, useMemo, useState, useEffect, useCallback, useReducer,
|
|
3
|
+
import React__default, { useContext, createContext, forwardRef, createElement, Fragment as Fragment$1, useRef, useLayoutEffect, useMemo, useState, useEffect, createRef, useCallback, useReducer, isValidElement, cloneElement, useImperativeHandle, memo, Children } from 'react';
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
5
5
|
|
|
6
6
|
/*! *****************************************************************************
|
|
@@ -3159,6 +3159,8 @@ var ComponentPosition;
|
|
|
3159
3159
|
ComponentPosition[ComponentPosition["Bottom"] = 1] = "Bottom";
|
|
3160
3160
|
ComponentPosition[ComponentPosition["Left"] = 2] = "Left";
|
|
3161
3161
|
ComponentPosition[ComponentPosition["Right"] = 3] = "Right";
|
|
3162
|
+
ComponentPosition[ComponentPosition["BottomLeft"] = 4] = "BottomLeft";
|
|
3163
|
+
ComponentPosition[ComponentPosition["BottomRight"] = 5] = "BottomRight";
|
|
3162
3164
|
})(ComponentPosition || (ComponentPosition = {}));
|
|
3163
3165
|
var InputValidationType;
|
|
3164
3166
|
(function (InputValidationType) {
|
|
@@ -3407,7 +3409,8 @@ var PriceContainer$3 = newStyled.div(templateObject_4$18 || (templateObject_4$18
|
|
|
3407
3409
|
var invertDirection = _a.invertDirection;
|
|
3408
3410
|
return (invertDirection ? 'row-reverse' : 'row');
|
|
3409
3411
|
});
|
|
3410
|
-
var
|
|
3412
|
+
var TooltipContainer$1 = newStyled.div(templateObject_5$U || (templateObject_5$U = __makeTemplateObject(["\n margin-left: 0.2rem;\n margin-top: -0.4rem;\n .tooltip-wrapper {\n box-shadow: none;\n }\n"], ["\n margin-left: 0.2rem;\n margin-top: -0.4rem;\n .tooltip-wrapper {\n box-shadow: none;\n }\n"])));
|
|
3413
|
+
var templateObject_1$2E, templateObject_2$1U, templateObject_3$1u, templateObject_4$18, templateObject_5$U;
|
|
3411
3414
|
|
|
3412
3415
|
var getStylesBySize$e = function (size, theme) {
|
|
3413
3416
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -3478,6 +3481,48 @@ var PriceLabel$1 = function (_a) {
|
|
|
3478
3481
|
return (jsxs$1(Container$1z, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }), void 0)) : (jsxs$1(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [jsx$1(Price$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3479
3482
|
};
|
|
3480
3483
|
|
|
3484
|
+
var useOnClickOutside = function (ref, handler) {
|
|
3485
|
+
useEffect(function () {
|
|
3486
|
+
var listener = function (event) {
|
|
3487
|
+
// Do nothing if clicking ref's element or descendent elements
|
|
3488
|
+
var el = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
3489
|
+
if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
|
|
3490
|
+
return;
|
|
3491
|
+
}
|
|
3492
|
+
handler(event);
|
|
3493
|
+
};
|
|
3494
|
+
document.addEventListener('mousedown', listener);
|
|
3495
|
+
document.addEventListener('touchstart', listener);
|
|
3496
|
+
return function () {
|
|
3497
|
+
document.removeEventListener('mousedown', listener);
|
|
3498
|
+
document.removeEventListener('touchstart', listener);
|
|
3499
|
+
};
|
|
3500
|
+
}, [ref, handler]);
|
|
3501
|
+
};
|
|
3502
|
+
|
|
3503
|
+
var useDeviceType = function () {
|
|
3504
|
+
var mobileBreakpoint = 768;
|
|
3505
|
+
var tabletBreakpoint = 1024;
|
|
3506
|
+
var _a = useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
|
|
3507
|
+
var handleResize = function () {
|
|
3508
|
+
if (window.innerWidth < mobileBreakpoint) {
|
|
3509
|
+
setDeviceType('mobile');
|
|
3510
|
+
}
|
|
3511
|
+
else if (window.innerWidth < tabletBreakpoint) {
|
|
3512
|
+
setDeviceType('tablet');
|
|
3513
|
+
}
|
|
3514
|
+
else {
|
|
3515
|
+
setDeviceType('desktop');
|
|
3516
|
+
}
|
|
3517
|
+
};
|
|
3518
|
+
useLayoutEffect(function () {
|
|
3519
|
+
window.addEventListener('resize', handleResize);
|
|
3520
|
+
handleResize();
|
|
3521
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
3522
|
+
}, []);
|
|
3523
|
+
return deviceType;
|
|
3524
|
+
};
|
|
3525
|
+
|
|
3481
3526
|
var supportedCurrencies = ['AU$', 'CA$', '€', 'kr', '£', 'NZ$', 'S$'];
|
|
3482
3527
|
|
|
3483
3528
|
var getCurrencySymbol = function (finalPrice) {
|
|
@@ -3486,11 +3531,180 @@ var getCurrencySymbol = function (finalPrice) {
|
|
|
3486
3531
|
return currencySymbol !== null && currencySymbol !== void 0 ? currencySymbol : currencySymbolFallback;
|
|
3487
3532
|
};
|
|
3488
3533
|
|
|
3489
|
-
var
|
|
3534
|
+
var getWrapperFlexDirection = function (position) {
|
|
3535
|
+
switch (position) {
|
|
3536
|
+
case ComponentPosition.Top:
|
|
3537
|
+
return 'column';
|
|
3538
|
+
case ComponentPosition.Bottom:
|
|
3539
|
+
return 'column-reverse';
|
|
3540
|
+
case ComponentPosition.BottomLeft:
|
|
3541
|
+
return 'row-reverse';
|
|
3542
|
+
case ComponentPosition.BottomRight:
|
|
3543
|
+
return 'row';
|
|
3544
|
+
case ComponentPosition.Left:
|
|
3545
|
+
return 'row-reverse';
|
|
3546
|
+
case ComponentPosition.Right:
|
|
3547
|
+
return 'row';
|
|
3548
|
+
}
|
|
3549
|
+
};
|
|
3550
|
+
var getContainerFlexDirection = function (position) {
|
|
3551
|
+
switch (position) {
|
|
3552
|
+
case ComponentPosition.Top:
|
|
3553
|
+
return 'column';
|
|
3554
|
+
case ComponentPosition.Bottom:
|
|
3555
|
+
return 'column-reverse';
|
|
3556
|
+
case ComponentPosition.BottomLeft:
|
|
3557
|
+
return 'row';
|
|
3558
|
+
case ComponentPosition.BottomRight:
|
|
3559
|
+
return 'row-reverse';
|
|
3560
|
+
case ComponentPosition.Left:
|
|
3561
|
+
return 'row';
|
|
3562
|
+
case ComponentPosition.Right:
|
|
3563
|
+
return 'row-reverse';
|
|
3564
|
+
}
|
|
3565
|
+
};
|
|
3566
|
+
var getArrowStyles = function (position, borderColor, backgroundColor) {
|
|
3567
|
+
switch (position) {
|
|
3568
|
+
case ComponentPosition.Top:
|
|
3569
|
+
return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n top: 100%;\n left: 50%;\n margin-left: -10px;\n }\n \n \n &::before {\n border-top: 10px solid ".concat(borderColor, ";\n margin-top: 0px;\n }\n &::after {\n border-top: 10px solid ").concat(backgroundColor, ";\n margin-top: -1px;\n z-index: 999;\n }");
|
|
3570
|
+
case ComponentPosition.Bottom:
|
|
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
|
+
case ComponentPosition.BottomLeft:
|
|
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
|
+
case ComponentPosition.BottomRight:
|
|
3575
|
+
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 }");
|
|
3576
|
+
case ComponentPosition.Left:
|
|
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
|
+
case ComponentPosition.Right:
|
|
3579
|
+
return " \n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 50%;\n left: -10px;\n margin-top: -10px;\n border: 10px solid transparent;\n border-right: 10px solid transparent;\n margin-left: -9px;\n }\n \n &::before {\n border-right: 10px solid ".concat(borderColor, " ;\n margin-left: -10px;\n \n }\n &::after {\n border-right: 10px solid ").concat(backgroundColor, ";\n z-index: 999;\n }");
|
|
3580
|
+
}
|
|
3581
|
+
};
|
|
3582
|
+
var getTooltipAlignItems = function (position, align) {
|
|
3583
|
+
switch (position) {
|
|
3584
|
+
case ComponentPosition.Top:
|
|
3585
|
+
return align;
|
|
3586
|
+
case ComponentPosition.Bottom:
|
|
3587
|
+
return align;
|
|
3588
|
+
case ComponentPosition.BottomLeft:
|
|
3589
|
+
return 'center';
|
|
3590
|
+
case ComponentPosition.BottomRight:
|
|
3591
|
+
return 'center';
|
|
3592
|
+
case ComponentPosition.Left:
|
|
3593
|
+
return 'center';
|
|
3594
|
+
case ComponentPosition.Right:
|
|
3595
|
+
return 'center';
|
|
3596
|
+
}
|
|
3597
|
+
};
|
|
3598
|
+
|
|
3599
|
+
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) {
|
|
3600
|
+
var position = _a.position;
|
|
3601
|
+
return getWrapperFlexDirection(position);
|
|
3602
|
+
}, function (_a) {
|
|
3603
|
+
var disableHover = _a.disableHover;
|
|
3604
|
+
return (disableHover ? 'hidden' : 'visible');
|
|
3605
|
+
}, function (_a) {
|
|
3606
|
+
var disableHover = _a.disableHover;
|
|
3607
|
+
return (disableHover ? 0 : 1);
|
|
3608
|
+
});
|
|
3609
|
+
var TooltipContainer = newStyled.div(templateObject_2$1T || (templateObject_2$1T = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
3610
|
+
var position = _a.position;
|
|
3611
|
+
return getContainerFlexDirection(position);
|
|
3612
|
+
}, function (_a) {
|
|
3613
|
+
var position = _a.position, align = _a.align;
|
|
3614
|
+
return getTooltipAlignItems(position, align);
|
|
3615
|
+
}, function (_a) {
|
|
3616
|
+
var position = _a.position, childrenWidth = _a.childrenWidth;
|
|
3617
|
+
return getTooltipMargin(position, ComponentPosition.Right, "".concat(childrenWidth, "px"));
|
|
3618
|
+
}, function (_a) {
|
|
3619
|
+
var position = _a.position, childrenWidth = _a.childrenWidth;
|
|
3620
|
+
return getTooltipMargin(position, ComponentPosition.Left, "".concat(childrenWidth, "px"));
|
|
3621
|
+
}, function (_a) {
|
|
3622
|
+
var position = _a.position, tooltipHeight = _a.tooltipHeight;
|
|
3623
|
+
return getTooltipMargin(position, ComponentPosition.Top, "-".concat(tooltipHeight, "px"));
|
|
3624
|
+
}, function (_a) {
|
|
3625
|
+
var position = _a.position, tooltipHeight = _a.tooltipHeight;
|
|
3626
|
+
return getTooltipMargin(position, ComponentPosition.Bottom, "-".concat(tooltipHeight, "px"));
|
|
3627
|
+
}, function (_a) {
|
|
3628
|
+
var maxWidth = _a.maxWidth;
|
|
3629
|
+
return (maxWidth ? maxWidth : 'none');
|
|
3630
|
+
}, function (_a) {
|
|
3631
|
+
var position = _a.position, borderColor = _a.borderColor, backgroundColor = _a.backgroundColor, withArrow = _a.withArrow;
|
|
3632
|
+
return withArrow && getArrowStyles(position, borderColor, backgroundColor);
|
|
3633
|
+
});
|
|
3634
|
+
var getTooltipMargin = function (actual, expected, margin) {
|
|
3635
|
+
if ((actual === ComponentPosition.BottomLeft || actual === ComponentPosition.BottomRight) &&
|
|
3636
|
+
expected === ComponentPosition.Bottom) {
|
|
3637
|
+
return "calc(".concat(margin, " - 37px)");
|
|
3638
|
+
}
|
|
3639
|
+
if (actual === ComponentPosition.BottomRight && expected === ComponentPosition.Right) {
|
|
3640
|
+
return '-40px';
|
|
3641
|
+
}
|
|
3642
|
+
if (actual === ComponentPosition.BottomLeft && expected === ComponentPosition.Left) {
|
|
3643
|
+
return '-80px';
|
|
3644
|
+
}
|
|
3645
|
+
return actual === expected ? margin : '0';
|
|
3646
|
+
};
|
|
3647
|
+
var ContentWrapper$1 = newStyled.div(templateObject_3$1t || (templateObject_3$1t = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
3648
|
+
var borderColor = _a.borderColor;
|
|
3649
|
+
return borderColor;
|
|
3650
|
+
}, function (_a) {
|
|
3651
|
+
var backgroundColor = _a.backgroundColor;
|
|
3652
|
+
return backgroundColor;
|
|
3653
|
+
});
|
|
3654
|
+
var TooltipText = newStyled.div(templateObject_4$17 || (templateObject_4$17 = __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) {
|
|
3655
|
+
var theme = _a.theme;
|
|
3656
|
+
return theme.component.autoship.tooltip.text.alignment;
|
|
3657
|
+
}, function (_a) {
|
|
3658
|
+
var theme = _a.theme;
|
|
3659
|
+
return theme.component.autoship.tooltip.text.maxWidth;
|
|
3660
|
+
}, function (_a) {
|
|
3661
|
+
var color = _a.color;
|
|
3662
|
+
return color;
|
|
3663
|
+
});
|
|
3664
|
+
var TopSection = newStyled.div(templateObject_5$T || (templateObject_5$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
3665
|
+
var Title$b = newStyled.h1(templateObject_6$K || (templateObject_6$K = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
3666
|
+
var color = _a.color;
|
|
3667
|
+
return color;
|
|
3668
|
+
});
|
|
3669
|
+
var IconContainer$6 = newStyled.div(templateObject_7$A || (templateObject_7$A = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
3670
|
+
var CloseToolTip = newStyled.button(templateObject_8$t || (templateObject_8$t = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
3671
|
+
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
3672
|
+
return right;
|
|
3673
|
+
});
|
|
3674
|
+
var templateObject_1$2D, templateObject_2$1T, templateObject_3$1t, templateObject_4$17, templateObject_5$T, templateObject_6$K, templateObject_7$A, templateObject_8$t;
|
|
3675
|
+
|
|
3676
|
+
var Tooltip = function (_a) {
|
|
3677
|
+
var _b;
|
|
3678
|
+
var children = _a.children, position = _a.position, content = _a.content, elementContent = _a.elementContent, 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;
|
|
3679
|
+
var theme = useTheme();
|
|
3680
|
+
var _f = useState(0), childrenWidth = _f[0], setChildrenWidth = _f[1];
|
|
3681
|
+
var childrenRef = createRef();
|
|
3682
|
+
var _g = useState(0), tooltipHeight = _g[0], setTooltipHeight = _g[1];
|
|
3683
|
+
var tooltipRef = createRef();
|
|
3684
|
+
var _h = useState(false), closeTooltip = _h[0], setCloseTooltip = _h[1];
|
|
3685
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
3686
|
+
useLayoutEffect(function () {
|
|
3687
|
+
var ref = childrenRef.current;
|
|
3688
|
+
setChildrenWidth((ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
|
|
3689
|
+
}, [childrenRef]);
|
|
3690
|
+
useLayoutEffect(function () {
|
|
3691
|
+
var ref = tooltipRef.current;
|
|
3692
|
+
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
3693
|
+
}, [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, "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, {
|
|
3695
|
+
testId: 'HeaderIcon',
|
|
3696
|
+
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
3697
|
+
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
3698
|
+
: 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));
|
|
3700
|
+
};
|
|
3701
|
+
|
|
3702
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2C || (templateObject_1$2C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3490
3703
|
var PriceLabelV2$1 = function (_a) {
|
|
3491
3704
|
var _b;
|
|
3492
|
-
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, _j = _a.showDecimals, showDecimals = _j === void 0 ? true : _j, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings", "showDecimals"]);
|
|
3705
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, _j = _a.showDecimals, showDecimals = _j === void 0 ? true : _j, tooltipText = _a.tooltipText, tooltipIcon = _a.tooltipIcon, tooltipPosition = _a.tooltipPosition, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings", "showDecimals", "tooltipText", "tooltipIcon", "tooltipPosition"]);
|
|
3493
3706
|
var theme = useTheme();
|
|
3707
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
3494
3708
|
var productFinalPrice = pricePerItem ? pricePerItem : finalPrice;
|
|
3495
3709
|
var isDiffFinalAndOriginalPrice = originalPrice !== productFinalPrice;
|
|
3496
3710
|
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
@@ -3540,7 +3754,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3540
3754
|
marginTop: '-6px',
|
|
3541
3755
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)), pricePerItem && (jsx$1(Price$1, __assign$1({ size: ComponentSize.Small, color: theme.colors.pallete.secondary.color }, { children: "/each" }), void 0))] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag$4, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
|
|
3542
3756
|
letterSpacing: '-0.05rem',
|
|
3543
|
-
}, bordersRounded: bordersRounded, savings: savingsDisplay ? "Save ".concat(currencySymbol).concat(savetoString) : undefined }), void 0)) }), void 0)),
|
|
3757
|
+
}, 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
|
+
text: tooltipText,
|
|
3759
|
+
}, position: tooltipPosition !== null && tooltipPosition !== void 0 ? tooltipPosition : (isDiscount && isMobile
|
|
3760
|
+
? ComponentPosition.BottomLeft
|
|
3761
|
+
: 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: {
|
|
3544
3762
|
borderRadius: '8px',
|
|
3545
3763
|
width: '107px',
|
|
3546
3764
|
height: '28px',
|
|
@@ -3550,11 +3768,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3550
3768
|
lineHeight: '22px',
|
|
3551
3769
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3552
3770
|
};
|
|
3553
|
-
var templateObject_1$
|
|
3771
|
+
var templateObject_1$2C;
|
|
3554
3772
|
|
|
3555
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3556
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3557
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3773
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2B || (templateObject_1$2B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3774
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1S || (templateObject_2$1S = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3775
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1s || (templateObject_3$1s = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3558
3776
|
var PriceLabelV3 = function (_a) {
|
|
3559
3777
|
var _b;
|
|
3560
3778
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -3620,10 +3838,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
3620
3838
|
lineHeight: '22px',
|
|
3621
3839
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3622
3840
|
};
|
|
3623
|
-
var templateObject_1$
|
|
3841
|
+
var templateObject_1$2B, templateObject_2$1S, templateObject_3$1s;
|
|
3624
3842
|
|
|
3625
|
-
var Container$1y = newStyled.div(templateObject_1$
|
|
3626
|
-
var Price = newStyled.p(templateObject_2$
|
|
3843
|
+
var Container$1y = newStyled.div(templateObject_1$2A || (templateObject_1$2A = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"])));
|
|
3844
|
+
var Price = newStyled.p(templateObject_2$1R || (templateObject_2$1R = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"])), function (_a) {
|
|
3627
3845
|
var weight = _a.weight;
|
|
3628
3846
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
3629
3847
|
}, function (_a) {
|
|
@@ -3636,7 +3854,7 @@ var Price = newStyled.p(templateObject_2$1S || (templateObject_2$1S = __makeTemp
|
|
|
3636
3854
|
var underlined = _a.underlined;
|
|
3637
3855
|
return (underlined ? 'line-through' : 'none');
|
|
3638
3856
|
});
|
|
3639
|
-
var templateObject_1$
|
|
3857
|
+
var templateObject_1$2A, templateObject_2$1R;
|
|
3640
3858
|
|
|
3641
3859
|
function getTestId$1() {
|
|
3642
3860
|
var args = [];
|
|
@@ -3660,7 +3878,7 @@ var PriceLabelV5 = function (_a) {
|
|
|
3660
3878
|
return (jsx$1(Container$1y, __assign$1({}, rest, { id: "priceLabel" }, { children: jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && (jsx$1(OriginalPrice, { theme: theme, originalPriceUnderlined: originalPriceUnderlined, testId: testId, originalPrice: originalPrice }, void 0))] }, void 0) }), void 0));
|
|
3661
3879
|
};
|
|
3662
3880
|
|
|
3663
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3881
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2z || (templateObject_1$2z = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3664
3882
|
var PriceLabel = function (_a) {
|
|
3665
3883
|
var _b;
|
|
3666
3884
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3689,9 +3907,9 @@ var PriceLabel = function (_a) {
|
|
|
3689
3907
|
marginTop: '-6px',
|
|
3690
3908
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3691
3909
|
};
|
|
3692
|
-
var templateObject_1$
|
|
3910
|
+
var templateObject_1$2z;
|
|
3693
3911
|
|
|
3694
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3912
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2y || (templateObject_1$2y = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3695
3913
|
var PriceLabelV2 = function (_a) {
|
|
3696
3914
|
var _b;
|
|
3697
3915
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3719,11 +3937,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
3719
3937
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3720
3938
|
return (jsxs$1(Container$1z, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3721
3939
|
};
|
|
3722
|
-
var templateObject_1$
|
|
3940
|
+
var templateObject_1$2y;
|
|
3723
3941
|
|
|
3724
|
-
var ContainerWrapper$3 = newStyled.div(templateObject_1$
|
|
3725
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3726
|
-
var templateObject_1$
|
|
3942
|
+
var ContainerWrapper$3 = newStyled.div(templateObject_1$2x || (templateObject_1$2x = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"])));
|
|
3943
|
+
var ImgWrapper = newStyled.div(templateObject_2$1Q || (templateObject_2$1Q = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"])));
|
|
3944
|
+
var templateObject_1$2x, templateObject_2$1Q;
|
|
3727
3945
|
|
|
3728
3946
|
var ClubPriceMemberLabel = function (_a) {
|
|
3729
3947
|
var isClub = _a.isClub, _b = _a.isPDP, isPDP = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isCollections, isCollections = _c === void 0 ? false : _c, rest = __rest(_a, ["isClub", "isPDP", "icon", "isCollections"]);
|
|
@@ -3732,13 +3950,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3732
3950
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$3, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3733
3951
|
};
|
|
3734
3952
|
|
|
3735
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3953
|
+
var HorizontalDivider = newStyled.div(templateObject_1$2w || (templateObject_1$2w = __makeTemplateObject(["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"], ["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"])), function (_a) {
|
|
3736
3954
|
var width = _a.width;
|
|
3737
3955
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3738
3956
|
});
|
|
3739
|
-
var templateObject_1$
|
|
3957
|
+
var templateObject_1$2w;
|
|
3740
3958
|
|
|
3741
|
-
var Container$1x = newStyled.div(templateObject_1$
|
|
3959
|
+
var Container$1x = newStyled.div(templateObject_1$2v || (templateObject_1$2v = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3742
3960
|
var height = _a.height;
|
|
3743
3961
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3744
3962
|
}, function (_a) {
|
|
@@ -3765,9 +3983,9 @@ var SkeletonBox = function (_a) {
|
|
|
3765
3983
|
var theme = useTheme();
|
|
3766
3984
|
return jsx$1(Container$1x, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3767
3985
|
};
|
|
3768
|
-
var templateObject_1$
|
|
3986
|
+
var templateObject_1$2v;
|
|
3769
3987
|
|
|
3770
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3988
|
+
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) {
|
|
3771
3989
|
var width = _a.width;
|
|
3772
3990
|
return width;
|
|
3773
3991
|
}, function (_a) {
|
|
@@ -3783,7 +4001,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2v || (templateObject_1$2v
|
|
|
3783
4001
|
var opacity = _a.opacity;
|
|
3784
4002
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3785
4003
|
});
|
|
3786
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
4004
|
+
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) {
|
|
3787
4005
|
var width = _a.width;
|
|
3788
4006
|
return width;
|
|
3789
4007
|
}, function (_a) {
|
|
@@ -3796,7 +4014,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1Q || (templateObject_2$
|
|
|
3796
4014
|
var opacity = _a.opacity;
|
|
3797
4015
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3798
4016
|
});
|
|
3799
|
-
var templateObject_1$
|
|
4017
|
+
var templateObject_1$2u, templateObject_2$1P;
|
|
3800
4018
|
|
|
3801
4019
|
/* eslint-disable no-undef */
|
|
3802
4020
|
var cache = new Map();
|
|
@@ -3972,7 +4190,7 @@ var buildImageUrl = function (_a) {
|
|
|
3972
4190
|
}
|
|
3973
4191
|
};
|
|
3974
4192
|
|
|
3975
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
4193
|
+
var Img$1 = newStyled.img(templateObject_1$2t || (templateObject_1$2t = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3976
4194
|
var Image$3 = function (_a) {
|
|
3977
4195
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, fallbackImg = _a.fallbackImg, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality", "fallbackImg"]);
|
|
3978
4196
|
var _e = useTheme(), config = _e.config, assets = _e.assets;
|
|
@@ -3994,15 +4212,15 @@ var Image$3 = function (_a) {
|
|
|
3994
4212
|
};
|
|
3995
4213
|
return (jsx$1(Img$1, __assign$1({ onError: handleError, src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3996
4214
|
};
|
|
3997
|
-
var templateObject_1$
|
|
4215
|
+
var templateObject_1$2t;
|
|
3998
4216
|
|
|
3999
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
4000
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
4001
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
4217
|
+
var LabelWrapper = newStyled.label(templateObject_1$2s || (templateObject_1$2s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
4218
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1O || (templateObject_2$1O = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
4219
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1r || (templateObject_3$1r = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])), function (_a) {
|
|
4002
4220
|
var $color = _a.$color;
|
|
4003
4221
|
return $color;
|
|
4004
4222
|
});
|
|
4005
|
-
var templateObject_1$
|
|
4223
|
+
var templateObject_1$2s, templateObject_2$1O, templateObject_3$1r;
|
|
4006
4224
|
|
|
4007
4225
|
var ToggleComponent = function (_a) {
|
|
4008
4226
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c, rest = __rest(_a, ["onToggle", "isChecked", "color"]);
|
|
@@ -4884,14 +5102,14 @@ function jsxs(type, props, key) {
|
|
|
4884
5102
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4885
5103
|
// `variants` styles that are consistent through all themes.
|
|
4886
5104
|
var TAGS = {
|
|
4887
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4888
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4889
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4890
|
-
display1: newStyled.h1(templateObject_4$
|
|
4891
|
-
display2: newStyled.h2(templateObject_5$
|
|
4892
|
-
display3: newStyled.h3(templateObject_6$
|
|
4893
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4894
|
-
heading2: newStyled.h2(templateObject_8$
|
|
5105
|
+
hero1: newStyled.h1(templateObject_1$2r || (templateObject_1$2r = __makeTemplateObject([""], [""]))),
|
|
5106
|
+
hero2: newStyled.h2(templateObject_2$1N || (templateObject_2$1N = __makeTemplateObject([""], [""]))),
|
|
5107
|
+
hero3: newStyled.h3(templateObject_3$1q || (templateObject_3$1q = __makeTemplateObject([""], [""]))),
|
|
5108
|
+
display1: newStyled.h1(templateObject_4$16 || (templateObject_4$16 = __makeTemplateObject([""], [""]))),
|
|
5109
|
+
display2: newStyled.h2(templateObject_5$S || (templateObject_5$S = __makeTemplateObject([""], [""]))),
|
|
5110
|
+
display3: newStyled.h3(templateObject_6$J || (templateObject_6$J = __makeTemplateObject([""], [""]))),
|
|
5111
|
+
heading1: newStyled.h1(templateObject_7$z || (templateObject_7$z = __makeTemplateObject([""], [""]))),
|
|
5112
|
+
heading2: newStyled.h2(templateObject_8$s || (templateObject_8$s = __makeTemplateObject([""], [""]))),
|
|
4895
5113
|
heading3: newStyled.h3(templateObject_9$h || (templateObject_9$h = __makeTemplateObject([""], [""]))),
|
|
4896
5114
|
heading4: newStyled.h4(templateObject_10$f || (templateObject_10$f = __makeTemplateObject([""], [""]))),
|
|
4897
5115
|
heading5: newStyled.h5(templateObject_11$a || (templateObject_11$a = __makeTemplateObject([""], [""]))),
|
|
@@ -5024,14 +5242,14 @@ var DEFAULTS = {
|
|
|
5024
5242
|
size: 'regular',
|
|
5025
5243
|
},
|
|
5026
5244
|
};
|
|
5027
|
-
var templateObject_1$
|
|
5028
|
-
|
|
5029
|
-
var Container$1w = newStyled.div(templateObject_1$
|
|
5030
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
5031
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
5032
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
5033
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
5034
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
5245
|
+
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$16, templateObject_5$S, templateObject_6$J, templateObject_7$z, templateObject_8$s, templateObject_9$h, templateObject_10$f, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$4, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
5246
|
+
|
|
5247
|
+
var Container$1w = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __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"])));
|
|
5248
|
+
var Card$4 = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __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"])));
|
|
5249
|
+
var Tag$2 = newStyled.div(templateObject_3$1p || (templateObject_3$1p = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
5250
|
+
var Label$7 = newStyled.div(templateObject_4$15 || (templateObject_4$15 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
5251
|
+
var Check$1 = newStyled.div(templateObject_5$R || (templateObject_5$R = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
5252
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$I || (templateObject_6$I = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
5035
5253
|
var PackSelectorV2 = function (_a) {
|
|
5036
5254
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
5037
5255
|
return (jsx$1(Container$1w, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -5056,27 +5274,27 @@ var PackCard$1 = function (_a) {
|
|
|
5056
5274
|
currency: currencyCode || 'USD',
|
|
5057
5275
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5058
5276
|
};
|
|
5059
|
-
var templateObject_1$
|
|
5277
|
+
var templateObject_1$2q, templateObject_2$1M, templateObject_3$1p, templateObject_4$15, templateObject_5$R, templateObject_6$I;
|
|
5060
5278
|
|
|
5061
|
-
var Container$1v = newStyled.div(templateObject_1$
|
|
5062
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
5279
|
+
var Container$1v = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5280
|
+
var DropContainer = newStyled.div(templateObject_2$1L || (templateObject_2$1L = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5063
5281
|
var DropList = function (_a) {
|
|
5064
5282
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5065
5283
|
return (jsx$1(Container$1v, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5066
5284
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
5067
5285
|
}) }, void 0));
|
|
5068
5286
|
};
|
|
5069
|
-
var templateObject_1$
|
|
5287
|
+
var templateObject_1$2p, templateObject_2$1L;
|
|
5070
5288
|
|
|
5071
5289
|
var DROPS_TOTAL = 5;
|
|
5072
|
-
var Container$1u = newStyled.div(templateObject_1$
|
|
5073
|
-
var Title$
|
|
5074
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
5290
|
+
var Container$1u = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5291
|
+
var Title$a = newStyled.p(templateObject_2$1K || (templateObject_2$1K = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
5292
|
+
var Description$3 = newStyled.p(templateObject_3$1o || (templateObject_3$1o = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
5075
5293
|
var AbsorbencyLevel = function (_a) {
|
|
5076
5294
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5077
|
-
return (jsxs$1(Container$1u, { children: [jsx$1(Title$
|
|
5295
|
+
return (jsxs$1(Container$1u, { children: [jsx$1(Title$a, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
5078
5296
|
};
|
|
5079
|
-
var templateObject_1$
|
|
5297
|
+
var templateObject_1$2o, templateObject_2$1K, templateObject_3$1o;
|
|
5080
5298
|
|
|
5081
5299
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
5082
5300
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -5152,7 +5370,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5152
5370
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5153
5371
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5154
5372
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5155
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5373
|
+
var StyledContent$1 = newStyled.button(templateObject_1$2n || (templateObject_1$2n = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
5156
5374
|
var Accordion$1 = function (_a) {
|
|
5157
5375
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, testId = _a.testId;
|
|
5158
5376
|
var theme = useTheme();
|
|
@@ -5176,9 +5394,9 @@ var Accordion$1 = function (_a) {
|
|
|
5176
5394
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5177
5395
|
} }), void 0));
|
|
5178
5396
|
};
|
|
5179
|
-
var templateObject_1$
|
|
5397
|
+
var templateObject_1$2n;
|
|
5180
5398
|
|
|
5181
|
-
var Container$1t = newStyled.div(templateObject_1$
|
|
5399
|
+
var Container$1t = newStyled.div(templateObject_1$2m || (templateObject_1$2m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5182
5400
|
var AccordionOptions = function (_a) {
|
|
5183
5401
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5184
5402
|
var _b = useState({
|
|
@@ -5202,7 +5420,7 @@ var AccordionOptions = function (_a) {
|
|
|
5202
5420
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5203
5421
|
}) }, void 0));
|
|
5204
5422
|
};
|
|
5205
|
-
var templateObject_1$
|
|
5423
|
+
var templateObject_1$2m;
|
|
5206
5424
|
|
|
5207
5425
|
var isDangerouslySetInnerHTML = function (content) {
|
|
5208
5426
|
return content && typeof content === 'object' && '__html' in content;
|
|
@@ -5415,22 +5633,22 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5415
5633
|
literal: true,
|
|
5416
5634
|
});
|
|
5417
5635
|
|
|
5418
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5419
|
-
var FlexContainer$5 = newStyled.div(templateObject_2$
|
|
5420
|
-
var templateObject_1$
|
|
5636
|
+
var Bold = newStyled.span(templateObject_1$2l || (templateObject_1$2l = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5637
|
+
var FlexContainer$5 = newStyled.div(templateObject_2$1J || (templateObject_2$1J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5638
|
+
var templateObject_1$2l, templateObject_2$1J;
|
|
5421
5639
|
|
|
5422
|
-
var Container$1s = newStyled.div(templateObject_1$
|
|
5640
|
+
var Container$1s = newStyled.div(templateObject_1$2k || (templateObject_1$2k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
5423
5641
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5424
5642
|
return width;
|
|
5425
5643
|
}, function (_a) {
|
|
5426
5644
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5427
5645
|
return height;
|
|
5428
5646
|
});
|
|
5429
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5430
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5431
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5432
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5433
|
-
var templateObject_1$
|
|
5647
|
+
var FlexCentered = newStyled.div(templateObject_2$1I || (templateObject_2$1I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5648
|
+
var LeftSide = newStyled.div(templateObject_3$1n || (templateObject_3$1n = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5649
|
+
var RightSide = newStyled.div(templateObject_4$14 || (templateObject_4$14 = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5650
|
+
var FlexStart = newStyled.div(templateObject_5$Q || (templateObject_5$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5651
|
+
var templateObject_1$2k, templateObject_2$1I, templateObject_3$1n, templateObject_4$14, templateObject_5$Q;
|
|
5434
5652
|
|
|
5435
5653
|
var CouponCard = function (_a) {
|
|
5436
5654
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -5518,14 +5736,14 @@ var isValidDate = function (value) {
|
|
|
5518
5736
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5519
5737
|
};
|
|
5520
5738
|
|
|
5521
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5522
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5739
|
+
var ErrorText = newStyled.h3(templateObject_1$2j || (templateObject_1$2j = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
5740
|
+
var ErrorContainer = newStyled.div(templateObject_2$1H || (templateObject_2$1H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
5523
5741
|
var Error$1 = function (_a) {
|
|
5524
5742
|
var error = _a.error;
|
|
5525
5743
|
var theme = useTheme();
|
|
5526
5744
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5527
5745
|
};
|
|
5528
|
-
var templateObject_1$
|
|
5746
|
+
var templateObject_1$2j, templateObject_2$1H;
|
|
5529
5747
|
|
|
5530
5748
|
var BaseSelectButton = function (_a) {
|
|
5531
5749
|
var children = _a.children, as = _a.as;
|
|
@@ -5542,7 +5760,7 @@ function BaseSelectOption(_a) {
|
|
|
5542
5760
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5543
5761
|
}
|
|
5544
5762
|
|
|
5545
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5763
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5546
5764
|
function BaseSelect(_a) {
|
|
5547
5765
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5548
5766
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5552,7 +5770,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5552
5770
|
Options: BaseSelectOptions,
|
|
5553
5771
|
Option: BaseSelectOption,
|
|
5554
5772
|
});
|
|
5555
|
-
var templateObject_1$
|
|
5773
|
+
var templateObject_1$2i;
|
|
5556
5774
|
|
|
5557
5775
|
var CustomButton = newStyled.button(function (_a) {
|
|
5558
5776
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5591,7 +5809,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5591
5809
|
});
|
|
5592
5810
|
});
|
|
5593
5811
|
// TODO Remove this when we find the real solution
|
|
5594
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5812
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5595
5813
|
var open = _a.open;
|
|
5596
5814
|
return open &&
|
|
5597
5815
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5611,7 +5829,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5611
5829
|
} }), void 0));
|
|
5612
5830
|
};
|
|
5613
5831
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5614
|
-
var templateObject_1$
|
|
5832
|
+
var templateObject_1$2h;
|
|
5615
5833
|
|
|
5616
5834
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5617
5835
|
var theme = _a.theme;
|
|
@@ -5778,7 +5996,7 @@ var CustomCheckboxStyles = {
|
|
|
5778
5996
|
},
|
|
5779
5997
|
};
|
|
5780
5998
|
|
|
5781
|
-
var Container$1r = newStyled.div(templateObject_1$
|
|
5999
|
+
var Container$1r = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
5782
6000
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5783
6001
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5784
6002
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5789,7 +6007,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5789
6007
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5790
6008
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5791
6009
|
]; });
|
|
5792
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
6010
|
+
var Input$5 = newStyled.input(templateObject_2$1G || (templateObject_2$1G = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
5793
6011
|
var disabled = _a.disabled;
|
|
5794
6012
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5795
6013
|
});
|
|
@@ -5807,7 +6025,7 @@ var Checkbox = function (_a) {
|
|
|
5807
6025
|
? theme.colors.shades['black'].color
|
|
5808
6026
|
: theme.colors.shades['white'].color }, void 0)) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5809
6027
|
};
|
|
5810
|
-
var templateObject_1$
|
|
6028
|
+
var templateObject_1$2g, templateObject_2$1G;
|
|
5811
6029
|
|
|
5812
6030
|
var CustomOption = newStyled.li(function (_a) {
|
|
5813
6031
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5856,9 +6074,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5856
6074
|
Option: BaseDropdownOption,
|
|
5857
6075
|
});
|
|
5858
6076
|
|
|
5859
|
-
var Container$1q = newStyled.div(templateObject_1$
|
|
5860
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5861
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
6077
|
+
var Container$1q = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject([""], [""])));
|
|
6078
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1F || (templateObject_2$1F = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
6079
|
+
var SelectedOption = newStyled.span(templateObject_3$1m || (templateObject_3$1m = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5862
6080
|
var fontWeight = _a.fontWeight;
|
|
5863
6081
|
return fontWeight || '';
|
|
5864
6082
|
});
|
|
@@ -5894,7 +6112,7 @@ function SimpleDropdown(_a) {
|
|
|
5894
6112
|
var DropdownContainer = showRequiredPlaceholder ? Container$1q : Fragment$1;
|
|
5895
6113
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5896
6114
|
}
|
|
5897
|
-
var templateObject_1$
|
|
6115
|
+
var templateObject_1$2f, templateObject_2$1F, templateObject_3$1m;
|
|
5898
6116
|
|
|
5899
6117
|
/* base styles & size variants */
|
|
5900
6118
|
var CustomRadioStyles$2 = {
|
|
@@ -5958,7 +6176,7 @@ var ContainerStyles$2 = {
|
|
|
5958
6176
|
});
|
|
5959
6177
|
},
|
|
5960
6178
|
};
|
|
5961
|
-
var Wrapper$
|
|
6179
|
+
var Wrapper$7 = newStyled.div(function (_a) {
|
|
5962
6180
|
var $horizontal = _a.$horizontal;
|
|
5963
6181
|
return {
|
|
5964
6182
|
display: 'flex',
|
|
@@ -5972,7 +6190,7 @@ var Container$1p = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), f
|
|
|
5972
6190
|
var HorizontalContainer = newStyled(Container$1p)({
|
|
5973
6191
|
alignSelf: 'center',
|
|
5974
6192
|
});
|
|
5975
|
-
var Input$4 = newStyled.input(templateObject_1$
|
|
6193
|
+
var Input$4 = newStyled.input(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5976
6194
|
var disabled = _a.disabled;
|
|
5977
6195
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5978
6196
|
});
|
|
@@ -5980,14 +6198,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5980
6198
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5981
6199
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5982
6200
|
]; });
|
|
5983
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_2$
|
|
6201
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_2$1E || (templateObject_2$1E = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5984
6202
|
var theme = _a.theme;
|
|
5985
6203
|
return theme.component.radio.textSize;
|
|
5986
6204
|
}, function (_a) {
|
|
5987
6205
|
var theme = _a.theme;
|
|
5988
6206
|
return theme.component.radio.lineHeight;
|
|
5989
6207
|
});
|
|
5990
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_3$
|
|
6208
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_3$1l || (templateObject_3$1l = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"])), function (_a) {
|
|
5991
6209
|
var theme = _a.theme;
|
|
5992
6210
|
return theme.component.radio.textSize;
|
|
5993
6211
|
}, function (_a) {
|
|
@@ -5997,7 +6215,7 @@ var StyledLabelV2 = newStyled(Label$6)(templateObject_3$1m || (templateObject_3$
|
|
|
5997
6215
|
var disabled = _a.disabled;
|
|
5998
6216
|
return (disabled ? 'var(--colors-shades-250-color)' : 'inherit');
|
|
5999
6217
|
});
|
|
6000
|
-
var templateObject_1$
|
|
6218
|
+
var templateObject_1$2e, templateObject_2$1E, templateObject_3$1l;
|
|
6001
6219
|
|
|
6002
6220
|
var RadioInput = function (_a) {
|
|
6003
6221
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, _e = _a.useV2Style, useV2Style = _e === void 0 ? false : _e, labelStyle = _a.labelStyle, icon = _a.icon, _f = _a.horizontal, horizontal = _f === void 0 ? false : _f;
|
|
@@ -6007,191 +6225,7 @@ var RadioInput = function (_a) {
|
|
|
6007
6225
|
onChange({ value: value, label: label });
|
|
6008
6226
|
};
|
|
6009
6227
|
var InputContainer = horizontal ? HorizontalContainer : Container$1p;
|
|
6010
|
-
return (jsxs$1(Wrapper$
|
|
6011
|
-
};
|
|
6012
|
-
|
|
6013
|
-
var useOnClickOutside = function (ref, handler) {
|
|
6014
|
-
useEffect(function () {
|
|
6015
|
-
var listener = function (event) {
|
|
6016
|
-
// Do nothing if clicking ref's element or descendent elements
|
|
6017
|
-
var el = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
6018
|
-
if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
|
|
6019
|
-
return;
|
|
6020
|
-
}
|
|
6021
|
-
handler(event);
|
|
6022
|
-
};
|
|
6023
|
-
document.addEventListener('mousedown', listener);
|
|
6024
|
-
document.addEventListener('touchstart', listener);
|
|
6025
|
-
return function () {
|
|
6026
|
-
document.removeEventListener('mousedown', listener);
|
|
6027
|
-
document.removeEventListener('touchstart', listener);
|
|
6028
|
-
};
|
|
6029
|
-
}, [ref, handler]);
|
|
6030
|
-
};
|
|
6031
|
-
|
|
6032
|
-
var useDeviceType = function () {
|
|
6033
|
-
var mobileBreakpoint = 768;
|
|
6034
|
-
var tabletBreakpoint = 1024;
|
|
6035
|
-
var _a = useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
|
|
6036
|
-
var handleResize = function () {
|
|
6037
|
-
if (window.innerWidth < mobileBreakpoint) {
|
|
6038
|
-
setDeviceType('mobile');
|
|
6039
|
-
}
|
|
6040
|
-
else if (window.innerWidth < tabletBreakpoint) {
|
|
6041
|
-
setDeviceType('tablet');
|
|
6042
|
-
}
|
|
6043
|
-
else {
|
|
6044
|
-
setDeviceType('desktop');
|
|
6045
|
-
}
|
|
6046
|
-
};
|
|
6047
|
-
useLayoutEffect(function () {
|
|
6048
|
-
window.addEventListener('resize', handleResize);
|
|
6049
|
-
handleResize();
|
|
6050
|
-
return function () { return window.removeEventListener('resize', handleResize); };
|
|
6051
|
-
}, []);
|
|
6052
|
-
return deviceType;
|
|
6053
|
-
};
|
|
6054
|
-
|
|
6055
|
-
var getWrapperFlexDirection = function (position) {
|
|
6056
|
-
switch (position) {
|
|
6057
|
-
case ComponentPosition.Top:
|
|
6058
|
-
return 'column';
|
|
6059
|
-
case ComponentPosition.Bottom:
|
|
6060
|
-
return 'column-reverse';
|
|
6061
|
-
case ComponentPosition.Left:
|
|
6062
|
-
return 'row-reverse';
|
|
6063
|
-
case ComponentPosition.Right:
|
|
6064
|
-
return 'row';
|
|
6065
|
-
}
|
|
6066
|
-
};
|
|
6067
|
-
var getContainerFlexDirection = function (position) {
|
|
6068
|
-
switch (position) {
|
|
6069
|
-
case ComponentPosition.Top:
|
|
6070
|
-
return 'column';
|
|
6071
|
-
case ComponentPosition.Bottom:
|
|
6072
|
-
return 'column-reverse';
|
|
6073
|
-
case ComponentPosition.Left:
|
|
6074
|
-
return 'row';
|
|
6075
|
-
case ComponentPosition.Right:
|
|
6076
|
-
return 'row-reverse';
|
|
6077
|
-
}
|
|
6078
|
-
};
|
|
6079
|
-
var getArrowStyles = function (position, borderColor, backgroundColor) {
|
|
6080
|
-
switch (position) {
|
|
6081
|
-
case ComponentPosition.Top:
|
|
6082
|
-
return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n top: 100%;\n left: 50%;\n margin-left: -10px;\n }\n \n \n &::before {\n border-top: 10px solid ".concat(borderColor, ";\n margin-top: 0px;\n }\n &::after {\n border-top: 10px solid ").concat(backgroundColor, ";\n margin-top: -1px;\n z-index: 999;\n }");
|
|
6083
|
-
case ComponentPosition.Bottom:
|
|
6084
|
-
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 }");
|
|
6085
|
-
case ComponentPosition.Left:
|
|
6086
|
-
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 }");
|
|
6087
|
-
case ComponentPosition.Right:
|
|
6088
|
-
return " \n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 50%;\n left: -10px;\n margin-top: -10px;\n border: 10px solid transparent;\n border-right: 10px solid transparent;\n margin-left: -9px;\n }\n \n &::before {\n border-right: 10px solid ".concat(borderColor, " ;\n margin-left: -10px;\n \n }\n &::after {\n border-right: 10px solid ").concat(backgroundColor, ";\n z-index: 999;\n }");
|
|
6089
|
-
}
|
|
6090
|
-
};
|
|
6091
|
-
var getTooltipAlignItems = function (position, align) {
|
|
6092
|
-
switch (position) {
|
|
6093
|
-
case ComponentPosition.Top:
|
|
6094
|
-
return align;
|
|
6095
|
-
case ComponentPosition.Bottom:
|
|
6096
|
-
return align;
|
|
6097
|
-
case ComponentPosition.Left:
|
|
6098
|
-
return 'center';
|
|
6099
|
-
case ComponentPosition.Right:
|
|
6100
|
-
return 'center';
|
|
6101
|
-
}
|
|
6102
|
-
};
|
|
6103
|
-
|
|
6104
|
-
var Wrapper$7 = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __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) {
|
|
6105
|
-
var position = _a.position;
|
|
6106
|
-
return getWrapperFlexDirection(position);
|
|
6107
|
-
}, function (_a) {
|
|
6108
|
-
var disableHover = _a.disableHover;
|
|
6109
|
-
return (disableHover ? 'hidden' : 'visible');
|
|
6110
|
-
}, function (_a) {
|
|
6111
|
-
var disableHover = _a.disableHover;
|
|
6112
|
-
return (disableHover ? 0 : 1);
|
|
6113
|
-
});
|
|
6114
|
-
var TooltipContainer = newStyled.div(templateObject_2$1E || (templateObject_2$1E = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
6115
|
-
var position = _a.position;
|
|
6116
|
-
return getContainerFlexDirection(position);
|
|
6117
|
-
}, function (_a) {
|
|
6118
|
-
var position = _a.position, align = _a.align;
|
|
6119
|
-
return getTooltipAlignItems(position, align);
|
|
6120
|
-
}, function (_a) {
|
|
6121
|
-
var position = _a.position, childrenWidth = _a.childrenWidth;
|
|
6122
|
-
return getTooltipMargin(position, ComponentPosition.Right, "".concat(childrenWidth, "px"));
|
|
6123
|
-
}, function (_a) {
|
|
6124
|
-
var position = _a.position, childrenWidth = _a.childrenWidth;
|
|
6125
|
-
return getTooltipMargin(position, ComponentPosition.Left, "".concat(childrenWidth, "px"));
|
|
6126
|
-
}, function (_a) {
|
|
6127
|
-
var position = _a.position, tooltipHeight = _a.tooltipHeight;
|
|
6128
|
-
return getTooltipMargin(position, ComponentPosition.Top, "-".concat(tooltipHeight, "px"));
|
|
6129
|
-
}, function (_a) {
|
|
6130
|
-
var position = _a.position, tooltipHeight = _a.tooltipHeight;
|
|
6131
|
-
return getTooltipMargin(position, ComponentPosition.Bottom, "-".concat(tooltipHeight, "px"));
|
|
6132
|
-
}, function (_a) {
|
|
6133
|
-
var maxWidth = _a.maxWidth;
|
|
6134
|
-
return (maxWidth ? maxWidth : 'none');
|
|
6135
|
-
}, function (_a) {
|
|
6136
|
-
var position = _a.position, borderColor = _a.borderColor, backgroundColor = _a.backgroundColor, withArrow = _a.withArrow;
|
|
6137
|
-
return withArrow && getArrowStyles(position, borderColor, backgroundColor);
|
|
6138
|
-
});
|
|
6139
|
-
var getTooltipMargin = function (actual, expected, margin) {
|
|
6140
|
-
return actual === expected ? margin : '0';
|
|
6141
|
-
};
|
|
6142
|
-
var ContentWrapper$1 = newStyled.div(templateObject_3$1l || (templateObject_3$1l = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
6143
|
-
var borderColor = _a.borderColor;
|
|
6144
|
-
return borderColor;
|
|
6145
|
-
}, function (_a) {
|
|
6146
|
-
var backgroundColor = _a.backgroundColor;
|
|
6147
|
-
return backgroundColor;
|
|
6148
|
-
});
|
|
6149
|
-
var TooltipText = newStyled.div(templateObject_4$14 || (templateObject_4$14 = __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) {
|
|
6150
|
-
var theme = _a.theme;
|
|
6151
|
-
return theme.component.autoship.tooltip.text.alignment;
|
|
6152
|
-
}, function (_a) {
|
|
6153
|
-
var theme = _a.theme;
|
|
6154
|
-
return theme.component.autoship.tooltip.text.maxWidth;
|
|
6155
|
-
}, function (_a) {
|
|
6156
|
-
var color = _a.color;
|
|
6157
|
-
return color;
|
|
6158
|
-
});
|
|
6159
|
-
var TopSection = newStyled.div(templateObject_5$Q || (templateObject_5$Q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
6160
|
-
var Title$a = newStyled.h1(templateObject_6$I || (templateObject_6$I = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
6161
|
-
var color = _a.color;
|
|
6162
|
-
return color;
|
|
6163
|
-
});
|
|
6164
|
-
var IconContainer$6 = newStyled.div(templateObject_7$z || (templateObject_7$z = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
6165
|
-
var CloseToolTip = newStyled.button(templateObject_8$s || (templateObject_8$s = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
6166
|
-
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6167
|
-
return right;
|
|
6168
|
-
});
|
|
6169
|
-
var templateObject_1$2e, templateObject_2$1E, templateObject_3$1l, templateObject_4$14, templateObject_5$Q, templateObject_6$I, templateObject_7$z, templateObject_8$s;
|
|
6170
|
-
|
|
6171
|
-
var Tooltip = function (_a) {
|
|
6172
|
-
var _b;
|
|
6173
|
-
var children = _a.children, position = _a.position, content = _a.content, elementContent = _a.elementContent, 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;
|
|
6174
|
-
var theme = useTheme();
|
|
6175
|
-
var _f = useState(0), childrenWidth = _f[0], setChildrenWidth = _f[1];
|
|
6176
|
-
var childrenRef = createRef();
|
|
6177
|
-
var _g = useState(0), tooltipHeight = _g[0], setTooltipHeight = _g[1];
|
|
6178
|
-
var tooltipRef = createRef();
|
|
6179
|
-
var _h = useState(false), closeTooltip = _h[0], setCloseTooltip = _h[1];
|
|
6180
|
-
var isMobile = useWindowDimensions().isMobile;
|
|
6181
|
-
useLayoutEffect(function () {
|
|
6182
|
-
var ref = childrenRef.current;
|
|
6183
|
-
setChildrenWidth((ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
|
|
6184
|
-
}, [childrenRef]);
|
|
6185
|
-
useLayoutEffect(function () {
|
|
6186
|
-
var ref = tooltipRef.current;
|
|
6187
|
-
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
6188
|
-
}, [tooltipRef]);
|
|
6189
|
-
return (jsxs$1(Wrapper$7, __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, {
|
|
6190
|
-
testId: 'HeaderIcon',
|
|
6191
|
-
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
6192
|
-
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
6193
|
-
: theme.colors.pallete.secondary.color,
|
|
6194
|
-
}) }, void 0)), jsx$1(Title$a, __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));
|
|
6228
|
+
return (jsxs$1(Wrapper$7, __assign$1({ "aria-orientation": horizontal ? 'horizontal' : 'vertical', "$horizontal": horizontal }, { children: [jsxs$1(InputContainer, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxs$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }), void 0));
|
|
6195
6229
|
};
|
|
6196
6230
|
|
|
6197
6231
|
var colorsMapper = function (colors) { return ({
|